Skip to content

Instantly share code, notes, and snippets.

@mikemix
Created December 15, 2017 09:06
Show Gist options
  • Save mikemix/a418cf3e23070807eed9e093792c3fea to your computer and use it in GitHub Desktop.
Save mikemix/a418cf3e23070807eed9e093792c3fea to your computer and use it in GitHub Desktop.
Sliding banner on the bottom of the page for Revive Ad Server
<!-- required html -->
<a href="{clickurl}http://redirect.url" id="p_234231210934">
<img src="http://via.placeholder.com/1500x35">
</a>
<style>#p_234231210934{display:block;height:35px;width:100%;overflow:hidden;position:relative}#p_234231210934 img{display:inline;position:absolute;top:0}</style>
<!-- followed by the script (not minified) -->
<script>
var pasek=document.getElementById('p_234231210934');
var initImage=pasek.getElementsByTagName('img')[0];
window.frameElement.style.width='100%';
window.frameElement.style.position='fixed';
window.frameElement.style.bottom='0px';
window.frameElement.style.zIndex=1000;
window.moveBarLeft = function () {
var images = pasek.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
images[i].style.left = (parseInt((images[i].style.left || '0px').split("px")) - 1) + 'px';
}
if (Math.abs(images[1].offsetLeft) == 0) {
var offsetLeft = 0;
for (var j = 0; j < images.length; j++) {
images[j].style.left = offsetLeft + 'px';
offsetLeft += images[0].clientWidth;
}
}
requestAnimationFrame(window.moveBarLeft);
};
initImage.onload = function () {
var imageCount = Math.min(20, Math.ceil(window.outerWidth / initImage.clientWidth));
var offsetLeft = initImage.clientWidth;
for (var i = 0; i < imageCount; i++) {
var clone = initImage.cloneNode(true);
clone.style.left = offsetLeft + 'px';
offsetLeft *= 2;
pasek.appendChild(clone);
}
requestAnimationFrame(window.moveBarLeft);
};
</script>
<!-- or followed by the script (minified) -->
var pasek=document.getElementById("p_234231210934"),initImage=pasek.getElementsByTagName("img")[0];window.frameElement.style.width="100%",window.frameElement.style.position="fixed",window.frameElement.style.bottom="0px",window.frameElement.style.zIndex=1e3,window.moveBarLeft=function(){for(var e=pasek.getElementsByTagName("img"),t=0;t<e.length;t++)e[t].style.left=parseInt((e[t].style.left||"0px").split("px"))-1+"px";if(0==Math.abs(e[1].offsetLeft))for(var i=0,n=0;n<e.length;n++)e[n].style.left=i+"px",i+=e[0].clientWidth;requestAnimationFrame(window.moveBarLeft)},initImage.onload=function(){for(var e=Math.min(20,Math.ceil(window.outerWidth/initImage.clientWidth)),t=initImage.clientWidth,i=0;e>i;i++){var n=initImage.cloneNode(!0);n.style.left=t+"px",t*=2,pasek.appendChild(n)}requestAnimationFrame(window.moveBarLeft)};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment