Skip to content

Instantly share code, notes, and snippets.

@corradomatt

corradomatt/Random Images on Refresh

Forked from stephenscaff/Random Images on Refresh
Last active August 29, 2015 14:22
Show Gist options
  • Save corradomatt/b7cce3c907fc5cbe85e8 to your computer and use it in GitHub Desktop.
Save corradomatt/b7cce3c907fc5cbe85e8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Random Images on Refresh
<!DOCTYPE html>
<head>
<!--Little CSS fade in -->
<style>
.fadeIn{
-webkit-animation: fade-in 2s ease;
-moz-animation: fade-in ease-in-out 2s both;
-ms-animation: fade-in ease-in-out 2s both;
-o-animation: fade-in ease-in-out 2s both;
animation: fade-in 2s ease;
visibility: visible;
-webkit-backface-visibility: hidden;
}
@-webkit-keyframes fade-in{0%{opacity:0;} 100%{opacity:1;}}
@-moz-keyframes fade-in{0%{opacity:0} 100%{opacity:1}}
@-o-keyframes fade-in{0%{opacity:0} 100%{opacity:1}}
@keyframes fade-in{0%{opacity:0} 100%{opacity:1}}
</style>
</head>
<body>
<!--We appendin' on this div - ps: ids make sense here... punk-->
<div id="banner-load"></div>
<!--Don't forget Jquery-->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'></script>
<!--New images on load -->
<script>
//Add your images, we'll set the path in the next step
var images = ['banner-1.jpg', 'banner-2.jpg', 'banner-3.jpg', 'banner-4.jpg];
//Build the img, then do a bit of maths to randomize load and append to a div. Add a touch off css to fade them badboys in all sexy like.
$('<img class=" class="fade-in" src="images/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#banner-load');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment