パララックスとは、視差効果のことです。
Webデザインにおけるパララックスはスクロールなどの動作に応じて、複数のレイヤー（層）にある要素を異なるスピードで動かすことで、「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェクト」を演出する手法を指します。
最近は一時期よりは減りましたが、シングルページの縦長ページではまだまだ見かけるデザインです。
シングルページはページデザインが単調になりがちなので、パララックスやスクロールアニメーションを使って、アイキャッチを作りましょう。
pogg-sweetpotatopie.com
on-ze.com
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="parallax para-box" data-height="70vh" data-speed="0.8" data-mobile="false">
<div class="para_img background"></div>
</div>
<div class="parallax para-box" data-height="70vh" data-speed="0.8" data-mobile="false">
<div class="para_img background"></div>
</div>
<div class="parallax para-box" data-height="70vh" data-speed="0.8" data-mobile="false">
<div class="para_img background"></div>
</div>
<div class="parallax para-box" data-height="70vh" data-speed="0.8" data-mobile="false">
<div class="para_img background"></div>
</div>
<div class="parallax para-box" data-height="70vh" data-speed="0.8" data-mobile="false">
<div class="para_img background"></div>
</div>
</div>
<script src="js/parlx.js"></script>
<script>
$('.parallax').Parlx({
item: '.background',
});
</script>
</body>
</html>
スタイルシート
.parallax {
position:relative;
height:80vh;
overflow:hidden;
}
.background {
position:absolute;
background-repeat:no-repeat;
background-size:cover;
}
jquery
class Parlx {
constructor(elements, settings = {}) {
if (elements.length > 1) {
this.init(elements, settings);
return;
} else {
this.element = elements;
}
this.settings = this.settings(settings);
this.parallaxEffect();
this.addEventListeners();
}
init(elements, settings) {
for (var element = 0; element < elements.length; element++) {
new Parlx(elements[element], settings);
}
}
addEventListeners() {
window.addEventListener('scroll', () => this.onWindowScroll());
window.addEventListener('resize', () => this.onWindowResize());
}
onWindowScroll() {
this.parallaxEffect();
}
onWindowResize() {
this.parallaxEffect();
}
parallaxEffect() {
if ("ontouchstart" in document.documentElement && this.settings.mobile === false) {
this.settings.speed = 0;
}
if (this.settings.speed < 0 || this.settings.speed > 0.5) {
this.settings.speed = 0.3;
}
this.element.style.height = this.settings.height;
this.children = this.element.querySelector(this.settings.item);
let scrolled = window.pageYOffset - this.element.offsetTop;
Object.assign(this.children.style, {
'top': '0px',
'left': '50%',
'min-height': `${this.element.offsetHeight * (1 + this.settings.speed * 2)}px`,
'min-width': '100%',
'width': 'auto',
'-webkit-transform': `translate(-50%, ${this.settings.speed * scrolled}px)`,
'-ms-transform': `translate(-50%, ${this.settings.speed * scrolled}px)`,
'transform': `translate(-50%, ${this.settings.speed * scrolled}px)`
});
if (this.children.tagName.toLowerCase() !== 'img') {
this.children.style.backgroundPosition = 'center center';
}
}
settings(settings) {
let defaults = {
item: '.background',
speed: 0.3,
height: '400px',
mobile: true
}
let custom = {};
for (var setting in defaults) {
if (setting in settings) {
custom[setting] = settings[setting];
} else if (this.element.getAttribute(`data-${setting}`)) {
let attribute = this.element.getAttribute(`data-${setting}`);
try {
custom[setting] = JSON.parse(attribute);
} catch (e) {
custom[setting] = attribute;
}
} else {
custom[setting] = defaults[setting];
}
}
return custom;
}
}
if (window.jQuery) {
let $ = window.jQuery;
$.fn.Parlx = function (options) {
for (var element = 0; element < this.length; element++) {
new Parlx(this[element], options);
}
}
}
