Shuffle List Animation

Developer
Martin Baillie
Size
2,362 Kb
Views
2,024
  1. Shuffle List Animation Previews
  2. Shuffle List Animation HTML Codes
  3. Shuffle List Animation CSS Codes
  4. Shuffle List Animation JS Codes

How do I make an shuffle list animation?

What is a shuffle list animation? How do you make a shuffle list animation? This script and codes were developed by Martin Baillie on 25 January 2023, Wednesday.

Shuffle List Animation Previews
IQ Test

Shuffle List Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Shuffle List Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input type="submit" value="shuffle">
<input type="submit" value="sort">
<ul id="numberlist"> <li class="content1" data-pos="1" >1</li> <li class="content2" data-pos="2" >2</li> <li class="content3" data-pos="3" >3</li> <li class="content4" data-pos="4" >4</li>
</ul> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Shuffle List Animation - Script Codes CSS Codes

ul { list-style: none; position: relative;
/* height: 120px; */
}
li { width: 100px; line-height: 2em; text-align: center; transition: all 0.9s ease-out; position: absolute; left: 0;
}
.content1 { background-color: #eee;
/* top: 0; */
}
.content2 { background-color: #ddd;
/* top: 30px; */
}
.content3 { background-color: #ccc;
/* top: 60px; */
}
.content4 { background-color: #bbb;
/* top: 90px; */
}
[data-pos="1"] { top: 0;
}
[data-pos="2"] { top: 30px;
}
[data-pos="3"] { top: 60px;
}
[data-pos="4"] { top: 90px;
}
/* li:nth-child(1) { transform: translateY(0%); top: 0px;
}
li:nth-child(2) { transform: translateY(100%); top: 30px;
}
li:nth-child(3) { transform: translateY(200%); top: 60px;
}
li:nth-child(4) { transform: translateY(300%); top: 90px;
} */

Shuffle List Animation - Script Codes JS Codes

var random = function(min, max) { return Math.floor((Math.random() * max) + min); }, shuffle = function($list) { // adapted from https://bost.ocks.org/mike/shuffle/ var i = $list.children().length, $tempValueI, $tempValueRandomI, randomI, iPos, randomIPos; // While there remain elements to shuffle… while (i > 1) { // Pick a remaining element… randomI = Math.ceil(Math.random() * i--); iPos = $list.children('li:nth-child(' + i + ')').attr('data-pos'); randomIPos = $list.children('li:nth-child(' + randomI + ')').attr('data-pos'); $list.children('li:nth-child(' + i + ')').attr('data-pos', randomIPos); $list.children('li:nth-child(' + randomI + ')').attr('data-pos', iPos); } return $list; }, sort = function($list) { var i, content; for (i = 1; i <= $list.children().length; i++) { content = $list.children('li:nth-child(' + i + ')').html(); $list.children('li:nth-child(' + i + ')').attr('data-pos', content); } };
$(function() { $('[value="shuffle"]').on('click', function() { shuffle($('#numberlist')); }); $('[value="sort"]').on('click', function() { sort($('#numberlist')); });
});
Shuffle List Animation - Script Codes
Shuffle List Animation - Script Codes
Home Page Home
Developer Martin Baillie
Username martin42
Uploaded January 25, 2023
Rating 3
Size 2,362 Kb
Views 2,024
Do you need developer help for Shuffle List Animation?

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!

Martin Baillie (martin42) Script Codes
Name
More interview Questions
Q try catch timeout
JS Interview Questions
Flexbox
M-test
Sticky Header
URL Compare
More Array Methods
A Pen by Martin Baillie
Accessible Tabs
Create amazing sales emails 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!