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 |
Large horizontal menu with CSS3 transitions | 3,403 Kb |
Mosaic transition effect between two photos using jQuery | 2,518 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 |
Compare resources on mobile sites | Gyusza | 3,226 Kb |
Slide like Mailbox | Hmps | 3,758 Kb |
Tumblr API | Juanv911 | 2,436 Kb |
Ball bouncing loading animation | Adam2326 | 3,144 Kb |
Amazing CSS Menu with Notification Badges | Faizanasad | 2,549 Kb |
Basic jQuery Filter list | Mtedwards | 2,464 Kb |
404 Page | Saransh | 2,666 Kb |
A Pen by utcwebdev | Utcwebdev | 2,856 Kb |
Hamburger Menu Animation | Salmanraza | 2,580 Kb |
Get third wednesday | Wojtek1150 | 2,691 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!