パララックスとは、視差効果のことです。
Webデザインにおけるパララックスはスクロールなどの動作に応じて、複数のレイヤー(層)にある要素を異なるスピードで動かすことで、「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェクト」を演出する手法を指します。
最近は一時期よりは減りましたが、シングルページの縦長ページではまだまだ見かけるデザインです。
シングルページはページデザインが単調になりがちなので、パララックスやスクロールアニメーションを使って、アイキャッチを作りましょう。
<!doctype html> <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><!--/#para-box--> <div class="parallax para-box" data-height="70vh" data-speed="0.8" data-mobile="false"> <div class="para_img background"></div> </div><!--/#para-box--> <div class="parallax para-box" data-height="70vh" data-speed="0.8" data-mobile="false"> <div class="para_img background"></div> </div><!--/#para-box--> <div class="parallax para-box" data-height="70vh" data-speed="0.8" data-mobile="false"> <div class="para_img background"></div> </div><!--/#para-box--> <div class="parallax para-box" data-height="70vh" data-speed="0.8" data-mobile="false"> <div class="para_img background"></div> </div><!--/#para-box--> </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; }
/*! * parlx.js v1.0 * Copyright 2017-2018 Jakub Biesiada * MIT License */ 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; } } // JQUERY PLUGIN CALL IF JQUERY LOADED if (window.jQuery) { let $ = window.jQuery; $.fn.Parlx = function (options) { for (var element = 0; element < this.length; element++) { new Parlx(this[element], options); } } }