スクロールするとふわっと現れる文字や画像 | UNORTHODOX WORKBOOK | Blog
書くことが何もないので、最近のWebサイトでよく目にする「あれ」について書いてみたいと思います。色々なやり方があるかと思いますが、難しいことはよく分からないので、簡単にできるjQueryとcss3を使ったもので実装してみました。 最近良く目にするあれ とは、スクロールしていくと突然何もなかったところからふわっと現れる文字や画像のこと。何て言うのか知らないので「あれ」と表現しました。すみません。。。 つまりこれのこと そしてこれもそう さらにこれもです コード HTML <div> <p id="animation">ここの文字が現れる</p> </div> テキスト部分を画像(img)にすれば、画像をふわっとさせることができますね。divやpの装飾は適宜行ってください。 JS $('#animation').css('visibility','hidden'); $(window).scr
[JS]実装が簡単！要素にclassを加えるだけでCSS3アニメーションを自在に使えるスクリプト -CSS3 Animate It
アニメーションの一覧 CSS3 Animate Itの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/animations.css" type="text/css"> </head> <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src='js/css3-animate-it.js'></script> </body> Step 2: HTML HTMLはまずは、通常通りに各エレメントを配置します。 <div> <h2>見出し</h2> </div> 親要素に「.animat
スクロールするとfixedで途中から固定する | Regista20
2013年04月26日 jQuery スクロールすると途中から固定したメニューを作ります。はじめからメニューが最上部にあるものだと最初から「position:fixed」でスクロールした際に、メニューを上部に固定するできます。しかし、メニューが最上部にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとjQueryを利用する必要がなります。 コードサンプル HTML <div id="header"> <h1>タイトル</h1> </div> <div id="container"> <div id="main">左カラム（メインコンテンツ）</div> <div id="sidebar"> <div id="nav">ここを固定する</div> </div> </div> CSS #main { float: left; margin-right: 20px;
jQuery Visualize Plugin: Accessible Charts & Graphs from Table Elements using HTML 5 Canvas | Filament Group, Inc., Boston, MA
jQuery Visualize Plugin: Accessible Charts & Graphs from Table Elements using HTML 5 Canvas Posted by Scott on 07/02/2009 Topics: accessibilitycanvasjavascriptjQueryprogressive enhancementui designusabilityvisual designweb standards Accessible data visualization in HTML has always been tricky to achieve, particularly because elements such as images allow only the most basic features for providing
Liquid Canvas – Steffen Rusitschka – ruzee.com
Coding, Consulting, DevOps Web, Cloud, Scalability Liquid Canvas is a JavaScript library which allows you to draw inside an HTML canvas element with an easy yet powerful description language. It can be used to add graphics to your web page without ever touching an image creation tool such as The Gimp, Inkscape or Photoshop. Check out the Demo and the basic example and then download version 0.3. Th
【ハウツー】わずか数行で"ものすごいテーブル"に! - jQueryプラグイン「Flexigrid」 (2) 既存テーブルにFlexigridを組み込む | エンタープライズ | マイコミジャーナル
動作サンプル - 既存テーブルにFlexigridを組み込む jQuery 1.2.6とFlexigridを用意し、実際にテーブルリストに組み込んで使ってみた。ここでのWebブラウザ実行環境は次のとおり。 Microsoft Windows XP SP2 / Microsoft Internet Explorer 7 FreeBSD 8-current / Mozilla Firefox 2 まずは既存のテーブルに対して組み込んでみる。ベースとなるHTMLソースコードとWebブラウザでの実行結果は次のとおり。 base_table.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Con
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
