ホームページでスクロースするごとに画像が動くサイトの作成方法について…。

以前より気になっていたのですが、動的な見た目のサイトを目にすることが多くなりどうやって作成するのかが大変興味あります。

参考サイトが今は見つからなかったのですが、最近のサイトでは、スクロールしてある所に到達すると、画像が左右から現れて真ん中で合体したり、矢印が右から左に流れたり、ボックスのborderがくるっと回って描画されたり、テキストにアンダーラインが引かれたり…などなど、スクロールであるところに到達すると動きのある見せ方をされるサイトが多く見受けられるのですが、これらはどういった仕組み？でしょうか？

基本的にはjavascriptやJqueryを利用しているのは理解できるのですが、動きの発火点は何になるのでしょうか？スクロールの到達点をポイントにしているのでしょうか？
また、こういったものを簡単に実現するためのフレームワークというのでしょうか？ありましたら教えて頂けないでしょうか？

ちなみにこういった技法を何というのでしょうか？
わかりにくい質問ですみません、こういった方法でサイトの作成を試してみたいので、技法名など含め色々と詳細をアドバイス頂けますと大変助かります。
宜しくお願いいたします。

No.1 回答者： fujillin 回答日時： 2021/01/06 21:20

こんばんは

どのようなサイトのことをおっしゃっているのかはっきりとしませんが…

このようなサイトのことでしょうか？
https://saruwakakun.com/html-css/reference/paral …

もしそうであるなら、「パララックス」をキーに検索すれば情報はいろいろ見つかると思います。
具体的な仕組みについて書いてあるサイトの一例を以下に。
https://www.wan55.co.jp/news/column/2015/313/

的外れの場合は、スルーしてください。

この回答へのお礼

有難うございます。
パララックスではありませんでしたが、こちらも勉強になりました。
色々と調べてみたところ、スクロールアニメーションというキーワードで探すことができました。
https://animate.style/というこちらのライブラリが有名だということもわかりましたので、これらをキーワードに調べて行けそうです。
ご回答有難うございました。

お礼日時：2021/01/07 10:52