Created
April 5, 2017 06:33
-
-
Save pzagor2/8c20f0f95704def1bcd97ba71d1f4292 to your computer and use it in GitHub Desktop.
Example on how to make image parallax
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//# sourceURL=RAD.js | |
var radWrapper = document.getElementById('rad-wrapper'); | |
var inEditor = window.location.href.indexOf('edit-loader.html') > -1 ? true : false; | |
//Use 'inScreenshot' to change behavior when the creative is loaded for fullbacks (Usually we don't run the animation) | |
var inScreenshot = window.location.href.indexOf('preview?screenshot=1') > -1 ? true : false; | |
var ad = Radical.getAdByContainer(window.frameElement); | |
if (inEditor) { | |
radWrapper.style.opacity = '1'; | |
} | |
if (!inEditor) { | |
(function () { | |
var baseOffset = 0; | |
Radical.addListener(function(ev) { | |
var els = ['a1']; | |
//console.log(ev); | |
if(ev.name == 'visible' && ev.data.frame == window.frameElement) { | |
//console.log('became visible'); | |
} | |
if(ev.name == 'hidden' && ev.data.frame == window.frameElement) { | |
//console.log('became hidden'); | |
} | |
if(baseOffset != 0 && ev.name == 'resize' && ev.data.frame == window.frameElement) { | |
resetEffect(els); | |
setTimeout(function() { applyEffect(baseOffset, els); },10); | |
} | |
if(ev.name == 'scroll' && ev.data.frame == window.frameElement) { | |
var scrollMax = ev.data.viewport.height - radWrapper.clientHeight; | |
baseOffset =(ev.data.viewport.height - ev.data.bounds.bottom); | |
if (baseOffset > 0) { | |
applyEffect(baseOffset, scrollMax, els); | |
} | |
} | |
}); | |
function applyEffect(offset, scrollMax, els) { | |
offset = offset * -1; | |
for(var i = 0; i < els.length; i++) { | |
var el = document.getElementById(els[i]); | |
if(!el.getAttribute('data-default-offset')) { | |
el.setAttribute('data-default-offset', parseInt(window.getComputedStyle(el).bottom, 10)); | |
} | |
var maxBottom = el.clientHeight - radWrapper.clientHeight; | |
var percent = offset / (scrollMax); | |
var outputX = percent * maxBottom; | |
var negative = -Math.abs(outputX); | |
el.style.bottom = negative + 'px'; | |
} | |
} | |
// function scale(x, min, max) { return (max-1) * x + min; } | |
function resetEffect(els) { | |
for(var i = 0; i < els.length; i++) { | |
var el = document.getElementById(els[i]); | |
el.setAttribute('data-default-offset', ''); | |
el.style.bottom = ''; | |
} | |
} | |
})(); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment