新・パララックス効果。ios対策済み。
パララックス、動きがイマイチなのもあり、新しく作り直した。
・background-attachment: fixed 不使用
・プラグインのように曖昧なサイズ調整ではなく画面高さでコントロールできます。
下記よりダウンロードできます。
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Parallax Sample</title>
<link href="Parallax.css" rel="stylesheet">
</head>
<body>
<div class="viewpoint01">
<div class="bg01"></div>
</div>
<div class="contents"><span class="center"><a href="Parallax.zip">Parallax.zip Download</a></span></div>
<div class="viewpoint04">
<div class="bg04"></div>
</div>
<div class="contents h50"><span class="center"><a href="https://dal-bianco.co.jp/">https://dal-bianco.co.jp/</a></span></div>
<div class="viewpoint02">
<div class="bg02"></div>
</div>
<div class="contents"><span class="center"><a href="https://stock.adobe.com/jp/contributor/208335294/dalb">https://stock.adobe.com/jp/contributor/208335294/dalb</a></span></div>
<div class="viewpoint03">
<div class="bg03"></div>
</div>
<script src="Parallax.js"></script>
</body>
</html>css
@charset "UTF-8";
/* CSS Document */
body,html {
margin: 0;
padding: 0;
position: relative;
height: 100%
}
div {
padding: 0;
margin: 0 auto;
width: 100%;
height: 100vh;
background-size: cover;
background-attachment: fixed;
background-position: center top;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.bg01, .bg02, .bg03, .bg04, .bg05, .bg06, .bg07, .bg08, .bg09, .bg10 {
position: fixed;
height: 120vh;
z-index: -1;
bottom: 0;
opacity: 0;
}
.bg01{
background-image: url("img/01.jpg");
opacity: 1;
z-index: -4;/**HTMLに記載の順番で下げていく**/
}
.bg02 {
background-image: url("img/02.jpg");
z-index: -2;
}
.bg03 {
background-image: url("img/03.jpg");
z-index: -1;
}
.bg04 {
background-image: url("img/04.jpg");
z-index: -3;
}
.contents {
background-color: rgba(255,255,255,1);
height: 100vh;
text-align: center;
}
.contents .center {
display: inline-block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.h50 {
height: 50vh
}
a {
display: inline-block;
background-color: #000000 ;
color: #00F5FF ;
padding: 5px 20px;
text-decoration: none;
border-radius: 50px;
transition: 0.5s;
}
a:hover {
background-color: #00F5FF ;
color: #000000 ;
padding: 20px 40px;
}js
// JavaScript Document
/**
* https://dalbianco.co.jp/
*
* Copyright 2024, Hideyuki Kobayashi & ChatGPT
* This content is released under the MIT license
**/
window.addEventListener('load', function() {
setInitialBgPosition();
window.addEventListener('scroll', function() {
updateBackgroundPosition();
});
});
function setInitialBgPosition() {
document.querySelector('.bg01').style.transform = 'translateY(0vh)';
}
function updateBackgroundPosition() {
var scrollY = window.pageYOffset;
var windowHeight = window.innerHeight;
var maxScroll = document.body.scrollHeight - windowHeight;
var moveDistance = (scrollY / maxScroll) * -20; // 20vhの比率で計算
document.querySelectorAll('[class*="viewpoint"]').forEach(function(viewpoint) {
var index = viewpoint.className.match(/viewpoint(\d+)/)[1];
var bg = document.querySelector('.bg' + index);
var rect = viewpoint.getBoundingClientRect();
if (!bg.style.transition) {
bg.style.transition = 'opacity 1s, transform 1s'; // 透明度と位置の変更に1秒かける
}
if (rect.top <= windowHeight && rect.bottom >= 0) {
bg.style.opacity = '1';
} else {
bg.style.opacity = '0';
}
bg.style.transform = 'translateY(' + (-moveDistance) + 'vh)';
});
}
よろしければスキをm（_ _）m！
この記事が気に入ったらサポートをしてみませんか？