スクロールするとヘッダや打ち出しを美しい繊細なエフェクトで上部に隠すテクニック -Scrolling Banner
先日の「スクロールやクリックした際に、おおっ！と思わせるクリエイティブな7つのエフェクト」はかなりインパクトがありましたが、今回紹介するのは非常に繊細なスクロールエフェクトです。 使用するのはよく見かけるレイアウトで、上部からヘッダ、ナビゲーション、打ち出し、コンテンツと積み重ねたものです。 Scrolling Banner スクロールすると、コンテンツは通常通りスクロールされ、画像はパララックスで少し遅れて、カーテンをあげるような感じになっています。 他の要素も上部に上がりながら、フェードで消えていきます。 少しスクロールしたキャプチャ コンテンツの表示ということに関しては、普通のスクロール操作と同じですが、ほんのちょっとエフェクトを加えるだけで印象がだいぶ変わりますね。 小さいと分かりにくいと思いますが、アニメーションgifにしてみました。 Scrolling Banner コードの主
要素や背景をスクロールに合わせてアニメーションさせるスクリプト -Swift Parallax | コリス
デモページ：タイムライン Swift Parallaxの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト、当スタイルシートをhead内に外部ファイルとして記述します。 <head> ... <!-- Iclude jQuery (laters version) --> <script src="https://code.jquery.com/jquery-latest.min.js"></script> <!-- Include Swift Parallax files --> <link rel="stylesheet" href="css/swift.css"> <script src="js/swift.js"></script> </head> Step 2: JavaScript 外部ファイルを記述した下あたりに、スクリプトをセットします。 <script
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]パネルをスムーズに自動スクロールさせるニュースティッカー
