Tile Animation Thing

Developer
Derek Wheelden
Size
4,332 Kb
Views
34,408
  1. Tile Animation Thing Previews
  2. Tile Animation Thing HTML Codes
  3. Tile Animation Thing CSS Codes
  4. Tile Animation Thing JS Codes

How do I make an tile animation thing?

What is a tile animation thing? How do you make a tile animation thing? This script and codes were developed by Derek Wheelden on 10 August 2022, Wednesday.

Tile Animation Thing Previews
IQ Test

Tile Animation Thing - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tile Animation Thing</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='container'> <h1> Tile Animation Thing </h1> <h3> Click anywhere </h3> <div class='content'> <div class='video-wrapper'> <div class='video'></div> <div class='play-button'> <i class='fa fa-stop'></i> </div> </div> <div class='tiles'> <div class='tile'></div> <div class='tile'></div> <div class='tile'></div> <div class='tile'></div> <div class='tile'></div> <div class='tile'></div> <div class='tile'></div> <div class='tile'></div> <div class='tile'></div> <div class='tile'></div> <div class='tile'></div> <div class='tile'></div> <div class='tile'></div> </div> </div>
</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>

Tile Animation Thing - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300|Oswald:400,700,300);
.tiles { position: relative; top: 0; height: 0; padding-bottom: 7.69231%; -webkit-transition: all 0.3s ease-in-out 1s; transition: all 0.3s ease-in-out 1s;
}
.tiles .tile { position: absolute; top: 0; width: 7.69231%; height: 0; padding-bottom: 7.69231%; background: #a8cf2d; overflow: hidden;
}
.tiles .tile:nth-child(1) { left: 0%; background: gray; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s;
}
.tiles .tile:nth-child(2) { left: 7.69231%; background: #404040; -webkit-transition: all 0.3s ease-in-out 0.07692s; transition: all 0.3s ease-in-out 0.07692s;
}
.tiles .tile:nth-child(3) { left: 15.38462%; background: #2b2b2b; -webkit-transition: all 0.3s ease-in-out 0.15385s; transition: all 0.3s ease-in-out 0.15385s;
}
.tiles .tile:nth-child(4) { left: 23.07692%; background: #202020; -webkit-transition: all 0.3s ease-in-out 0.23077s; transition: all 0.3s ease-in-out 0.23077s;
}
.tiles .tile:nth-child(5) { left: 30.76923%; background: #1a1a1a; -webkit-transition: all 0.3s ease-in-out 0.30769s; transition: all 0.3s ease-in-out 0.30769s;
}
.tiles .tile:nth-child(6) { left: 38.46154%; background: #151515; -webkit-transition: all 0.3s ease-in-out 0.38462s; transition: all 0.3s ease-in-out 0.38462s;
}
.tiles .tile:nth-child(7) { left: 46.15385%; background: #121212; -webkit-transition: all 0.3s ease-in-out 0.46154s; transition: all 0.3s ease-in-out 0.46154s;
}
.tiles .tile:nth-child(8) { left: 53.84615%; background: #101010; -webkit-transition: all 0.3s ease-in-out 0.53846s; transition: all 0.3s ease-in-out 0.53846s;
}
.tiles .tile:nth-child(9) { left: 61.53846%; background: #0e0e0e; -webkit-transition: all 0.3s ease-in-out 0.61538s; transition: all 0.3s ease-in-out 0.61538s;
}
.tiles .tile:nth-child(10) { left: 69.23077%; background: #0d0d0d; -webkit-transition: all 0.3s ease-in-out 0.69231s; transition: all 0.3s ease-in-out 0.69231s;
}
.tiles .tile:nth-child(11) { left: 76.92308%; background: #0c0c0c; -webkit-transition: all 0.3s ease-in-out 0.76923s; transition: all 0.3s ease-in-out 0.76923s;
}
.tiles .tile:nth-child(12) { left: 84.61538%; background: #0b0b0b; -webkit-transition: all 0.3s ease-in-out 0.84615s; transition: all 0.3s ease-in-out 0.84615s;
}
.tiles .tile:nth-child(13) { left: 92.30769%; background: #0a0a0a; -webkit-transition: all 0.3s ease-in-out 0.92308s; transition: all 0.3s ease-in-out 0.92308s;
}
.tiles.big { padding-bottom: 60%; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
.tiles.big .tile { width: 20%; padding-bottom: 20%;
}
.tiles.big .tile:nth-child(1) { left: 0%; top: 0%; -webkit-transition: all 0.3s ease-in-out 0.92308s; transition: all 0.3s ease-in-out 0.92308s;
}
.tiles.big .tile:nth-child(2) { left: 20%; top: 0%; -webkit-transition: all 0.3s ease-in-out 0.84615s; transition: all 0.3s ease-in-out 0.84615s;
}
.tiles.big .tile:nth-child(3) { left: 40%; top: 0%; -webkit-transition: all 0.3s ease-in-out 0.76923s; transition: all 0.3s ease-in-out 0.76923s;
}
.tiles.big .tile:nth-child(4) { left: 60%; top: 0%; -webkit-transition: all 0.3s ease-in-out 0.69231s; transition: all 0.3s ease-in-out 0.69231s;
}
.tiles.big .tile:nth-child(5) { left: 80%; top: 0%; -webkit-transition: all 0.3s ease-in-out 0.61538s; transition: all 0.3s ease-in-out 0.61538s;
}
.tiles.big .tile:nth-child(6) { left: 0%; top: 33.33333%; -webkit-transition: all 0.3s ease-in-out 0.53846s; transition: all 0.3s ease-in-out 0.53846s;
}
.tiles.big .tile:nth-child(7) { left: 20%; top: 33.33333%; -webkit-transition: all 0.3s ease-in-out 0.46154s; transition: all 0.3s ease-in-out 0.46154s;
}
.tiles.big .tile:nth-child(8) { left: 40%; top: 33.33333%; -webkit-transition: all 0.3s ease-in-out 0.38462s; transition: all 0.3s ease-in-out 0.38462s;
}
.tiles.big .tile:nth-child(9) { left: 60%; top: 33.33333%; -webkit-transition: all 0.3s ease-in-out 0.30769s; transition: all 0.3s ease-in-out 0.30769s;
}
.tiles.big .tile:nth-child(10) { left: 80%; top: 33.33333%; -webkit-transition: all 0.3s ease-in-out 0.23077s; transition: all 0.3s ease-in-out 0.23077s;
}
.tiles.big .tile:nth-child(11) { left: 0%; top: 66.66667%; -webkit-transition: all 0.3s ease-in-out 0.15385s; transition: all 0.3s ease-in-out 0.15385s;
}
.tiles.big .tile:nth-child(12) { left: 20%; top: 66.66667%; -webkit-transition: all 0.3s ease-in-out 0.07692s; transition: all 0.3s ease-in-out 0.07692s;
}
.tiles.big .tile:nth-child(13) { left: 40%; top: 66.66667%; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s;
}
.content { position: relative;
}
.video-wrapper { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; -webkit-transition: padding-bottom 1s ease-in-out; transition: padding-bottom 1s ease-in-out;
}
.hide-video .video-wrapper { padding-bottom: 0;
}
.video-wrapper .video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #cbe37f;
}
.play-button { position: absolute; top: 50%; left: 50%; width: 3em; border: 0.125em solid currentColor; border-radius: 5em; font-size: 3em; line-height: 2.75; color: #e5f1be; text-align: center; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
/** GLOBAL STYLES **/
* { box-sizing: border-box;
}
html, body { width: 100%; height: 100%;
}
html { font-size: 62.5%;
}
body { background: #bada55; font-family: 'Open Sans', sans-serif; font-size: 2em; line-height: 1.5; color: white; -webkit-transform: rotateY(0deg);
}
body > p { width: 50%; margin: 0 auto; text-align: center;
}
h1 { font-family: 'Oswald', sans-serif; font-weight: 400; text-align: center; text-transform: uppercase;
}
h3 { font-family: 'Oswald'; font-weight: 400; text-transform: uppercase; text-align: center;
}
.container { width: 100%; margin: 1.5em auto;
}
a { color: white;
}
.cf:before, .tiles:before,
.cf:after,
.tiles:after { content: " "; display: table;
}
.cf:after, .tiles:after { clear: both;
}
.cf, .tiles { *zoom: 1;
}

Tile Animation Thing - Script Codes JS Codes

$('body').click(function () { $('.tiles').toggleClass('big'); $('body').toggleClass('hide-video');
});
Tile Animation Thing - Script Codes
Tile Animation Thing - Script Codes
Home Page Home
Developer Derek Wheelden
Username frxnz
Uploaded August 10, 2022
Rating 4.5
Size 4,332 Kb
Views 34,408
Do you need developer help for Tile Animation Thing?

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!

Derek Wheelden (frxnz) Script Codes
Name
Live LESS Compilation
Off-Screen Mobile Nav
Blockquote Patterns
Fantastic Mr. Fox
Suck It
Triangle Peeker
A Pen by Derek Wheelden
Sliding Tab Box Things
Drop Caps
Circular Reveal
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!