スクロールダウンで見せるBefore After変化！Webページを動的に演出しよう
スクロールダウンを促すための下向き矢印と、
JavaScriptで実装するbefore after効果を組み合わせたサンプルをいくつか紹介します。
これらのサンプルはブログで紹介する際に、コードスニペットやデモとして利用できます。
矢印の組み合わせ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Down Before After</title>
<style>
body {
font-family: Arial, sans-serif;
}
.scroll-down-arrow {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
color: #333;
cursor: pointer;
animation: bounce 1.5s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
.image-container {
position: relative;
width: 100%;
max-width: 600px;
margin: 50px auto;
}
.image {
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: opacity 0.5s;
}
.after {
opacity: 0;
}
.before {
opacity: 1;
}
</style>
</head>
<body>
<div class="image-container">
<img src="before.jpg" alt="Before Image" class="image before">
<img src="after.jpg" alt="After Image" class="image after">
</div>
<div class="scroll-down-arrow">▼</div>
<script>
const arrow = document.querySelector('.scroll-down-arrow');
const afterImage = document.querySelector('.after');
arrow.addEventListener('click', () => {
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
afterImage.style.opacity = 1;
});
window.addEventListener('scroll', () => {
if (window.scrollY > 200) {
afterImage.style.opacity = 1;
} else {
afterImage.style.opacity = 0;
}
});
</script>
</body>
</html>
フェードイン・アウトする矢印
このサンプルでは、矢印がフェードイン・アウトすることで、視覚的にスクロールを促します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Down Animation</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
.scroll-indicator {
text-align: center;
color: #333;
}
.scroll-text {
font-size: 24px;
margin-bottom: 10px;
}
.arrow {
font-size: 32px;
animation: fadeInOut 2s infinite;
}
@keyframes fadeInOut {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="scroll-indicator">
<div class="scroll-text">Scroll</div>
<div class="arrow">▼</div>
</div>
</body>
</html>
左右に揺れる矢印
こちらのサンプルでは、矢印が左右に揺れるアニメーションを通じてスクロールを促します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Down Animation</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
.scroll-indicator {
text-align: center;
color: #333;
}
.scroll-text {
font-size: 24px;
margin-bottom: 10px;
}
.arrow {
font-size: 32px;
animation: shake 1.5s infinite;
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
25% {
transform: translateX(-10px);
}
75% {
transform: translateX(10px);
}
}
</style>
</head>
<body>
<div class="scroll-indicator">
<div class="scroll-text">Scroll</div>
<div class="arrow">▼</div>
</div>
</body>
</html>
解説
フェードイン・アウトする矢印
@keyframes fadeInOut
矢印がフェードイン（不透明度が0から1へ）、フェードアウト（不透明度が1から0へ）するアニメーション。
arrow
矢印のアニメーションを適用
左右に揺れる矢印
@keyframes shake
矢印が左右に揺れるアニメーション。矢印が左に10px、右に10px動く。
arrow
矢印のアニメーションを適用。
縦に連続した矢印のアニメーション
このサンプルでは、複数の矢印が連続して縦に表示され、
下向きに順番にフェードイン・アウトするアニメーションを実現します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Down Animation</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
.scroll-indicator {
text-align: center;
color: #333;
}
.arrow {
font-size: 32px;
margin: 5px 0;
opacity: 0;
animation: fadeInOut 2s infinite;
}
.arrow:nth-child(2) {
animation-delay: 0.2s;
}
.arrow:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes fadeInOut {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="scroll-indicator">
<div class="arrow">▼</div>
<div class="arrow">▼</div>
<div class="arrow">▼</div>
</div>
</body>
</html>矢印が下から上へ移動するアニメーション
このサンプルでは、矢印が下から上へ移動することで、視覚的にスクロールを促します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Down Animation</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
.scroll-indicator {
text-align: center;
color: #333;
}
.scroll-text {
font-size: 24px;
margin-bottom: 10px;
}
.arrow {
font-size: 32px;
animation: moveUpDown 1.5s infinite;
}
@keyframes moveUpDown {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
</style>
</head>
<body>
<div class="scroll-indicator">
<div class="scroll-text">Scroll</div>
<div class="arrow">▼</div>
</div>
</body>
</html>
矢印が上下にスライドするアニメーション
このサンプルでは、矢印が上下にスライドするアニメーションを使って、ユーザーにスクロールを促します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Down Animation</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
.scroll-indicator {
text-align: center;
color: #333;
}
.scroll-text {
font-size: 24px;
margin-bottom: 10px;
}
.arrow {
font-size: 32px;
animation: slideUpDown 1s infinite;
}
@keyframes slideUpDown {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(10px);
}
}
</style>
</head>
<body>
<div class="scroll-indicator">
<div class="scroll-text">Scroll</div>
<div class="arrow">▼</div>
</div>
</body>
</html>
解説
フェードイン・アウトする縦長矢印
矢印が一つずつフェードイン・アウトし、下向きにスクロールを促すアニメーション。
下から上へ移動する矢印
矢印が下から上へ移動することで、スクロールの方向を示します。
上下にスライドする矢印
矢印が上下に動くことで、視覚的にスクロールを誘導します。
まとめ
これらのサンプルは、ウェブページ上でスクロールを誘導するための効果的な方法を示しています。
デザインやアニメーションのパラメータを調整することで、
ウェブサイトのスタイルやテーマに合わせたカスタマイズが可能です。
CSSだけで作る！滑らかにループするスライダーの実装方法
4月 16, 2025【CSS入門】iPadやタブレットの縦向き・横向きにだけスタイルを適用する方法
4月 13, 2025CSS変数で特定のクラスだけ透明度（alpha）を変更する方法
2月 23, 2025