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 06 October 2021, Wednesday.

How do I make an mosaic transition effect between two photos using jquery?
  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
Mosaic transition effect between two photos using jQuery Previews

Mosaic transition effect between two photos using jQuery 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 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 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;
}
Do you want hide your ip address?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.