少しスクロールすると指定位置までぬるっと動くアニメーション

Question

スマホでファーストビューにメイン画像を width: 100%; height:100vh; で表示させて、少しスクロールすると指定位置までぬるっと動くアニメーションを実装したいです。

言葉だけでは伝わりにくいので、簡単なイメージを作成しました。

移動のアニメーションに関しては bulan のように、少しスクロールすると指定位置まで移動するイメージです。

ただ、bulan のように、スクロールして複数のコンテンツ（内容）を表示するわけではなく、添付したイメージのように最初に一面に表示した画像からその下にヘッダー・コンテツ・フッター部分に移動するだけです。

jQuery、CSSなどで実装できるかと思いますが、上記のようなアニメーションを解説している参考サイトをうまくググれません。

少しスクロールすれば指定位置まで移動するアニメーションの参考サイトを教えてくださいm(__)m

Answer 1

こういうこと？

【CSSでスクロールのスナップが可能に！scroll-snapプロパティの基礎知識と便利な使い方 | コリス】
https://coliss.com/articles/build-websites/operation/css/how-to-use-css-scroll-snap.html

少し動けば、というのであればスクロールイベントを拾って、特定のスクロール量だったら、次の場所までスクロールする、というコードを書けばよいです。

Comments

[退会済みユーザー]

おお！こんなCSSプロパティがあるのですね。
ありがとうございますm(__)m

[退会済みユーザー]

お陰様でスクロールスナップという用語もわかり、jQueryプラグインも探すことができました。
ありがとうございますm(__)m