こんにちは。 今回はパララックスサイトの基本的な作り方を紹介したいと思います。 去年くらいから流行始めたパララックスサイト。今年になってもその勢いは止まりません。 そんなパララックスサイトの基本的な作り方です。 パララックス(視差効果)とはパララックス(視差効果)とは画像やテキスト等の個々の要素を別々に動かして視差効果で立体的にみせるテクニックです。 ※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。 準備をしよう!htmlを用意します。 jQueryはjQueryのサイトから直接読み込みます。 [html] [/html] スクロールした値を取得してみよう!スクロールした値によって個々のボックスを移動させますので、スクロールした値を取得します。 html[html] スクロールの値を取得スクロールの値 | 0
フルスクリーンでコンテンツを表示するWebページが増えましたね! 私も制作に携わることがあり、「fullPage.js」というjQueryプラグインを利用しました:) 「fullPage.js」は、1つのコンテンツをフルスクリーン表示させて、スクロールすることで1ページ分が自動でスクロールし、次のコンテンツが表示されるページを簡単に作ることができます。 わかりにくいかもしれないので、デモをご確認ください。 このfullPage.jsを使い、スクロールしてコンテンツが表示されたらJavaScriptを実行させたい!と思い、色々と調べました。 コンテンツが表示されてからアニメーションなどが動作するとカッコイイですよね! (onLeaveというオプションを使えば可能であることがわかりました) せっかくなので、基本の使い方や他のオプションなど調べたことをまとめます。 fullPage.jsの使い方
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く