WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

jQueryでのパララックス

パララックスとは、視差効果のことです。
Webデザインにおけるパララックスはスクロールなどの動作に応じて、複数のレイヤー(層)にある要素を異なるスピードで動かすことで、「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェクト」を演出する手法を指します。




最近は一時期よりは減りましたが、シングルページの縦長ページではまだまだ見かけるデザインです。
シングルページはページデザインが単調になりがちなので、パララックスやスクロールアニメーションを使って、アイキャッチを作りましょう。


pogg-sweetpotatopie.com




on-ze.com


<!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;
}

jquery

/*!
* 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);
    }
  }
}