【JAVASCRIPT】スクロール量に応じてulを左右に移動させる方法

タグ :

1 スクロールアニメーションサンプル
2 HTML部分
3 CSS部分
4 JavaScript部分

スクロールアニメーションサンプル

See the Pen
Untitled by ryotom (@ryotam-smoke)
on CodePen.

HTML部分



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="sample-container">
<div class="scale">
<ul class="scroll-left">
<li><img src="image1.jpg" alt="Image 1"></li>
<li><img src="image2.jpg" alt="Image 2"></li>
<li><img src="image3.jpg" alt="Image 3"></li>
<li><img src="image4.jpg" alt="Image 4"></li>
<li><img src="image5.jpg" alt="Image 5"></li>
<li><img src="image6.jpg" alt="Image 6"></li>
<li><img src="image1.jpg" alt="Image 1"></li>
<li><img src="image2.jpg" alt="Image 2"></li>
<li><img src="image3.jpg" alt="Image 3"></li>
<li><img src="image4.jpg" alt="Image 4"></li>
<li><img src="image5.jpg" alt="Image 5"></li>
<li><img src="image6.jpg" alt="Image 6"></li>
</ul>
<ul class="scroll-right">
<li><img src="image1.jpg" alt="Image 1"></li>
<li><img src="image2.jpg" alt="Image 2"></li>
<li><img src="image3.jpg" alt="Image 3"></li>
<li><img src="image4.jpg" alt="Image 4"></li>
<li><img src="image5.jpg" alt="Image 5"></li>
<li><img src="image6.jpg" alt="Image 6"></li>
<li><img src="image1.jpg" alt="Image 1"></li>
<li><img src="image2.jpg" alt="Image 2"></li>
<li><img src="image3.jpg" alt="Image 3"></li>
<li><img src="image4.jpg" alt="Image 4"></li>
<li><img src="image5.jpg" alt="Image 5"></li>
<li><img src="image6.jpg" alt="Image 6"></li>
</ul>
<ul class="scroll-left">
<li><img src="image1.jpg" alt="Image 1"></li>
<li><img src="image2.jpg" alt="Image 2"></li>
<li><img src="image3.jpg" alt="Image 3"></li>
<li><img src="image4.jpg" alt="Image 4"></li>
<li><img src="image5.jpg" alt="Image 5"></li>
<li><img src="image6.jpg" alt="Image 6"></li>
<li><img src="image1.jpg" alt="Image 1"></li>
<li><img src="image2.jpg" alt="Image 2"></li>
<li><img src="image3.jpg" alt="Image 3"></li>
<li><img src="image4.jpg" alt="Image 4"></li>
<li><img src="image5.jpg" alt="Image 5"></li>
<li><img src="image6.jpg" alt="Image 6"></li>
</ul>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

CSS部分



.sample-container {
display: flex;
flex-direction: column;
align-items: center;
height: 400px; /* 縦にスクロールするための高さを設定 */
overflow: hidden;
position: relative;
border-radius: 20px;
background-color: black;
}

.sample-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
pointer-events: none; /* マスクが他の要素の操作を妨げないように */
z-index: 1; /* マスクが他の要素の上に表示されるように */
}

.scale {
transform: translate(0,25px) scale(1.5);
}

.sample-container ul {
display: flex;
list-style: none;
padding: 0;
margin: 10px 0;
}

.sample-container li {
margin: 0 5px;
}

.sample-container img {
width: 100px;
height: 100px;
object-fit: cover;
}

JavaScript部分



document.addEventListener('DOMContentLoaded', function() {
const leftScrollElements = document.querySelectorAll('.scroll-left');
const rightScrollElements = document.querySelectorAll('.scroll-right');

function cloneListItems(ulElement) {
const items = ulElement.querySelectorAll('li');
items.forEach(item => {
const clone = item.cloneNode(true);
ulElement.appendChild(clone);
});
}

leftScrollElements.forEach(el => {
cloneListItems(el);
});

rightScrollElements.forEach(el => {
cloneListItems(el);
});

document.addEventListener('scroll', function() {
const scrollY = window.scrollY;

leftScrollElements.forEach(el => {
const width = el.scrollWidth / 2;
el.style.transform = `translateX(${(scrollY * -0.5) % width}px)`;
});

rightScrollElements.forEach(el => {
const width = el.scrollWidth / 2;
el.style.transform = `translateX(${(scrollY * 0.5) % width}px)`;
});
});
});

このスクリプトでは、各ulの中のli要素をクローンして追加し、ループしているように見せます。スクロール位置に応じて、要素をループさせるためにtranslateXの値を調整しています。
scrollWidth / 2を使用して、リストが半分スクロールしたら位置をリセットすることで、ループするように見せています。

前ページに戻る