var corp;
(function (corp) {
var Main = (function () {
function Main() {
this.init();
}
Main.prototype.init = function () {
new corp.Environment();
new corp.Resize();
new corp.Header();
new corp.Control();
$(window).on('load', $.proxy(this.onLoad, this));
$('html').addClass('is-script');
if(corp.Const.frame.browser.ie.v11){
$('html').addClass('ie11');
}
if(corp.Const.frame.device.ios){
$('html').addClass('ios');
}
if(corp.Const.frame.device.android){
$('html').addClass('android');
}
if(corp.Const.frame.browser.mac){
$('html').addClass('mac');
}
window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload();
}
};
$("#mainContents").children('div').each(function(index, el) {
// console.log($(this).attr('tabindex'));
if($(this).attr('tabindex') !== 'undefined'){
$(this).removeAttr('tabindex');
}
});
$('.component-content').each(function(index, el) {
// console.log($(this).attr('tabindex'));
if($(this).children('div')[0]){
if($(this).children('div').attr('tabindex') !== 'undefined'){
$(this).children('div').removeAttr('tabindex');
}
}
});
};
Main.prototype.onLoad = function () {
// new corp.Home();
};
return Main;
})();
corp.Main = Main;
})(corp || (corp = {}));
$(function () {
new corp.Main();
});
$(window).on('load', function(){
// new corp.Main();
//ページ全体が読み込まれた時の処理
// $(window).trigger(corp.Const.EVENT_LOAD);
// new corp.Control();
});
var tm = gsap;
var corp;
(function (corp) {
var Control = (function () {
function Control() {
this.init();
}
Control.prototype.init = function () {
new corp.Common();
// new corp.Splash();
// new corp.Scroll();
// new corp.Scroll2();
if(!$('html').hasClass('isnt-animetion')){
new corp.ScrollAnm();
}
// new corp.Movie();
};
return Control;
}());
corp.Control = Control;
})(corp || (corp = {}));
var corp;
(function (corp) {
var Const = (function () {
function Const() {
}
Const.EVENT_START = "start";
Const.EVENT_LOAD = "load";
Const.EVENT_WHEEL = 'mousewheel';
Const.EVENT_SCROLL = 'scroll';
Const.EVENT_CHANGE = "content_change";
Const.EVENT_REQUEST = "content_request";
Const.EVENT_RESIZE = 'resize';
Const.EVENT_UPDATE = 'update';
Const.EVENT_CLICK = 'click';
Const.ID_PREV = 'prev';
Const.ID_NEXT = 'next';
Const.MODE_PC = 'pc';
Const.MODE_TB = 'tb';
Const.MODE_SP = 'sp';
Const.frame = {};
return Const;
})();
corp.Const = Const;
})(corp || (corp = {}));
var corp;
(function (corp) {
var Environment = (function () {
function Environment() {
this.init();
}
Environment.prototype.init = function () {
corp.Const.util = new Util();
var ua = window.navigator.userAgent.toLowerCase();
corp.Const.frame.browser = {};
corp.Const.frame.browser.ie = {};
corp.Const.frame.browser.ie.ie = false;
corp.Const.frame.browser.ie.ie8_lte = false;
corp.Const.frame.browser.ie.ie9_lte = false;
corp.Const.frame.browser.ie.ie11_lte = false;
corp.Const.frame.browser.ie.v6 = false;
corp.Const.frame.browser.ie.v7 = false;
corp.Const.frame.browser.ie.v8 = false;
corp.Const.frame.browser.ie.v9 = false;
corp.Const.frame.browser.ie.v10 = false;
corp.Const.frame.browser.ie.v11 = false;
corp.Const.frame.browser.ie.edge = false;
corp.Const.frame.browser.chrome = false;
corp.Const.frame.browser.opera = false;
corp.Const.frame.browser.firefox = false;
corp.Const.frame.browser.safari = false;
corp.Const.frame.tablet = {};
corp.Const.frame.tablet.iPad = false;
corp.Const.frame.tablet.android = false;
corp.Const.frame.smartPhone = {};
corp.Const.frame.smartPhone.iPhone = false;
corp.Const.frame.smartPhone.iPad = false;
corp.Const.frame.smartPhone.android = false;
corp.Const.frame.smartPhone.winPhone = false;
corp.Const.frame.smartPhone.blackBerry = false;
corp.Const.frame.device = {};
corp.Const.frame.device.tab = false;
corp.Const.frame.device.sp = false;
corp.Const.frame.device.pc = false;
corp.Const.frame.device.ios = false;
corp.Const.frame.device.android = false;
// corp.Const.frame.browser.chrome = ua.indexOf("chrome") > 0 && ua.indexOf("safari") > 0;
// corp.Const.frame.browser.safari = ua.indexOf("chrome") === -1 && ua.indexOf("safari") > 0;
corp.Const.frame.browser.firefox = ua.indexOf("firefox") > 0;
corp.Const.frame.browser.opera = ua.indexOf("opera") > 0;
corp.Const.frame.browser.ie.v6 = ua.indexOf("msie 6.") > 0;
corp.Const.frame.browser.ie.v7 = ua.indexOf("msie 7.") > 0;
corp.Const.frame.browser.ie.v8 = ua.indexOf("msie 8.") > 0;
corp.Const.frame.browser.ie.v9 = ua.indexOf("msie 9.") > 0;
corp.Const.frame.browser.ie.v10 = ua.indexOf("msie 10.") > 0;
corp.Const.frame.browser.ie.v11 = ua.indexOf("trident/7") > 0;
// corp.Const.frame.browser.ie.edge = ua.indexOf('edge') > 0;
corp.Const.frame.browser.ie.edge = false;
if(ua.indexOf("edge") > -1){
corp.Const.frame.browser.ie.edge = true;
}else if(ua.indexOf('chrome') > -1){
corp.Const.frame.browser.chrome = true;
}else if(ua.indexOf('safari') > -1){
corp.Const.frame.browser.safari = true;
}
corp.Const.frame.browser.ie.ie8_lte = corp.Const.frame.browser.ie.v6 || corp.Const.frame.browser.ie.v7 || corp.Const.frame.browser.ie.v8;
corp.Const.frame.browser.ie.ie9_lte = corp.Const.frame.browser.ie.ie8_lte || corp.Const.frame.browser.ie.v9;
corp.Const.frame.browser.ie.ie11_lte = corp.Const.frame.browser.ie.ie9_lte || corp.Const.frame.browser.ie.v10 || corp.Const.frame.browser.ie.v11;
corp.Const.frame.browser.ie.ie = corp.Const.util.checkBoolean(corp.Const.frame.browser.ie);
// corp.Const.frame.browser.mac = ua.indexOf("mac") > -1 && ua.indexOf('os') > -1 && ua.indexOf('iphone') > -1 && ua.indexOf('ipad') > -1 && ua.indexOf('windows') > -1;
corp.Const.frame.browser.mac = ua.match(/mac os|mac_powerpc|macintosh/);
corp.Const.frame.tablet.iPad = ua.indexOf("iPad") > 0 || ua.indexOf("ipad") > 0;
corp.Const.frame.tablet.android = ua.indexOf("android") > 0 && ua.indexOf("mobile") === -1 || ua.indexOf("A1_07") > 0 || ua.indexOf("SC-01C") > 0;
corp.Const.frame.smartPhone.iPhone = ua.indexOf("iPhone") > 0 || ua.indexOf("iphone") > 0;
corp.Const.frame.smartPhone.iPod = ua.indexOf("iPod") > 0 || ua.indexOf("ipod") > 0;
corp.Const.frame.smartPhone.android = ua.indexOf("android") > 0 && ua.indexOf("mobile") > 0;
corp.Const.frame.smartPhone.winPhone = ua.indexOf("Windows Phone") > 0;
corp.Const.frame.smartPhone.blackBerry = ua.indexOf("Blackberry") > 0;
corp.Const.frame.device.tab = corp.Const.util.checkBoolean(corp.Const.frame.tablet);
corp.Const.frame.device.sp = corp.Const.util.checkBoolean(corp.Const.frame.smartPhone);
corp.Const.frame.device.pc = corp.Const.frame.device.tab === false && corp.Const.frame.device.sp === false;
corp.Const.frame.json = false;
if (corp.Const.frame.browser.ie.ie8_lte) {
corp.Const.legacy = true;
}
corp.Const.frame.device.ios = corp.Const.frame.tablet.iPad || corp.Const.frame.smartPhone.iPhone || corp.Const.frame.smartPhone.iPad;
corp.Const.frame.device.android = corp.Const.frame.tablet.android || corp.Const.frame.smartPhone.android;
};
return Environment;
})();
corp.Environment = Environment;
var Util = (function () {
function Util() {
}
Util.prototype.getScrollTop = function () {
return document.documentElement.scrollTop || document.body.scrollTop;
};
Util.prototype.getBrowserWidth = function () {
return document.all
? document.documentElement.clientWidth
: window.innerWidth;
};
Util.prototype.getBrowserHeight = function () {
return document.all
? document.documentElement.clientHeight
: window.innerHeight;
};
Util.prototype.getParameters = function () {
var e = window.location.search, n = e.length, o = {};
if (n > 1) {
var i = e.substring(1), t = i.split("&");
for (var r = 0, a = i.length; r < a; r++) {
var s = t[r].split("="), d = decodeURIComponent(s[0]), m = decodeURIComponent(s[1]);
o[d] = m;
}
}
return o;
};
Util.prototype.deciFloor = function (e, n) {
var o = Math.pow(10, n), i = e * o >> 0;
return i / o;
};
Util.prototype.checkBoolean = function (e) {
for (var n in e) {
if (e[n] === true) {
return true;
}
}
return false;
};
Util.prototype.log = function (e) {
if (this.debugMode && window.console && typeof window.console === "function")
console.log(e);
};
Util.prototype.dir = function (e) {
if (this.debugMode && window.console && typeof window.console === "function")
console.dir(e);
};
Util.prototype.count = function (e) {
if (this.debugMode && window.console && typeof window.console === "function")
console.count(e);
};
Util.prototype.error = function (e) {
if (this.debugMode && window.console && typeof window.console === "function")
console.error(e);
};
Util.prototype.trace = function () {
if (this.debugMode && window.console && typeof window.console === "function")
console.trace();
};
Util.prototype.noScrollEvent = function (e, n) {
if (e === void 0) {
e = "disable-hover";
}
if (n === void 0) {
n = 300;
}
var o = 0;
var i = $("body");
$(window).on("scroll.noEvent", function () {
clearTimeout(o);
var i = $("body");
var t = i.hasClass(e);
if (!t)
i.addClass(e);
o = setTimeout(function () {
i.removeClass(e);
}, n);
});
};
return Util;
})();
corp.Util = Util;
})(corp || (corp = {}));
var corp;
(function (corp) {
var Resize = (function () {
function Resize() {
this.init();
}
Resize.prototype.init = function () {
if (corp.Const.frame.browser.ie.ie8_lte) {
this.mq = false;
}
else {
this.mq = true;
}
$(window).on(corp.Const.EVENT_RESIZE, $.proxy(this.resize, this));
this.resize();
};
Resize.prototype.resize = function () {
var w = window.innerWidth ? window.innerWidth : $(window).width();
var h = window.innerHeight ? window.innerHeight : $(window).height();
var m;
if (w <= 767) {
m = corp.Const.MODE_SP;
}
else if(w <= 1000){
m = corp.Const.MODE_TB;
}
else {
m = corp.Const.MODE_PC;
}
if (!this.mq) {
m = corp.Const.MODE_PC;
}
if (this.mode !== m) {
this.mode = m;
this.setMode();
}
};
Resize.prototype.setMode = function () {
corp.Const.mode = this.mode;
$(window).trigger(corp.Const.EVENT_CHANGE);
};
return Resize;
})();
corp.Resize = Resize;
})(corp || (corp = {}));
var corp;
(function (corp) {
var Common = (function () {
function Common() {
this._prevScrollY = 0;
this.scrollUpSelector = 'js-scroll-up';
this.init();
}
Common.prototype.init = function () {
var _this = this;
$(window)
.on('resize onorientationchange', $.proxy(this.resize, this))
.on('scroll touchmove', $.proxy(this.scroll, this));
if(corp.Const.frame.browser.ie.v11){
$('body').on("mousewheel", function () {
event.preventDefault();
var wd = event.wheelDelta;
var csp = window.pageYOffset;
window.scrollTo(0, csp - wd);
});
}
this.load();
};
Common.prototype.resize = function () {
var _self = this;
};
Common.prototype.scroll = function () {
this.scrollY = $(window).scrollTop();
if(this._prevScrollY - this.scrollY > 0) {
$('html').addClass(this.scrollUpSelector);
} else {
$('html').removeClass(this.scrollUpSelector);
}
this._prevScrollY = this.scrollY;
};
Common.prototype.load = function () {
var scope = this;
$('.js-card-title-mh .c-card_title').matchHeight();
$('.js-slide-panel').slick({
accessibility:true,
//fade: true,
infinite: true,
arrows:true,
dots: false,
adaptiveHeight: true,
// slidesToShow: 2,
// slidesToScroll: 2,
// lazyLoad: 'progressive',
//centerMode: true,
responsive: [{
breakpoint: 1000,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
$('.js-slide').slick({
accessibility:true,
infinite: true,
arrows:true,
dots: true,
slidesToShow: 2,
slidesToScroll: 2,
lazyLoad: 'progressive',
responsive: [{
breakpoint: 1000,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 640,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
}).on('setPosition', function (event, slick) {
slick.$slides.css('height', slick.$slideTrack.height() + 'px');
});
};
return Common;
}());
corp.Common = Common;
})(corp || (corp = {}));
// var corp;
// (function (corp) {
// var Scroll = (function () {
// function Scroll() {
// this.ANIMATION_CLASS = 'is-animation';
// this.$section = $('.js-scroll:not(.is-animation)');
// this.init();
// }
// Scroll.prototype.init = function () {
// var _this = this;
// if(this.$section.length === null) return;
// this.load();
// };
// Scroll.prototype.load = function () {
// var _this = this;
// var controller = new ScrollMagic.Controller();
// // for(var i = 0; i < this.$section.length; i++) {
// // var scene = new ScrollMagic.Scene({
// // triggerElement: this.$section[i],
// // triggerHook: 0.9,
// // reverse: false,
// // offset: 100
// // })
// // .addTo(controller);
// // scene.on('enter', ()=>{
// // this.$section[i].classList.add(this.ANIMATION_CLASS);
// // });
// // scene.on('end', ()=>{
// // scene.destroy(true);
// // // this.$section[i].classList.remove(this.ANIMATION_CLASS);
// // });
// // }
// for(let i = 0; i < this.$section.length; i++) {
// let scene = new ScrollMagic.Scene({
// triggerElement: this.$section[i],
// triggerHook: 0.8,
// reverse: false,
// offset: 100
// })
// .addTo(controller)
// .setClassToggle(this.$section[i], this.ANIMATION_CLASS);
// }
// };
// return Scroll;
// }());
// corp.Scroll = Scroll;
// })(corp || (corp = {}));
var corp;
(function (corp) {
var SpanWrap = (function () {
function SpanWrap(target) {
this.target = this.convertElement(target);
// this.nodes = [...this.target.childNodes];
// this.nodes = Array.from(this.target.childNodes);
this.nodes = [].slice.call(this.target.childNodes);
this.convert();
}
SpanWrap.prototype.convert = function () {
let spanWrapText = ""
this.nodes.forEach(function (node) {
if (node.nodeType == 3) {//テキストの場合
const text = node.textContent.replace(/\r?\n/g, '');//テキストから改行コード削除
//spanで囲んで連結
spanWrapText = spanWrapText + text.split('').reduce(function (acc, v) {
// return acc + `${v}`
return acc + ("" + v + "");
}, "");
} else {//テキスト以外
//
などテキスト以外の要素をそのまま連結
spanWrapText = spanWrapText + node.outerHTML
}
})
this.target.innerHTML = spanWrapText
};
SpanWrap.prototype.convertElement = function (element) {
if (element instanceof HTMLElement) {
return element
}
if (element instanceof jQuery) {
return element[0]
}
return document.querySelector(element);
};
return SpanWrap;
}());
corp.SpanWrap = SpanWrap;
})(corp || (corp = {}));
var corp;
(function (corp) {
var ScrollAnm = (function () {
function ScrollAnm() {
var s = this;
this.$win = $(window);
this.$body = $('body');
if($('.p-movie')[0]){
this.movie = new corp.Movie();
}
this.winW = this.$win.width();
this.winH = this.$win.height();
this.scT = 0;
this.$anm = $('.is-anm');
this.anmInfo = [];
this.deviceType;
this.isFirstAnimetion = false;
this.isSFAnimetion = false;
this.FA_toggle = false;
this.SF_toggle = false;
this.SF_scroll = 0;
this.isBg;
this.modalPlayer;
this.ANIMATION_CLASS = 'is-animation';
this.$section = $('.is-messageTarget:not(.is-animation)');
this.init();
}
ScrollAnm.prototype.init = function () {
var s = this
;
if($('.p-movie')[0]){
if(!corp.Const.frame.browser.ie.v11){
var id = $('.photo-youtube-bg').data('movie-id');
$('.p-movie-space').prepend('');
$('.p-movie').after('
');
}else{
$('.p-movie-space').prepend('');
}
this.modal = $('.p-modal');
this.modalBtn = $('.js-modal');
this.modalBg = this.modal.find('.p-modal-bg');
this.modalClose = this.modal.find('.p-modal-close');
this.modalIframe = this.modal.find('iframe');
$('.p-movie-btn').each(function(){
$(this).on('click', function(e){
if(!corp.Const.frame.browser.ie.v11){
e.preventDefault();
s.movieModal(id, 'open');
s.movie.onStop();
}
});
})
this.modalClose.add(this.modalBg).on('click', function(e){
if(!corp.Const.frame.browser.ie.v11){
e.preventDefault();
s.movieModal('', 'close');
s.movie.onPlay();
}
});
document.addEventListener('keydown', function(e) {
if(e.keyCode === 9){
var $activeObj = $(document.activeElement);
if($activeObj.hasClass('p-movie-btn') && !e.shiftKey){
e.preventDefault();
$('.p-purpose_inner').focus();
}
if($activeObj.hasClass('p-purpose_inner') && e.shiftKey){
e.preventDefault();
$('body,html').animate({scrollTop:$('.p-movie').offset().top}, 10, 'swing');
$('.p-movie-btn').focus();
}
}
})
this.modalBtn.add('.p-purpose_inner').on('focus', function(){
s.movieModal('', 'close');
});
$('.sevenfield-item a').on('focus', function(e){
var scT = document.documentElement.scrollTop || document.body.scrollTop;
if($('.section-sevenfield').offset().top <= scT && ($('.section-sevenfield').offset().top + $('.section-sevenfield').outerHeight()) > (scT + s.winH)) {
} else{
s.movieModal('', 'close');
$('body,html').animate({scrollTop:$('.section-sevenfield').offset().top}, 10, 'swing');
}
});
} else {
$('.sevenfield-item a').on('focus', function(e){
var scT = document.documentElement.scrollTop || document.body.scrollTop;
if($('.section-sevenfield').offset().top <= scT && ($('.section-sevenfield').offset().top + $('.section-sevenfield').outerHeight()) > (scT + s.winH)) {
} else{
$('body,html').animate({scrollTop:$('.section-sevenfield').offset().top}, 10, 'swing');
}
});
$('.fivekey-item a').on('focus', function(e){
var scT = document.documentElement.scrollTop || document.body.scrollTop;
if($('.section-fivekey').offset().top <= scT && ($('.section-fivekey').offset().top + $('.section-fivekey').outerHeight()) > (scT + s.winH)) {
} else{
$('body,html').animate({scrollTop:$('.section-fivekey').offset().top}, 10, 'swing');
}
});
}
this.$anm.each(function(i){
var key = s.anmInfo.length
, start = $(this).offset().top
, end = $(this).offset().top + $(this).outerHeight()
, id = 'js-anm-' + i
, jsName = 'anm'
;
if($(this).attr('data-customAnm')) jsName = $(this).attr('data-customAnm');
$(this).attr('id', id);
s.anmInfo[key] = {
'$target':$(this)
, 'id':id
, 'class':$(this).attr('class')
, 'jsName':jsName
, 'start':start
, 'end':end
, 'state':'init'
, '$objs':{}
};
$(this).find('.is-anmTarget').each(function(j){
var order = 0
, anmType = ''
, anmDelay = 0
, id2
;
if($(this).attr('data-anmOrder')){
order = Number($(this).attr('data-anmOrder'));
}else{
order = j;
}
if($(this).attr('data-anmType')){
anmType = $(this).attr('data-anmType');
}
if($(this).attr('data-anmDelay')){
anmDelay = Number($(this).attr('data-anmDelay'));
}
id2 = 'js-anm-' + i + '-' + order;
$(this).attr('id', id2);
s.anmInfo[key]['$objs'][order] = {
'$target':$(this)
, 'id':id2
, 'class':$(this).attr('class')
, 'anmType':anmType
, 'anmDelay':anmDelay
};
});
if(jsName === 'heroJS'){
s.anmInfo[key]['$objs']['$root'] = $(this);
s.anmInfo[key]['$objs']['$frame'] = $(this).find('.hero-frame');
s.anmInfo[key]['$objs']['$hero'] = $(this).find('.hero');
s.anmInfo[key]['$objs']['heroArr'] = [];
// s.anmInfo[key]['$objs']['$hero'].each(function(j){
// s.anmInfo[key]['$objs']['heroArr'][j] = {
// '$grad':$(this).find('.hero_grad')
// , '$mark':$(this).find('.hero_mark')
// , '$bg':$(this).find('.hero_bg')
// , '$txt':$(this).find('.js-text_span_inr')
// , '$logo1':$(this).find('.logo-1')
// , '$logo2':$(this).find('.logo-2')
// , 'stroke1':''
// , 'stroke2':''
// };
// })
}else if(jsName === 'messageTopJS'){
s.anmInfo[key]['$objs']['$frame'] = $(this).find('.messageTop');
s.anmInfo[key]['$objs']['$sec'] = $(this).find('.l-section-inner');
s.anmInfo[key]['$objs']['$block'] = $(this).find('.l-section-inner .is-messageTarget');
s.anmInfo[key]['$objs']['y_top'] = 0;
s.anmInfo[key]['$objs']['total'] = 0;
}else if(jsName === 'messageFooterJS'){
s.anmInfo[key]['$objs']['isStart'] = false;
s.anmInfo[key]['$objs']['$messageFooter_inr'] = $(this).find('.messageFooter-inr');
s.anmInfo[key]['$objs']['$messageFooter_ttl_bg'] = $(this).find('.messageFooter-ttl_bg');
// s.anmInfo[key]['$objs']['$frame'] = $(this).find('.home-solutions_frame');
}else if(jsName === 'solutionsJS'){
s.anmInfo[key]['$objs']['isStart'] = false;
s.anmInfo[key]['$objs']['$frame'] = $(this).find('.section-solutions_frame');
s.anmInfo[key]['$objs']['$frame_inr'] = $(this).find('.section-solutions_inr');
s.anmInfo[key]['$objs']['$clip'] = $(this).find('.section-solutions_clip');
s.anmInfo[key]['$objs']['$bg01'] = $(this).find('.section-solutions_bg01');
s.anmInfo[key]['$objs']['$bg02'] = $(this).find('.section-solutions_bg02');
s.anmInfo[key]['$objs']['$bg03'] = $(this).find('.section-solutions_bg03');
s.anmInfo[key]['$objs']['$txt_inr'] = $(this).find('.section-solutions_text_span_inr');
s.anmInfo[key]['$objs']['$txt_bg'] = $(this).find('.section-solutions_text_bg');
s.anmInfo[key]['$objs']['$logo'] = $(this).find('#logo-3');
s.anmInfo[key]['$objs']['$logo_mask'] = $(this).find('.section-solutions_mark');
}else if(jsName === 'sevenfieldJS'){
s.anmInfo[key]['$objs']['isStart'] = false;
s.anmInfo[key]['$objs']['isAnimetion'] = false;
s.anmInfo[key]['$objs']['$frame_parent'] = $('.section-sevenfield');
s.anmInfo[key]['$objs']['$frame'] = $('.section-sevenfield-frame');
s.anmInfo[key]['$objs']['$frame_inr'] = $('.section-sevenfield-inr');
s.anmInfo[key]['$objs']['$bg'] = $('.section-sevenfield_bg');
s.anmInfo[key]['$objs']['$box'] = $('.sevenfield-box');
s.anmInfo[key]['$objs']['$item'] = $('.sevenfield-item');
s.anmInfo[key]['$objs']['$text'] = $('.sevenfield-title');
}else if(jsName === 'fiveKeyJS'){
s.anmInfo[key]['$objs']['isStart'] = false;
s.anmInfo[key]['$objs']['isAnimetion'] = false;
s.anmInfo[key]['$objs']['$frame_parent'] = $('.section-fivekey');
s.anmInfo[key]['$objs']['$frame'] = $('.section-fivekey-frame');
s.anmInfo[key]['$objs']['$frame_inr'] = $('.section-fivekey-inr');
s.anmInfo[key]['$objs']['$bg'] = $('.section-fivekey_bg');
s.anmInfo[key]['$objs']['$box'] = $('.fivekey-box');
s.anmInfo[key]['$objs']['$item'] = $('.fivekey-item');
s.anmInfo[key]['$objs']['$text'] = $('.fivekey-title');
}else if(jsName === 'purposeJS'){
s.anmInfo[key]['$objs']['$root'] = $(this);
s.anmInfo[key]['$objs']['$bg'] = $(this).find('.p-purpose_bg');
s.anmInfo[key]['$objs']['$pt'] = $(this).find('.p-purpose_pt');
s.anmInfo[key]['$objs']['$txt_inr'] = $(this).find('.js-text_span_inr');
}else if(jsName === 'conferenceJS'){
s.anmInfo[key]['$objs']['$root'] = $(this);
s.anmInfo[key]['$objs']['$bg'] = $(this).find('.p-conference_bg');
s.anmInfo[key]['$objs']['$bg02'] = $(this).find('.p-conference_bg02');
s.anmInfo[key]['$objs']['$txt'] = $(this).find('.p-conference_text_inner');
s.anmInfo[key]['$objs']['$txt_inr'] = $(this).find('.js-text_span_inr');
};
s[jsName](i, 'init', 0);
});
this.onResize();
setTimeout(function(){
s.onResize();
}, 1000);
this.$win.on('load', $.proxy(this.onLoad, this));
this.$win.on('resize onorientationchange', $.proxy(this.onResize, this));
this.$win.on('scroll', $.proxy(this.onScroll, this));
this.$win.on(corp.Const.EVENT_CHANGE, $.proxy(this.onChange, this));
};
ScrollAnm.prototype.onLoad = function(e){
// var controller = new ScrollMagic.Controller();
// for(let i = 0; i < this.$section.length; i++) {
// // let tween = tm.fromTo(this.$section[i], .1, { opacity:0 }, {opacity:1});
// let scene = new ScrollMagic.Scene({
// triggerElement: this.$section[i],
// triggerHook: 0.8,
// duration: '80%'
// })
// .addTo(controller)
// .setClassToggle(this.$section[i], 'is-display');
// }
$('.purpose_link').on('click', $.proxy(this.onClick, this));
this.onResize();
};
ScrollAnm.prototype.onClick = function(e){
var target = e.currentTarget;
var link = $(target).data('href');
window.open(link, '_blank')
}
ScrollAnm.prototype.onResize = function(e){
var s = this
;
this.winW = this.$win.width();
this.winH = this.$win.height();
if (this.winW <= 768) {
this.deviceType = 'SP';
}else{
this.deviceType = 'PC';
};
for(var key in this.anmInfo){
var $target = $('#' + this.anmInfo[key]['id'])
;
this.anmInfo[key]['start'] = $target.offset().top;
this.anmInfo[key]['end'] = $target.offset().top + $target.outerHeight();
}
var H = $('.messageTop .l-col').innerHeight() + 120;
$('.messageTop').css({height:H+'px'});
this.onScroll();
};
ScrollAnm.prototype.onScroll = function(e){
var s = this
, extDelay = 0
, timing = 0.67
;
this.scT = document.documentElement.scrollTop || document.body.scrollTop;
for(var key in this.anmInfo){
if(this.anmInfo[key].jsName === 'heroJS'){
timing = 0.6;
}
if(this.anmInfo[key].jsName === 'solutionsJS'){
timing = 0.67;
}
if(this.anmInfo[key].jsName === 'sevenfieldJS'){
timing = 0.67;
// timing = 0.05;
}
if(this.anmInfo[key].jsName === 'fiveKeyJS'){
timing = 1.2;
// timing = 0.05;
}
if(this.anmInfo[key]['start'] <= s.scT + (s.winH * timing) && this.anmInfo[key]['end'] > s.scT + (s.winH * timing)){
var rate = ((s.scT + (s.winH * timing)) - this.anmInfo[key]['start']) / (this.anmInfo[key]['end'] - this.anmInfo[key]['start']);
if(this.anmInfo[key]['state'] === 'init'){
var $obj = $('#' + this.anmInfo[key]['id'])
;
this.anmInfo[key]['state'] = 'play';
s[this.anmInfo[key]['jsName']](key, 'play', extDelay, rate);
};
s[this.anmInfo[key]['jsName']](key, 'onScroll', extDelay, rate);
}else if((this.anmInfo[key]['start'] > s.scT + (s.winH * timing) || this.anmInfo[key]['end'] <= s.scT + (s.winH * timing)) && this.anmInfo[key]['state'] === 'play'){
this.anmInfo[key]['state'] = 'stop';
s[this.anmInfo[key]['jsName']](key, 'stop', extDelay, rate);
};
}
if($('.section-sevenfield')[0]){
if($('.section-sevenfield').offset().top <= this.scT){
if(!$('.section-sevenfield-frame').hasClass('is-fixed')){
$('.section-sevenfield-frame').addClass('is-fixed');
}
}else{
if($('.section-sevenfield-frame').hasClass('is-fixed')){
$('.section-sevenfield-frame').removeClass('is-fixed');
}
}
}
if($('.section-fivekey')[0]){
if($('.section-fivekey').offset().top <= this.scT){
if(!$('.section-fivekey-frame').hasClass('is-fixed')){
$('.section-fivekey-frame').addClass('is-fixed');
}
}else{
if($('.section-fivekey-frame').hasClass('is-fixed')){
$('.section-fivekey-frame').removeClass('is-fixed');
}
}
}
};
ScrollAnm.prototype.onChange = function(e){
var s = this
, extDelay = 0
, timing = 0.67
;
if(corp.Const.mode === 'pc'){
s.heroJS(0, 'reinit', 0);
// s.heroJS(0, 'play', 0);
s.messageTopJS(1, 'reinit', 0);
s.sevenfieldJS(2, 'reinit', 0);
s.fiveKeyJS(3, 'reinit', 0);
// s.sevenfieldJS(2, 'play', 0);
}
};
ScrollAnm.prototype.movieModal = function (id, event) {
var s = this
;
if(event === 'open' && this.modal.css('display') === 'none'){
this.modal.addClass('is-start');
tm.to(this.modal, 0.2, {
autoAlpha:1
, ease:Power4.easeIn
, onComplete:function(){
s.modalClose.focus();
s.modalPlayer.playVideo();
}
});
}else if(event === 'close' && this.modal.css('display') !== 'none'){
s.modalPlayer.stopVideo();
tm.to(this.modal, 0.2, {
autoAlpha:0
, ease:Power4.easeIn
, onComplete:function(){
s.modal.removeClass('is-start');
}
});
};
}
ScrollAnm.prototype.ModalMovie = function () {
var s = this
, id = $('.photo-youtube-bg').data('movie-id')
;
this.modalPlayer = new window['YT'].Player($('.p-modal-iframe-inr')[0], {
width: 640,
height: 480,
videoId: id,
host: 'https://www.youtube-nocookie.com',
playerVars:{
playsinline: 1,
autoplay: 0,
controls: 1,
loop: 1,
showinfo: 0,
rel: 0,
iv_load_policy: 3
}
});
}
ScrollAnm.prototype.heroJS = function(key, flg, extDelay, rate){
// console.log(key, flg, extDelay, rate);
var s = this
, $objs = this.anmInfo[key]['$objs']
, index = 0
, $$anm = function(anmIndex){
$('.root-cover').hide();
tm.set($objs['$root'], {
autoAlpha:1
});
var startDelay = 0.2;
var bg = $objs['heroArr'][anmIndex]['$grad'];
tm.to($objs['heroArr'][anmIndex]['$bg'], .1,
{ opacity:1, scale:1, onComplete:function(){
tm.to($objs['heroArr'][anmIndex]['$bg'], 4.5, { scale : '1.1' });
}}
);
tm.to({}, 0.5, { onComplete: function () {
bg.addClass('on');
}});
tm.to(bg, 1,
{
left:'-50%'
, ease:Circ.easeOut
, delay:startDelay + 0.3
}
);
if (s.deviceType === 'SP') {
tm.fromTo($objs['heroArr'][anmIndex]['$textcolWrapper'], 1, { opacity:0 }, {
opacity:1
, ease:Circ.easeOut
, delay:startDelay + 0.3
});
};
tm.to($objs['heroArr'][anmIndex]['$mark'], 0.2, {
autoAlpha:1
, scale:1
, ease:Power4.easeIn
, onComplete:function(){
if(corp.Const.frame.browser.ie.v11){
tm.to($objs['heroArr'][anmIndex]['$logo2'], 1, {
opacity:1
});
}else{
tm.set($objs['heroArr'][anmIndex]['$logo1'], { 'opacity':1 });
tm.set($objs['heroArr'][anmIndex]['$logo2'], { 'opacity':1 });
tm.to({}, 1, {onComplete: function () {
$objs['heroArr'][anmIndex]['stroke1'].play(1, function () {
tm.to($objs['heroArr'][anmIndex]['$logo1'], 1, {opacity:0});
});
}});
tm.to({}, 1.1, { onComplete: function () {$objs['heroArr'][anmIndex]['stroke2'].play(1);}});
}
}
});
$objs['heroArr'][anmIndex]['$txt'].each(function(i){
var delay = 2.3;
tm.to($(this), 1.3, { opacity:1, delay:delay, ease:Power1.easeIn });
})
tm.to($objs['heroArr'][anmIndex]['$logo_txt_sub'], 1.7,
{
y:'0'
, delay:2.1
, ease:Circ.easeOut
}
);
tm.to($objs['heroArr'][anmIndex]['$logo_txt_sub'], 1.1,
{
opacity:1
, ease:Power1.easeOut
, delay:2.1
}
);
tm.to($objs['heroArr'][anmIndex]['$logo_txt_main'], 1.7,
{
y:'0'
, delay:2.2
, ease:Circ.easeOut
}
);
tm.to($objs['heroArr'][anmIndex]['$logo_txt_main'], 1.1,
{
opacity : 1
, delay:2.2
, ease:Power1.easeOut
, onComplete:function(){
s.isFirstAnimetion = true;
}
}
);
}
;
if(flg === 'reinit' && corp.Const.mode !== 'sp'){
$objs['$hero'].each(function(j){
$objs['heroArr'][j] = {
'$grad':$(this).find('.hero_grad')
, '$mark':$(this).find('.hero_mark')
, '$bg':$(this).find('.hero_bg')
, '$logo_txt_main':$(this).find('.hero_title-logo .js-logo-main')
, '$logo_txt_sub':$(this).find('.hero_title-logo .js-logo-sub')
, '$txt':$(this).find('.hero_title .js-text_span_inr')
, '$logo1':$(this).find('.logo-1')
, '$logo2':$(this).find('.logo-2')
, '$textcolWrapper':$(this).find('.hero_textcol-wrapper')
, 'stroke1':''
, 'stroke2':''
};
tm.killTweensOf([
$objs['heroArr'][j]['$grad']
, $objs['heroArr'][j]['$bg']
, $objs['heroArr'][j]['$mark']
, $objs['heroArr'][j]['$txt']
, $objs['heroArr'][j]['$logo_txt']
]);
$objs['heroArr'][j]['$grad'].addClass('on');
tm.set($objs['heroArr'][j]['$grad'], {
left:'-50%'
});
tm.set($objs['heroArr'][j]['$bg'], {
opacity:1
});
tm.set($objs['heroArr'][j]['$mark'], {
autoAlpha:1
, scale:1
});
tm.set($objs['heroArr'][j]['$txt'], {
opacity:1
});
tm.set($objs['heroArr'][j]['$logo_txt_main'], {
opacity:1
, y : '0px'
});
tm.set($objs['heroArr'][j]['$logo_txt_sub'], {
opacity:1
, y : '0px'
});
tm.set($objs['heroArr'][j]['$logo1'], {
opacity:1
});
tm.set($objs['heroArr'][j]['$logo2'], {
opacity:1
});
})
}
if(flg === 'init' && corp.Const.mode !== 'sp'){
// tm.killTweensOf($objs['$frame']);
$objs['$hero'].each(function(j){
$objs['heroArr'][j] = {
'$grad':$(this).find('.hero_grad')
, '$mark':$(this).find('.hero_mark')
, '$bg':$(this).find('.hero_bg')
, '$logo_txt_main':$(this).find('.hero_title-logo .js-logo-main')
, '$logo_txt_sub':$(this).find('.hero_title-logo .js-logo-sub')
, '$txt':$(this).find('.hero_title .js-text_span_inr')
, '$logo1':$(this).find('.logo-1')
, '$logo2':$(this).find('.logo-2')
, '$textcolWrapper':$(this).find('.hero_textcol-wrapper')
, 'stroke1':''
, 'stroke2':''
};
tm.killTweensOf([
$objs['heroArr'][j]['$grad']
, $objs['heroArr'][j]['$bg']
, $objs['heroArr'][j]['$mark']
, $objs['heroArr'][j]['$txt']
, $objs['heroArr'][j]['$logo_txt']
]);
tm.set($objs['heroArr'][j]['$grad'], {
left:'-102%'
});
tm.set($objs['heroArr'][j]['$bg'], {
opacity:0
});
tm.set($objs['heroArr'][j]['$mark'], {
autoAlpha:0
, scale:1
});
tm.set($objs['heroArr'][j]['$txt'], {
opacity:0
});
tm.set($objs['heroArr'][j]['$logo_txt_main'], {
opacity:0
, y : '65px'
});
tm.set($objs['heroArr'][j]['$logo_txt_sub'], {
opacity:0
, y : '60px'
});
if(corp.Const.frame.browser.ie.v11){
tm.set($objs['heroArr'][j]['$logo2'], {
opacity:0
});
}else{
$objs['heroArr'][j]['stroke1'] = new Vivus($objs['heroArr'][j]['$logo1'][0], {
type: 'oneByOne',
start: 'manual',
duration: 100,
forceRender: false,
animTimingFunction: Vivus.EASE_OUT,
});
$objs['heroArr'][j]['stroke2'] = new Vivus($objs['heroArr'][j]['$logo2'][0], {
type: 'oneByOne',
start: 'manual',
duration: 100,
forceRender: false,
animTimingFunction: Vivus.EASE_OUT,
});
}
})
}else if(flg === 'play' && corp.Const.mode !== 'sp'){
tm.to($objs['$root'], 0.3, {
autoAlpha:1
});
if(!this.isFirstAnimetion){
if($('html').hasClass('js-scroll-up')){
console.log('init_play_up');
tm.set($('.js-text_span_inr'), { opacity:0 });
}
$$anm(index);
}
}else if(flg === 'stop' && corp.Const.mode !== 'sp'){
if($('html').hasClass('js-scroll-up')){
tm.to($objs['$root'], 0.3, {
autoAlpha:0
, onComplete:function(){
s.anmInfo[key]['state'] = 'init';
s.heroJS(key, 'init', extDelay);
}
});
}else{
tm.to($objs['$root'], 0.3, {
autoAlpha:0
, onComplete:function(){
s.anmInfo[key]['state'] = 'init';
}
});
}
};
if(flg === 'onScroll' && corp.Const.mode !== 'sp'){
if(rate >= 0.3){
if(!$objs['$frame'].hasClass('is-fixed')){
$objs['$frame'].addClass('is-fixed');
}
}else{
if($objs['$frame'].hasClass('is-fixed')){
$objs['$frame'].removeClass('is-fixed');
}
}
if(rate >= 0.7){
if(!this.FA_toggle){
this.FA_toggle=true;
tm.to($objs['heroArr'][index]['$grad'], 0.3, {
opacity:0
});
tm.to($objs['heroArr'][index]['$txt'], 0.3, {
opacity:0
});
tm.to($objs['heroArr'][index]['$logo_txt_main'], 0.3, {
opacity:0
});
tm.to($objs['heroArr'][index]['$logo_txt_sub'], 0.3, {
opacity:0
});
}
var s2 = 15 * (rate - 0.7) + 1;
tm.set($objs['heroArr'][index]['$mark'], {
scale:s2
});
var opa = 1 - ((rate - 0.7)*2);
// tm.set($txt, {
// opacity:opa
// });
tm.set($objs['$root'], {
opacity:opa
});
}else{
if(this.FA_toggle){
this.FA_toggle=false;
tm.to($objs['heroArr'][index]['$grad'], 0.3, {
opacity:1
});
if(this.isFirstAnimetion){
tm.to($objs['heroArr'][index]['$txt'], 0.3, {
opacity:1
});
tm.to($objs['heroArr'][index]['$logo_txt_main'], 0.3, {
opacity:1
});
tm.to($objs['heroArr'][index]['$logo_txt_sub'], 0.3, {
opacity:1
});
}
}
tm.set($objs['heroArr'][index]['$mark'], {
scale:1
});
tm.set($objs['$root'], {
opacity:1
});
}
};
};
ScrollAnm.prototype.messageTopJS = function(key, flg, extDelay, rate){
var s = this
, $objs = this.anmInfo[key]['$objs']
, H = 0
;
if(flg === 'init' && corp.Const.mode !== 'sp'){
H = $('.messageTop .l-col').innerHeight() + 120;
$('.messageTop').css({height:H+'px'});
tm.killTweensOf([
$objs['$sec']
, $objs['$block']
]);
tm.set($objs['$sec'], {
autoAlpha:0
});
tm.set($objs['$block'], {
opacity:0
});
// $('.message .l-section').removeClass('off');
} else if(flg === 'play' && corp.Const.mode !== 'sp') {
tm.to($objs['$sec'], 0.1, {
autoAlpha:1
});
tm.to($objs['$block'], .4, { opacity:1, delay:0.1, ease:Power1.easeOut });
} else if(flg === 'stop' && corp.Const.mode !== 'sp'){
if($('html').hasClass('js-scroll-up')) {
tm.to($objs['$sec'], 0.1, {
autoAlpha:1
, onComplete:function(){
s.anmInfo[key]['state'] = 'init';
s.messageTopJS(key, 'init', extDelay);
}
});
} else {
tm.to($objs['$sec'], 0.1, {
autoAlpha:1
, onComplete:function(){
s.anmInfo[key]['state'] = 'init';
// s.messageTopJS(key, 'init', extDelay);
}
});
}
}
if(flg === 'reinit' && corp.Const.mode !== 'sp'){
H = $('.messageTop .l-col').innerHeight() + 120;
$('.messageTop').css({height:H+'px'});
tm.killTweensOf([
$objs['$sec']
, $objs['$block']
]);
tm.set($objs['$sec'], {
autoAlpha:1
});
tm.set($objs['$block'], {
opacity:1
});
}
if(flg === 'onScroll'){
// if(!corp.Const.frame.browser.ie.v11){
// var scT = document.documentElement.scrollTop || document.body.scrollTop;
// var top = 1500 * rate;
// if(rate <= 0.5){
// tm.set($('.messageTop'), {
// y: 0
// });
// }
// else if(rate > 0.5 && rate < 0.9){
// tm.set($('.messageTop'), {
// y: 1000 * (rate - 0.5)
// });
// }
// tm.set($objs['$sec'], {
// y:top
// });
// }
}
}
ScrollAnm.prototype.sevenfieldJS = function(key, flg, extDelay, rate){
var s = this
, $objs = this.anmInfo[key]['$objs']
, text = $objs['$text'].text()
, dataArray = text.split('').slice(0);
;
if(flg === 'init' && corp.Const.mode !== 'sp'){
// new corp.SpanWrap('.sevenfield-title strong');
tm.killTweensOf([
$objs['$frame']
, $objs['$frame_inr']
, $objs['$bg']
, $objs['$item']
, $objs['$text']
]);
tm.to($objs['$frame'], 0, {
autoAlpha:0
});
tm.set($objs['$bg'], {
opacity:0
});
tm.set($objs['$frame_inr'], {
top:'50%'
});
// tm.set($objs['$item'], {
// opacity:0,
// y:100
// });
// tm.set($objs['$text'], {
// opacity:0
// , y : '30px'
// });
}else if(flg === 'play' && corp.Const.mode !== 'sp'){
tm.to($objs['$frame'], 0.3, {
autoAlpha:1
});
tm.to($objs['$bg'], 0.1, {
opacity:1
});
}else if(flg === 'stop' && corp.Const.mode !== 'sp'){
if($('html').hasClass('js-scroll-up')){
tm.to($objs['$frame'], 0.3, {
autoAlpha:0
, onComplete:function(){
s.anmInfo[key]['state'] = 'init';
s.sevenfieldJS(key, 'init', extDelay);
// tm.set($objs['$frame_inr'], {top:'50%'});
// tm.set($objs['$frame_parent'], {height:'300vh'});
}
});
} else {
// tm.set($objs['$frame'], {position:'relative'});
tm.to($objs['$frame'], 0.3, {
autoAlpha:0
, onComplete:function(){
s.anmInfo[key]['state'] = 'init';
// tm.set($objs['$frame_inr'], {top:'50%'});
// s.sevenfieldJS(key, 'init', extDelay);
// tm.set($objs['$frame'], {position:'relative'});
// tm.set($objs['$frame_parent'], {height:'100vh'});
}
});
}
}
if(flg === 'reinit' && corp.Const.mode !== 'sp'){
// new corp.SpanWrap('.sevenfield-title strong');
tm.killTweensOf([
$objs['$frame']
, $objs['$frame_inr']
, $objs['$bg']
, $objs['$item']
, $objs['$text']
]);
tm.to($objs['$frame'], 0, {
autoAlpha:1
});
tm.set($objs['$bg'], {
opacity:1
});
tm.set($objs['$frame_inr'], {
top:'50%'
});
tm.set($objs['$item'], {
opacity:1,
y:0
});
}
if(flg === 'onScroll' && corp.Const.mode !== 'sp'){
if(rate >= 0.05 && rate <= 0.95){
// $('.section-sevenfield_bg').addClass('is-display');
$('.l-main').addClass('is-display');
}else {
// $('.section-sevenfield_bg').removeClass('is-display');
$('.l-main').removeClass('is-display');
}
if (rate >= 0.05) {
// 消えるモーション
if (!$objs['isAnimetion']) {
tm.killTweensOf([$objs['$item']]);
// tm.to($objs['$text'], 1,
// {
// y:'0'
// ,delay:0.2
// , ease: Power3.easeOut
// }
// );
// tm.to($objs['$text'], .6,
// {
// opacity:1
// ,delay:0.2
// , ease: Power1.easeIn
// }
// );
$objs['$text'].addClass('is-animetion');
$objs['$box'].addClass('is-animetion');
// $objs['$item'].each(function(i){
// tm.to($(this), 1, {
// y:0
// , ease:Expo.easeOut
// , delay:(0.15 * i)
// });
// tm.to($(this), 1.1, {
// opacity:1
// , delay:(0.15 * i)
// // , onComplete:function(){
// // if(i === $objs['$item'].length - 1){
// // $objs['isAnimetion'] = true;
// // }
// // }
// });
// });
$objs['isAnimetion'] = true;
}
}else{
if ($objs['isAnimetion']) {
tm.killTweensOf([$objs['$item']]);
$objs['$text'].removeClass('is-animetion');
$objs['$box'].removeClass('is-animetion');
// tm.to($objs['$text'], 0.3,
// {
// y:'50px'
// , opacity:0
// }
// );
// tm.to($objs['$item'], 0.3,
// {
// y:40
// , opacity:0
// // , onComplete:function(){
// // $objs['isAnimetion'] = false;
// // }
// }
// );
$objs['isAnimetion'] = false;
}
}
// if(rate >= 0.03){
// if(!$objs['$text'].hasClass('is-animetion')){
// $objs['$text'].addClass('is-animetion');
// }
// if(!this.SF_toggle){
// this.SF_toggle = true;
// // this.scrollCancel();
// // tm.fromTo($objs['$frame_inr'], 1, { top:'80%' }, { top:'50%', ease:Expo.easeOut });
// $objs['$item'].each(function(i){
// tm.to($(this), 1, {
// y:0
// , ease:Expo.easeOut
// , delay:(0.15 * i) + .75
// });
// tm.to($(this), 1.1, {
// opacity:1
// , delay:(0.15 * i) + .75
// });
// });
// }
// }else{
// if($objs['$text'].hasClass('is-animetion')){
// $objs['$text'].removeClass('is-animetion');
// }
// if(this.SF_toggle){
// this.SF_toggle = false;
// // this.scrollCancel();
// $($objs['$item'].get().reverse()).each(function(i){
// tm.to($(this), 0.33, {
// opacity:0, y:40
// , ease:Power3.easeInOut
// , delay:(0.10 * i) + .6
// , onComplete:function(){
// if(i === $objs['$item'].length - 1){
// // tm.to($objs['$frame_inr'], .3, { top:'80%', ease:Quart.easeOut });
// // s.scrollRelease();
// }
// }
// });
// });
// }
// }
if (rate >= 0.9) {
// 消えるモーション
if($('.p-movie')[0]){
if (!$objs['isStart']) {
tm.killTweensOf([$objs['$frame_inr']]);
tm.set($objs['$frame_inr'], {top:'50%'});
tm.to($objs['$frame_inr'], 0.3, { css:{transform:'translate(-50%, -60px)', opacity:0}, ease:Quart.easeInOut });
// tm.fromTo($('.p-movie-space'), 0.3, { y:'-100px', opacity:0 }, { y:'0', opacity:1, ease:Quart.easeInOut });
$objs['isStart'] = true;
}
}
}else{
if($('.p-movie')[0]){
if ($objs['isStart']) {
tm.killTweensOf([$objs['$frame_inr']]);
tm.to($objs['$frame_inr'], 0.3, { css:{transform:'translate(-50%, -50%)', opacity:1}, delay:0.2, ease:Quart.easeInOut })
// tm.fromTo($('.p-movie-space'), 0.3, { y:'0', opacity:1 }, { y:'-100px', opacity:0, ease:Quart.easeInOut });
$objs['isStart'] = false;
}
}
}
}
}
ScrollAnm.prototype.fiveKeyJS = function(key, flg, extDelay, rate){
var s = this
, $objs = this.anmInfo[key]['$objs']
, text = $objs['$text'].text()
, dataArray = text.split('').slice(0);
;
if(flg === 'init' && corp.Const.mode !== 'sp'){
tm.killTweensOf([
$objs['$frame']
, $objs['$frame_inr']
, $objs['$bg']
, $objs['$item']
, $objs['$text']
]);
tm.to($objs['$frame'], 0, {
autoAlpha:0
});
tm.set($objs['$bg'], {
opacity:0
});
tm.set($objs['$frame_inr'], {
top:'50%'
});
}else if(flg === 'play' && corp.Const.mode !== 'sp'){
tm.to($objs['$frame'], 0.3, {
autoAlpha:1
});
tm.to($objs['$bg'], 0.1, {
opacity:1
});
}else if(flg === 'stop' && corp.Const.mode !== 'sp'){
if($('html').hasClass('js-scroll-up')){
tm.to($objs['$frame'], 0.3, {
autoAlpha:0
, onComplete:function(){
s.anmInfo[key]['state'] = 'init';
s.fiveKeyJS(key, 'init', extDelay);
}
});
} else {
// tm.set($objs['$frame'], {position:'relative'});
tm.to($objs['$frame'], 0.3, {
autoAlpha:0
, onComplete:function(){
s.anmInfo[key]['state'] = 'init';
}
});
}
}
if(flg === 'reinit' && corp.Const.mode !== 'sp'){
tm.killTweensOf([
$objs['$frame']
, $objs['$frame_inr']
, $objs['$bg']
, $objs['$item']
, $objs['$text']
]);
tm.to($objs['$frame'], 0, {
autoAlpha:1
});
tm.set($objs['$bg'], {
opacity:1
});
tm.set($objs['$frame_inr'], {
top:'50%'
});
tm.set($objs['$item'], {
opacity:1,
y:0
});
}
if(flg === 'onScroll' && corp.Const.mode !== 'sp'){
if(rate >= 0.05 && rate <= 0.95){
$('.l-main').addClass('is-display');
}else {
$('.l-main').removeClass('is-display');
}
if (rate >= 0.05) {
// 消えるモーション
if (!$objs['isAnimetion']) {
tm.killTweensOf([$objs['$item']]);
$objs['$text'].addClass('is-animetion');
$objs['$box'].addClass('is-animetion');
$objs['isAnimetion'] = true;
}
}else{
if ($objs['isAnimetion']) {
tm.killTweensOf([$objs['$item']]);
$objs['$text'].removeClass('is-animetion');
$objs['$box'].removeClass('is-animetion');
$objs['isAnimetion'] = false;
}
}
if (rate >= 0.9) {
// 消えるモーション
if($('.p-movie')[0]){
if (!$objs['isStart']) {
tm.killTweensOf([$objs['$frame_inr']]);
tm.set($objs['$frame_inr'], {top:'50%'});
tm.to($objs['$frame_inr'], 0.3, { css:{transform:'translate(-50%, -60px)', opacity:0}, ease:Quart.easeInOut });
$objs['isStart'] = true;
}
}
}else{
if($('.p-movie')[0]){
if ($objs['isStart']) {
tm.killTweensOf([$objs['$frame_inr']]);
tm.to($objs['$frame_inr'], 0.3, { css:{transform:'translate(-50%, -50%)', opacity:1}, delay:0.2, ease:Quart.easeInOut })
$objs['isStart'] = false;
}
}
}
}
}
ScrollAnm.prototype.purposeJS = function(key, flg, extDelay, rate){
var s = this
, $objs = this.anmInfo[key]['$objs']
;
if(flg === 'init'){
tm.killTweensOf([
$objs['$bg']
, $objs['$pt']
, $objs['$txt_inr']
]);
tm.set($objs['$pt'], {
opacity:1
});
tm.set($objs['$bg'], {
opacity:1
});
tm.set($objs['$txt_inr'], {
top:'101%'
, opacity:1
, y:0
});
// var controller = new ScrollMagic.Controller();
// if(!corp.Const.frame.browser.ie.v11){
// var scene = new ScrollMagic.Scene({
// triggerElement: ".p-purpose",
// duration: "90%",
// triggerHook: 0
// })
// .setPin('.p-purpose')
// .addTo(controller);
// var scene = new ScrollMagic.Scene({
// triggerElement: ".p-slide",
// duration: "90%",
// triggerHook: 0
// })
// .setPin('.p-slide')
// .addTo(controller);
// }
}else if(flg === 'play'){
// tm.to($objs['$bg'], 0.6, {
// opacity:1
// , ease:Power4.easeIn
// });
// tm.to($objs['$pt'], 0.6, {
// opacity:1
// , ease:Power4.easeIn
// , delay:0.5
// });
// $objs['$txt_inr'].each(function(i){
// tm.to($(this), 1, {
// top:'0%'
// , opacity:1, y:0
// , ease:Power3.easeOut
// , delay:(0.2 * i) + 1.2
// });
// });
}else if(flg === 'stop'){
};
if(flg === 'onScroll'){
};
};
ScrollAnm.prototype.conferenceJS = function(key, flg, extDelay, rate){
var s = this
, $objs = this.anmInfo[key]['$objs']
;
if(flg === 'init'){
tm.killTweensOf([
$objs['$bg']
, $objs['$bg02']
, $objs['$txt']
, $objs['$txt_inr']
]);
tm.set($objs['$bg'], {
opacity:1
});
tm.set($objs['$bg02'], {
right:0
});
tm.set($objs['$txt'], {
opacity:1
, top:0
});
tm.set($objs['$txt_inr'], {
top:'0%'
, opacity:1
, y:0
});
}else if(flg === 'play'){
// tm.to($objs['$bg'], 0.6, {
// opacity:1
// , ease:Power4.easeIn
// });
// tm.to($objs['$bg02'], 0.6, {
// right:0
// , ease:Power4.easeIn
// , delay:0.5
// });
// tm.to($objs['$txt'], 0.6, {
// opacity:1
// , top:0
// , ease:Power3.easeOut
// , delay:1.2
// });
// $objs['$txt_inr'].each(function(i){
// tm.to($(this), 1, {
// top:'0%'
// , opacity:1, y:0
// , ease:Power3.easeOut
// , delay:(0.2 * i) + 1.5
// });
// });
}else if(flg === 'stop'){
};
if(flg === 'onScroll'){
};
};
ScrollAnm.prototype.anm = function(key, flg, extDelay, rate){
var s = this
, $objs = this.anmInfo[key]['$objs']
, baseDelay = 0
, spd = 0.3
, delaySpd = 0.25
, counter = 0
, len = $objs.length
, totalDelay = baseDelay
;
for(var key2 in $objs){
var $target = $('#' + $objs[key2]['id'])
, delay = $objs[key2]['anmDelay'] + Number(extDelay)
;
delay = (delaySpd * counter) + delay;
totalDelay = totalDelay + delay;
if($objs[key2]['anmType'] === 'fade'){
if(flg === 'init'){
tm.set($target, {
opacity:0
});
}else if(flg === 'play'){
tm.to($target, spd, {
opacity:1
, delay:delay
, ease:Sine.easeOut
});
}else if(flg === 'stop'){
// $objs[key2]['state'] = 'init';
// s.anm(key, 'init', delay);
}
}else if($objs[key2]['anmType'] === 'fadeUp'){
if(flg === 'init'){
tm.set($target, {
opacity:0
, top:20
});
}else if(flg === 'play'){
tm.to($target, spd, {
opacity:1
, top:0
, delay:delay
, ease:Sine.easeOut
});
};
}else if($objs[key2]['anmType'] === 'fadeSpin'){
if(flg === 'init'){
tm.set($target, {
opacity:0
, scale:0
});
tm.set($target.find('img'), {
rotation:1
});
}else if(flg === 'play'){
tm.to($target, spd, {
opacity:1
, scale:1
, delay:delay
, ease:Back.easeOut
});
tm.to($target.find('img'), spd, {
rotation:360
, delay:delay
, ease:Sine.easeOut
});
};
}else if($objs[key2]['anmType'] === 'spread'){
if(flg === 'init'){
tm.set($target, {
opacity:0
, scale:1
});
}else if(flg === 'play'){
tm.to($target, spd, {
opacity:1
, scale:1.1
, delay:delay
, ease:Power3.easeOut
});
};
}else{
if(flg === 'init'){
tm.set($target, {
opacity:0
});
}else if(flg === 'play'){
tm.to($target, 0.5, {
opacity:1
, delay:delay
, ease:Power3.easeOut
});
};
};
counter++;
}
};
ScrollAnm.prototype.scrollCancel = function(event){
$('html *').css('overflow','hidden');
$(window).on('touchmove.noScroll', function(e) {
e.preventDefault();
});
};
ScrollAnm.prototype.scrollRelease = function(event){
$('html *').css('overflow','visible');
$(window).off('.noScroll');
};
return ScrollAnm;
}());
corp.ScrollAnm = ScrollAnm;
})(corp || (corp = {}));
var corp;
(function (corp) {
var Movie = (function () {
function Movie() {
this.$win = $(window);
this.$youtube = $('.js-youtube');
this.youtube = new corp.Youtube();
this.player;
this.isPlay = false;
this.winW = this.$win.width();
this.winH = this.$win.height();
this.$fitImg = $('.photo-youtube-bg');
this.movieSection = $('.p-movie');
this.movieSectionStrat = this.movieSection.offset().top;
this.movieSectionEnd = this.movieSection.offset().top + this.movieSection.outerHeight();
this.init();
}
Movie.prototype.init = function () {
var _this = this;
$(window)
.on('resize onorientationchange', $.proxy(this.resize, this))
.on('scroll', $.proxy(this.onScroll, this));
this.load();
};
Movie.prototype.onPlayerReady = function (event) {
this.player = event.target;
event.target.mute();
if(!this.isPlay) eventTarget.playVideo();
// event.target.playVideo();
};
Movie.prototype.onPlayerStateChange = function (event) {
var status = event.data;
if (status == window['YT'].PlayerState.ENDED) {
event.target.playVideo();
}
};
Movie.prototype.load = function () {
if(this.$youtube.length !== 0 && !corp.Const.frame.browser.ie.v11){
var events, $target, _self = this, player;
this.$youtube.each(function(index, el) {
$target = $(this);
events = {
onReady:function(event){
_self.playerReady(event);
},
onStateChange:function(event){
_self.playerStateChange(event);
}
}
player = _self.youtube.add($(this), events);
this.player = player;
});
}
var _this = this;
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: ".p-movie",
triggerHook: "onEnter",
duration: "300%"
})
.on("enter", function (event) {
if(typeof _this.player !== 'undefined'){
this.isPlay = true;
_this.player.playVideo();
}
})
.on("leave", function (event) {
if(typeof _this.player !== 'undefined'){
_this.player.pauseVideo();
}
})
.addTo(controller);
// if(!corp.Const.frame.browser.ie.v11){
// var scene2 = new ScrollMagic.Scene({
// triggerElement: ".p-movie-space",
// duration: "100%",
// triggerHook: 0
// })
// .setPin('.p-movie-space')
// .addTo(controller);
// }
var scene2 = new ScrollMagic.Scene({
triggerElement: ".p-movie-space",
duration: "100%",
triggerHook: 0
})
.setPin('.p-movie-space')
.addTo(controller);
this.$fitImg.each(function(index, el) {
_this.fitImg($(this));
});
};
Movie.prototype.playerReady = function (event) {
this.$youtube.addClass('is-init');
var eventTarget = event.target;
this.player = eventTarget;
// eventTarget.playVideo();
if(!this.isPlay) eventTarget.playVideo();
eventTarget.mute();
};
Movie.prototype.playerStateChange = function (event) {
var eventTarget = event.target;
if (event.data === window['YT'].PlayerState.ENDED) {
eventTarget.playVideo();
}
};
Movie.prototype.onPlay = function () {
if(typeof this.player !== 'undefined'){
this.isPlay = true;
this.player.playVideo();
}
};
Movie.prototype.onStop = function () {
if(typeof this.player !== 'undefined'){
this.player.pauseVideo();
}
};
Movie.prototype.resize = function () {
var _this = this;
this.winW = this.$win.width();
this.winH = this.$win.height();
this.movieSectionStrat = this.movieSection.offset().top;
this.movieSectionEnd = this.movieSection.offset().top + this.movieSection.outerHeight();
this.$fitImg.each(function(index, el) {
_this.fitImg($(this));
});
this.onScroll();
};
Movie.prototype.onScroll = function () {
var scT = document.documentElement.scrollTop || document.body.scrollTop;
if(this.movieSectionStrat <= scT + (this.winH * 1.2) && this.movieSectionEnd > scT - this.winH - 300) {
if(!this.movieSection.hasClass('is-start')){
this.movieSection.addClass('is-start');
}
}else{
if(this.movieSection.hasClass('is-start')){
this.movieSection.removeClass('is-start');
}
}
};
Movie.prototype.fitImg = function ($target) {
var parent = $target.parent();
var imgW = 1920;
var imgH = 1080;
var parentW = parent.width();
var parentH = parent.height();
if(corp.Const.mode === 'pc' && parentH < 900){
imgH = 900;
imgW = 900*16/9;
}
var scaleW = parentW / imgW;
var scaleH = parentH / imgH;
var fixScale = Math.max(scaleW, scaleH);
var setW = imgW * fixScale;
var setH = imgH * fixScale;
var moveX = Math.floor((parentW - setW) / 2);
var moveY = Math.floor((parentH - setH) / 2);
var bottom = 0;
if(corp.Const.mode === 'pc' && parentH < 720){
if(parentW > 1500){
bottom = -30;
}
if(parentW > 1650){
bottom = -50;
}
}else if(corp.Const.mode === 'pc' && parentH < 760){
if(parentW > 1650){
bottom = -20;
}
if(parentW > 1750){
bottom = -40;
}
}
$target.css({
'position': 'absolute',
'width': setW,
'height': setH,
'left' : moveX,
'bottom' : bottom
});
};
return Movie;
}());
corp.Movie = Movie;
})(corp || (corp = {}));
var corp;
(function (corp) {
var Youtube = (function () {
function Youtube() {
this._isInit = false;
this._isReady = false;
this._isReadyAfter = [];
this.init();
}
Youtube.prototype.init = function () {
var tag = document.createElement('script'), firstScriptTag;
tag.src = 'https://www.youtube.com/iframe_api';
firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
window['onYouTubeIframeAPIReady'] = $.proxy(this.ready, this);
this._isInit = true;
};
Youtube.prototype.ready = function () {
// console.log('ready');
this._isReady = true;
var i = 0, list = this._isReadyAfter, len = list.length;
while(i');
//IE11でSVGにフォーカスが当たらないようにする
if(corp.Const.frame.browser.ie.v11){
var svgArr = [
$('.p-header').find('svg'),
$('.l-main').find('svg')
];
$.each(svgArr, function(){
$(this).attr('focusable','false');
});
}
this.$btnRegigonChange.on('click',function(e){
e.preventDefault();
if(corp.Const.mode !== 'pc') {
if(_this.isLocationOpen === false) {
_this.LocationOpen();
} else {
_this.LocationClose();
}
} else {
var drawer = $(this).next('.js-drawer');
if( _this.isDrawerOpen === true ) {
_this.drawerClose(drawer);
} else {
_this.drawerOpen(drawer);
}
}
});
this.$btnSearch.on('click',function(e){
e.preventDefault();
if(!_this.isSearchOpen) {
_this.seachOpen();
}
});
this.$btnSearchClose.add(this.$drawerSearchBg).on('click',function(e){
e.preventDefault();
if(_this.isSearchOpen) {
_this.seachClose();
}
});
this.$btnSearchClose.on('blur',function(e){
e.preventDefault();
if(_this.isSearchOpen) {
_this.seachClose();
}
});
this.$btnHamburger.on('click',function(e){
e.preventDefault();
if(_this.isHamburgerOpen === false) {
if(_this.isLocationOpen) {
_this.LocationClose();
}
_this.HamburgerOpen();
} else {
_this.HamburgerClose();
}
});
// this.$win.on('resize',function(){
// if(corp.Const.mode != 'pc') {
// _this.slideWidth();
// }
// })
this.$win.on(corp.Const.EVENT_CHANGE,function(){
_this.modeChange('resize');
})
this._isInit = true;
};
Header.prototype.seachOpen = function(){
var timer;
_this = this;
_this.isSearchOpen = true;
_this.$body.addClass('is-header-search-open');
//_this.childFocus(_this.$drawerSearch);
timer = setTimeout(function(){
_this.$searchInput.focus();
clearTimeout(timer);
},300);
$('.js-header-bg').on('click',function(event){
_this.seachClose();
event.stopPropagation();
});
}
Header.prototype.seachClose = function(){
_this = this;
_this.isSearchOpen = false;
_this.$body.removeClass('is-header-search-open');
//_this.childNotFocus(_this.$drawerSearch);
_this.$btnSearch.focus();
$('.js-header-bg').off('click');
}
Header.prototype.drawerOpen = function(drawer){
_this = this;
if(corp.Const.mode === 'pc') {
tm.to(drawer[0],{
height: 'auto',
duration:0.5,
ease: "power2.inOut",
complete: function(){
drawer.parent().addClass('is-active')
_this.$body.addClass('is-header-drawer-open');
_this.openDrawer = drawer;
_this.isDrawerOpen = true;
//_this.childFocus(_this.openDrawer);
$('.js-header-bg').on('click',function(event){
_this.drawerClose(_this.openDrawer);
event.stopPropagation();
});
}
});
} else {
_this.$body.addClass('is-header-drawer-open');
_this.openDrawer = drawer;
//_this.childFocus(_this.openDrawer);
_this.isDrawerOpen = true;
}
}
Header.prototype.drawerClose = function(drawer){
_this = this;
if(corp.Const.mode === 'pc') {
tm.to(drawer[0],{
height: 0,
duration:0.5,
ease: "power2.inOut",
complete: function(){
_this.$body.removeClass('is-header-drawer-open');
drawer.parent().removeClass('is-active');
//_this.childNotFocus(_this.openDrawer);
_this.openDrawer = '';
_this.isDrawerOpen = false;
$('.js-header-bg').off('click');
}
});
} else {
_this.$body.removeClass('is-header-drawer-open');
drawer.css('height',0)
drawer.parent().removeClass('is-active');
//_this.childNotFocus(_this.openDrawer);
_this.openDrawer = '';
_this.isDrawerOpen = false;
$('.js-header-bg').off('click');
}
}
Header.prototype.HamburgerOpen = function() {
var _this = this;
if(this.isSearchOpen === true) {
this.seachClose();
}
if(this.isLocationOpen === true) {
this.LocationClose();
}
this.$body.addClass('is-header-hamburger-open');
//this.childFocus($('.p-header_globalnav'));
this.isHamburgerOpen = true;
$('.js-header-bg').on('click',function(event){
_this.HamburgerClose();
event.stopPropagation();
});
}
Header.prototype.HamburgerClose = function() {
if(this.isDrawerOpen === true) {
this.drawerClose(_this.openDrawer);
}
this.$body.removeClass('is-header-hamburger-open');
//this.childNotFocus($('.p-header_globalnav'));
this.isHamburgerOpen = false;
$('.js-header-bg').off('click');
}
Header.prototype.LocationOpen = function() {
if(this.isSearchOpen === true) {
this.seachClose();
}
if(this.isHamburgerOpen === true) {
this.HamburgerClose();
}
this.$body.addClass('is-header-location-open');
//this.childFocus(this.$drawerRegion);
this.isLocationOpen = true;
}
Header.prototype.LocationClose = function() {
if(this.isDrawerOpen === true) {
this.drawerClose(_this.openDrawer);
}
this.$body.removeClass('is-header-location-open');
//this.childNotFocus(this.$drawerRegion);
this.$drawerRegion.find('.p-header_drawer_inner').scrollTop(0);
this.isLocationOpen = false;
}
Header.prototype.childNotFocus = function(obj){
obj.find('a').attr('tabindex','-1');
obj.find('button').attr('tabindex','-1');
obj.find('input').attr('tabindex','-1');
}
Header.prototype.childFocus = function(obj){
obj.find('a').attr('tabindex','0');
obj.find('button').attr('tabindex','0');
obj.find('input').attr('tabindex','0');
}
// Header.prototype.slideWidth = function(){
// var w = window.innerWidth ? window.innerWidth : $(window).width();
// $('.p-header_regions-wrapper').css('width', w + 'px');
// $('.p-header_locations').css('width', w + 'px');
// }
Header.prototype.modeChange = function(event){
var _this = this;
if(corp.Const.mode === 'pc') {
//this.$drawerSearch.find('input').attr('tabindex','-1');
//this.$drawerSearch.find('button').attr('tabindex','-1');
//this.$drawerRegion.find('a').attr('tabindex','-1');
$('.p-header_locations').css('width', '');
//this.childFocus($('.p-header_globalnav'));
if(this.isHamburgerOpen === true ) {
this.HamburgerClose();
}
if(this.isSearchOpen === true) {
this.seachClose();
}
if( this.isLocationOpen === true) {
this.LocationClose();
}
}
if(corp.Const.mode != 'pc') {
if(event === 'resize') {
var timer;
this.$body.addClass('is-disp-md');
timer = setTimeout(function(){
_this.$body.removeClass('is-disp-md');
clearTimeout(timer);
},100);
}
//this.childNotFocus($('.p-header_globalnav'));
//this.$drawerRegion.find('a').attr('tabindex','-1');
//this.slideWidth();
if(this.isSearchOpen === true) {
this.seachClose();
}
if(this.isDrawerOpen === true) {
this.drawerClose(_this.openDrawer);
}
}
}
return Header;
}());
corp.Header = Header;
})(corp || (corp = {}));