webサイトデザインAI入門科授業用ブログ

池袋フェリカテクニカルアカデミーの求職者支援訓練webサイトデザインAI入門科10月クラスの授業解説ブログです。

「parlx.js」を使ってパララックス効果を実装

パララックスとは視差の効果を用いて、サイトに動きをつける事です。多くの場合はスクロールする際に複数の要素に異なるスピードにスクロールするように設定する事で視差が生じ、結果としてレイヤー構造を意識出来る重層的なデザインになります。


pogg-sweetpotatopie.com


soles-gaufrette.com



今回使用するプラグインのソース

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






親要素となる「.parallax」に必ずposition:relative;とoverflow:hidden;を指定しておくこと、また視差効果を効かせる子要素にも最低限、上記3つのプロパティposition:absolute;、background-repeat:no-repeat;、background-size:cover;を指定しておくことです。

.parallax {
	position:relative;
	height:400px;
	overflow:hidden;
}
.background {
	position:absolute;
	background-repeat:no-repeat;
	background-size:cover;
}

オプション設定

用意されているオプションは3つ。「speed」「height」「mobile」を指定可能です。

speed … 初期値は「0.3」
height … 初期値は「400px」
mobile … 初期値は「true」

個別に設定する場合は
data-speed
data-height
data-mobile

を使用し、全て同じでいい場合はjsに

$('.parallax').Parlx({
  item: '.background',
  speed: 0.3,
  height: '400px',
  mobile: true
});


index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parlx.jsの実装</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>LOREM IPSUM<br>DOLOR SI</h1>
</header>

<div class="content">
<div class="parallax">
<div class="background"></div>
</div><!-- /.parallax -->
<div class="txt-box">
<h2>LOREM IPSUM<br>DOLOR SI</h2>
<p class="txt">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ</p>
<p class="btn"><a href="#">Button</a></p>
</div><!-- /.txt-box -->
</div><!-- /.content -->


<div class="content">
<div class="parallax">
<div class="background"></div>
</div><!-- /.parallax -->
<div class="txt-box">
<h2>LOREM IPSUM<br>DOLOR SI</h2>
<p class="txt">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ</p>
<p class="btn"><a href="#">Button</a></p>
</div><!-- /.txt-box -->
</div><!-- /.content -->

<div class="parallax col-1" data-height="80vh">
<div class="background">
<div class="inner">
<h2>LOREM IPSUM DOLOR SI</h2>
<p class="txt">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ</p>
<p class="btn"><a href="#">Button</a></p>
</div><!-- /.inner -->
</div><!-- /.background -->
</div><!-- /.parallax col-1 -->

<footer></footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/parlx.js"></script>
<script>
$('.parallax').Parlx({
  item: '.background',
  speed: 1,
  mobile: true
});
</script>
</body>
</html>


webgradients.com