https://tanita.co.uk/product-innovation-page/js/functions.js

1$(window).ready(function(){
2  link();
3  movie();
4  start_movie();
5  getElements_val();
6  humberger_btn();
7  scroll_val();
8  nav_border();
9  timeline_move();
10});
11$(function () {
12  // header_dowm();
13  link();
14  movie();
15  start_movie();
16  getElements_val();
17  humberger_btn();
18  scroll_val();
19  nav_border();
20  timeline_move();
21});
22
23$(window).resize(function(){
24  movie();
25  scroll_val();
26  timeline_move();
27  nav_border()
28});
29
30$(window).scroll(function(){
31  nav_border();
32});
33
34$(window).on("load orientationchange resize", function() {
35  movie();
36  scroll_val();
37  timeline_move();
38  nav_border()
39});
40
41function header_dowm() {
42  var flag = "up";
43  $(window).on("scroll", function () {
44    if ($(this).scrollTop() > 0) {
45      if (flag === "up") {
46        $("header").stop().animate({
47          top: 0
48        }, 500)
49        flag = "down";
50      }
51    } else {
52      if (flag === "down") {
53        $("header").stop().animate({
54          top: "-65px"
55        }, 500);
56        flag = "up";
57      }
58    }
59  });
60}
61
62function link () {
63  $('a[href^=#]').on('click', function(){
64    var speed = 500,
65        status = 59,
66        href= $(this).attr("href"),
67        target = $(href == "#" || href == "" ? 'html' : href),
68        position = target.offset().top,
69        position = position - status;
70    $("html, body").animate({scrollTop:position}, speed, "swing");
71    return false;
72  });
73}
74
75function movie() {
76  var w_height = $(window).height();
77  var w_width = $(window).width();
78  if (w_width <= 768) {
79    w_height = w_width * (549 / 768)
80    $('#movie_area').css({
81      'height': w_height+'px',
82    });
83  }
84  // else if(w_width == 1024) {
85  //
86  // }
87  else {
88    $('#movie_area').css({
89      'height': w_height-59+'px',
90    });
91  }
92
93  var m_height = $('#movie_area').height();
94
95  $('#movie_border').css({
96    'width': w_width-30+'px',
97    'height': m_height-30+'px',
98  });
99
100  // $('.movie_inner').css({
101  //   'background-position': 'center center',
102  //   'background-size': 'cover'
103  // });
104}
105
106function start_movie() {
107  $('.popup_iframe').on('click', function(){
108    setTimeout(function(){
109      $('.ytp-large-play-button').trigger('click');
110    },5000);
111  });
112}
113
114function scroll_val() {
115  var width = $(window).width()
116}
117
118function getElements_val() {
119  $('.btn-ccw-trbl').each(function(){
120    var test = {};
121    // console.log($(this).offset());
122    // test[$(this)] = $(this).offset().top()
123  });
124  // console.log(test.);
125  // console.log(test.prototype.values());
126}
127
128function humberger_btn () {
129  $('#humberger_btn').change(function() {
130    var check_val = $('#humberger_btn').prop('checked');
131    if (check_val) {
132      $('#drawer_menu').addClass('active').css({
133        'transition': '0.6s'
134      });
135    } else {
136      $('#drawer_menu').removeClass('active').css({
137        'transition': '0.6s'
138      });
139    }
140  });
141
142  $('.drawer_menu_txt a').on('click', function(){
143    $('#humberger_btn').prop('checked', false);
144    $('#drawer_menu').removeClass('active').css({
145      'transition': '0.6s'
146    });
147  });
148}
149
150function timeline_move() {
151  var window_w = $(window).width();
152  if(window_w < 1100 && window_w > 768) {
153    $('.inner_active').css({
154      'transform': 'translateX(-' + (1110 - window_w) / 2 + 'px)',
155    })
156    $('.inner_active_right').css({
157      'transform': 'translateX(+' + (1110 - window_w) / 10 + 'px)',
158    })
159  } else {
160    $('.inner_active').css({
161      'transform': 'translateX(0px)',
162    })
163    $('.inner_active_right').css({
164      'transform': 'translateX(0px)',
165    })
166  }
167  if(window_w < 1500 && window_w > 768) {
168    $('.future_inner_active').css({
169      'transform': 'translateX(-' + (1500 - window_w) / 2 + 'px)',
170    })
171  } else if(window_w > 1500) {
172    $('.future_inner_active').css({
173      'transform': 'translateX(+' + (window_w - 1500) / 2 + 'px)',
174    })
175  } else if(window_w < 768) {
176    $('.future_inner_active').css({
177      'transform': 'translateX(-' + (768 - window_w) / 2 + 'px)',
178    })
179  }
180
181  // if(window_w < 768) {
182  //   var timeline_Bg_position = - (120 + (1/448 * (window_w - 320) )* 180)
183  //   $('.future_inner_Bg').css({
184  //     'background-position': 'center top '+ timeline_Bg_position +'px'
185  //   });
186  //   console.log(window_w)
187  //   console.log(timeline_Bg_position)
188  // }
189}
190
191function nav_border() {
192  var first_high = $('#first').offset().top;
193  var movie_high = $('#movie_area').offset().top;
194  var background_high = $('#background').offset().top;
195  var future_high = $('#future').offset().top;
196  var future_box_high = $('#future').height();
197  var scroll_val = $(window).scrollTop() + 60;
198  var window_w = $(window).width();
199  if (window_w <= 768) {
200    var sp_timeline_high = $('#sp_timeline').offset().top;
201  }else{
202    var timeline_high = $('#timeline').offset().top;
203  }
204
205  if (window_w <= 768) {
206    $('#first_bar').removeClass('active').children('img').prop('src', 'eng_images/menu_TOP.png')
207    $('#movie_bar').removeClass('active').children('img').prop('src', 'eng_images/menu_CONCEPT_MOVIE.png')
208    $('#sp_timeline_bar').removeClass('active').children('img').prop('src', 'eng_images/menu_INNOVATION_TIMELINE.png')
209    $('#background_bar').removeClass('active').children('img').prop('src', 'eng_images/menu_BACKGROUND.png')
210    $('#future_bar').removeClass('active').children('img').prop('src', 'eng_images/menu_FOR_FUTURE.png')
211
212    if (first_high < scroll_val && movie_high > scroll_val) {
213      $('#first_bar').addClass('active').children('img').prop('src', 'eng_images/menu_TOP_off.png')
214    } else if (movie_high < scroll_val && sp_timeline_high > scroll_val) {
215      $('#movie_bar').addClass('active').children('img').prop('src', 'eng_images/menu_CONCEPT_MOVIE_off.png')
216    } else if (sp_timeline_high < scroll_val && background_high > scroll_val) {
217      $('#sp_timeline_bar').addClass('active').children('img').prop('src', 'eng_images/menu_INNOVATION_TIMELINE_off.png')
218    } else if (background_high < scroll_val && future_high > scroll_val) {
219      $('#background_bar').addClass('active').children('img').prop('src', 'eng_images/menu_BACKGROUND_off.png')
220    } else if (future_high < scroll_val && future_high + future_box_high > scroll_val) {
221      $('#future_bar').addClass('active').children('img').prop('src', 'eng_images/menu_FOR_FUTURE_off.png')
222    }
223  } else {
224    $('#first_bar').removeClass('active').children('img').prop('src', 'eng_images/drawer_top_txt.png')
225    $('#movie_bar').removeClass('active').children('img').prop('src', 'eng_images/drawer_movie_txt.png')

226    $('#timeline_bar').removeClass('active').children('img').prop('src', 'eng_images/drawer_timeline_txt.png')
227    $('#background_bar').removeClass('active').children('img').prop('src', 'eng_images/drawer_background_txt.png')
228    $('#future_bar').removeClass('active').children('img').prop('src', 'eng_images/drawer_future_txt.png')
229
230    if (first_high < scroll_val && movie_high > scroll_val) {
231      $('#first_bar').addClass('active').children('img').prop('src', 'eng_images/drawer_top_txt_off.png')
232    } else if (movie_high < scroll_val && timeline_high > scroll_val) {
233      $('#movie_bar').addClass('active').children('img').prop('src', 'eng_images/drawer_movie_txt_off.png')
234    } else if (timeline_high < scroll_val && background_high > scroll_val) {
235      $('#timeline_bar').addClass('active').children('img').prop('src', 'eng_images/drawer_timeline_txt_off.png')
236    } else if (background_high < scroll_val && future_high > scroll_val) {
237      $('#background_bar').addClass('active').children('img').prop('src', 'eng_images/drawer_background_txt_off.png')
238    } else if (future_high < scroll_val && future_high + future_box_high > scroll_val) {
239      $('#future_bar').addClass('active').children('img').prop('src', 'eng_images/drawer_future_txt_off.png')
240    }
241  }
242}
243
244$(function(){
245  var scrollAnimationClass = 'sa';
246  var scrollAnimationShowClass = 'show';
247  var triggerMarginDefault = 300;
248
249  var scrollAnimationElm = document.querySelectorAll('.' + scrollAnimationClass);
250  var scrollAnimationFunc = function() {
251    var dataMargin = scrollAnimationClass + '_margin';
252    var dataTrigger = scrollAnimationClass + '_trigger';
253    var dataDelay = scrollAnimationClass + '_delay';
254    for(var i = 0; i < scrollAnimationElm.length; i++) {
255      var triggerMargin = triggerMarginDefault;
256      var elm = scrollAnimationElm[i];
257      var showPos = 0;
258      if(elm.dataset[dataMargin] != null) {
259        triggerMargin = parseInt(elm.dataset[dataMargin]);
260      }
261      if(elm.dataset[dataTrigger]) {
262        showPos = document.querySelector(elm.dataset[dataTrigger]).getBoundingClientRect().top + triggerMargin;
263      } else {
264        showPos = elm.getBoundingClientRect().top + triggerMargin;
265      }
266      if (window.innerHeight > showPos) {
267        var delay = (elm.dataset[dataDelay])? elm.dataset[dataDelay] : 0;
268        setTimeout(function(index) {
269          scrollAnimationElm[index].classList.add('sa_active');
270        }.bind(null, i), delay);
271      }
272    }
273  }
274  window.addEventListener('load', scrollAnimationFunc);
275  window.addEventListener('scroll', scrollAnimationFunc);
276})
277
278
279$(function(){
280  var scrollAnimationClass = 'sh';
281  var scrollAnimationShowClass = 'show';
282  var triggerMarginDefault = 300;
283
284  var scrollAnimationElm = document.querySelectorAll('.' + scrollAnimationClass);
285  var scrollAnimationFunc = function() {
286    var dataMargin = scrollAnimationClass + '_margin';
287    var dataTrigger = scrollAnimationClass + '_trigger';
288    var dataDelay = scrollAnimationClass + '_delay';
289    for(var i = 0; i < scrollAnimationElm.length; i++) {
290      var triggerMargin = triggerMarginDefault;
291      var elm = scrollAnimationElm[i];
292      var showPos = 0;
293      if(elm.dataset[dataMargin] != null) {
294        triggerMargin = parseInt(elm.dataset[dataMargin]);
295      }
296      if(elm.dataset[dataTrigger]) {
297        showPos = document.querySelector(elm.dataset[dataTrigger]).getBoundingClientRect().top + triggerMargin;
298      } else {
299        showPos = elm.getBoundingClientRect().top + triggerMargin;
300      }
301      if (window.innerHeight > showPos) {
302        var delay = (elm.dataset[dataDelay])? elm.dataset[dataDelay] : 0;
303        setTimeout(function(index) {
304          scrollAnimationElm[index].classList.add('sh_active');
305        }.bind(null, i), delay);
306      }
307    }
308  }
309  window.addEventListener('load', scrollAnimationFunc);
310  window.addEventListener('scroll', scrollAnimationFunc);
311})