スクロールダウンの実装をしよう！
Share
こんなことを説明しています！
- スクロールダウンアニメーションの方法
- animationプロパティの使い方
- @keyframesを使ったアニメーションの作り方
解説動画
コードの解説
HTMLの記述
<div class="fv">
<div class="scroll-down">
<p class="scroll-text">scroll</p>
<div class="scroll-bar-wrap">
<div class="scroll-bar"></div>
</div>
</div>
</div>
CSSの記述
.fv {
width: 100vw;
height: 100vh;
position: relative;
&::after {
content: '';
position: absolute;
z-index: -1;
background: url(../img/img1.jpg) no-repeat center center / cover;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.4;
}
}
.scroll-down {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.scroll-text {
position: absolute;
bottom: 110px;
left: 50%;
transform: translateX(-50%);
}
.scroll-bar-wrap {
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100px;
overflow: hidden; //animation2の場合
}
.scroll-bar {
position: absolute;
top: 0;
left: 0;
width: 2px;
background: #000;
height: 30px; //animation2の場合
//height: 0; animation1の場合
animation-name: animation2; //変える
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
@keyframes animation1 {
//高さが伸びていく
0% {
height: 0;
}
100% {
height: 100px;
}
}
@keyframes animation2 {
//高さが同じで上から下へ移動する
0% {
top: -30px;
}
100% {
top: 100%;
}
}
//== Detail ===============================================
// animation-name
// keyframesで指定したアニメーションの名前
// animation-fill-mode
// backwards：待ち時間にアニメーション開始時のスタイルが適用
// forwards：再生後アニメーション終了時のスタイルが適用
// both: 上記両方適用
// animation-duration
// アニメーションの開始から終了までの時間
// animation-iteration-count
// アニメーションを繰り返す回数 (無限の場合は infinite)
// animation-delay
// アニメーションの開始時間の設定
// animation-direction
// infinite指定の場合の繰り返しの方向を指定
// reverse: 逆方向
// alternate: 順方向と逆方向が交互に再生
// alternate-reverse: 逆方向から再生し、alternateの振る舞い
// animation-timing-function
// linear: 一定速度 ease: 開始・終了時緩やか
// ease-in: 開始時緩やか ease-out: 終了時緩やか
// ease-in-out: easeよりもさらに緩やか
//=========================================================
解説で使用したスニペット
scss.json
"animation": {
"prefix": "animation",
"body": [
"animation-name: animation;",
"animation-fill-mode: backwards;",
"animation-duration: 2s;",
"animation-iteration-count: infinite;",
"animation-delay: 0.5s;",
"animation-direction: normal;",
"animation-timing-function: ease;",
"@keyframes animation{",
" 0% {",
" ",
" }",
" ",
" 100% {",
" ",
" }",
"}",
"",
"//== Detail ===============================================",
"// animation-name",
"// keyframesで指定したアニメーションの名前",
"// animation-fill-mode",
"// backwards：待ち時間にアニメーション開始時のスタイルが適用",
"// forwards：再生後アニメーション終了時のスタイルが適用",
"// both: 上記両方適用",
"// animation-duration",
"// アニメーションの開始から終了までの時間",
"// animation-iteration-count",
"// アニメーションを繰り返す回数 (無限の場合は infinite)",
"// animation-delay",
"// アニメーションの開始時間の設定",
"// animation-direction",
"// infinite指定の場合の繰り返しの方向を指定",
"// reverse: 逆方向",
"// alternate: 順方向と逆方向が交互に再生",
"// alternate-reverse: 逆方向から再生し、alternateの振る舞い",
"// animation-timing-function",
"// linear: 一定速度 ease: 開始・終了時緩やか",
"// ease-in: 開始時緩やか ease-out: 終了時緩やか",
"// ease-in-out: easeよりもさらに緩やか",
"//=========================================================",
"",
],
"description": ""
},
