参考にさせて頂いたサイトです

効果を出すためのJavaScrptやCSS、レスポンシブデザインに対応するためにコードを使わせていただいたり、参考にさせていただいています。
ありがとうございます。

きっかけ

ブラウザを上にスクロールしたら下から出てくる画像やコンテンツなどが、ふぉあ〜ん、ふぉあ〜んと出てくる効果が面白いな〜、試しに作ってみたいなーと漠然と思っていたのですが、ちょっと機会があり勉強のために作ってみました。

まだ解析途中で(僕にはとても難しい・・・)すが、なんとかふぉあ〜んの効果が出来るようになりました。

Demo

Demoサイト

ダウンロード

copy_of_render

コードなど(抜粋)

Javascript

メニューが一番上に来たら固定にする処理も入っています。(navFix())

CSS

animate.cssが必要です。

あと以下のコードが意外と大切だった。

  • animate-boxでクラスを定義してある要素を初めは透明にしておく
  • offset: ‘85%’ 上から見て85%の位置に来たらJavascriptの処理が実行される

こういう流れなのかな。

こういうブログもありました。

人気のあるブログ: