jQuery – Build a background with changing pictures with jQuery

So, animation in jQuery is a powerful thing! 🙂 Indeed. In the current article, I will show you the code, which I have used to produce the following beautiful video. It is just a few seconds, but you may still grasp the idea 🙂 And you probably see the logo on the top left corner of the video.

Screensaver with JQuery

Watch this video on YouTube

Here is a beautiful screenshot as well:

So what do we have? A few pictures, a random formula, jQuery, CSS and an html file. My logo is shown from the html file, the pictures are animated with jQuery. Not a lot of sense in the application, but it is really nice. If you load good pictures 🙂

So, I need to post the css, the html and the js… Plus a folder with the pictures and my beautiful logo. Here is how it looks like in GitHub.

And here comes the code:

<!DOCTYPE html>
<html>
	<head>
		<title>VitoshAcademy.com</title>
		<link type="text/css" href="style.css" rel="stylesheet">
	</head>
	<body>
        <header>
			<img id="vitoshacademy" src="background/vitoshacademy.png" />
		</header>

		<div id="container">
			<img class="background_pics" id="back1" src='background/b1.jpg' />
			<img class="background_pics" id="back2" src='background/b2.jpg' />
            <img class="background_pics" id="back3" src='background/b3.jpg' />
			<img class="background_pics" id="back4" src='background/b4.jpg' />
            <img class="background_pics" id="back5" src='background/b5.jpg' />
			<img class="background_pics" id="back6" src='background/b6.jpg' />
            <img class="background_pics" id="back7" src='background/b7.jpg' />
			<img class="background_pics" id="back8" src='background/b8.jpg' />
		</div>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" ></script>
		<script type="text/javascript" src="code.js"></script>
	</body>
</html>

$(document).ready(function(){

		show_1();
		show_2();
 });

function show_1(){
    var my_random = Math.random();

    if (my_random < 0.25){
	   $("#container #back1").fadeIn("fast").fadeOut("slow");
	} 
    else if (my_random < 0.50){
        $("#container #back3").fadeIn("slow").fadeOut("fast");
    }
    else if (my_random < 0.75){
        $("#container #back5").fadeIn("fast").fadeOut("fast");
    }
    else{
        $("#container #back7").fadeIn("slow").fadeOut("slow");
    }
    
    setTimeout("show_1()",my_random*1000);
};

function show_2(){
    var my_random = Math.random();

    if (my_random < 0.25){
	   $("#container #back2").fadeIn("fast").fadeOut("slow");
	} 
    else if (my_random < 0.50){
        $("#container #back4").fadeIn("slow").fadeOut("fast");
    }
    else if (my_random < 0.75){
        $("#container #back6").fadeIn("fast").fadeOut("fast");
    }
    else{
        $("#container #back8").fadeIn("slow").fadeOut("slow");
    }
    
    setTimeout("show_1()",my_random*100);
};

body{
	background-color:#973379;
}

#container{
	position:absolute;
	left:0px;
	top:0px;
	z-index: 0;
}

.background_pics{
	display:none;
	position:absolute;
	left:0px;
	top:0px;
	z-index: 0;
}

🙂

jQuery – Build a background with changing pictures with jQuery

Related posts: