The idea here is to show that the company (I’m assuming designing the website for) is comparing prices between 18 energy companies and sort them for its customers as per customers’ preferences. The images are shuffling every 3 seconds, to mimic that comparing and sorting act!
I used this JQuery plugin to help in achieving this.
How the Code works:
The code is using the JQuery to prepare the main container’s height then select the <img> elements and positions them absolutely using CSS.
The functions are:
shuffle(); with options for how many times & durations.
animate(); Animates the items to a new location by copying the CSS properties from the object in the newPositions array with the same index.
It uses three parameters each of them is an array of items:
originalPositions – an array of items in their original positions.
newPositions – an array of shuffle items.
durations(optional) – an array of integers that determines the speed at which the items move.
JQuery Code:
(function() {
// Private: Helper to shuffle things.
//
// array - an array to be shuffled
//
// Returns a new shuffled array (does not modify the original argument)
function shuffle(array) {
if (document.hidden) {
console.log('hidden')
return;
}else{
array = array.slice(0);
for(var j, x, i = array.length; i; j = parseInt(Math.random() * i), x = array[--i], array[i] = array[j], array[j] = x);
return array;
}
}
// Private: Helper to set objects on page prior to animation
//
// originalPositions - an array of items in their original positions
// newPositions - an array of shuffle items
// durations(optional) - an array of integers that determines the speed at which the items move
//
// Animates the items to a new location by copying the css properties from the object in the newPositions array with the same index
function animate(originalPositions, newPositions, durations) {
originalPositions.each(function(index){
var animationDuration = durations[Math.floor(Math.random() * durations.length)];
$(this).animate({ top: newPositions[index].style.top, left: newPositions[index].style.left }, {
duration: animationDuration, // randomly pick a duration. results in a sleek random shuffling animation
queue: true // if you don't queue the items will do all the animations at once and things get weird
});
})
}
// Private: Helper to set objects on page prior to animation
//
// container - Jquery object of the containing element of the boxes that are going to be moved
//
// Takes the original responsive inline-blocks and positions them absolutely so the boxes can move to set coordinates
function setExplicitCSSProperties(container) {
container = $(container);
container.css('height', container.height());
var children = container.children();
children.each(function() {
$(this).css({
top: $(this).position().top,
left: $(this).position().left,
width: $(this).width(),
// height: $(this).height()
});
})
children.css({ position: 'absolute' });
}
// Public: Shuffle
$.fn.shuffle = function(options) {
options = options || {}
var times = options.times || 1; // Default to 4
var durations = options.durations || [500, 650, 750, 500, 900]; //default variety of animation times
//Set coordinates for the moving items so they keep a grid shape
setExplicitCSSProperties(this);
return this.each(function(){
var items = $(this).children();
//repeat animation multiple times for a shuffle effect
for(var i = 0; i < times; i++){
var newItems = shuffle(items);
animate(items, newItems, durations);
}
});
}
})();
$(document).ready(function() {
setInterval("$('.scontainer').shuffle()",3000);
});HTML:
<div class="shuffle">
<!-- Images Shuffle -->
<div class="row scontainer">
<div class="box" id="0"><img src="<?php bloginfo('template_url')?>/src/images/engry_001.jpg" alt="Energy 01"></div>
<div class="box" id="1"><img src="<?php bloginfo('template_url')?>/src/images/engry_002.jpg" alt="Energy 02"></div>
<div class="box" id="3"><img src="<?php bloginfo('template_url')?>/src/images/engry_004.jpg" alt="Energy 03"></div>
<div class="box" id="4"><img src="<?php bloginfo('template_url')?>/src/images/engry_005.jpg" alt="Energy 04"></div>
<div class="box" id="5"><img src="<?php bloginfo('template_url')?>/src/images/engry_006.jpg" alt="Energy 05"></div>
<div class="box" id="6"><img src="<?php bloginfo('template_url')?>/src/images/engry_007.jpg" alt="Energy 06"></div>
<div class="box" id="7"><img src="<?php bloginfo('template_url')?>/src/images/engry_008.jpg" alt="Energy 07"></div>
<div class="box" id="8"><img src="<?php bloginfo('template_url')?>/src/images/engry_009.jpg" alt="Energy 08"></div>
<div class="box" id="9"><img src="<?php bloginfo('template_url')?>/src/images/engry_010.jpg" alt="Energy 09"></div>
<div class="box" id="10"><img src="<?php bloginfo('template_url')?>/src/images/engry_011.jpg" alt="Energy 10"></div>
<div class="box" id="11"><img src="<?php bloginfo('template_url')?>/src/images/engry_012.jpg" alt="Energy 11"></div>
<div class="box" id="12"><img src="<?php bloginfo('template_url')?>/src/images/engry_013.jpg" alt="Energy 12"></div>
<div class="box" id="13"><img src="<?php bloginfo('template_url')?>/src/images/engry_014.jpg" alt="Energy 13"></div>
<div class="box" id="14"><img src="<?php bloginfo('template_url')?>/src/images/engry_015.jpg" alt="Energy 14"></div>
<div class="box" id="15"><img src="<?php bloginfo('template_url')?>/src/images/engry_016.jpg" alt="Energy 15"></div>
<div class="box" id="16"><img src="<?php bloginfo('template_url')?>/src/images/engry_017.jpg" alt="Energy 16"></div>
<div class="box" id="17"><img src="<?php bloginfo('template_url')?>/src/images/engry_018.jpg" alt="Energy 17"></div>
<div class="box" id="18"><img src="<?php bloginfo('template_url')?>/src/images/engry_019.jpg" alt="Energy 18"></div>
</div>
</div>Conclusions/Recommendations:
- There is a lot of useful libraries and plugins out there to choose from, only we need to check a lightweight easy to understand/use one then we can use it.
- Not all the plugins and libraries are peaceful. It might be malicious/harmful. Hence, Don’t use a source code without understanding it thoroughly.
Implementation/Result:
