Weitere ähnliche Inhalte
Ähnlich wie Html5fun@東京 Bootstrapにアニメーションを付けよう (20)
Mehr von Masayuki Abe (11)
Html5fun@東京 Bootstrapにアニメーションを付けよう
- 11. ● ACE01 / SmartRelease プロダクトマネージャー
● CPI エバンジェリスト 統括
● KDDIウェブ 公認 CPI スタッフブログ 編集長
● Drupal(g.d.o Japan)日本コミュニティー
●日本ディレクション協会 講演部
● HTML5 Fun 理事
OSSを広げる活動、Web制作に関する情報発信を行う
神戸生まれ、横浜育ち、7月31日生まれ
阿部 正幸(あべ まさゆき)
ディレクタープログラマー プロマネ Evangelist
- 27. #home {
background: url(img.jpg) no-repeat center center fixed;
display: table;
position: relative;
-webkit-background-size: cover; /*crome、Fafari */
-moz-background-size: cover; /* Firefox */
-o-background-size: cover; /* Opera */
background-size: cover;
}
パララックス
- 33. var waypoint = new Waypoint({
element: document.getElementById('wp1'),
handler: function() {
console.log( wp1ポイントに来ました ');
}
})
Waypoint
② <hoge id= wp1 >を監視し、wp1までスク
ロールしたら、function(){ }が実行される
- 34. Waypoints + Animate.css
var waypoint = new Waypoint({
element: document.getElementById('wp1'),
handler: function() {
this.element.className = 'animated shake ;
}
})
③ wp1までスクロールしたら、wp1のクラス名
を「animated shake」に変更し、
アニメーションを付与