Mosaic transition effect between two photos using jQuery

Developer
Stathis
Size
2,518 Kb
Views
58,696
  1. Mosaic transition effect between two photos using jQuery Previews
  2. Mosaic transition effect between two photos using jQuery HTML Codes
  3. Mosaic transition effect between two photos using jQuery CSS Codes
  4. Mosaic transition effect between two photos using jQuery JS Codes

How do I make an mosaic transition effect between two photos using jquery?

Demo of a mosaic transition effect between two photos using jQuery (full-text tutorial). What is a mosaic transition effect between two photos using jquery? How do you make a mosaic transition effect between two photos using jquery? This script and codes were developed by Stathis on 02 August 2022, Tuesday.

Mosaic transition effect between two photos using jQuery Previews
IQ Test

Mosaic transition effect between two photos using jQuery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mosaic transition effect between two photos using jQuery</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="mosaic"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Mosaic transition effect between two photos using jQuery - 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;	}	#mosaic	{	background-image: url('http://burnmind.com/demos/mosaic/bottom.jpg');	}	#mosaic span.hover	{	float: left;	background-image: url('http://burnmind.com/demos/mosaic/top.jpg');	}

Mosaic transition effect between two photos using jQuery - Script Codes JS Codes

$(document).ready(function() { var width = 640;	var height = 480;	count = 0;	elements = new Array();	var el = $('#mosaic');	el.width(width).height(height);	var horizontal_pieces = 8;	var vertical_pieces = 6;	total_pieces = horizontal_pieces * vertical_pieces;	var box_width = width / horizontal_pieces;	var box_height = height / vertical_pieces;	var vertical_position = 0; for (i=0; i<total_pieces; i++)	{	var tempEl = $('<span class="hover" id="hover-' + i + '"></span>');	var horizontal_position = (i % horizontal_pieces) * box_width;	if(i > 0 && i % horizontal_pieces == 0)	{	vertical_position += box_height;	}	tempEl.css('background-position', '-' + horizontal_position + 'px -' + vertical_position + 'px');	el.append(tempEl);	elements.push(tempEl);	} elements = shuffleArray(elements); $('#mosaic .hover').width(box_width).height(box_height); setInterval(toggleDisplay, 100);
});
function toggleDisplay()
{	var tempEl = elements[count];	var opacity = tempEl.css('opacity');	if(opacity == 0)	{	tempEl.animate({ opacity: 1 })	}	else	{	tempEl.animate({ opacity: 0 })	}	count = (count + 1) % total_pieces;
}
/* shuffleArray source: http://stackoverflow.com/questions/2450954/how-to-randomize-a-javascript-array#12646864 */
function shuffleArray(array) { for (var i = array.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var temp = array[i]; array[i] = array[j]; array[j] = temp; } return array;
}
Mosaic transition effect between two photos using jQuery - Script Codes
Mosaic transition effect between two photos using jQuery - Script Codes
Home Page Home
Developer Stathis
Username stathisg
Uploaded August 02, 2022
Rating 3
Size 2,518 Kb
Views 58,696
Do you need developer help for Mosaic transition effect between two photos using jQuery?

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
Name
Large horizontal menu with CSS3 transitions
Mosaic transition effect between two photos using jQuery
Large vertical menu with CSS3 transitions
A slideshow with a blinds transition
Create amazing web 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!