Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
body
{
background-color: #000;
padding: 2%;
color: #ccc;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1em;
}
a
{
color: #0CC5DA;
text-decoration: none;
}
a:hover
{
color: #DCE808;
text-decoration: underline;
}
p
{
margin: 0 auto;
width: 960px;
margin-top: 1%;
text-align: center;
}
p.larger
{
font-size: 1.1em;
}
.container
{
margin: 0 auto;
position: relative;
overflow: hidden;
}
.container span
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
}
.container ul, .container li
{
padding: 0;
margin: 0;
list-style: none;
}
.container li
{
display: none;
}
.container li.active
{
display: inline;
}
</style>
</head>
<body>
<div class="container" id="container">
<ul>
<li class="active"><img src="http://devanswer.com/codes/files/photo_1.jpg" alt="" /></li>
<li><img src="http://devanswer.com/codes/files/photo_2.jpg" alt="" /></li>
<li><img src="http://devanswer.com/codes/files/photo_3.jpg" alt="" /></li>
<li><img src="http://devanswer.com/codes/files/photo_4.jpg" alt="" /></li>
</ul>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
$(document).ready(function(){
var width = 960;
height = 538;
var numberOfBlinds = 20;
var margin = 2;
var color = '#000';
gapHeight = 100;
var container = $('#container');
container.width(width).height(height);
var blindWidth = width / numberOfBlinds;
images = new Array();
$('ul li', container).each(function() {
images.push($(this));
});
images[0].addClass('active');
activeImage = 0;
for (var i = 0; i < numberOfBlinds; i++) {
var tempEl = $(document.createElement('span'));
var borders = calculateBorders();
tempEl.css({
'left': i * blindWidth,
border: margin + 'px solid ' + color,
borderTop: borders.borderWidthTop + 'px solid ' + color,
borderBottom: borders.borderWidthBottom + 'px solid ' + color,
'height': height,
'width': blindWidth
});
container.prepend(tempEl);
};
blinds = $('span', container);
setTimeout(animateBorders, 1000);
});
function calculateBorders() {
var random = Math.floor((Math.random()*9)+1);
var borderWidthTop = (random / 10) * gapHeight;
var borderWidthBottom = gapHeight - borderWidthTop;
return {borderWidthTop: borderWidthTop, borderWidthBottom: borderWidthBottom};
}
function animateBorders() {
var changeOccuredOnce = false;
blinds.animate({
borderTopWidth: height / 2,
borderBottomWidth: height / 2
}, 1000, function() {
if(!changeOccuredOnce) {
images[activeImage].removeClass('active');
activeImage = (activeImage + 1) % images.length;
images[activeImage].addClass('active');
setTimeout(animateBorders, 3000);
changeOccuredOnce = true;
}
var borders = calculateBorders();
$(this).delay(300).animate({
borderTopWidth: borders.borderWidthTop,
borderBottomWidth: borders.borderWidthBottom
}, 1000);
});
}
</script>
</body>
</html>
