A slideshow with a blinds transition

Developer
Size
2,923 Kb
Views
54,648

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 Previews

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); });
}
A slideshow with a blinds transition - Script Codes
A slideshow with a blinds transition - Script Codes
Home Page Home
Developer Stathis
Username stathisg
Uploaded August 02, 2022
Rating 4.5
Size 2,923 Kb
Views 54,648
Do you need developer help for A slideshow with a blinds transition?

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!

Stathis (stathisg) Script Codes
Create amazing SEO content with AI!

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!