参考サイトのようなアニメーションを実現する方法を知りたい
下記の参考サイトのようなアニメーション表現を実現する場合の方法について、知識のある方からアドバイスを頂戴したいです。
参考サイト1
https://www.nnn.ed.nico/pages/programming/
ページをスクロールしていくと、写真の部分が横からアニメーションを伴って表示されます。
その際、写真が現れる前に青のボックスがアニメーションしてから写真が現れています。
参考サイト2
https://payke.co.jp/
こちらのページも参考サイト1と同じように、スクロールしていくとアニメーションを伴って表示されるブロックがあります。
青いボックスが横方向にアニメーションしてから、その後ろから写真が現れます。
具体的な質問内容
上記の参考サイトのようなアニメーションを実現する方法として、jQueryでなら私自身同じようなものを作れると思います。
スクロールして画面内に入ったら発火するjQueryプラグインを使用し、画面内に入った段階でアニメーションを
させるのだと思います。その場合HTMLに<span>タグを使用して「青いボックス」の部分のブロックを作成し、CSSでアニメーションの開始と終了の際のwidthを指定して、jQueryでcssのclassの付け外しをする事で実現可能だと思っています。
しかし、spanタグを使用する事が、スマートではないように感じていますし、html内にアニメーションなどを目的としたタグはあまり入れたくないというのが正直なところで、他に方法が無いのかと色々と調べましたが、それらしい情報を見つけることができませんでした。
また、参考サイトのような比較的最近のサイトで、jQueryのアニメーションに頼っているのかどうか、
疑問に感じていて、最新の技術などが使われているのではないかと考えていますが、あくまで想像の範囲です。。。
知識のある方のご意見を頂けないでしょうか。
ソースを確認しましたが、スキル不足によりどのように実現しているのか分からず、質問させて頂きました。
私自身のスキルや立場など
自社の簡単なLPやホームページを制作しているWeb担当(デザイナー)です。
jQueryやJavaScriptの基本的な文法は理解しており、jQueryプラグインの簡単なカスタマイズなどは可能な程度です。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/22 04:00