(function () {
if (/Android|webOS|iPhone|iPod|iPad|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) == true) {
console.log('[Parallax Reskin]: Mobile detected. Skip');
return;
}
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-12310597-137');
ga('send', 'pageview');
var p = window.parent;
var emcGACampaign = 'AC-15983 MD US FX AHS Q3 2018 - Parallax Reskin - Pre';
//var urlPrefix = 'http://localhost/si_lib_ac-15983_md-us_ahs_s8_q3_parallax-reskin/src/images/';
var urlPrefix = 'https://secureassets.evolvemediallc.com/__usa/fx_ahs_s8_q3_2018/parallax-reskin/images/';
var clickoutURL = 'https://ad.doubleclick.net/ddm/trackclk/N494401.284546EVOLVEMEDIALLC/B21592942.227294200;dc_trk_aid=426189261;dc_trk_cid=105103635;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=';
var ts = Math.round(new Date().getTime() / 1000);
var leftImage1FileName = 'spritesheet.png?nc='+ts;
var rightImage1FileName = 'bg_1000.png?nc='+ts;
// animation progress (used for tracking)
//if(perc[p] == '15' || perc[p] == '40' ||perc[p] == '66' || perc[p] == '90') {
var perc = [0, 10,15, 25, 40,50, 60, 75,90, 100]
var p = 0;
var parallaxReference;
// animation sequence for images on the left
var timelineImagesLeft;
var timelineBGColor;
var handAnimation;
// container of elements on the left
var leftContainer;
// container of elements on the right
var rightContainer;
// images DOM element references (div's)
var leftImage1Div;
var rightImage1Div;
var prevScrollPosition = -999;
function cleanUrl(rawUrl) {
var url = unescape(decodeURIComponent(rawUrl));
if (url.match(/^http:\/\/www.*/g)) {
url = url.substring(11);
} else if (url.match(/^https:\/\/www.*/g)) {
url = url.substring(12);
} else if (url.match(/^http:\/\/.*/g)) {
url = url.substring(7);
} else if (url.match(/^https:\/\/.*/g)) {
url = url.substring(8);
}
if (url.indexOf('doubleclick') > -1 && url.indexOf('?') > -1) {
url = url.substr(0, url.indexOf('?'));
} else {
url = url.substr(0, 65);
}
return url.trim();
}
var cleanClickoutURL = cleanUrl(clickoutURL);
var docBody = parent.document.body;
//handling docBody reference in whatculture site
var site = window.location.href;
if (site.indexOf('whatculture') != -1) {
docBody = parent.parent.document.body;
}
var load1Complete = false;
var load2Complete = false;
var load3Complete = false;
/*
*Load external scripts, jQuery, and TimelineLite (animation engine)
*When all 3 are loaded proceed to initialize TimelineLite instances
*and elements creation
*/
function checkScriptsLoad() {
if (load1Complete == true && load2Complete == true && load3Complete == true) {
init();
}
}
// "exceptions" are tweaks made (by websupport) to the sites to display reskins (applied upon load)
var exceptionsScript = document.createElement('script');
exceptionsScript.src = 'https://secureassets.evolvemediallc.com/assets/websupport/reskin/exceptions.js';
exceptionsScript.onload = function () {
load1Complete = true;
checkScriptsLoad();
};
var jqscript = document.createElement('script');
jqscript.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js';
jqscript.onload = function () {
load2Complete = true;
checkScriptsLoad();
};
var script = document.createElement('script');
script.src = '//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js';
script.onload = function () {
load3Complete = true;
checkScriptsLoad();
};
document.head.appendChild(exceptionsScript);
document.head.appendChild(script);
document.head.appendChild(jqscript);
function init() {
timelineImagesLeft = new TimelineLite();
timelineBGColor = new TimelineLite();
create();
$(window.top).scroll(onScroll);
}
//re align main containers and button position when window is resized
parent.window.onresize = function () {
/* the resize event is dispatched almost instantly upon load
* so the elements to resize might not been created yet, resize if they exist
*/
if (leftContainer) {
var pxFromCenter = -881;
var leftContainerPos = (getWindowCenter() + pxFromCenter);
leftContainer.css({
'left': leftContainerPos + 'px'
});
pxFromCenter = -500-64;
var rightContainerPos = (getWindowCenter() + pxFromCenter);
rightContainer.css({
'left': rightContainerPos + 'px'
});
}
};
/**
* Build all div elements from strings
*/
function create() {
var site = window.location.href;
ga('send', 'event', emcGACampaign, 'Load', 'Parallax Reskin');
console.log('Campaign: ' + emcGACampaign + '\nEvent: Load\nAttr: Parallax Reskin');
// root container of our elements
var tpl = '
';
$(docBody).css('background', '#F72910');
$(docBody).prepend(tpl);
/*
pxFromCenter is how far the an element should be away from the center (this gets updated in onResize).
(Remember that the site's main content is around 1000px width)
*/
var pxFromCenter = -881;
var containersWidth = 660;
var containersHeight = 1020;
var leftContainerPos = (getWindowCenter() + pxFromCenter);
var leftContainerTag = '';
pxFromCenter = -500-64;
var rightContainerPos = (getWindowCenter() + pxFromCenter);
var rightContainerTag = '';
/*
*
*LEFT SIDE Images
* Note that only the first one has full opacioty, the others are hidden at opacity 0
*
*/
var leftImage1Tag = '';
leftImage1Tag+= '
';
leftImage1Tag += '
';
var leftImage2Tag = '';
leftImage2Tag += '
';
/*
*
*RIGHT SIDE Images
* Note that only the first one has full opacioty, the others are hidden at opacity 0
*
*/
var rightImage1Tag = '';
rightImage1Tag+= '
';
rightImage1Tag += '
';
var bgSize = getWindowCenter() - 450;
var bgLeftClickoutTag = '';
pxFromCenter = 475;
var bgRightClickoutPos = (getWindowCenter() + pxFromCenter);
var bgRightClickoutTag = '';
var parallaxReference = $(docBody).find("#parallax_container");
/*
*Add the created tags to the parallax element
*/
$(parallaxReference).prepend(leftContainerTag);
$(parallaxReference).prepend(rightContainerTag);
leftContainer = $(docBody).find("#left_container");
rightContainer = $(docBody).find("#right_container");
$(docBody).prepend(bgLeftClickoutTag);
$(docBody).prepend(bgRightClickoutTag);
$(leftContainer).prepend(leftImage1Tag);
$(leftContainer).prepend(leftImage2Tag);
$(rightContainer).prepend(rightImage1Tag);
leftImage1Div = $(docBody).find("#left_image_1");
rightImage1Div = $(docBody).find("#right_image_1");
/*
*Add the clickouts to the transparent buttons
*/
setTimeout(function () {
var btn = $(docBody).find("#right_container_bg_clickout_right");
btn[0].addEventListener('click', function () {
ga('send', 'event', emcGACampaign, 'Click', 'Background[' + cleanClickoutURL + ']');
console.log('Campaign: ' + emcGACampaign + '\nEvent: Click\nAttr: Background[' + cleanClickoutURL + ']');
});
btn = $(docBody).find("#left_container_bg_clickout_left");
btn[0].addEventListener('click', function () {
ga('send', 'event', emcGACampaign, 'Click', 'Background[' + cleanClickoutURL + ']');
console.log('Campaign: ' + emcGACampaign + '\nEvent: Click\nAttr: Background[' + cleanClickoutURL + ']');
});
}, 200);
buildAnimation();
additionalSitesTweaks();
}
/**
* Setup animation stages
*/
function buildAnimation() {
handAnimation = TweenMax.to('#animation',0.4,{x:-2982,ease:SteppedEase.config(7)});
handAnimation.pause();
timelineBGColor.to($(docBody), 0.01, {
backgroundColor: 'F72C14'
});
// 01 OK
timelineBGColor.to($(docBody), 0.01, {
backgroundColor: '#FF3418'
});
timelineBGColor.to($(docBody), 0.06, {
backgroundColor: '#FF3418'
});
//02 OK
timelineBGColor.to($(docBody), 0.01, {
backgroundColor: '#FF491C'
});
timelineBGColor.to($(docBody), 0.05, {
backgroundColor: '#FF491C'
});
timelineBGColor.to($(docBody), 0.01, {
backgroundColor: '#FF451C'
});
timelineBGColor.to($(docBody), 0.07, {
backgroundColor: '#FF451C'
});
// 04
timelineBGColor.to($(docBody), 0.01, {
backgroundColor: '#FF491C'
});
timelineBGColor.to($(docBody), 0.06, {
backgroundColor: '#FF491C'
});
timelineBGColor.to($(docBody), 0.01, {
backgroundColor: '#FF451C'
});
timelineBGColor.to($(docBody), 0.06, {
backgroundColor: '#FF451C'
});
timelineBGColor.to($(docBody), 0.1, {
backgroundColor: '#F72C14'
});
timelineImagesLeft.pause();
timelineBGColor.pause();
}
function trackProgress(p) {
if (p == 15 || p == 40 || p == 60|| p == 90) return;
if (p == perc[1]) {
message = 'start';
} else if (p == perc[perc.length - 1]) {
message = 'complete';
} else {
message = p + '%';
}
ga('send', 'event', emcGACampaign, 'Scroll Progress', message);
console.log('Campaign: ' + emcGACampaign + '\nEvent: Scroll Progress\nAttr: ' + message);
}
function trackAnimationPlayed() {
ga('send', 'event', emcGACampaign, 'Animation', 'Animation played');
console.log('Campaign: ' + emcGACampaign + '\nEvent: Animation\nAttr: Animation played');
}
function playArmAnimation() {
timelineBGColor.startTime(0);
timelineBGColor.restart();
handAnimation.startTime(0);
handAnimation.restart();
trackAnimationPlayed();
}
/**
* Calculates scroll position and advances the animation accordingly.
* Tracks animation progress (start, 25, 50, 75, complete)
*/
function onScroll() {
var newScroll = $(window.parent).scrollTop();
var site = window.location.href;
var winTop = window.top;
var h = winTop.document.documentElement,
b = winTop.document.body,
st = 'scrollTop',
sh = 'scrollHeight';
// scroll percent (bottom of the page = 100%)
var percent = 0;
//this is for sites like upcominghorrormovies that have weird stuff on scroll
var mult = 1;
if (h[st] != b[st]) {
if (h[st] == 0) {
if (site.indexOf('upcominghorrormovies') != -1 || site.indexOf('zombiefriends') != -1 || site.indexOf('gateworld') != -1) {
if (site.indexOf('zombiefriends') != -1) {
mult = 10;
} else if (site.indexOf('gateworld') != -1) {
mult = 4;
}
percent = ((b[st] * mult) / h.clientHeight) * 100;
} else {
percent = h[st] || b[st] / ((h[sh] || b[sh]) - h.clientHeight) * 100;
}
} else if (b[st] == 0) {
percent = h[st] / ((h[sh]) - h.clientHeight) * 100;
}
}
/**
* Since the animation ends before reaching the very bottom of the page (100% scrolled), we need to track the 'complete' earlier.
* addng 20% extra allows to track complete when the actual animation ends.
* This is because we want to display the complete animation before having to scroll all the way down.
*/
//percent += 20;
var animationPercent = percent;
if (percent > 100) percent = 100;
if (prevScrollPosition != -999) {
if (prevScrollPosition < percent) {
//scrolling forward (normal)
if (p == 0) {
p++;
}
if (percent >= perc[p]) {
trackProgress(perc[p]);
if(perc[p] == '15' || perc[p] == '40' ||perc[p] == '66' || perc[p] == '90') {
playArmAnimation();
}
p++;
if (p == perc.length) {
p = perc.length - 1;
}
}
}
else { //scrolling back
if (p == perc.length - 1) {
p--;
}
if (percent <= perc[p]) {
trackProgress(perc[p]);
if(perc[p] == '15' || perc[p] == '40' ||perc[p] == '66' || perc[p] == '90') {
playArmAnimation();
}
p--;
if (p < 0) {
p = 0;
}
}
}
}
prevScrollPosition = percent;
//compensating the extra percent
var pos = ((animationPercent - 20) / 100);
// advance the animation according with the scroll position
timelineImagesLeft.progress(pos);
}
function getWindowCenter() {
var totalW = window.top.document.documentElement.clientWidth;
return totalW / 2;
}
function getCenterPos(elemWidth) {
var browserWidth = window.top.document.documentElement.clientWidth;
var craveInfoWidth = 1002;
var sidesSpace = browserWidth - craveInfoWidth;
var rightReskinColumnW = sidesSpace / 2;
var rightPos = (rightReskinColumnW / 2) - (elemWidth / 2);
return rightPos;
}
function additionalSitesTweaks() {
if (site.indexOf('tvseriesfinale') != -1) {
//var siteContainer = $(docBody).find(".site-container");
//$(siteContainer).css('background', 'rgba(10, 61, 114, 0)');
window.parent.document.getElementsByTagName('head')[0].innerHTML += '';
} else if (site.indexOf('horror-movies') != -1) {
$(parallaxReference).css('z-index', '0');
} else if (site.indexOf('horrornews') != -1) {
window.parent.document.getElementsByTagName('head')[0].innerHTML += '';
} else if (site.indexOf('upcominghorrormovies') != -1) {
//$(learnMore).css('z-index', '1');
//$(learnMoreLeft).css('z-index', '1');
} else if (site.indexOf('whatculture') != -1) {
var layoutBG = $(docBody).find("#ad-layout-top");
$(layoutBG).css('background-color', '#000000');
$(parallaxReference).css('z-index', '0');
$(parallaxReference).css('top', '59px');
window.parent.window.parent.window.parent.document.getElementsByTagName('head')[0].innerHTML += /*'';
} else if (site.indexOf('thetvaddict') != -1) {
var siteContainer = $(docBody).find(".site-container");
$(siteContainer).css('max-width', '1002px');
window.parent.document.getElementsByTagName('head')[0].innerHTML += '';
window.parent.document.getElementsByClassName('slides')[0].style.transform = "translate3d(-590px, 0px, 0px)";
for (var i = 0; i < window.parent.document.getElementsByClassName('slides')[0].getElementsByTagName('li').length; i++) { window.parent.document.getElementsByClassName('slides')[0].getElementsByTagName('li')[i].style.width = '590px'; }
} else if (site.indexOf('screenanarchy') != -1) {
window.parent.document.getElementsByTagName('head')[0].innerHTML += '';
} else if (site.indexOf('michael-myers') != -1) {
window.parent.document.getElementsByTagName('head')[0].innerHTML += '';
} else if (site.indexOf('videoeta') != -1) {
var siteContainer = $(docBody).find(".container_16");
$(siteContainer).css('background-color', 'white');
siteContainer = $(docBody).find(".content");
$(siteContainer).css('background-color', 'white');
siteContainer = $(docBody).find("#head-wrapper");
$(siteContainer).css('background', 'rgba(10, 61, 114, 0)');
siteContainer = $(docBody).find("#ankle-wrapper");
$(siteContainer).css('background', 'rgba(10, 61, 114, 0)');
siteContainer = $(docBody).find("#ankle-home");
$(siteContainer).css('background-color', '#dddddd');
} else if (site.indexOf('vampirerave') != -1) {
var siteContainer = $(docBody).find("#content-wrapper");
$(siteContainer).css('width', '1002px');
siteContainer = $(docBody).find(".holy-grail__content");
$(siteContainer).css('max-width', '1003px');
window.parent.document.getElementsByTagName('head')[0].innerHTML += '';
window.parent.document.getElementsByClassName('holy-grail__sidebar holy-grail__sidebar--first')[0].remove();
window.parent.document.getElementsByClassName('holy-grail__sidebar holy-grail__sidebar--second')[0].remove();
} else if (site.indexOf('iwatchstuff') != -1) {
$(docBody).css('background', 'rgba(10, 61, 114, 0)');
var footer = $(docBody).find(".global-footer");
$(footer).css('color', 'white');
window.parent.document.getElementsByTagName('html')[0].style.background = "black";
window.parent.document.getElementsByTagName('head')[0].innerHTML += '';
}
}
})();