blog.tstylestudio.com
スクロールしたら画像が下からふぉあ〜んと出てくる効果を
参考にさせて頂いたサイトです DESIGNED & DEVELOPED by FREEHTML5.co Skeleton 効果を出すためのJavaScrptやCSS、レスポンシブデザインに対応するためにコードを使わせていただいたり、参考にさせていただいています。 ありがとうございます。 きっかけ ブラウザを上にスクロールしたら下から出てくる画像やコンテンツなどが、ふぉあ〜ん、ふぉあ〜んと出てくる効果が面白いな〜、試しに作ってみたいなーと漠然と思っていたのですが、ちょっと機会があり勉強のために作ってみました。 まだ解析途中で(僕にはとても難しい・・・)すが、なんとかふぉあ〜んの効果が出来るようになりました。 Demo Demoサイト ダウンロード copy_of_render コードなど(抜粋) Javascript メニューが一番上に来たら固定にする処理も入っています。(navFix()) [crayon-5a35cc1d65b1d239373562/] CSS animate.cssが必要です。 あと以下のコードが意外と大切だった。 [crayon-5a35cc1d65b2b023610066/] animate-boxでクラスを定義してある要素を初めは透明にしておく offset: '85%' 上から見て85%の位置に来たらJavascriptの処理が実行される こういう流れなのかな。