新年あけましておめでとう巨大4コマ』で遊びで作ったパララックスページの作り方に関するお話です。こんな状況だったのでとにかく完全に時間との勝負だったんですが、日々パララックスに関する情報には目を通すようにしてたおかげ?もあって、リソース関係には困らなかったのでなんとかギリギリ間に合わせる事が出来ました。Effectナイキのパララックスデザインのページが前ありましたが(今はもう無いのかな?)、アレで一気にパララックス熱を持った人も増えたんじゃないかと思います。あのページをどうやって作ろうかって事であのパララックスエフェクトのデモを作った人がいたんです。Plugins大体チュートリアルで知ったんですが、使い方の説明がちょっと難しかったのでちょっとサンプル作らせて頂きました。指定した要素の背景画像がスクロールする横の位置、速さや高さなんかを調整出来るプラグインですね。scrolldeckスクロールすると徐々にロゴが見えてきたり、スクロールに応じてコンテンツが展開したりって仕組み皆どうしてるのか聞いて回っていたら、なんかScrolloramaというプラグインで作ってるっぽげな話しを幾つか聞きましたので、今回使わせて頂く事にしました!実際、読み込んでしまえばclass名によって動きや動作が変わってくるので、本家サイトの方のサンプルなどを見ながらどのクラスがどういう動きになるのかを見ていくのが一番早いかもしれませんね。Waypoints特定の位置までスクロールしたらアクションを起こすWaypointは、何度か仕事でも顔を出したjQueryプラグインの一つでしたので、今回のありがたく使わせて頂くことにしました。使い方は超カンタンなので、サンプルからちょっと見てみて頂ければと思います!waypointは使い方によってページ上での様々な動作が可能になります。本家サイトのサンプルでは無限スクロール、要素の固定など、普通のブログやサイトなんかでも色々使えそうなプラグインですよね。パララックスで使って良い物かちょっと迷ったのですが、まぁ目的の動きは出来てるし、別にいっか〜。ここまで来てぶつかった問題点IE9でWaypointが動かない?さて、IE8、7とかで動かないならまだしも、IE9で動かないみたいですねWaypoint。うーむ、しかしこれちょっと前にプロジェクトで使ってた人いたんだけどなぁ。思ってとりあえず速攻電話して聞いてみたら。[/sourcecode]の記述。なんか他の方法ねーのかよという話しになりそうなもんですが、Waypointは今回のページだと要の一つなので、とりあえずこれで対応!ちょっち重い...これ、ちょっと重いんですよね。『カナダの回線だから細いしねー』ってレベルじゃなかったので、全体的に画像少なくしたりしたんですが、途中で落ちてくる雲とかマンガの影響(というか書き方)だよなぁと思ったので、色々他の方法模索してみたんですが、ここでタイムオーバー。MUCH!以上、いかがでしたでしょうか?僕は基本的に開発にガッツリ入る人間じゃなく、横から覗いてアレやって、コレやってとお願いする立場なので精々このくらいが限界でしたが、リソース元と用途さえ知っていればJS周りの知識ガッツリ無くてもとりあえずは作れちゃいますね。世の中にあるこれらのリソース提供者の皆様に超感謝しつつ、今日の記事を書かせて頂きましたので、皆さんも是非なにかパララックスなコンテンツを作る時には参考にして頂ければと思います!ではでは、皆様良きパララックスライフを〜。