スクロールで画像や文字がふわっと現れるギミックを実装するための参考記事をメモ

素晴らしい記事があったので参考にして何か作りたいとなぁと思ったのでメモとして残しました。
とてもよくまとまっていて本当に素晴らしいです。
スクロールでふわっと現れるフェードの動きをjQueryで実装

上記記事のプログラムの良いところはjQueryのイベントで「scroll」と「load」のイベントをしっかりとカバーしているところにあると思います。
というのも、Chromeなどのブラウザはページの更新(リロード)をした際にスクロールの位置も保持しているので、「load」のイベントもカバーしないとページをリロードしたタイミングでコンテンツが表示されないんですよね。

上記参考記事はそこまでカバーできているので、非常に良い記事だと思いました。

こういう記事を見ていると「スクリプトファイルに機能をまとめて、タグにクラスを指定したら勝手に動くようにしたほうが汎用的に使えて素晴らしい!」と思うのですが、CSS操作系のプログラムはjQueryに記述するか毎回迷うんですよね…。

というのも、jQueryは便利なのですが、スクリプトの読み込みがワンテンポ遅いので、ユーザーにちらっと見えてから慌ててjQueryが動いて本来の表示になるような動きが稀に見えてしまうので、そこが気になります。

そういった部分を回避するためには、初期値となるスタイルはしっかりとCSSに書いて、ギミック関連はスクリプトファイルに記述する方がよいのかなぁなんて思うのですが、でもそうするとスクリプトファイルだけで完結しないから汎用的なファイルにはできないなぁ…、なんて考えがグルグル回ってしまいます。

最近はWebサイトの表示速度にも目が向けられていますので、余計なスクリプトを組むのもどうなんだろうと悩みながらの実装が多くなりました。

なんだか以前よりもWebサイト制作が難しくなっている感じがします…。

知識と技術を持っていないと生き残れない業界になっているのは良いことなのだと思いますが、そこに発生するお金の部分はなかなか改善されないと思うので、なんだか歯がゆい感じですね…。

広告

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です