<!doctype html>
<html>
<head>
<title>CSS3 Animation Below the Fold - RJM Programming - October, 2017</title>
<script type='text/javascript' src='css3_animation_belowthefold.js' async='async'></script>
<script type='text/javascript'>
var mydiv=null, x=-1, y=-1, myduration=40, mydelay=6, mycolour='ff0000', myimage='nala.jpg', cxy='';

function onc(event) {
if (event.clientX || event.clientY) {
x = event.clientX;
y = event.clientY;
} else {
x = event.pageX;
y = event.pageY;
}
cxy='&x=' + x + '&y=' + y;
mydiv.style.marginTop='' + y + 'px';
mydiv.style.marginLeft='' + x + 'px';
document.body.style.backgroundColor='#' + (Math.floor(Math.random() * 88) + 10) + (Math.floor(Math.random() * 88) + 10) + (Math.floor(Math.random() * 88) + 10);
}

function ol() {
mydiv=document.getElementsByTagName('div')[0];
myduration=location.search.split('duration=')[1] ? location.search.split('duration=')[1].split('&')[0] : 40;
mydelay=location.search.split('delay=')[1] ? location.search.split('delay=')[1].split('&')[0] : 6;
mycolour=location.search.split('colour=')[1] ? decodeURIComponent(location.search.split('colour=')[1].split('&')[0]) : 'ff0000';
myimage=location.search.split('bimage=')[1] ? decodeURIComponent(location.search.split('bimage=')[1].split('&')[0]) : '../../PHP/nala.jpg';
x=location.search.split('x=')[1] ? eval(decodeURIComponent(location.search.split('x=')[1].split('&')[0])) : -1;
y=location.search.split('y=')[1] ? eval(decodeURIComponent(location.search.split('y=')[1].split('&')[0])) : -1;
if (myduration != 40) {
document.getElementById('duration').value=myduration;
mydiv.style.WebkitAnimationDuration='' + myduration + 's'
mydiv.style.animationDuration='' + myduration + 's';
}
if (mydelay != 6) {
document.getElementById('delay').value=mydelay;
mydiv.style.WebkitAnimationDelay='' + mydelay + 's'
mydiv.style.animationDelay='' + mydelay + 's';
}
if (mycolour.toLowerCase() != 'ff0000' && mycolour.toLowerCase() != 'red') {
if (mycolour.length == 6) {
document.getElementById('colour').value='#' + mycolour;
mydiv.style.backgroundColor='#' + mycolour;
} else {
document.getElementById('colour').value='' + mycolour;
mydiv.style.backgroundColor='' + mycolour;
}
}
if (myimage != '../../PHP/nala.jpg') {
document.getElementById('bimage').value=myimage;
if (myimage == '') {
mydiv.style.background=null;
document.getElementById('tni').style.display='none';
} else {
document.getElementById('tni').src=myimage;
mydiv.style.background="url('" + myimage + "')";
}
} else {
mydiv.style.background="url('" + myimage + "')";
}
if (x != -1 || y != -1) {
mydiv.style.marginTop='' + y + 'px';
mydiv.style.marginLeft='' + x + 'px';
document.body.style.backgroundColor='#' + (Math.floor(Math.random() * 88) + 10) + (Math.floor(Math.random() * 88) + 10) + (Math.floor(Math.random() * 88) + 10);
}
}
</script>
<style>
body {
background:#428CD6;
}

div {
border: 3px solid #fff;
border-radius: 81px;
height: 81px;
left: 50%;
margin: 2000px 0 0 -15px;
opacity: 0;
position: absolute;
top: 50%;
width: 50px;

animation: pulsate 1s ease-out;
animation-iteration-count: infinite;
}

@keyframes pulsate {
0% {
opacity: 0;
}
50% {
opacity:1;
}
100% {
opacity:0;
}
}
</style>
</head>
<body onload='ol();' onclick='onc(event);'>
<h1>CSS3 Animation Below the Fold</h1>
<h2>Click within this writing to start seeing the Animation going on way down the bottom "below the fold"</h2>
<h3>Thanks to <a target=_blank title='https://codepen.io/tonygentilcore/pen/pHmdJ' href='https://codepen.io/tonygentilcore/pen/pHmdJ'>https://codepen.io/tonygentilcore/pen/pHmdJ</a></h3>
<p><strong>Note:</strong> Rule @keyframes not supported in Internet Explorer 9 & earlier versions. <br>We have a <input style='width:80px;' id='duration' type='number' step='1' min='0' onblur=" location.href=document.URL.split('#')[0].split('?')[0] + '?duration=' + this.value + '&delay=' + document.getElementById('delay').value + '&bimage=' + document.getElementById('bimage').value + cxy + '&colour=' + document.getElementById('colour').value.replace('#',''); " onchange=" location.href=document.URL.split('#')[0].split('?')[0] + '?duration=' + this.value + '&delay=' + document.getElementById('delay').value + '&bimage=' + document.getElementById('bimage').value + cxy + '&colour=' + document.getElementById('colour').value.replace('#',''); " value='40'></input> second duration & <input style='width:80px;' id='delay' type='number' step='1' min='0' onblur=" location.href=document.URL.split('#')[0].split('?')[0] + '?delay=' + this.value + '&duration=' + document.getElementById('duration').value + '&bimage=' + document.getElementById('bimage').value + cxy + '&colour=' + document.getElementById('colour').value.replace('#',''); " onchange=" location.href=document.URL.split('#')[0].split('?')[0] + '?delay=' + this.value + '&duration=' + document.getElementById('duration').value + '&bimage=' + document.getElementById('bimage').value + cxy + '&colour=' + document.getElementById('colour').value.replace('#',''); " value='6'></input> second delay <input style='width:80px;' id='colour' type='color' value='#ff0000' title='Colour' onchange=" location.href=document.URL.split('#')[0].split('?')[0] + '?delay=' + document.getElementById('delay').value + '&duration=' + document.getElementById('duration').value + '&bimage=' + document.getElementById('bimage').value + cxy + '&colour=' + this.value.replace('#',''); " ></input> <input type='url' title='Background image' value='../../PHP/nala.jpg' id='bimage' onblur=" location.href=document.URL.split('#')[0].split('?')[0] + '?duration=' + document.getElementById('duration').value + '&delay=' + document.getElementById('delay').value + '&bimage=' + document.getElementById('bimage').value + cxy + '&colour=' + document.getElementById('colour').value.replace('#',''); " onchange=" location.href=document.URL.split('#')[0].split('?')[0] + '?duration=' + document.getElementById('duration').value + '&delay=' + document.getElementById('delay').value + '&bimage=' + document.getElementById('bimage').value + cxy + '&colour=' + document.getElementById('colour').value.replace('#',''); " ></input> <img title='Thumbnail' style='width:45px;' src='../../PHP/nala.jpg' id='tni'></img> animation happening.</p>
<iframe style="width:100%;height:700px;" src="//www.rjmprogramming.com.au/PHP/australian_lighthouses.php#selsort" title="Lighthouses in Australia"></iframe>';
<div onclick='onc(event);'></div>
</body>
</html>