ココナラでの皆様のお仕事をはじめ、お得意先さまの案件も頂戴いたしておりますが、その合間にウェブ制作の練習をしております。
一からHTMLやCSSのコードを作り上げていくので、まずは数多くの練習をして慣れていくしかないかなと思っています。
というわけで、ネットでウェブ制作の様々なTIPSを見て実践しているのですが、「luxy.js」というスクリプトがあるのを発見しました。
ウェブに載せる写真など、特定の要素のスクロール速度や方向を、速くしたり斜めに移動させたりできるというもの。
使い方の掲載されているサイトを参考に、作ってみました。
…というページですが、実際にスクロールさせたものをキャプチャーしましたので、ご紹介いたします。
▲パソコンでのスクロール
▲スマホでのスクロール
（１）メイン画像の、人々が上方向に移動する速度よりも奥のバルーンを遅くスクロールするようにし、手前のバルーンは早めにスクロールさせる。
（２）そして、赤い服の女の子と紙吹雪のスクロール速度を変えることで、紙吹雪が浮き上がったように見える。
（３）犬の風船と子供たちの写真もスクロールを早めて、立体的に見える。
そんな効果を出してみました。
なかなか面白い効果が出たのでは…と自画自賛しております。
ウェブ制作も、突き詰めれば新たな発見ばかり。
一般のデザインものと違い、プログラム知識が必要ですが、バグってもあらゆる原因を探して修正する。バグが直ったときの達成感は半端ではないです。
※皆様、日頃は私へのご発注、大変ありがとうございます。これからも、様々なスキルを上げて努力いたします。よろしくお願い申し上げます。
