IDEA * IDEAドットインストール代表のライフハックブログ
[JS]要素の一つひとつを異なるタイミングでスライドさせる、パララックス対応のコンテンツスライダー
jQueryとCSS3アニメーションを使った、パララックス対応のコンテンツスライダーを実装するチュートリアルを紹介します。 Parallax Content Slider with CSS3 and jQuery [ad#ad-2] デモ 実装 デモ 一枚のスライドには、h2要素、パラグラフ、リンク、画像が配置されており、それぞれが異なるタイミングでスライドします。 分かりにくいかもしれませんが、背景もアニメーションで動いています。 Kendo UI こちらも当然パララックス対応のコンテンツスライダーです。 こっちの方が背景がはっきりしてるので、その動作を楽しめると思います。 実装 実装は各ポイントとなる箇所を説明します。 HTML スライダーは複数のスライドを含んでおり、それぞれのスライドにh2要素、パラグラフ、リンク、画像を含んでいます。 <div id="da-slider" cla
Web Icon Fonts | chibatch.jp
Web Icon Fonts Webフォントで使えるアイコンセット。IE8以下では使えないです。iOS4.1以下も多分見られない。 _Download(35KB) @font-face{ font-family: 'WebIconFonts'; src: url('WebIconFonts.woff') format('woff'), url('WebIconFonts.ttf') format('truetype'); } .icon { font-family: WebIconFonts; } Arrows !Back! 1Back1 #Forward# 3Forward3 $Up$ 4Up4 %Down% 5Down5 &Done& 6Done6 'Close' 7Close7 (Plus( 8Plus8 )Minus) 9Minus9 Social Networks AAmazon
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
