交差した要素につけるアニメーションを設定していきます。
- styles.cssの作成
- CSSアニメーションの設定
styles.cssの作成
前回までで交差情報の取得を行ってきました。
詳しくは『Intersection Observerで交差した要素の情報を取得する』を読んでみてください。
今回はメイン部分であるアニメーションをやっていきたいと思います。
具体的にはスクロールしている最中に画像が画面に現れた際に画像をふわっと表示させるようなアニメーションを作っていきます。
まずは今回変化前のスタイルと変化後のスタイルをCSSで書いていきます。
やり方はHTMLにstyle.cssのファイルを作ります。headの部分にlinkタブを使って書いていきましょう。
HTMLのheadタグの中に<link rel=”stylesheet” href=”css/styles.css”>と書いていけばいいでしょう。
書き終わったら”css/styles.css”の部分をマウスホバーしてあげると新しいフォルダを作る方法が表示されます。
そのままFollow Linkをクリックしてもいいですしショートカットキーでcommand + クリックでもstyles.cssフォルダを作ることができます。
続いて、Create Fileを押しましょう。
CSSアニメーションの設定
ファイルができたらCSSを書いていきましょう。
今回は変化前の状態と変化後の状態をCSSで書いていきJavaScriptで条件が変わったら変わるように作って行くので2つの項目をよういします。
変化前は透明な状態から徐々に現れるアニメションを作っていきます。
最初は透明なのでopacity: 0;下から表示させたいのでtransform: translateY(20px);それを0.3秒書けて作りたいので transition: opacity .3s, transform .3s;と書いていきます。
変化前はこんな感じです。
img {
opacity: 0;
transform: translateY(20px);
transition: opacity .3s, transform .3s;
}
次に変化後については画像を表示する際はappearクラスをつけて上げましょう
透明度は1にしたいのでopacity: 1;にして元の一に戻すていくので transform: translateY(0);を書いてあげましょう。
変化後はこんな感じですね。
img.appear {
opacity: 1;
transform: translateY(0);
}
この2つのクラスを書いておきましょう。
ただこのままではクラスを作っただけなので次回以降JavaScriptで指示をしてあげましょう。
以上
