Blog

流行りのスクロール効果を自作してみました。

2012.10.10Cat:jQuery デザイナー

スクロールをすると様々なアニメーションがされるのが、多くのサイトで見受けられますが、

ちょっとしたものを自分でも作成してみました。

 

スクロールをすると、要素がふわっと表示されるものです。

説明ではわからないと思いますので、

デモをご覧ください。

DEMO

 

本当にちょっとしたものですが、ほんの少しだけアクセントになるんではないでしょうか。。。

 

以下方法です!

 

jQueryを使用していますので、

jqueryを読み込んで下さい。

 

 

HTML

 

 

そして、CSSは、

 

CSS

 

そして、

肝心のjqueryは、

 

javascript

 

bindをしないと、chromeで正確な高さを取得できません。

あとは、スクロールやリサイズした時も対応するようにしています。

要素のアニメーションは、ウィンドウの高さとスクロールしている距離の合計が、

要素の高さ以上になった時に行うようにしていましたが、それだとわかりずらいので、プラス100しました。

プラス100だとちょっとかっこわるい気がしますが、、、

要素の高さを取得して、その半分の値を超えたらにしようかと思いましたが、

ちょっと断念しました。

 

プラグインだと、

いちいち要素毎で設定しなかったりしないといけないので、

これだと、クラスをつけるだけでOKなので、楽になりました。

 

ブラウザチェックをおこなっていないので、しっかり動くかはわかりません。。。

ただ、firefoxとchromeでなら大丈夫かと思います。

 

もっとかっこよくて、汎用性があるものを作っていきます!

それでは、また!

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ