エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください
Twitterで共有ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
はじめに オサレなサイトでよく見る、画像が無限ループするやつ、ありますよね。 それをちょっとパララ... はじめに オサレなサイトでよく見る、画像が無限ループするやつ、ありますよね。 それをちょっとパララックス(視差効果)を入れて実装してみました。 本来ならば、SwiperのparallaxなりGSAPなりを使った方が早いのかも知れませんが やりたいことを紙に書いていくうちに、「あれ、これJSいらなくない?」となったので 気合いで実装しました。 正直、執筆開始時点ではなぜ動いているのかわからないこともありましたが 図式化して解説することで、解決できましたので 思考過程を記載しようと思います。 実現できた挙動 スライド枚数 スライドサイズ(均一px) スライド間の余白(均一px) ループ時間(duration) スライドサイズに対する画像のサイズ 上記の値をsass変数で管理しています。 それらを任意の値に設定すれば、パララックスな画像ループを生成してくれるように実装できました。 コード全体像と