<!DOCTYPE html>
<html>
<head>
<title>Parallax Scrolling - RJM Programming - September, 2023 ... thanks to https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm and http://picsum.photos/ (Lorem Picsum)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<script type=text/javascript>
var sixhundred='600';
var fourhundred='400';
var tcont=location.search.split('mywords=')[1] ? decodeURIComponent(location.search.split('mywords=')[1].split('&')[0]) : 'Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque non molestie dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis, ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.';
var prefix=location.search.split('prefix=')[1] ? decodeURIComponent(location.search.split('prefix=')[1].split('&')[0]) : '//picsum.photos/';
var backimg=location.search.split('bimg=')[1] ? decodeURIComponent(location.search.split('bimg=')[1].split('&')[0]) : '';
var mode='dw';
var suffix='/';
var tlen=eval('' + tcont.length);
var twidth=300;
var thispadding=52;
var lastw=-1;
var doask=true;
var ten=45;
var midbit='600/400';
var cis='pointer';
var ptc='#';
var iptc=0;
var btlist=[];
var vsbtlist=[];
var omo='';
var lastblogtitle='';
var lastblogparagraph='';

var zhr=null;
var zform=null;
var rawhtml='';

var filterlist="emboss edge negedge sharpen boxblur grayscale gaussianblur selectiveblur negate colourizered colourizegreen colourize colourizeblue pixellate smooth contrast brightness sketchy flipvertical fliphorizontal flip scale crop merge transparent rotation";


function defmaybe(inu, altinu) {
var retomo=omo;
if (inu.indexOf(altinu) == -1 || altinu.trim() != '') {
return '//www.rjmprogramming.com.au/ITblog/' + altinu;
}
if (omo != '') {
omo='';
return retomo;
}
return inu;
}

function stateChanged() {
var inm=1, jnm=1, thebtitle='', selbit='', thisblogtitle='';
if (zhr.readyState == 4) {
if (zhr.status == 200) {
lastblogtitle='';
lastblogparagraph='';
rawhtml = zhr.response;
var mmore=rawhtml.split('<p>');
if (eval('' + mmore.length) > 1) {
selbit='<select onchange="window.open(' + "this.value,'_blank','top=200,left=200,width=700,height=700'" + ');"><OPTION value=#>Featured Blog Posts ...</OPTION></select>';
for (var ji=eval(-1 + eval('' + mmore.length)); ji>=1; ji--) {
thisblogtitle=mmore[eval(-1 + ji)].split('?random=')[0];
if (thisblogtitle.indexOf('</p>') != -1) { thisblogtitle=thisblogtitle.split('</p>')[1]; }
if (thisblogtitle.indexOf(String.fromCharCode(10)) != -1) { thisblogtitle=thisblogtitle.split(String.fromCharCode(10))[eval(-1 + thisblogtitle.split(String.fromCharCode(10)).length)]; }
lastblogparagraph='<p>' + mmore[ji].split('</p>')[0] + '</p>';
tcont=mmore[ji].split('</p>')[0];
if (ji == 2) { // myp
if (document.getElementById('myp').innerHTML.indexOf('Scroll up and down') == 0 || document.getElementById('myp').innerHTML.indexOf('<') != -1) {
document.getElementById('myp').setAttribute('contenteditable', false);
if (document.getElementById('myp').innerHTML.indexOf(thisblogtitle) == -1) {
document.getElementById('myp').innerHTML=thisblogtitle + ' ... ' + lastblogparagraph.replace("<a href=", "<a style=text-decoration:underline;cursor:pointer; onclick='window.open(").replace('>Continue reading', ',"_blank","top=100,left=100,height=800,width=800");' + "'>Continue reading");
}
}
} else if (ji == 3) { // pmy
if (document.getElementById('pmy').innerHTML.indexOf('Scroll up and down') == 0 || document.getElementById('pmy').innerHTML.indexOf('<') != -1) {
document.getElementById('pmy').setAttribute('contenteditable', false);
if (document.getElementById('pmy').innerHTML.indexOf(thisblogtitle) == -1) {
document.getElementById('pmy').innerHTML=thisblogtitle + ' ... ' + lastblogparagraph.replace("<a href=", "<a style=text-decoration:underline;cursor:pointer; onclick='window.open(").replace('>Continue reading', ',"_blank","top=100,left=100,height=800,width=800");' + "'>Continue reading");
}
}
}
selbit=selbit.replace('</OPTION>', '</OPTION><option value="//www.rjmprogramming.com.au/ITblog/' + thisblogtitle.split(' (')[0].toLowerCase().replace(String.fromCharCode(35), "").replace(".", "").replace(".", "").replace(".", "").replace("+", "").replace("+", "").replace("'", "").replace('%27','').replace(/\//g, "").replace(/,/g, "").replace("---","-").replace("---","-").replace(/--/g,"-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-") + '">' + thisblogtitle + '</option>');
rawhtml=rawhtml.replace(lastblogparagraph,'');
}
document.getElementById('mytdiv').setAttribute('contenteditable', false);
document.getElementById('mytdiv').innerHTML=tcont.replace("<a href=", "<a style=text-decoration:underline;cursor:pointer; onclick='window.open(").replace('>Continue reading', ',"_blank","top=100,left=100,height=800,width=800");' + "'>Continue reading");
if (rawhtml.indexOf('random=') != -1) {
lastblogtitle=rawhtml.split('?random=')[0];
document.getElementById('myh3').setAttribute('contenteditable', false);
document.getElementById('myh3').innerHTML=lastblogtitle;
if (selbit != '') {
if (document.getElementById('lessheight').innerHTML.indexOf('LESS HEIGHT') != -1) {
document.getElementById('lessheight').innerHTML='';
}
if (document.getElementById('scrollup').innerHTML.indexOf('SCROLL UP') != -1) {
document.getElementById('scrollup').innerHTML='';
}
if (document.getElementById('topspan').innerHTML.indexOf('SCROLL DOWN') != -1 || document.getElementById('topspan').innerHTML.indexOf('<') != -1) {
document.getElementById('topspan').setAttribute('contenteditable', false);
document.getElementById('topspan').innerHTML=selbit.replace('select onchange', 'select style=background-color:rgba(255,255,153,0.5); onchange');
}
if (document.getElementById('bottomspan').innerHTML.indexOf('COOL!') != -1 || document.getElementById('bottomspan').innerHTML.indexOf('<') != -1) {
document.getElementById('bottomspan').setAttribute('contenteditable', false);
document.getElementById('bottomspan').innerHTML=selbit.replace('select onchange', 'select style=background-color:rgba(255,182,193,0.5); onchange');
}
}
}
}
console.log('rawhtml=' + rawhtml);
if (rawhtml.indexOf('random=') != -1 && vsbtlist.length > 0) {
var rawrs=rawhtml.split('random=');
for (inm=1; inm<rawrs.length; inm++) {
for (jnm=0; jnm<vsbtlist.length; jnm++) {
if (vsbtlist[jnm].indexOf('?random=' + rawrs[inm].split(String.fromCharCode(10))[0]) != -1) {
console.log('found ...');
thebtitle=rawhtml.split('?random=' + rawrs[inm].split(String.fromCharCode(10))[0])[0].split(String.fromCharCode(10))[eval(-1 + rawhtml.split('?random=' + rawrs[inm].split(String.fromCharCode(10))[0])[0].split(String.fromCharCode(10)).length)];
//console.log(thebtitle);
document.getElementById(vsbtlist[jnm].split('?')[0]).title=thebtitle + ' ... you can right click to navigate there';
document.getElementById(vsbtlist[jnm].split('?')[0]).onmouseout=function(){ omo=''; };
document.getElementById(vsbtlist[jnm].split('?')[0]).onmouseover=function(){ omo='//www.rjmprogramming.com.au/ITblog/' + thebtitle.split(' (')[0].toLowerCase().replace(String.fromCharCode(35), "").replace(".", "").replace(".", "").replace(".", "").replace("+", "").replace("+", "").replace("'", "").replace('%27','').replace(/\//g, "").replace(/,/g, "").replace("---","-").replace("---","-").replace(/--/g,"-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-"); };
document.getElementById(vsbtlist[jnm].split('?')[0]).oncontextmenu=function(event){ window.open(defmaybe('//www.rjmprogramming.com.au/ITblog/' + thebtitle.split(' (')[0].toLowerCase().replace(String.fromCharCode(35), "").replace(".", "").replace(".", "").replace(".", "").replace("+", "").replace("+", "").replace("'", "").replace('%27','').replace(/\//g, "").replace(/,/g, "").replace("---","-").replace("---","-").replace(/--/g,"-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-"), event.target.title.split(' (')[0].split(' ... ')[0].toLowerCase().replace(String.fromCharCode(35), "").replace(".", "").replace(".", "").replace(".", "").replace("+", "").replace("+", "").replace("'", "").replace('%27','').replace(/\//g, "").replace(/,/g, "").replace("---","-").replace("---","-").replace(/--/g,"-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-")),'_blank','top=50,left=50,width=800,height=800'); };
}
}
}
}
}
}
}

function ajaxit() {
zhr = new XMLHttpRequest();
zhr.onreadystatechange=stateChanged;
zhr.open('get', '//www.rjmprogramming.com.au/ptitle_data.html?random=' + Math.floor(Math.random() * 196756453), true);
zhr.send(null);
}


function get_tex_width(txt, font) { // thanks to https://stackoverflow.com/questions/31305071/measuring-text-width-height-without-rendering
this.element = document.createElement('canvas');
this.context = this.element.getContext("2d");
this.context.font = font;
return this.context.measureText(txt).width;
}

function checkit() {
var thisw=get_tex_width(tcont, "80px Arial");
if (eval(thispadding + thisw) > eval('' + twidth)) {
if (lastw > 0) {
twidth += eval(thisw - lastw);
document.getElementById('dstyle').innerHTML+='<style> .bg-text { width: ' + twidth + 'px; } </style>';
lastw=twidth;
} else {
twidth=eval(thispadding + thisw);
document.getElementById('dstyle').innerHTML+='<style> .bg-text { width: ' + twidth + 'px; } </style>';
lastw=twidth;
}
}
if (lastw < 0) {
lastw=thisw;
}
}

function prehere(evt) {
if (evt.keyCode == 8 || evt.keyCode == 46) {
tlen--;
if (tlen <= 0) {
tcont='';
tlen=0;
} else {
tcont=tcont.substring(0,tlen);
}
} else if (evt.altKey || evt.ctrlKey) {
tlen=tlen;
} else {
tlen++;
if (eval('' + evt.keyCode) == 187 || eval('' + evt.keyCode) == 189 || eval('' + evt.keyCode) == 190 || eval('' + evt.keyCode) == 32) {
tcont+=' ';
} else if (eval('' + evt.keyCode) >= 65 && eval('' + evt.keyCode) <= 90) {
if (evt.shiftKey) {
tcont+=String.fromCharCode(evt.keyCode);
} else {
tcont+=String.fromCharCode(eval(32 + evt.keyCode));
}
} else if (eval('' + evt.keyCode) >= 48 && eval('' + evt.keyCode) <= 57) {
tcont+=String.fromCharCode(evt.keyCode);
} else if (evt.keyCode >= 65 && evt.keyCode <= 70) {
tcont+=String.fromCharCode(eval(-65 + evt.keyCode));
} else if (evt.keyCode >= 97 && evt.keyCode <= 102) {
tcont+=String.fromCharCode(evt.keyCode);
} else if (evt.shiftKey || evt.altKey || evt.ctrlKey) {
tlen--;
} else {
tcont+=' ';
}
}
checkit();
//document.title='there ' + tlen + ' ' + twidth + ' versus ' + tcont + ' ' + get_tex_width(tcont, "80px Arial") + ' ... ' + evt.keyCode;
}

function lpask() {
doask=false;
backimg='lorempicsum';
mode='';
preask();
setTimeout(function(){ doask=true; }, eval(ten * 1000));
}

function ask() {
var mentionmode='back';
// //www.rjmprogramming.com.au/ITblog/600/400edge[-1, -1, -1], [-1, 4, -1], [-1, -1, -1]/
if (doask) {
var ansis=prompt(('Optionally type in background source URL prefix [' + prefix + midbit + suffix + '] ( or use Lorem Picsum or for blog images try //www.rjmprogramming.com.au/ITblog/' + sixhundred + '/' + fourhundred + '/ (and can optionally wedge in an Image Filter in amongst words below (plus add your own arguments), or Topic of Interest appended to those numbers, where + is a space, if you wish eg. //www.rjmprogramming.com.au/ITblog/' + sixhundred + '/' + fourhundred + 'Google+Chart/ )), hashtag delimited from optional seconds image refresh rate [' + ten + '], hashtagged from optional Text background image (or Lorem Picsum), hashtagged from optional Text wording [' + tcont + '] we will assume involves a space. To turn off instructions enter single character x').replace('[' + 'Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque non molestie dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis, ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.' + ']',''), ' ' + filterlist);
if (ansis != null) {
if (ansis.toLowerCase() == 'x') {
nomoreinstructionplease();
ansis=null;
}
}
if (ansis != null) {
if (ansis.replace(filterlist,'').trim() != '') {
var things=ansis.replace(filterlist,'').replace(/colorize/g, 'colourize').replace(/COLORIZE/g, 'COLOURIZE').split('#');
//alert(things[0] + '#');
for (var ii=0; ii<things.length; ii++) {
if (things[ii].trim() != '') {
if (things[ii].trim().substring(0,1) >= '0' && things[ii].trim().substring(0,1) <= '9') {
ten=eval(things[ii].trim());
} else if (things[ii].trim().indexOf(' ') != -1 && things[ii].trim().toLowerCase().replace(/\ /g,'') != 'lorempicsum') {
//alert(things[ii]);
var ourrestis='', fls=filterlist.split(' ');
for (var ifls=0; ifls<fls.length; ifls++) {
if (things[ii].toLowerCase().indexOf(fls[ifls]) != -1) {
ourrestis=things[ii].toLowerCase().split(fls[ifls])[1].split('/')[0];
if (encodeURIComponent(ourrestis.replace(/\ /g,'')) != ourrestis) {
things[ii]=things[ii].replace(ourrestis, encodeURIComponent(ourrestis.replace(/\ /g,'')));
}
}
}
document.getElementById('mytdiv').innerHTML = things[ii];
tcont=things[ii];
tlen=eval('' + tcont.length);
setTimeout(checkit, 5000);
} else if (mentionmode == 'back') {
mentionmode='';
if (things[ii].trim().toLowerCase().replace(/\ /g,'') == 'lorempicsum') {
midbit='/600/400';
suffix='/';
prefix='//picsum.photos/';
iptc=0;
ptc='#';
} else {
midbit='';
suffix='';
prefix=things[ii].trim();
//alert('prefix=' + prefix);
if (prefix.indexOf('rjmprogramming.com.au/ITblog') != -1) {
iptc=1;
ptc='#195437'; //'#591734';
//alert('here');
} else {
iptc=0;
ptc='#';
}
}
} else {
if (things[ii].trim().toLowerCase().replace(/\ /g,'') == 'lorempicsum') {
backimg='lorempicsum'; // '//picsum.photos/600/400/';
} else {
backimg=things[ii].trim();
}
mode='';
preask();
}
}
}
}
}
}
//doask=true;
}

function preask() {
if (backimg.trim() != '') {
if (backimg.toLowerCase().replace(/\ /g,'') == 'lorempicsum') {
backimg='//picsum.photos/600/400' + suffix + '?random=' + Math.floor(Math.random() * 198765643) + ptc.substring(iptc).split('#')[0].replace('&ptitlecollect=y',''); // vs ptitlecollect=y
if (mode == 'dw') {
mode='';
document.write('<style> .bg-text { background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL("' + backimg + '"); background-size: contain; background-repeat: repeat; text-shadow:-2px 2px 2px #ff2d95; opacity: 0.9; } </style>');
} else {
document.getElementById('dstyle').innerHTML+='<style> .bg-text { background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL("' + backimg + '"); background-size: contain; background-repeat: repeat; text-shadow:-2px 2px 2px #ff2d95; opacity: 0.9; } </style>';
}
backimg='lorempicsum';
} else {
if (mode == 'dw') {
mode='';
document.write('<style> .bg-text { background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL("' + backimg + '"); background-size: contain; background-repeat: repeat; text-shadow:-2px 2px 2px #ff2d95; opacity: 0.9; } </style>');
} else {
document.getElementById('dstyle').innerHTML+='<style> .bg-text { background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL("' + backimg + '"); background-size: contain; background-repeat: repeat; text-shadow:-2px 2px 2px #ff2d95; opacity: 0.9; } </style>';
}
}
}
}


function prefireup() {
tcont=document.getElementById('mytdiv').innerText;
tlen=eval('' + tcont.length);
if (tcont != 'Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque non molestie dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis, ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.') { checkit(); }
fireup();
}

function fireup() {
vsbtlist=[];
for (var i=1; i<=3; i++) {
vsbtlist.push('dimg' + i + '?random=' + Math.floor(Math.random() * 198765643) + ptc.substring(iptc).split('#')[0].replace('&ptitlecollect=y','')); // vs ptitlecollect=y
console.log(vsbtlist[eval(-1 + i)].replace(vsbtlist[eval(-1 + i)].split('?')[0],''));
document.getElementById('dstyle').innerHTML+='<style> .img' + i + ' { background-image: url("' + prefix + midbit + suffix + vsbtlist[eval(-1 + i)].replace(vsbtlist[eval(-1 + i)].split('?')[0],'') + '); } </style>';
}
if (iptc == 1) {
setTimeout(ajaxit, eval(ten * 450)); // used to be 100
}
if (backimg.toLowerCase().replace(/\ /g,'') == 'lorempicsum' && mode != 'dw') { preask(); }
if (tcont.trim() == '' && cis == 'pointer') {
cis='none';
document.getElementById('dstyle').innerHTML+='<style> #mytdiv { cursor: none; } </style>';
document.getElementById('outthere').focus();
} else if (tcont.trim() != '' && cis == 'none') {
cis='pointer';
document.getElementById('dstyle').innerHTML+='<style> #mytdiv { cursor: pointer; } </style>';
}
setTimeout(fireup, eval(ten * 1000));
}

function nomoreinstructionplease() {
var eles=document.getElementsByTagName('*');
document.getElementById('myp').innerHTML='';
document.getElementById('pmy').innerHTML='';
for (var ieles=0; ieles<=eles.length; ieles++) {
try {
if (('' + eles[ieles].className).indexOf('border') != -1) {
eles[ieles].innerHTML='';
eles[ieles].style.backgroundColor='transparent';
}
} catch(hgrhg) { }
}
document.getElementById('mytdiv').innerHTML='Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling.';
}


</script>

<style>
body, html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}

.bgimg-1, .bgimg-2, .bgimg-3 {
position: relative;
opacity: 0.65;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;

}
.bgimg-1 {
background-image: url("img_parallax.jpg");
min-height: 100%;
}

.bgimg-2 {
background-image: url("img_parallax2.jpg");
min-height: 400px;
}

.bgimg-3 {
background-image: url("img_parallax3.jpg");
min-height: 400px;
}

.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}

.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}

h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
.bgimg-1, .bgimg-2, .bgimg-3 {
background-attachment: scroll;
}
}
</style>
</head>
<body ondblclick=lpask(); onclick=setTimeout(ask,2000); onload=prefireup(); title="Parallax Scrolling - RJM Programming - September, 2023 ... thanks to https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm and http://picsum.photos/ (Lorem Picsum) ... click to be able to further change the Text element background image or the source for the overall background images or image refresh delay in seconds or text wording itself, while double click starts using Lorem Picsum for Text element background image purposes.">

<div class="bgimg-1 img1" id=dimg1>
<div class="caption">
<span id=topspan class="border" ondblclick="this.style.backgroundColor='#111';" onclick="if (this.innerHTML.length == 0) { this.style.backgroundColor='transparent'; } else { this.style.backgroundColor='#111'; } event.stopPropagation();" contenteditable=true>SCROLL DOWN</span>
</div>
</div>

<div style="color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: justify;">
<h3 id="myh3" style="text-align:center;" onclick="event.stopPropagation();" contenteditable=true>Parallax Demo</h3>
<script type=text/javascript>
document.write('<p id="mytdiv" spellcheck="false" onclick="event.stopPropagation();" class="bg-text" contenteditable=true data-onkeydown="prehere(event);" data-onblur="tcont=this.innerText; tlen=eval(tcont.length); checkit();">' + tcont + '</p>');
</script>
</div>

<div class="bgimg-2 img2" id=dimg2>
<div class="caption">
<span id=lessheight class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;" ondblclick="this.style.backgroundColor='#111';" onclick="if (this.innerHTML.length == 0) { this.style.backgroundColor='transparent'; } else { this.style.backgroundColor='#111'; } event.stopPropagation();" contenteditable=true>LESS HEIGHT</span>
</div>
</div>

<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p id="myp" onclick="event.stopPropagation();" contenteditable=true>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
</div>
</div>

<div class="bgimg-3 img3" id=dimg3>
<div class="caption">
<span id=scrollup class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;" ondblclick="this.style.backgroundColor='#111';" onclick="if (this.innerHTML.length == 0) { this.style.backgroundColor='transparent'; } else { this.style.backgroundColor='#111'; } event.stopPropagation();" contenteditable=true>SCROLL UP</span>
</div>
</div>

<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p id="pmy" onclick="event.stopPropagation();" contenteditable=true>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
</div>
</div>

<div class="bgimg-1 img1" id=dimg01>
<div class="caption">
<span id=bottomspan class="border" ondblclick="this.style.backgroundColor='#111';" onclick="if (this.innerHTML.length == 0) { this.style.backgroundColor='transparent'; } else { this.style.backgroundColor='#111'; } event.stopPropagation();" contenteditable=true>COOL!</span>
</div>
</div>

<div id=dstyle>
<script type=text/javascript>
preask();
</script>
</div>
<input id=outthere type=text style='position:absolute;top:-500px;left:-500px;' value=''></input>
</body>
</html>