{"id":55675,"date":"2022-05-10T03:01:30","date_gmt":"2022-05-09T17:01:30","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=55675"},"modified":"2022-05-11T15:12:12","modified_gmt":"2022-05-11T05:12:12","slug":"random-background-webpage-fade-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/random-background-webpage-fade-tutorial\/","title":{"rendered":"Random Background Webpage Fade Tutorial"},"content":{"rendered":"
\"Random<\/a>

Random Background Webpage Fade Tutorial<\/p><\/div>\n

We add in CSS driven fade in and fade out functionality on top of yesterday’s Random Background Webpage Primer Tutorial<\/a> which introduced a simple web application accessing the wonderful Lorem Picsum<\/a>‘s access to great photographs used as a background image to that web application’s webpage.<\/p>\n

The point of this fade in and fade out functionality is to increase the “peace” we hope the user feels starting up this changed<\/a> random_background.html<\/a>‘s web application<\/a> you can also see here<\/a> …<\/p>\n


\n<style>
\n
\nbody {
\n margin: 0 0 0 0;
\n}
\n
\n#overlay {
\n position:relative;
\n margin: 0 0 0 0;
\n top:0;
\n left:0;
\n width:100%;
\n height:100%;
\n opacity:1.0;
\n background:rgba(0,0,0,1.0);
\n outset: 5px solid rgba(0,0,0,1.0);
\n -webkit-animation: fadeinout 15s infinite ease-in-out alternate;
\n animation: fadeinout 15s infinite ease-in-out alternate;
\n}
\n
\n@-webkit-keyframes fadeinout {
\n 0%,100% { opacity: 0.95; }
\n 50% { opacity: 0; }
\n}
\n
\n@keyframes fadeinout {
\n 0%,100% { opacity: 0.95; }
\n 50% { opacity: 0; }
\n}
\n<\/style>
\n<\/code><\/p>\n

… calling on one new (background image masking type of) div element added to the HTML as per …<\/p>\n


\n<div id=overlay><\/div>
\n<\/code><\/p>\n

\n

\n

Previous relevant Random Background Webpage Primer Tutorial<\/a> is shown below.<\/p>\n

\"Random<\/a>

Random Background Webpage Primer Tutorial<\/p><\/div>\n

The work of yesterday’s Text Background Clip Primer Tutorial<\/a> had us stumbling upon (thanks to Emoji + background-clip:text<\/a>) the “totally excellent and generous” Lorem Picsum<\/a> website, it being a randomised resource enabling access to excellent photography images.<\/p>\n

The upshot is it was easy …<\/p>\n


\n<html>
\n<title>Random Backgrounds - RJM Programming - May, 2020 ... thanks to https:\/\/picsum.photos<\/title>
\n<head>
\n<script type='text\/javascript'>
\n var onis='&#9642;';
\n var offis='&#9643;';
\n var titleis='Thanks to https:\/\/picsum.photos for image background(s) ... ';
\n for (var i=1; i<=10; i++) {
\n titleis+=String.fromCodePoint(9643);
\n }
\n
\nif (!String.fromCodePoint) { \/\/ thanks to http:\/\/xahlee.info\/js\/js_unicode_code_point.html
\n\/\/ ES6 Unicode Shims 0.1 , \u00a9 2012 Steven Levithan , MIT License
\n String.fromCodePoint = function fromCodePoint () {
\n var chars = [], point, offset, units, i;
\n for (i = 0; i < arguments.length; ++i) {
\n point = arguments[i];
\n offset = point - 0x10000;
\n units = point > 0xFFFF ? [0xD800 + (offset >> 10), 0xDC00 + (offset & 0x3FF)] : [point];
\n chars.push(String.fromCharCode.apply(null, units));
\n }
\n return chars.join(\"\");
\n }
\n}
\n
\n function preonl() {
\n if (1 == 2) {
\n document.getElementById('myiframe').src=document.URL.split('#')[0].split('?')[0] + '?random=' + Math.floor(Math.random() * 19876543);
\n document.body.title=titleis;
\n } else {
\n document.body.style.backgroundImage=\"url(https:\/\/picsum.photos\/\" + ('' + screen.width).split('.')[0] + \"\/\" + ('' + screen.height).split('.')[0] + \"?random=\" + Math.floor(Math.random() * 19876543) + \")\";
\n document.body.title=titleis;
\n setTimeout(preonl, 10000);
\n }
\n }
\n

\n function onl(iois) {
\n if (('' + iois.src).indexOf('?random=') != -1) {
\n if (iois != null) {
\n var aconto = (iois.contentWindow || iois.contentDocument);
\n if (aconto != null) {
\n document.getElementById('mybody').style.background=\"url(https:\/\/picsum.photos\/\" + ('' + screen.width).split('.')[0] + \"\/\" + ('' + screen.height).split('.')[0] + \") center center no-repeat\";
\n setTimeout(preonl, 10000);
\n }
\n }
\n }
\n }
\n

\n function progit() {
\n document.body.title=document.body.title.replace(String.fromCodePoint(9643), String.fromCodePoint(9642));
\n }
\n

\n setTimeout(preonl, 10000);
\n setInterval(progit, 1000);
\n<\/script>
\n<\/head>
\n<script type='text\/javascript'>
\n document.write(\"<body title='\" + titleis + \"' id=mybody style='background: url(https:\/\/picsum.photos\/\" + ('' + screen.width).split('.')[0] + \"\/\" + ('' + screen.height).split('.')[0] + \") center center no-repeat;'><iframe onload=onl(this); id=myiframe src='' style='display:none;'><\/iframe><\/body>\");
\n<\/script>
\n<\/html>
\n<\/code><\/p>\n

… for us designing a “peace inducing” random_background.html<\/a> random background image webpage<\/a> we’ll also show below …<\/p>\n