jQuery

スクロール関連のプラグイン

jQuery

Animate On Scroll Library

michalsnik.github.io

スクロールすると、コンテンツが色々なエフェクトで表示される。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Animate On Scroll Library プラグイン</title>
<style>
html,body {
  margin:0;
  padding:0;
}
body {
  background:url(img/main.jpg) no-repeat center center/cover;
  width:100%;
  height:100vh;
  background-attachment:fixed;/*背景画像がスクロールしても固定*/
}
header {
  width:100%;
  height:80vh;
  text-align:center;
  font-size:100px;
  margin-bottom:300px;
}
.container {
  width:80%;
  margin: 0 auto;
  background:rgba(255,255,255,0.5);
  
  overflow:hidden;
}
.aos_box {
  width:60%;
  height:300px;
  background:#FFF;
  margin:10px;
  float:left;
  margin-bottom:100px;
}
.aos_box:nth-child(even){
  float:right;
}
.top_btn {
  width:50px;
  height:50px;
  background:#333;
  border-radius:50%;
  white-space:nowrap;
  text-indent:100%;
  overflow:hidden;
  position:fixed;
  bottom:40px;
  right:40px;
  z-index:999;
  border:1px solid #FFF;
}
.top_btn span {
  display:block;
  width:20px;
  height:20px;
  border-top:2px solid #FFF;
  border-right:2px solid #FFF;
  transform:rotate(-45deg);
  position:absolute;
  top:10px;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
}

</style>
<link rel="stylesheet" href="css/aos.css">
<script src="js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
	$('#to_top').on('click',function(){
		$('html,body').animate({ scrollTop: 0 }, 'swing');
		return false;
	});

	$('#to_top').hide();//まず隠す
	 $(window).scroll(function(){//スクロールイベントの設定
	 
	  if ($(this).scrollTop() > 200) {
            $('#to_top').fadeIn();
        } else {
            $('#to_top').fadeOut();
        };
	 });
	
});
</script>
</head>

<body >
<div class="container">
<header>Animate On<br>Scroll Library</header>

<a href="#">
<div class="aos_box" data-aos="fade-up">
</div>
</a>

<div class="aos_box" data-aos="fade-up"></div>
<div class="aos_box" data-aos="fade-up"></div>
<div class="aos_box" data-aos="fade-up"></div>
<div class="aos_box" data-aos="fade-up"></div>
<div class="aos_box" data-aos="fade-up"></div>
<div class="aos_box" data-aos="flip-up">
<p>テキストテキストテキスト</p>
</div>
<div class="aos_box" data-aos="flip-up">
<p>テキストテキストテキスト</p>
</div>
<div class="aos_box" data-aos="flip-up">
<p>テキストテキストテキスト</p>
</div>
<div class="aos_box" data-aos="flip-up">
<p>テキストテキストテキスト</p>
</div>
<div class="aos_box" data-aos="flip-up">
<p>テキストテキストテキスト</p>
</div>
<div class="aos_box" data-aos="flip-up">
<p>テキストテキストテキスト</p>
</div>
</div>
<a href="#top" id="to_top"><p class="top_btn">トップに戻る<span></span></p></a>


<script src="js/aos.js"></script>
<script>
  AOS.init({
        easing: 'ease-in-out-sine'
      });
</script>
</body>
</html>

ScrollTrigger

ScrollTrigger – Scroll based animations with ease

<div class="inner"  data-scroll="toggle(.fromBottomIn, .fromBottomOut)">

Scrollanim

scrollanim.kissui.io

fullPage.js

alvarotrigo.com

パララックス系

www.naotaro.com

parallax.js

matthew.wagerfield.com

paroller.js

tgomilar.github.io

www.nxworld.net

背景画像をスライド(フェード)させるjQuery 「VEGAS 2 BACKGROUND SLIDESHOW」 jQuery

jQuery

f:id:yachin29:20170412034616p:plain

img要素をスライドさせるプラグインは沢山ありますが、今回は背景画像をスライドさせる「VEGAS 2 BACKGROUND SLIDESHOW」を使用します。

未経験でもWEB業界に挑戦したい!

http://vegas.jaysalvat.com/
<script>
$(function(){
$('header').vegas({
  transition: 'fade', 
  slides: [
    { src:'img/01.png' },
    { src:'img/02.png' },
    { src:'img/03.jpg' }
  ]
});
});
</script>

jQueryでのtouchイベント

jQuery

スマートフォンでももちろんjQueryの click イベントは基本的に有効です。
しかし、スマートフォンタブレットで click イベントを動かそうとすると、1テンポ遅れたもっさりとした動きになります。

そこで出てくるのが「touch」イベントです。

PCでは判りませんが、スマホで実際に触ってみると違いが明らかに解ります。
clickイベントの記述を「.on(‘click’)」の形で記述していれば簡単に「touch」イベントを追加出来るので、レスポンシブサイトであれば「touch」イベントを積極的に使って行きましょう。
.click()の記述では汎用性が低く、使い勝手が悪いので.on(‘click’)で記述する癖をつけましょう。

デモページ ※スマホで見ると違いが明らかに解ります。

http://yachin29.webcrow.jp/hum.html

click イベントのみの場合

$(function() {
  $(".btn").on('click', function() {
     $("#menu").slideToggle(200);
    return false;
  });
});

タッチイベントの種類

touchstart : タッチしたときに発生する
touchmove : タッチしたまま動かしたときに発生する
touchend : タッチ状態から離れたときに発生する
touchcancel : タッチ中に電話がかかってきた場合などに発生する(通常は使わない)

clickイベントをtouchendイベントに変更

$(function() {
  $(".btn").on('touchend',function() {
     $("#menu").slideToggle(200);
    return false;
  });
});

PCで表示させる必要の無いもの(ハンバーガーメニュ)は「touchendイベント」のみを設定させましょう。
※「touchendイベント」のみの場合は、スマホ実機、もしくは検証モードでしか動きを確認出来ないので注意して下さい。

$(function() {
  $(".btn").on('touchend',function() {
     $("#menu").slideToggle(200);
    return false;
  });
});


作成

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>clickイベントとtouchイベントの違い</title>
<meta name="viewport" content="width=device-width">
<style>
.container {
width:200px;
margin:50px auto 0;
}
.box {
width:200px;
margin-bottom:20px;
}
p {
margin:0;
padding:0;
width:100px;
height:100px;
background:#009999;
}
#nav1,#nav2 {
width:200px;
height:400px;
background:#FF3366;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(function(){
//PCの時
$('#btn1').on('click',function(){
$('#nav1:not(:animated)').slideToggle();
});
//SPの時
$('#btn2').on('touchend',function(){
$('#nav2:not(:animated)').slideToggle();
});

});
</script>
</head>

<body>
<div class="container">
<div class="box">
<p id="btn1"></p>
<div id="nav1"></div>
</div>

<div class="box">
<p id="btn2"></p>
<div id="nav2"></div>
</div>
</div>
</body>
</html>

スマホで見た時にjQueryを無効・有効にする(ユーザーエージェントで判別する方法)

jQuery

前回の授業では

if($(window).innerWidth() <= 767){
  
  };

のようにwindowの横幅を基準に条件分岐させるパターンをやりました。

今回のやり方はユーザーエージェントでスマホかPCか判別してやる方法です。

ユーザーエージェント

ユーザーエージェント(UserAgent)とはウェブサイトに訪問する際「Google Chromeからアクセスしています」「iPhoneからアクセスしています」などのどんな環境でアクセスしているのかの利用者の情報のことを言います。
ウェブサイトにアクセスする際にはこのユーザーエージェントを必ず送ることになっています。


今回のパターンはPC・タブレットであればjQueryを有効に。スマホiPhoneAndroid)であればjQueryを無効にします。
「!」エクスクラメーションマーク (exclamation mark)とは、Javascriptでは否定の意味で使われます。

if(!navigator.userAgent.match(/(iPhone|Android)/)){
$(function(){
//ここにjQueryの記述
});
}


逆にPC・タブレットであればjQueryを無効に。スマホiPhoneAndroid)であればjQueryを有効の場合

if(navigator.userAgent.match(/(iPhone|Android)/)){
$(function(){
//ここにjQueryの記述
});
}

また、PCであればjQueryを無効に。スマホiPhoneAndroid)とタブレットiPad)であればjQueryを有効の場合

if(navigator.userAgent.match(/(iPhone|iPad|Android)/)){
$(function(){
//ここにjQueryの記述
});
}


このように「|」で区切って自身でユーザーエージェントを追加する事も出来ます。

jqueryでのresize設定

jQueryレスポンシブデザイン

レスポンシブサイトでは、読み込み時だけで無く、ブラウザーをリサイズした時にもイベントが反応するようにしなければいけない場合があります。
例えばPC時では通常のナビゲーションボタンでスマホ時にはハンバーガーメニューの時などです。

PC時ではナビゲーションボタンはもちろん表示されている状態ですが、スマホハンバーガーメニューではナビゲーションボタンは最初、非表示に設定されています。
スマホ時のナビゲーションボタンを「slideToggle」などで表示・非表示をコントロールしている場合、1度出して、閉まったナビゲーションボタンには「display:none」がかかった状態になって閉まっています。
この状態で、ブラウザーをPCサイズにリサイズすると、ナビゲーションボタンに「display:none」がかかったままなので、ナビゲーションボタンが非表示の状態になっています。
なので、jQueryでリサイズ時にイベントを指定する必要があります。

resizeイベントの設定

ブラウザのウインドウをリサイズした時に引数のfunctionを実行します。また引数に何も設定しない場合は、要素に設定されたリサイズ時の処理を実行します。セレクタにはwindowsを指定しなければなりません。

読み込み時とリサイズ時を同時に処理する場合

$(window).on('load resize', function(){
// 処理を記載
});


今回の場合

$(window).on('load resize', function(){
  if($(window).innerWidth() < 768 ){
  //スマホの時の状態
    $('#g_nav').hide();//SPの時はnavを非表示にしておく
  }else{
  //タブレット・PCの時の状態
    $('#g_nav').show();//SP以外の時はnavを表示しておく
    $('#btn').removeClass('click');
  };
 	}); 

ただし、iPhoneandroidではresizeイベントの定義が若干違く、iPhoneでは画面を縦スクロールした際にもresizeイベントが発生してしまい、おかしな動きになってしまいます。
その場合は横幅にのみに対応したresizeイベントの設定が必要になります。

jQueryを記述する上で気をつけるポイント

jQuery

jQueryはライブラリーという性質上、どうしても動作が重くなってしまいます。PCではあまり気にならなくても、パフォーマンスの低いスマートフォンでは読み込み速度が遅くなる、という事が良くあります。
jQueryを適切に記述する事である程度の改善は出来るので、しっかりと覚えましょう。


セレクターの指定はID

やむを得ずクラス名で指定しなければいけない場合以外は必ず「ID名」を指定しましょう。

同じIDでの指定でも
OK

$("#target").css({'color':'red'});

NG

$("div#target").css({'color':'red'});

同じセレクタは変数化する

OK

var target = $('.target p');
target.css({'background-color':'red'});
target.show();


NG

$('.target p').css({'background-color':'red'});
$('.target p').show();

連続した処理はメソッドチェーンを使う

$('#target p').css({'background-color':'red'}).show();

ファイルデータの大きいjQuery本体をCDNにする事で実際には色々なメリットがあります。

メリット

  • 高速化
  • 他サイトでのキャッシュが期待できる(※)
  • 自サーバーにJQueryを置く必要がない


などですが、
一方、万が一CDNがダウンしてしまった場合などには使えなくなってしまいます。このようなトラブルが起こったときに代替策として、フォールバックという方法があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- CDNが使えない場合は自サーバーに置いたjQueryファイルを読み込む -->
<script>
window.jQuery || document.write('<script src="js/jquery-3.2.1.min.js"><\/script>');
</script>

ページネーション の導入

jQuery

ページネーション(pagination)とは、日本語でページ割りという意味で、Web制作においては、検索結果一覧など、内容の多いページを複数のWebページに分割し、各ページへのリンクを並べてアクセスしやすくするために設置します。

BootStrap CDN ver3.3.6
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

ソースコード

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページネーションの実装</title>
<style>
html,body,h1,p,ul,li {
margin:0;
padding:0;
}
ul {
list-style:none;
}
img {
vertical-align:bottom;
}
.container {
width:500px!important;
margin:100px auto 0;
}
.list-group {

}
.list-group-item {
overflow:hidden;
margin-bottom:40px;
}
.list-group-item img {
float:left;
margin-right:40px;
}
.list-group-item p {
line-height:2;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/paginathing.js"></script>
<script>
jQuery(document).ready(function($){
		$('.list-group').paginathing({
	    		perPage: 4,
	    		containerClass: 'panel-footer'
		})
	});
</script>
</head>

<body>
<div class="container">

<ul class="list-group">
<li class="list-group-item">
<p><img src="https://placehold.jp/3d4070/ffffff/200x200.png" alt="">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい</p>
</li>
<li class="list-group-item">
<p><img src="https://placehold.jp/3d4070/ffffff/200x200.png" alt="">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい</p>
</li>
<li class="list-group-item">
<p><img src="https://placehold.jp/3d4070/ffffff/200x200.png" alt="">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい</p>
</li>
<li class="list-group-item">
<p><img src="https://placehold.jp/3d4070/ffffff/200x200.png" alt="">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい</p>
</li>
<li class="list-group-item">
<p><img src="https://placehold.jp/3d4070/ffffff/200x200.png" alt="">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい</p>
</li>
<li class="list-group-item">
<p><img src="https://placehold.jp/3d4070/ffffff/200x200.png" alt="">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい</p>
</li>
<li class="list-group-item">
<p><img src="https://placehold.jp/3d4070/ffffff/200x200.png" alt="">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい</p>
</li>
<li class="list-group-item">
<p><img src="https://placehold.jp/3d4070/ffffff/200x200.png" alt="">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい</p>
</li>
<li class="list-group-item">
<p><img src="https://placehold.jp/3d4070/ffffff/200x200.png" alt="">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい</p>
</li>
<li class="list-group-item">
<p><img src="https://placehold.jp/3d4070/ffffff/200x200.png" alt="">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい</p>
</li>
</ul>

</div>
</body>
</html>

フィルタリング機能とモーダルウィンドウを使ったギャラリー

jQuery

複数のjQueryプラグインを使って、フィルタリング機能とモーダルウィンドウを使ったギャラリーを作成しましょう。
複数のプラグインを使うことで、管理すべきファイルの数が多くなるので、気を付けましょう。

参考サイト
chiyo-katsumasa.com

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>mix it upの実装</title>
<style>
img {
vertical-align:bottom;
}
header {
display:flex;
justify-content:center;
}
button {
display:block;
padding:10px;
width:80px;
margin:10px;
cursor:pointer;
}
.container {
width:960px;
margin:40px auto;
overflow:hidden;
}
.mix {
margin:10px;
float:left;
}
</style>
<link rel="stylesheet" href="css/jquery.fancybox.css">
</head>

<body>
<header>
<button type="button" data-filter="all">All</button>
<button type="button" data-filter=".red">赤色</button>
<button type="button" data-filter=".green">緑色</button>
<button type="button" data-filter=".blue">青色</button>
<button type="button" data-filter=".even">偶数</button>
<button type="button" data-filter=".youtube">動画</button>
<button type="button" data-sort="order:asc">番号順</button>
<button type="button" data-sort="order:descending">逆番号順</button>
<button type="button" data-sort="random">ランダム</button>
</header>
<div class="container">
<div class="mix red" data-order="1">
<a data-fancybox="gallery" href="img/1-2.jpg">
<img src="img/1.jpg" alt="">
</a>
</div>
<div class="mix red even" data-order="2">
<a data-fancybox="gallery" href="img/2-2.jpg">
<img src="img/2.jpg" alt="">
</a>
</div>
<div class="mix red" data-order="3">
<a data-fancybox="gallery" href="img/3-2.jpg">
<img src="img/3.jpg" alt="">
</a>
</div>
<div class="mix green even" data-order="4">
<a data-fancybox="gallery" href="img/4-2.jpg">
<img src="img/4.jpg" alt="">
</a>
</div>
<div class="mix green" data-order="5">
<a data-fancybox="gallery" href="img/5-2.jpg">
<img src="img/5.jpg" alt="">
</a>
</div>
<div class="mix green even" data-order="6">
<a data-fancybox="gallery" href="img/6-2.jpg">
<img src="img/6.jpg" alt="">
</a>
</div>
<div class="mix blue" data-order="7">
<a data-fancybox="gallery" href="img/7-2.jpg">
<img src="img/7.jpg" alt="">
</a>
</div>
<div class="mix blue even" data-order="8">
<a data-fancybox="gallery" href="img/8-2.jpg">
<img src="img/8.jpg" alt="">
</a>
</div>
<div class="mix blue" data-order="9">
<a data-fancybox="gallery" href="img/9-2.jpg">
<img src="img/9.jpg" alt="">
</a>
</div>
<div class="mix even youtube" data-order="10">
<a data-fancybox="gallery" href="https://www.youtube.com/watch?v=tKsB5ID134o">
<img src="img/10.jpg" alt="">
</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/jquery.fancybox.js"></script>
<script src="js/mixitup.js"></script>
<script>
var mixer = mixitup('.container');
</script>
</body>
</html>

スマートフォンの時だけを有効にする

CSS応用css3

スマートフォンタブレットでウェブサイトを見ている時、ボタンにタップすると通話発信ができるようにするためには電話番号用のtelリンクを設定する必要がありますが、一部のスマートフォンでは、telリンクを設定していない、ただの文字列もリンク扱いになってしまいます。
なので、まずmetaタグで

<meta name="format-detection" content="telephone=no">

と記述し、

実際の電話番号へのリンク部分に

<a href=”tel:0312345678”>お電話はこちら</a>

というリンク設定をします。

ただこのリンクはスマートフォンの時のみに有効にしたいため、PC時などは無効にする必要があります。以前はjQueryを使って行なっていましたが、最近はcssの「pointer-events」を使って、cssのみで行う事が出来ます。

pointer-events

pointer-eventsはマウスイベント(hover , click など)の発生を制御します。
HTMLの要素に適用できる設定値は、auto , none のみです。それ以外はsvgの要素に適用できます。

今回はこの「pointer-events」を使ってPCの時はnoneに、spの時はautoに設定します。

/*pcの時*/
a[href^="tel:"] {
    pointer-events:none;
}
@media screen and (max-width:767px){}
/*spの時*/
a[href^="tel:"] {
    pointer-events:auto;
}
}

「href^=””」ビット排他的論理和演算子

これで、指定した”値”が属性の値と前方一致する要素を選択する、というものらしいです。
つまり、$([href^=”#”])とすることで、href属性が “#” で始まる要素を取得することができます。
元々はjQueryで使っていた演算子ですが、最近はcssでも使用する事が出来ます。

例:class属性が「txt-」から始まる要素にCSSを適用させる。

[class^="txt-"]{
  color: #F00;
}

jqueryでのパララックス

jQuery

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

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

pogg-sweetpotatopie.com

on-ze.com

[parlx.js]

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