質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

2861閲覧

GSAP スクロールマジック(ScrollMagic) とスクロールスナップ(scroll-snap)を併用したい

kii.32

総合スコア67

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/08/07 09:44

前提・実現したいこと

GSAPのスクロールマジック
https://greensock.com/gsap/
を用いてスクロールにしたがってアニメーションがされるサイトを作成しております。

その際に、アニメーションが表示される位置でピタッと止まるように
scroll-snapを利用したいのですが、うまくいかず解決方法を探しております。

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>homePage</title> 7 <style> 8 .section { 9 height: 100vh; 10 width: 100%; 11 position: relative; 12 overflow-y: scroll; 13 overflow-x: hidden; 14 } 15 16 .section_bg { 17 height: 599vh; 18 } 19 20 .box01, 21 .box02, 22 .box03 { 23 position: absolute; 24 left: 50%; 25 width: 100%; 26 height: 100%; 27 transform: translate(-50%, 0%); 28 display: flex; 29 align-items: center; 30 justify-content: center; 31 } 32 33 .box01 { 34 background-color: red; 35 top: 0; 36 } 37 38 .box02 { 39 background-color: blue; 40 top: 200vh; 41 } 42 43 .box03 { 44 background-color: green; 45 top: 400vh; 46 } 47 48 .box01 p, 49 .box02 p, 50 .box03 p { 51 font-size: 2em; 52 } 53</style> 54</head> 55 56<body> 57 <section class="section"> 58 <div class="box01" id="trig01"> 59 <p>シーン1</p> 60 </div> 61 <div class="box02" id="trig02"> 62 <p>シーン2</p> 63 </div> 64 <div class="box03" id="trig03"> 65 <p>シーン3</p> 66 </div> 67 </section> 68 <div class="section_bg"></div> 69 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> 70 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script> 71 <script src="./assets/js/ScrollMagic.min.js"></script> 72 <script src="./assets/js/animation.gsap.min.js"></script> 73 <script src="./assets/js/debug.addIndicators.min.js"></script> 74 <script> 75 var box1 = new TimelineMax(); 76 var box2 = new TimelineMax(); 77 var box3 = new TimelineMax(); 78 79 box1 80 .set(".box01 p", { 81 autoAlpha: 1 82 }) 83 .from(".box01 p", 2, { 84 autoAlpha: 0 85 }) 86 .to(".box01 p", 2, { 87 autoAlpha: 1 88 }); 89 90 var controller = new ScrollMagic.Controller(); 91 92 var box1 = new ScrollMagic.Scene({ 93 triggerElement: '#trig01', 94 triggerHook: 0, 95 duration: "200%" 96 }) 97 98 .setTween(box1) 99 .setPin('#trig01') 100 .addIndicators() 101 .addTo(controller); 102 103 104 box2 105 .set(".box02 p", { 106 autoAlpha: 1 107 }) 108 .from(".box02 p", 2, { 109 autoAlpha: 0 110 }) 111 .to(".box02 p", 2, { 112 autoAlpha: 1 113 }); 114 115 var controller = new ScrollMagic.Controller(); 116 117 var box2 = new ScrollMagic.Scene({ 118 triggerElement: '#trig02', 119 triggerHook: 0, 120 duration: "200%" 121 }) 122 123 .setTween(box2) 124 .setPin('#trig02') 125 .addIndicators() 126 .addTo(controller); 127 128 129 box3 130 .set(".box03 p", { 131 autoAlpha: 1 132 }) 133 .from(".box03 p", 2, { 134 autoAlpha: 0 135 }) 136 .to(".box03 p", 2, { 137 autoAlpha: 1 138 }); 139 140 var controller = new ScrollMagic.Controller(); 141 142 var box3 = new ScrollMagic.Scene({ 143 triggerElement: '#trig03', 144 triggerHook: 0, 145 duration: "200%" 146 }) 147 148 .setTween(box3) 149 .setPin('#trig03') 150 .addIndicators() 151 .addTo(controller); 152 </script> 153</body> 154 155</html> 156

試したこと

scroll-snapでスナップ(引っかかり)のあるスクロールがまったくカン・タン・だ!

上記サイトを参考に
下記コードを追加しましたが、うまくいきません。。。

css

1.section{ 2 scroll-snap-type: y mandatory; 3} 4 5.box01, 6.box02, 7.box03 { 8 scroll-snap-align: start; 9} 10

有識者の方がいらっしゃいましたら、ご教授いただけますと嬉しいです。
どうぞよろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問