CSSとJavaScriptで画像にパララックス効果をつけてみた

こんにちは！宇宙一仕事が遅いエンジニアのたかしです (*´・ω・)ノ

スクロール時に深みを与えるパララックス効果をCSSとJavaScriptで作ってみたので共有します

コピペして使ってみてください (꜆꜄ ˙꒳˙)꜆꜄꜆ﾎﾟﾁﾎﾟﾁﾎﾟﾁﾎﾟﾁ

パララックス効果とは？

そもそもパララックス効果って何かっていうと

スクロールするときに要素の動くスピードに差をつけることです

パララックス効果をつけることで、ある要素を他の要素よりも早く動かしたりゆっくり動かしたりできます

今回のケースでは画像が他の要素よりもゆっくり動きます

こんなふうにパララックス効果を使うとスクロールするのが楽しくなっちゃいます！

そんなパララックス効果を使ったサンプルがこちら（ちなみに、上の画像にもパララックス効果がついてます）

コードの紹介

HTML・CSS・JavaScriptのファイルを作成して、それぞれのファイルに以下のコードを書くことでパララックス効果を演出することができます

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--cssのファイルを指定-->
<link rel="stylesheet" href="style.css">
<title>パララックス効果</title>
</head>
<body>
<div class="parallax-container">
    <img class="parallax" src="/static/images/TOUFU_B.jpg">
</div>
<div style="height: 100vh;"></div>
<!--JavaScriptのファイルを指定-->
<script src="script.js"></script>
</body>
</html>

CSS

.parallax-container {
overflow: hidden;
position: relative;
height: 70vh; /* 必要に応じて調整 */
}

.parallax {
max-width: 100%;
height: auto;
position: absolute;
top: 0;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
var parallaxElements = document.querySelectorAll('.parallax');
var parallaxPositions = [];

// 各要素の初期位置を計算して保存
parallaxElements.forEach(function(elem) {
    var rect = elem.getBoundingClientRect();
    var scrollTop = window.scrollY || document.documentElement.scrollTop;
    var initialPosition = rect.top + scrollTop;
    parallaxPositions.push(initialPosition);
});

document.addEventListener('scroll', function() {
    var scrolledHeight = window.scrollY;
    
    parallaxElements.forEach(function(elem, index) {
        var factor = 0.4; // パララックス効果の速度を調整
        var offset = (scrolledHeight - parallaxPositions[index]) * factor;
        elem.style.transform = 'translateY(' + offset + 'px)';
    });
});
});

CSSとJavaScriptで画像にパララックス効果をつけてみた

パララックス効果とは？

コードの紹介

HTML

CSS

JavaScript

結果