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.
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
$(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); }; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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; } |
🙂