$(function(){
var lib = {
rspEvent: null,
visEvent: null,
scrollAncher: null,
dispatcher: $({})
};
lib.rspEvent = new (function(){
var that = {},
task = [],
id = 'pc';
that._init = function(){
$(window).on('resize.rsp', function(e){
that._resize();
});
that._resize();
return that;
};
that._resize = function(){
var _id = '';
if (window.matchMedia('(max-width:768px)').matches) _id = 'sp';
else _id = 'pc';
if (id != _id) {
id = _id;
that._dispatch();
};
};
that._dispatch = function(){
$.each(task, function(i, f){
f(id);
});
};
that.add = function(f){
task.push(f);
f(id);
};
that.get = function(){
return id;
};
return that._init();
});
lib.visEvent = new (function(){
var that = {},
task = [],
ids = 0;
that._init = function(){
$(window).on('resize.vis scroll.vis', function(e){
that._check();
});
return that;
};
that._check = function(){
var _t = $(window).scrollTop(),
_h = $(window).height(),
_l = 0;
while (_l < task.length) {
var _pt = task[_l].$t.offset().top,
_ph = task[_l].$t.outerHeight();
if (_t <= _pt + _ph && _pt <= _t + _h) {
if (!task[_l].s && (_pt <= _t + _h * task[_l].p)) {
task[_l].s = true;
task[_l].func(true, task[_l].$t);
if (task[_l].one == 1) {
that.remove(task[_l].$t);
continue;
};
};
} else {
if (task[_l].s) {
task[_l].s = false;
task[_l].func(false, task[_l].$t);
};
};
_l ++;
};
};
that.add = function(t, f, p, b){
ids ++;
t.data('vid', ids);
task.push({ $t: t, func: f, s: false, p: (p ? p : 1), one: (b ? b : 0), id: ids });
that._check();
};
that.remove = function(t){
for (var i = 0; i < task.length; i++) {
if (task[i].id == t.data('vid')) {
task.splice(i, 1);
return;
};
};
};
return that._init();
});
function setSkewHeight(){
var $visual = $('.section-visual');
var $visualMovie = $('.visual-movie');
var videoSize = { x: 1260, y: 708 };
var $pointWrap = $('.section-point_wrap');
var $pointBg = $('.section-point_wrap .bg');
function resize(){
var _w = $(window).width();
var _h = (_w * 0.5) * Math.tan(6 * (Math.PI / 180));
var _h1 = $pointWrap.outerHeight();
$pointBg.css({ height: _h1 + _h });
var _h2 = $visual.outerHeight();
$visualMovie.css({ height: _h2 + _h });
var _s = Math.max( (_h2 + _h) / videoSize.y, _w / videoSize.x);
$visualMovie.find('video').css({ width: _s * videoSize.x });
};
$(window).on('load resize', function(e){
resize();
});
resize();
};
function setMotion(){
function init(){
lib.visEvent.add($('.section-visual'), function(b, $t){
if (!b) return;
if (lib.rspEvent.get() == 'pc') {
TweenMax.fromTo($t.find('.visual-main .center'), 0.4, { scale: 0.6 }, { scale: 1, opacity: 1, ease: 'Back.easeOut' });
$t.find('.visual-main .list li').each(function(i){
TweenMax.fromTo($(this), 0.4, { scale: 0.6 }, { scale: 1, opacity: 1, delay: i*0.2+0.2, ease: 'Back.easeOut' });
TweenMax.fromTo($(this).find('.num'), 0.4, { scale: 0.6 }, { scale: 1, opacity: 1, delay: i*0.2+0.3, ease: 'Back.easeOut' });
});
TweenMax.to($t.find('.visual-main .line'), 0.6, { opacity: 1, delay: 1.4 });
TweenMax.fromTo($t.find('.visual-title .title'), 1, { x: 60 }, { x: 0, opacity: 1, delay: 1.7, ease: 'Expo.easeOut' });
TweenMax.fromTo($t.find('.visual-title .sub'), 1, { x: 60 }, { x: 0, opacity: 1, delay: 1.9, ease: 'Expo.easeOut' });
$t.find('.visual-text p').each(function(i){
TweenMax.fromTo($(this), 1, { x: -80 }, { x: 0, opacity: 1, delay: i*0.2+2.4, ease: 'Expo.easeOut' });
});
} else {
TweenMax.fromTo($t.find('.visual-main .center'), 0.4, { scale: 0.6 }, { scale: 1, opacity: 1, delay: 0.6, ease: 'Back.easeOut' });
$t.find('.visual-main .list li').each(function(i){
TweenMax.fromTo($(this), 0.4, { scale: 0.6 }, { scale: 1, opacity: 1, delay: i*0.2+0.8, ease: 'Back.easeOut' });
TweenMax.fromTo($(this).find('.num'), 0.4, { scale: 0.6 }, { scale: 1, opacity: 1, delay: i*0.2+0.9, ease: 'Back.easeOut' });
});
TweenMax.to($t.find('.visual-main .line'), 0.6, { opacity: 1, delay: 2.0 });
TweenMax.fromTo($t.find('.visual-title .title'), 1, { x: 60 }, { x: 0, opacity: 1, ease: 'Expo.easeOut' });
TweenMax.fromTo($t.find('.visual-title .sub'), 1, { x: 60 }, { x: 0, opacity: 1, delay: 0.2, ease: 'Expo.easeOut' });
lib.visEvent.add($t.find('.visual-text'), function(b, $t){
if (!b) return;
$t.find('p').each(function(i){
TweenMax.fromTo($(this), 1, { x: -80 }, { x: 0, opacity: 1, delay: i*0.2, ease: 'Expo.easeOut' });
});
}, 0.8, 1);
};
}, 1, 1);
$('.section-point').each(function(i){
var $this = $(this);
var $num = $this.find('.box-upper .num');
var $title = $this.find('.box-upper .title');
var $movie = $this.find('.movie');
var $text = $this.find('.box-under .text');
var $image = $this.find('.box-under .image');
lib.visEvent.add($this.find('.box-upper'), function(b, $t){
if (!b) return;
TweenMax.fromTo($title, 1, { y: 50 }, { y: 0, opacity: 1, ease: 'Expo.easeOut' });
TweenMax.fromTo($num, 0.4, { scale: 0.6 }, { scale: 1, opacity: 1, ease: 'Back.easeOut' });
TweenMax.fromTo($movie, 1, { y: 80 }, { y: 0, opacity: 1, delay: 0.3, ease: 'Expo.easeOut' });
TweenMax.fromTo($text, 1, { y: 80 }, { y: 0, opacity: 1, delay: 0.5, ease: 'Expo.easeOut' });
TweenMax.fromTo($image, 1, { y: 60 }, { y: 0, opacity: 1, delay: 0.7, ease: 'Expo.easeOut' });
}, 0.7, 1);
});
lib.visEvent.add($('.summary-title'), function(b, $t){
if (!b) return;
TweenMax.fromTo($t, 1, { y: 60 }, { y: 0, opacity: 1, ease: 'Expo.easeOut' });
}, 0.7, 1);
lib.visEvent.add($('.summary-comment'), function(b, $t){
if (!b) return;
TweenMax.fromTo($t.find('.text'), 1, { y: 80 }, { y: 0, opacity: 1, ease: 'Expo.easeOut' });
TweenMax.fromTo($t.find('.image'), 1, { y: 100 }, { y: 0, opacity: 1, delay: 0.2, ease: 'Expo.easeOut' });
}, 0.6, 1);
lib.visEvent.add($('.summary-movie'), function(b, $t){
if (!b) return;
TweenMax.fromTo($t.find('.title'), 0.4, { scale: 0.6 }, { scale: 1, opacity: 1, delay: 0.6, ease: 'Back.easeOut' });
TweenMax.fromTo($t.find('.thumbnail'), 1, { y: 80 }, { y: 0, opacity: 1, delay: 0.2, ease: 'Expo.easeOut' });
}, 0.6, 1);
var rellax = null;
lib.rspEvent.add(function(id){
try {
rellax.destroy();
} catch(e) {};
if (id == 'pc') {
$('.section-point .rellax-sp').attr('data-rellax-speed', '-2');
rellax = new Rellax('.rellax-pc', {
center: true
});
} else {
$('.section-point .rellax-sp').attr('data-rellax-speed', '-1');
rellax = new Rellax('.rellax-sp', {
center: true
});
};
});
};
$(window).on('load', function(e){
init();
});
};
function setModal(){
$('.js-modal-b').colorbox({
iframe: true,
innerWidth: 840,
innerHeight: '100%',
maxWidth: 840,
maxHeight: 595,
closeButton: false,
scrolling: false,
returnFocus: false,
onOpen: function(){
$('#cboxSlideshow').remove();
$('#cboxCurrent').remove();
},
onComplete: function(){
var el = $(this).data('esc-txt');
$('#cboxClose').length || $('#cboxLoadedContent').before('');
$('#cboxClose').show().focus().on('click', function(e){
$.colorbox.close();
});
},
onClosed: function(){
$('#cboxClose').remove();
}
});
$('.js-modal-c').colorbox({
rel: 'js-modal-c',
iframe: true,
innerWidth: 840,
innerHeight: '100%',
maxWidth: 840,
maxHeight: 595,
closeButton: false,
scrolling: false,
returnFocus: false,
previous: '前の動画へ',
next: '次の動画へ',
onOpen: function(){
$('#cboxSlideshow').remove();
$('#cboxCurrent').remove();
},
onComplete: function(){
var el = $(this).data('esc-txt');
$('#cboxClose').length || $('#cboxLoadedContent').before('');
$('#cboxClose').show().focus().on('click', function(e){
$.colorbox.close();
});
},
onClosed: function(){
$('#cboxClose').remove();
}
});
};
setSkewHeight();
setMotion();
setModal();
});