A slideshow with a blinds transition
How do I make an a slideshow with a blinds transition?
The transition treats each part of the photo as a blind, closes them all together, and when they are open again, a new photo is revealed underneath (link to tutorial).. What is a a slideshow with a blinds transition? How do you make a a slideshow with a blinds transition? This script and codes were developed by Stathis on 02 August 2022, Tuesday.
A slideshow with a blinds transition - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A slideshow with a blinds transition</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container" id="container"> <ul> <li class="active"><img src="http://static.burnmind.com/demos/blinds-slideshow/photo_1.jpg" alt="" /></li> <li><img src="http://static.burnmind.com/demos/blinds-slideshow/photo_2.jpg" alt="" /></li> <li><img src="http://static.burnmind.com/demos/blinds-slideshow/photo_3.jpg" alt="" /></li> <li><img src="http://static.burnmind.com/demos/blinds-slideshow/photo_4.jpg" alt="" /></li> </ul>
</div>
<p class="larger">read the tutorial <a href="http://burnmind.com/tutorials/blinds-transition-slideshow-jquery">how to build a slideshow with a blinds transition using jQuery</a> @ <a href="http://burnmind.com/">burnmind.com</a></p>
<p>photos by <a href="http://www.flickr.com/photos/zoutedrop/">Bart Hiddink</a>, <a href="http://www.flickr.com/photos/epsos/">epSos .de</a>, and <a href="http://www.flickr.com/photos/billyboysfotocolection/">Billy Lindblom</a></p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
A slideshow with a blinds transition - Script Codes CSS Codes
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;
}
A slideshow with a blinds transition - Script Codes JS Codes
$(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); });
}
Developer | Stathis |
Username | stathisg |
Uploaded | August 02, 2022 |
Rating | 4.5 |
Size | 2,923 Kb |
Views | 54,648 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Large vertical menu with CSS3 transitions | 3,352 Kb |
A slideshow with a blinds transition | 2,923 Kb |
Mosaic transition effect between two photos using jQuery | 2,518 Kb |
Large horizontal menu with CSS3 transitions | 3,403 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A vuejs widget | Chrgl86 | 2,869 Kb |
Airbnb Homepage | SindhujaD | 2,480 Kb |
Cofee and sugar | Tripack | 2,094 Kb |
Two Element Typeface | Chrisota | 4,942 Kb |
LBCA - Mail canvas | Emnbdx | 3,856 Kb |
CSS eye follow | Pedrocampos | 2,592 Kb |
A Pen by James Podles | Jpod | 2,656 Kb |
-2 base | Kozanecki_p | 1,641 Kb |
Gradients | Karpovsystems | 2,394 Kb |
Image Stack Test SCSS | CalvinMorett | 2,799 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!