$(function() {
/* Parallax */
$('html').mousemove(function(e){
var wx = $(window).width();
var wy = $(window).height();
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
var newx = x - wx/2;
var newy = y - wy/2;
// var parallaxList = [];
$('.parallax').each(function(index, element){
// var currentParallaxItem = $(this);
var speed = $(this).attr('data-speed');
var translateValX = 1 - newx*speed;
var translateValY = 1 - newy*speed;
var playParallax = anime({
targets: element,
translateX: translateValX,
translateY: translateValY,
duration: 200
})
});
});
var alchemyWatcher = scrollMonitor.create($('.alchemy'), 100);
var partnerWatcher = scrollMonitor.create($('.partner'), 100);
var introductionWatcher = scrollMonitor.create($('.introduction'));
if (partnerWatcher.isAboveViewport) {
$('.blob').addClass('blob--partner');
$('.tublob').addClass('tublob--partner');
$('.polygon').addClass('polygon--partner');
$('.textelement').addClass('textelement--partner');
}
alchemyWatcher.fullyEnterViewport(function() {
$('.blob').addClass('blob--alchemy');
$('.tublob').addClass('tublob--alchemy');
$('.polygon').addClass('polygon--alchemy');
});
alchemyWatcher.exitViewport(function() {
if (alchemyWatcher.isBelowViewport) {
$('.blob').removeClass('blob--alchemy');
$('.tublob').removeClass('tublob--alchemy');
$('.polygon').removeClass('polygon--alchemy');
}
});
introductionWatcher.fullyEnterViewport(function() {
$('.textelement').removeClass('textelement--alchemy');
});
introductionWatcher.exitViewport(function() {
$('.textelement').addClass('textelement--alchemy');
});
partnerWatcher.fullyEnterViewport(function() {
$('.blob').addClass('blob--partner');
$('.tublob').addClass('tublob--partner');
$('.polygon').addClass('polygon--partner');
});
partnerWatcher.exitViewport(function() {
if (partnerWatcher.isBelowViewport) {
$('.blob').removeClass('blob--partner');
$('.tublob').removeClass('tublob--partner');
$('.polygon').removeClass('polygon--partner');
}
});
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
// Splash setup code
var windowHeight = $(window).outerHeight();
var windowWidth = $(window).outerWidth();
var splashLogoOffsetX;
var splashLogoOffsetY = windowHeight * 0.4;
var splashLogoScale;
var wrapperWidth;
var splashTransformArea;
var logoWidth;
if (windowWidth <= 767) {
wrapperWidth = 30;
$('.formblob').attr('preserveAspectRatio', 'xMidYMid slice');
} else {
wrapperWidth = 120;
$('.formblob').attr('preserveAspectRatio', 'xMidYMid meet');
}
splashTransformArea = windowWidth - wrapperWidth;
if (windowWidth > 875) {
splashLogoScale = (windowHeight * 0.45) / 92;
splashLogoOffsetX = 0;
} else {
splashLogoScale = (windowHeight * 0.85) / 92;
logoWidth = $('.splash__logo').outerWidth() * splashLogoScale * 0.5;
splashLogoOffsetX = (splashTransformArea * 0.5) - logoWidth;
}
// Resize code
var updateSplashLogo = debounce(function() {
anime({
targets: '.splash__logo',
translateX: [splashLogoOffsetX],
translateY: [splashLogoOffsetY],
scale: [splashLogoScale],
easing: 'easeInOutQuad',
duration: 200
});
}, 100);
$(window).resize(function() {
windowHeight = $(window).outerHeight();
windowWidth = $(window).outerWidth();
halfWindowHeight = (windowHeight / 2) * -1;
splashLogoOffsetY = windowHeight * 0.4;
splashTransformArea = windowWidth - wrapperWidth;
if (windowWidth <= 767) {
wrapperWidth = 30;
$('.formblob').attr('preserveAspectRatio', 'xMidYMid slice');
} else {
wrapperWidth = 120;
$('.formblob').attr('preserveAspectRatio', 'xMidYMid meet');
}
if (windowWidth > 875) {
splashLogoScale = (windowHeight * 0.45) / 92;
splashLogoOffsetX = 0;
} else {
splashLogoScale = (windowHeight * 0.85) / 92;
logoWidth = $('.splash__logo').outerWidth() * splashLogoScale * 0.5;
splashLogoOffsetX = (splashTransformArea * 0.5) - logoWidth;
}
updateSplashLogo();
scrollMonitor.update();
if (windowWidth < 875) {
$('.year--active').removeClass('year--active');
$('.journey--active').removeClass('journey--active');
}
})
function replaySplash() {
$('.splash__caption--cta').css('opacity', '1');
$('.splash__caption--cta').css('transform', 'translateY(0)');
$('.splash__caption--text').css('opacity', '1');
$('.splash__caption--text').css('transform', 'translateY(0)');
$('.splash').css('display', 'grid');
// fade in background then play logo animation
var resetSplashLogoTimeline = anime.timeline({
autoplay: false,
complete: function() {
replaySplashTimeline.play();
}
}).add({
targets: '.splash__logo',
translateX: [splashLogoOffsetX],
translateY: [splashLogoOffsetY],
scale: [splashLogoScale],
duration: 0
})
var replaySplashTimeline = anime.timeline({
autoplay: false,
complete: function() {
splash();
}
}).add({
targets: '.splash',
opacity: 1,
easing: 'easeInOutQuad',
duration: 1000
})
resetSplashLogoTimeline.play();
}
// Splash logo
function splash() {
$('body').addClass('preventscroll');
$('html').addClass('preventscroll');
$('.splash').css('display', 'grid');
$('.splash').css('opacity', '1');
// Intro animation timelines
var introLogoTimeline = anime.timeline({
autoplay: false,
complete: function() {
$('.splash').css('display', 'none');
}
}).add({
targets: '.splash__logo',
translateX: [splashLogoOffsetX, 0],
translateY: [splashLogoOffsetY, 0],
scale: [splashLogoScale, 1],
easing: 'easeInOutQuad',
duration: 1000
}).add({
targets: '.splash',
opacity: 0,
easing: 'easeInOutQuad',
duration: 1000,
offset: '+=200'
})
// Intro text fade and slide animation
var introTextTimeline = anime.timeline({
autoplay: false
}).add({
targets: '.splash__caption--cta',
opacity: 0,
translateY: 75,
easing: 'easeInQuad',
duration: 350
}).add({
targets: '.splash__caption--text',
opacity: 0,
translateY: 75,
easing: 'easeInQuad',
duration: 350,
offset: '-=75'
})
// Play animation and remove preventScroll
$('.splash__caption--cta').on('click', function(e) {
e.preventDefault();
introLogoTimeline.play();
introTextTimeline.play();
$('body').removeClass('preventscroll');
$('html').removeClass('preventscroll');
localStorage.setItem('splashPlayed', true);
})
}
// Replay splash is footer__intro button is clicked.
$( '.footer__intro' ).click(function() {
replaySplash();
});
// Play splash if localStorage not set
if(!localStorage.getItem('splashPlayed')) {
splash();
}
})