JavaScript

jarallax.jsを使ってページにパララックスを実装する方法

jarallax.jsを使ってページにパララックスを実装する方法をご紹介します。

jarallax.jsを使ってページにパララックスを実装するCSS記述

※パララックスエリア(.jarallax)のCSS記述です。必要に応じて変更して下さい。

<style>
*,
:after,
:before {
  box-sizing: border-box;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 20px;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.8em;
  padding: 15px 0;
}
.section {
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jarallax {
  height: 80vh;
}
</style>
<link href="jarallax.css" rel="stylesheet" />

jarallax.jsを使ってページにパララックスを実装するHTML記述

※パララックスするエリア(class=”jarallax”)を2か所(画像とYouTube)用意しました。

<div class="section"><h1>jarallax.jsを使ったパララックスページです。<br>下にスクロールしてみてください。</h1></div>

<div class="jarallax">
    <img class="jarallax-img" src="i1.jpg" alt="" />
</div>

<div class="jarallax" data-video-src="https://youtu.be/P7Od94ikeoI"></div>

<div class="section"></div>

jarallax.jsを使ってページにパララックスを実装するJavaScriptの記述

※jarallax.min.js、jarallax-video.min.jsファイルを読み込みます。jarallax(document.querySelectorAll(“パララックスエリア”))を記述します。

<script src="jarallax.min.js"></script>
<script src="jarallax-video.min.js"></script>

<script type="text/javascript">
    jarallax(document.querySelectorAll(".jarallax"));
</script>

jarallax.jsを使ったパララックスデモページ

vanilla-tilt.jsを使って要素にパララックス(視差効果)を実装したデモページ

ソース元:Jarallax – The parallax scrolling effect for JavaScript

Jarallax – The parallax scrolling effect for JavaScript

 

※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。