');
if (videourl && !ismobile) {
html.push(getvideohtml(videourl));
} else {
html.push('
');
}
html.push('
');
html.push('');
});
return html.join('');
})()),
$visualvideos = [],
$mediabox = $visualbox.querySelector('.media'),
$contentbox = createnode('div', 'content', [
'
', $worktitle.innerHTML, '
',
'
',
'
'
].join(''), $widebox),
_$workbox = $workbox.cloneNode(true),
_$mentbox = $mentbox.cloneNode(true),
$rollingboxs = [].slice.call($widebox.querySelectorAll('.rolling')),
$rollinggroups = [
[].slice.call($visualbox.children),
[].slice.call(_$workbox.children),
[].slice.call(_$mentbox.children)
],
isfaking = false,
targetindex = 0;
$rollingboxs[0].appendChild($visualbox);
$rollingboxs[1].appendChild(_$workbox);
$rollingboxs[2].classList.add('ments');
$rollingboxs[2].appendChild(_$mentbox);
$rollinggroups.forEach(function($group, index) {
var $fake = $group[0].cloneNode(true);
$group[0].parentNode.appendChild($fake);
$group.push($fake);
$fake = $group[numworks-1].cloneNode(true);
$group[0].parentNode.insertBefore($fake, $group[0]);
$group.unshift($fake);
});
$rollinggroups[0].forEach(function($item, index) {
$visualvideos[index] = $item.querySelector('video');
if ($visualvideos[index]) { // for firefox autoplay error with cloned video
var $parent = $visualvideos[index].parentNode;
$parent.innerHTML = $parent.innerHTML;
$visualvideos[index] = $parent.querySelector('video');
}
});
[].forEach.call(_$workbox.querySelectorAll('a'), function($link) {
$link.addEventListener('mouseenter', pausetimer, false);
$link.addEventListener('mouseleave', unpausetimer, false);
});
function onchanged() {
if (isfaking) {
rolling(true);
}
$visualvideos.forEach(function($video, index) {
if ($video && index !== currentindex+1) {
resetvideo($video);
}
});
}
function change(fromauto) {
$widebox.classList.add('active');
rolling(false, fromauto);
}
function rolling(withoutanimation, fromauto) {
isfaking = (fromauto === 1 && currentindex === 0) || (fromauto === -1 && currentindex === numworks-1);
targetindex = isfaking ? fromauto === 1 ? numworks+1 : 0 : currentindex+1;
if (withoutanimation) {
$widebox.classList.add(notransitionclassname);
}
$rollingboxs.forEach(function($rollingbox, index) {
if (index > 0) {
$rollingbox.style.height = $rollinggroups[index][targetindex].offsetHeight +'px';
}
// if (1 > index) {
// $rollingbox.children[0].style.transform = 'translate3d(0, -'+ (100*targetindex) +'px, 0)';
// } else {
$rollingbox.children[0].style.transform = 'translate3d(0, -'+ $rollinggroups[index][targetindex].offsetTop +'px, 0)';
// }
$rollinggroups[index].forEach(setcurrentitem);
});
reflowtrick();
if (withoutanimation) {
$widebox.classList.remove(notransitionclassname);
}
if ($visualvideos[targetindex]) {
$visualvideos[targetindex].play();
if (isfaking) {
$visualvideos[currentindex+1].play();
}
}
}
function setcurrentitem($item, index) {
$item.classList[index === targetindex ? 'add' : 'remove']('on');
}
function show() {
$widebox.appendChild($paging);
$index.insertBefore($widebox, $introduce);
$timer && $contentbox.appendChild($timer);
resize();
}
function hide() {
$visualvideos.forEach(resetvideo);
removenode($widebox);
}
function resize() {
var mediaboxwidth = $mediabox.offsetWidth,
mediaboxheight = $mediabox.offsetHeight;
$visualvideos.forEach(function($video) {
$video && resizevideo($video, mediaboxwidth, mediaboxheight);
});
rolling(true);
}
return {
show: show,
hide: hide,
change: change,
onchanged: onchanged,
resize: resize
}
})();
// narrow
var narrow = (function() {
var $narrowbox = createnode('div', 'narrow', (function() {
var html = [
'
',
'
', $worktitle.innerHTML, '
',
// '
',
'
'
];
html.push('
');
html.push('
');
html.push('
');
return html.join('');
})()),
$contentbox = $narrowbox.querySelector('.content'),
swiper = null;
[].forEach.call($narrowbox.querySelectorAll('.swiper-slide p'), function($title) {
$title.setAttribute('data-swiper-parallax', -200);
$title.setAttribute('data-swiper-parallax-duration', 800);
});
// [].forEach.call($narrowbox.querySelectorAll('.swiper-slide span'), function($ment) {
// $ment.setAttribute('data-swiper-parallax', -200);
// $ment.setAttribute('data-swiper-parallax-duration', 1000);
// });
function onchanged() {}
function setswiper() {
swiper = new Swiper($narrowbox.querySelector('.swiper-container'), {speed: 800, loop: true, parallax: true, on: {
slideChange: function(e) {
if (swiper && swiper.realIndex !== currentindex) {
pagechange.call($pagingbuttons[swiper.realIndex], false, true);
}
}
}});
}
function change(fromauto) {
if (fromauto) {
swiper.slideNext(1000, false);
} else {
swiper.slideTo(currentindex+1, 1000, false); // +1 for swiper loop mode
}
}
function show() {
$narrowbox.appendChild($paging);
$index.insertBefore($narrowbox, $introduce);
!swiper && setswiper();
swiper.slideTo(currentindex+1, 0); // +1 for swiper loop mode
$timer && $contentbox.appendChild($timer);
resize(true);
}
function hide() {
removenode($narrowbox);
}
function resize(widthchanged) {
if (widthchanged) {
$narrowbox.style.height = areaheight +'px';
// rolling(true);
}
}
return {
show: show,
hide: hide,
change: change,
onchanged: onchanged,
resize: resize
}
})();
$timer && timerstart();
function callfunction(functionname, parameter) {
if (currentmedia === 'wide') {
wide[functionname](parameter);
} else {
narrow[functionname](parameter);
}
}
function pagechange(_fromauto, withoutchange) {
var fromauto = !isNaN(_fromauto) ? _fromauto : false,
index = fromauto === 1 ? currentindex === numworks-1 ? 0 : currentindex+1 :
fromauto === -1 ? currentindex === 0 ? numworks-1 : currentindex-1 :
parseInt(this.getAttribute('data-index'));
if (index !== currentindex) {
currentindex = index;
!withoutchange && callfunction('change', fromauto);
resettimer();
setpaging();
}
}
function setpaging() {
$pagingbuttons.forEach(function($button, index) {
$button.classList[index === currentindex ? 'add' : 'remove']('on');
});
}
function timerstart() {
if ($timer) {
timertween = TweenMax.to($timerpath.style, 10, {strokeDashoffset: 0, ease: 'linear', onComplete: pagechange, onCompleteParams: [1]}); // ·Ñ¸µ½Ã°£
if (timerpaused) {
timertween.pause();
}
}
}
function resettimer() {
killtween(timertween);
$timer.style.transition = 'none';
TweenMax.to($timer, 0.2, {opacity: 0, ease: 'easeOutQuad', onComplete: function() {
$timerpath.style.strokeDashoffset = timerpathlength;
TweenMax.to($timer, 0.5, {opacity: 1, ease: 'easeOutQuad', delay: 0.3,
onStart: function() {
$timernumber.innerHTML = '0'+ (currentindex+1);
timerstart();
},
onComplete: function() {
callfunction('onchanged');
wheeler.blocked = false;
}
});
}});
}
function pausetimer() {
timertween.pause();
timerpaused = true;
}
function unpausetimer() {
timertween.play();
timerpaused = false;
}
function onwheel(e, direction) {
if (currentmedia === 'wide') {
wheeler.blocked = true;
pagechange(direction);
e.preventDefault();
}
}
function onresize() {
callfunction('resize');
}
function onmediachange() {
if (currentmedia === 'wide') {
wide.show();
narrow.hide();
} else {
wide.hide();
narrow.show();
}
}
})();
// list
document.querySelector('.sec-list') && (function() {
var $listbox = document.querySelector('[class*="list-"]'),
$items = [].slice.call($listbox.querySelectorAll('li')),
$links = [].slice.call($listbox.querySelectorAll('a')),
$figures = [].slice.call($listbox.querySelectorAll('figure')),
$medias = [],
$videos = [],
$covers = [],
figurewidth, figureheight, rotateangle;
$figures.forEach(function($figure, index) {
var videourl = !ismobile ? $figure.getAttribute('data-video') : '',
$media = createnode('div', 'media', [
videourl ? getvideohtml(videourl) : '',
'
'
].join(''));
if (videourl) {
$videos[index] = $media.querySelector('video');
}
$covers[index] = $media.querySelector('.cover');
$medias[index] = $media;
$figure.innerHTML = '';
$figure.appendChild($media);
if (!ismobile) {
$figure.setAttribute('data-index', index);
$figure.addEventListener('mouseenter', onfigureenter, false);
$figure.addEventListener('mousemove', onfiguremove, false);
$figure.addEventListener('mouseleave', onfigureleave, false);
}
});
listeners.resize.push(onresize);
function onfigureenter(e) {
var index = this.getAttribute('data-index');
if ($videos[index]) {
$videos[index].play();
TweenMax.to($covers[index], 0, {opacity: 0});
}
}
function onfiguremove(e) {
var index = this.getAttribute('data-index'),
rotatex = -rotateangle*((e.offsetY-figureheight/2)/(figureheight/2)),
rotatey = rotateangle*((e.offsetX-figurewidth/2)/(figurewidth/2));
// $medias[index].style.transform = 'rotateX('+ rotatex +'deg) rotateY('+ rotatey +'deg) rotateZ(0deg)'; // css transition is not smooth in ie
TweenMax.to($medias[index], 0.7, {rotationX: rotatex, rotationY: rotatey, ease: Power2.easeOut, force3D: true});
}
function onfigureleave(e) {
var index = this.getAttribute('data-index');
// $medias[index].style.transform = 'rotateZ(0.0001deg)';
TweenMax.to($medias[index], 0.7, {rotationX: 0.0001, rotationY: 0.0001, ease: Back.easeOut.config(1.75), force3D: true});
if ($videos[index]) {
TweenMax.to($covers[index], 0.5, {opacity: 1, ease: Quad.easeOut, onComplete: function() {
resetvideo($videos[index]);
}});
}
}
function onresize() {
figurewidth = $figures[0].offsetWidth;
figureheight = $figures[0].offsetHeight;
rotateangle = Math.min(20, 9*(700/figurewidth));
}
})();
// view
document.querySelector('.sec-view') && (function() {
var
$visualbox = document.querySelector('.visual-full'),
$visualfigure, $visualcover, $titlebox,
$viewbox = document.querySelector('.sec-view'),
$viewcon = document.querySelector('.view-con'),
$slidebox = $viewbox.querySelector('.view-slide .slides'),
$resizetargets = $viewbox.querySelectorAll('iframe[src*="vimeo.com"], iframe[src*="youtube.com"]'),
$backbox = createnode('div', 'view-back', [
'
',
'
',
'',
'
',
'
'
].join('')),
$backinnerbox = $backbox.querySelector('.inner'),
$backbutton = $backbox.querySelector('button'),
$path = $backbox.querySelector('path'),
pathlength = $path.getTotalLength(),
$image, $video,
videoadded = false,
visualcovered = false,
backtimer = null,
goingback = false;
if ($visualbox) {
$visualfigure = $visualbox.querySelector('figure');
$visualcover = createnode('div', 'cover', '', $visualfigure);
$image = createnode('div', 'image');
$image.style.backgroundImage = 'url(\''+ $visualfigure.getAttribute('data-image') +'\')';
$video = !ismobile ? $visualfigure.getAttribute('data-video') : null;
if ($video) {
$video = createnode('div', '', getvideohtml($video)).children[0];
} else {
$visualfigure.appendChild($image);
}
$titlebox = $viewbox.querySelector('.sec-view .view-visual');
$scroller.parentNode.insertBefore($visualbox, $scroller);
}
if ($resizetargets.length) {
$resizetargets = [].slice.call($resizetargets);
$resizetargets.forEach(function($target, index) {
$target.setAttribute('data-ratio', $target.height/$target.width);
});
}
if ($slidebox) {
$slidebox.classList.add('swiper-container');
$slidebox.children[0].classList.add('swiper-wrapper');
[].forEach.call($slidebox.querySelectorAll('li'), function($item) {
$item.classList.add('swiper-slide');
});
var swiper = new Swiper($slidebox, {speed: 700, loop: true,
navigation: {prevEl: '.view-slide .btn-prev', nextEl: '.view-slide .btn-next'},
pagination: {el: createnode('p', 'paging', '', $slidebox.parentNode), clickable: true}
});
}
$scroller.insertBefore($backbox, $body.querySelector('.scroller > .footer'));
$backbutton.addEventListener('click', goback, false);
!ismobile && (function() {
var currentoffset = 0;
$backbutton.addEventListener('mouseenter', function() {
currentoffset = $path.style.strokeDashoffset;
TweenMax.to($path.style, 0.5, {strokeDashoffset: 0, ease: Expo.easeOut});
}, false);
$backbutton.addEventListener('mouseleave', function() {
if (!wheeler.blocked) {
TweenMax.to($path.style, 0.35, {strokeDashoffset: currentoffset, ease: Expo.easeOut});
}
}, false);
})();
$path.style.strokeDasharray =
$path.style.strokeDashoffset = pathlength;
listeners.scroll.push(onscroll);
listeners.mediachange.push(onmediachange);
listeners.resize.push(onresize);
function goback() {
if (!goingback) {
wheeler.blocked = true;
TweenMax.to($path.style, 0.5, {strokeDashoffset: pathlength, ease: Quint.easeOut});
goingback = true;
page.back();
}
}
function onscroll(scrolltop) {
var backboxheight = Math.min(maxareaheight, scrolltop, Math.max(0, (scrolltop+maxareaheight*2)-getscrollheight())),
percent = backboxheight/maxareaheight,
needtovisualupdate = false;
$backinnerbox.style.height = backboxheight +'px';
$path.style.strokeDashoffset = pathlength*3-(pathlength*percent);
clearTimeout(backtimer);
if (percent > 0.99) {
backtimer = setTimeout(goback, 500);
return;
}
if ($visualfigure) {
if (areaheight > scrolltop) {
if (videoadded && $video.paused) {
$video.play();
}
visualcovered = false;
needtovisualupdate = true;
} else {
if (videoadded && !$video.paused) {
$video.pause();
}
if (!visualcovered) {
visualcovered = true;
needtovisualupdate = true;
}
}
}
if (needtovisualupdate) {
if (visualcovered) {
$visualfigure.style.display = 'none';
} else {
$visualfigure.style.display = '';
$visualcover.style.backgroundColor = 'rgba(20, 20, 20, '+ 1*(scrolltop/areaheight) +')';
$visualcover.style.webkitBackdropFilter = $visualcover.style.backdropFilter = 'blur('+ 10*(scrolltop/areaheight) +'px)';
}
}
}
function onmediachange() {
videoadded = false;
if ($video) {
if (currentmedia == 'wide') {
$visualfigure.appendChild($video);
removenode($image);
videoadded = true;
} else {
$visualfigure.appendChild($image);
removenode($video);
}
}
}
function onresize(widthchanged) {
$backbox.style.height = maxareaheight +'px';
if ($visualbox) {
if (!$visualbox.style.height || widthchanged) {
$visualbox.style.height = areaheight +'px';
$visualbox.style.minHeight = 'auto';
if ($video) {
resizevideo($video, areawidth, areaheight);
}
$titlebox.style.height = areaheight +'px';
}
}
if ($resizetargets.length) {
var viewconwidth = $viewcon.offsetWidth;
$resizetargets.forEach(function($target) {
$target.width = viewconwidth;
$target.height = viewconwidth*parseFloat($target.getAttribute('data-ratio'));
});
}
}
})();
// about
document.querySelector('.about-half') && (function() {
var $halfcontents = document.querySelectorAll('.about-half .cell h5');
listeners.resize.push(onresize);
function onresize() {
if (currentmedia === 'wide') {
$halfcontents[1].style.height = $halfcontents[0].offsetHeight +'px';
}
}
})();
// about slide
document.querySelector('.about-slide') && (function() {
var $box = document.querySelector('.about-slide'),
$matbox = document.querySelector('.materialize'),
$typebox = $matbox.querySelector('.types'),
$typemover = $typebox.children[0],
$types = [].slice.call($typebox.querySelectorAll('li')),
$typetexts = null,
$visualbox = createnode('div', 'visual swiper-container', (function() {
var html = ['
'];
$types.forEach(function($type, index) {
html.push('- ');
html.push('');
html.push('
');
$type.removeAttribute('data-image');
});
html.push('
');
return html.join('');
})(), $matbox),
$paging = createnode('p', 'paging', ''),
$txt = $box.querySelector('.fromnowon'),
swiper = new Swiper($visualbox, {speed: 1000, loop: true, effect: 'fade',
pagination: {el: $paging, clickable: true},
on: {touchStart: ontouchstart, touchMove: ontouchmove, touchEnd: ontouchend, slideChange: onswiperchange},
autoplay: {delay: 2000}
}),
movetween = null,
numtypes = $types.length,
numalltypes = numtypes*3,
currentindex = 0,
currentallindex = numtypes,
maxscale = 3,
swiperchanged = false,
islooping = false,
values = {x: 0, touchx: 0, touchstartx: 0, ratio: 0};
$matbox.addEventListener('mouseenter', function() {
swiper.autoplay.stop();
});
$matbox.addEventListener('mouseleave', function() {
swiper.autoplay.start();
});
$visualbox.appendChild($typebox);
$typemover.innerHTML = (function() {
var html = $typemover.innerHTML.replace(/>(.+)<\//g, '>
$1 numtypes*2-1 || numtypes > currentallindex) {
currentallindex += numtypes > currentallindex ? numtypes : -numtypes;
move(true);
}
$box.classList.remove('block');
}
function change(fromswiper) {
var index = parseInt(this.getAttribute('data-index'));
currentallindex = islooping === -1 ? numtypes-1 : islooping === 1 ? numtypes*2 : index;
currentindex = index%numtypes;
fromswiper !== true && swiper.slideTo(currentindex +1);
$box.classList.add('block');
move();
}
function move(withoutanimation) {
killtween(movetween);
movetween = TweenMax.to(values, withoutanimation ? 0 : 1, {x: -$types[currentallindex].offsetLeft, duration: 500, ease: Power4.easeOut, onUpdate: setposition, onComplete: onmoved});
}
function setposition() {
var x = -values.x,
overflow = 0,
typex, typewidth, typeabsolutex, scale, i;
$typemover.style.transform = 'translate3d('+ values.x +'px, 0, 0)';
for (i = 1; i < numalltypes; i++) {
typeabsolutex = $types[i].getBoundingClientRect().left;
if (typeabsolutex > areawidth || -areawidth/4 > typeabsolutex) {
continue;
}
typex = $types[i].offsetLeft;
if (x >= typex) {
typewidth = $types[i].offsetWidth;
scale = typewidth > x-typex ? 1-(x-typex)/typewidth : 0;
} else {
typewidth = $types[i-1].offsetWidth;
scale = typewidth > typex-x ? 1-(typex-x)/typewidth : 0;
}
scale = 1+(maxscale-1)*scale;
$typetexts[i].style.transform = 'scale('+ scale +') translateZ(0)';
$types[i].style.transform = 'translate3d('+ overflow +'px, 0, 0)';
if (scale > 1) {
typewidth = $typetexts[i].offsetWidth;
overflow += typewidth*scale-typewidth;
}
}
}
function onmediachange() {
if (currentmedia === 'wide') {
maxscale = 3;
$box.insertBefore($paging, $txt);
} else {
maxscale = 2.4;
$matbox.appendChild($paging);
}
}
function onresize() {
killtween(movetween);
move(true);
}
})();
// contact
document.querySelector('.contact-regist') && (function() {
var $registbox = document.querySelector('.contact-regist'),
$select = $registbox.querySelector('select'),
$selectbox = createnode('div', 'form-select', (function() {
var html = ['
'];
html.push('
');
html.push('
');
[].forEach.call($select.options, function($option) {
$option.value && html.push('', $option.text, '');
});
html.push('
');
html.push('
');
return html.join('');
})(), $select.parentNode),
$selecttitle = $selectbox.querySelector('button'),
$selectoptions = [].slice.call($selectbox.querySelectorAll('.options span'));
$selectbox.addEventListener('click', stoppropagation, false);
$selecttitle.addEventListener('click', function(e) {
$selectbox.classList.toggle('open');
}, false);
$selectoptions.forEach(function($option, index) {
$option.setAttribute('data-index', index+1);
$option.addEventListener('click', select, false);
});
listeners.bodyclick.push(function() {
if ($selectbox.classList.contains('open')) {
$selectbox.classList.remove('open');
}
});
function select() {
var index = parseInt(this.getAttribute('data-index'));
$select.options.selectedIndex = index;
$selecttitle.classList.add('has-value');
$selecttitle.innerHTML = this.innerHTML;
$selectbox.classList.remove('open');
}
})();
}
function ajax(url, option) {
var method = (option.method || 'get').toLowerCase() == 'get' ? 'GET' : 'POST',
xmlhttp = new XMLHttpRequest();
xmlhttp.open(method, url, option.async !== false);
xmlhttp.onreadystatechange = readystatechange;
xmlhttp.timeout = 30000;
if (method == 'GET') {
xmlhttp.send(null);
} else {
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8');
xmlhttp.send(option.query);
}
function readystatechange() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
option.onsuccess && option.onsuccess(xmlhttp.responseText);
} else {
option.onerror && option.onerror();
}
}
}
}
function getsvgcirclehtml(size) {
return [
'
'
].join('');
}
function getvideohtml(videourl) {
return [
'
'
].join('');
}
function resetvideo($video) {
if ($video && $video.readyState) {
$video.pause();
$video.currentTime = 0;
}
}
function resizevideo($video, towidth, toheight) {
var videowidth = towidth,
videoheight = videowidth*1.5;
//videoheight = videowidth*0.56256062075654;
if (toheight > videoheight) {
videoheight = toheight;
videoheight = videowidth*1.5;
//videoheight = videowidth*0.56256062075654;
}
$video.width = videowidth;
$video.height = videoheight;
}
function createnode(name, classname, innerhtml, $appendto) {
var $node = document.createElement(name);
if (classname) {
$node.className = classname;
}
if (innerhtml) {
$node.innerHTML = innerhtml;
}
if ($appendto) {
$appendto.appendChild($node);
}
return $node;
}
function removenode($node, emptycontent) {
if ($node) {
if (emptycontent) {
$node.innerHTML = '';
}
$node.parentNode && $node.parentNode.removeChild($node);
}
}
function getpoint(e) {
if (e.touches) {
e = e.touches[0];
}
return [e.pageX || e.clientX, e.pageY || e.clientY];
}
function killtween(tween) {
tween && tween.kill();
}
function gettransform($node) {
return $node._gsTransform || CSSPlugin._internals.getTransform($node);
}
function preventdefault(e) {
e.preventDefault();
}
function stoppropagation(e) {
e.stopPropagation();
}
function getscrolltop() {
return document.documentElement.scrollTop || document.body.scrollTop;
}
function getscrollheight() {
return Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
}
function _log(value) {
if (window.localStorage) {
window.localStorage.getItem('test-mode') && console.log(value);
}
}
function onscroll(_scrolltop) {
var scrolltop = !isNaN(_scrolltop) ? _scrolltop : getscrolltop();
if (scrolltop > 100) {
if (!headerreduced) {
$html.classList.add('reduced-header');
headerreduced = true;
}
} else if (headerreduced) {
$html.classList.remove('reduced-header');
headerreduced = false;
}
listeners.scroll.forEach(function(handler) {
handler(scrolltop);
});
lazy.onscroll(scrolltop);
}
function onresize() {
var media = parseInt(window.getComputedStyle($body)['fontSize']) > 15 ? 'wide' : 'narrow',
_areawidth = window.innerWidth,
widthchanged = !currentmedia || currentmedia === 'wide' || _areawidth !== areawidth;
areawidth = _areawidth;
areaheight = window.innerHeight;
maxareaheight = currentmedia === 'wide' ? areaheight : Math.max(maxareaheight, areaheight);
if (media !== currentmedia) {
currentmedia = media;
listeners.mediachange.forEach(function(handler) {
handler();
});
}
listeners.resize.forEach(function(handler) {
handler(widthchanged);
});
onscroll();
}
})();