https://oyabudairyfarms.com/wp-content/themes/oyabudairyfarms2/js/script.js

1// JavaScript Document
2
3
4// inview
5$(function(){
6  $(".inview").on("inview", function (event, isInView) {
7    if (isInView) {
8      $(this).stop().addClass("is-show");
9    }
10  });
11});
12
13
14
15// slick
16$('.slider').slick({
17    autoplay: true,//自動的に動き出すか。初期値はfalse。
18    infinite: true,//スライドをループさせるかどうか。初期値はtrue。
19    slidesToShow: 4,//スライドを画面に3枚見せる
20    slidesToScroll: 4,//1回のスクロールで3枚の写真を移動して見せる
21    prevArrow: '<div class="slick-prev"></div>',//矢印部分PreviewのHTMLを変更
22    nextArrow: '<div class="slick-next"></div>',//矢印部分NextのHTMLを変更
23    dots: true,//下部ドットナビゲーションの表示
24    responsive: [
25      {
26      breakpoint: 769,//モニターの横幅が769px以下の見せ方
27      settings: {
28        slidesToShow: 2,//スライドを画面に2枚見せる
29        slidesToScroll: 2,//1回のスクロールで2枚の写真を移動して見せる
30      }
31    },
32    {
33      breakpoint: 426,//モニターの横幅が426px以下の見せ方
34      settings: {
35        slidesToShow: 1,//スライドを画面に1枚見せる
36        slidesToScroll: 1,//1回のスクロールで1枚の写真を移動して見せる
37      }
38    }
39  ]
40  });
41
42
43
44// 1文字ずつ
45
46// eachTextAnimeにappeartextというクラス名を付ける定義
47function EachTextAnimeControl() {
48  $('.eachTextAnime').each(function () {
49    var elemPos = $(this).offset().top - 50;
50    var scroll = $(window).scrollTop();
51    var windowHeight = $(window).height();
52    if (scroll >= elemPos - windowHeight) {
53      $(this).addClass("appeartext");
54
55    } else {
56      $(this).removeClass("appeartext");
57    }
58  });
59}
60
61// 画面をスクロールをしたら動かしたい場合の記述
62$(window).scroll(function () {
63  EachTextAnimeControl();/* アニメーション用の関数を呼ぶ*/
64});// ここまで画面をスクロールをしたら動かしたい場合の記述
65
66// 画面が読み込まれたらすぐに動かしたい場合の記述
67$(window).on('load', function () {
68  //spanタグを追加する
69  var element = $(".eachTextAnime");
70  element.each(function () {
71    var text = $(this).text();
72    var textbox = "";
73    text.split('').forEach(function (t, i) {
74      if (t !== " ") {
75        if (i < 10) {
76          textbox += '<span style="animation-delay:.' + i + 's;">' + t + '</span>';
77        } else {
78          var n = i / 10;
79          textbox += '<span style="animation-delay:' + n + 's;">' + t + '</span>';
80        }
81
82      } else {
83        textbox += t;
84      }
85    });
86    $(this).html(textbox);
87  });
88
89  EachTextAnimeControl();/* アニメーション用の関数を呼ぶ*/
90});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述
91
92
93