5G時代はwebで何する？新しもの好きの備忘録的徒然日記
パララックスもすっかり定着した感のある今日この頃( ˘ω˘)…
webデザイナー同志の皆さま、こんにちは(^^)ゞ
本日はskrollr再び！skrollrを使ってペラいちのランディングページを作ってみようの巻です。
まずはこちらにDEMOを作ってみましたのでご覧ください。
（※firefoxブラウザではきちんと表示出来ないかもしれません。その際はお手数ですが他のブラウザでお試し下さいませm(_ _)m )
パララックス（視差）効果で立体感のあるページが簡単に作れるJavaScriptライブラリです。スマホにも対応してます！まずはダウンロードしてみよう。
“skrollrでパララックスのランディングページを作ってみよう〜追記あり〜” の続きを読む
更新していなかった間、な〜んにもしていなかった訳ではなく(^^;A 最近よく見るパララックスのシングルページサイトを作ってみました。
シングルページということで単調にならない様、ちょっとしたギミックを加えたかったので、前回の記事でやった簡単にパララックス(視差効果)を実装できるjQueryプラグイン、skrollrを使いました。
skrollrの使い方についてはこちらの記事をご参照下さい。
こちらが今回作成した↓↓↓
パララックスでポートフォリオサイト
です。
あるフォトグラファーのポートフォリオサイト、という設定です。(ご注意!PCでご覧下さい >< ) パララックスは、画面いっぱいに画像を配置して見せるサイトにはぴったりだと思います。 サイトを作るにあたり用意したもの
top画面は、以前りんごの勉強会にてcss3のアニメーションプロパティを使ってスクリーンセーバーを作った時と同じで要領で、画像を動かしています。作り方はこちらの記事を参考にしてみて下さい。
bxsliderなどのJqueryを使うのもよいかもです。
さらにスクロールしていくと、スクロール量に応じてそれぞれのセクションが現れては消えるようになっています。イメージは紙芝居ですかね。
各セクションにskrollrのdata属性を付けて動かしています。
お久しぶりでございます。
年初に今年は”アウトプット宣言”しておきながら、長らく更新STOPしてしまいました。
というのも、記事を書こうとするといつもこう、ヤツにPCを占拠されてしまう有様でどうにもこうにも…
というのはただのいい訳です。もう少し更新頻度上げてく様頑張らねば(^^;
さて、今日はパララックス(視差効果)が簡単に実装出来る、skrollrの使い方をやってみたいと思います。
デモを作ってみましたので、こちらをご覧下さい。
まずGitHubからskrollr.jsをダウンロードします。
html側にはskrollr.min.jsファイルとjqueryを読み込ませます。
下のコードをhtmlのどこかにペースト、以上です。簡単ですね！
<script src="js/skrollr.min.js"></script>
<script>
var s = skrollr.init();
</script>デモではほぼ全てのdivにdata属性をつけて動かしています。
ポイントは…