Sliding Tiles

Developer
Nick Walsh
Size
2,978 Kb
Views
22,264
  1. Sliding Tiles Previews
  2. Sliding Tiles HTML Codes
  3. Sliding Tiles CSS Codes
  4. Sliding Tiles JS Codes

How do I make an sliding tiles?

An isolated breakdown of the featured media thumbnails on Made With Envy. Timing via animationiteration.. What is a sliding tiles? How do you make a sliding tiles? This script and codes were developed by Nick Walsh on 06 November 2022, Sunday.

Sliding Tiles Previews
IQ Test

Sliding Tiles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sliding Tiles</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap"> <div class="media" data-media="1"> <div class="media-item"></div> <div class="media-item"></div> <div class="media-item"></div> <div class="progress"></div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Sliding Tiles - Script Codes CSS Codes

/* ----- Setup ----- */
body { background: #ddffdd; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100vh; overflow: hidden;
}
.wrap { margin: auto;
}
/* ----- Container ----- */
.media { height: 25vmin; margin-bottom: 10px; position: relative; width: 25vmin;
}
/* ----- Items ----- */
.media-item { background: #ff1b6b; height: 100%; opacity: 0.6; position: absolute; -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); width: 100%;
}
/* Item: Active */
.media[data-media="1"] .media-item:nth-child(1),
.media[data-media="2"] .media-item:nth-child(2),
.media[data-media="3"] .media-item:nth-child(3) { opacity: 1; -webkit-transition-duration: 1s; transition-duration: 1s;
}
/* Item: Inactive */
.media[data-media="1"] .media-item:nth-child(2) { -webkit-transform: translate(-100%, -100%); transform: translate(-100%, -100%);
}
.media[data-media="1"] .media-item:nth-child(3) { -webkit-transform: translate(100%, 0%); transform: translate(100%, 0%);
}
.media[data-media="2"] .media-item:nth-child(1) { -webkit-transform: translate(200%, 200%); transform: translate(200%, 200%);
}
.media[data-media="2"] .media-item:nth-child(3) { -webkit-transform: translate(200%, 0%); transform: translate(200%, 0%);
}
.media[data-media="3"] .media-item:nth-child(1) { -webkit-transform: translate(-100%, 0%); transform: translate(-100%, 0%);
}
.media[data-media="3"] .media-item:nth-child(2) { -webkit-transform: translate(0%, -200%); transform: translate(0%, -200%);
}
/* ----- Progress ----- */
.progress { -webkit-animation: progress 3s ease-in-out infinite; animation: progress 3s ease-in-out infinite; background: rgba(0, 0, 0, 0.1); height: 100%; -webkit-transform-origin: left center; transform-origin: left center; width: 100%;
}
@-webkit-keyframes progress { 0% { -webkit-transform: scale(0, 1); transform: scale(0, 1); } 33% { -webkit-transform: scale(0, 1); transform: scale(0, 1); }
}
@keyframes progress { 0% { -webkit-transform: scale(0, 1); transform: scale(0, 1); } 33% { -webkit-transform: scale(0, 1); transform: scale(0, 1); }
}

Sliding Tiles - Script Codes JS Codes

var media = document.querySelector('.media'), mediaItems = media.querySelectorAll('.media-item'), progress = document.querySelector('.progress');
function update() { media.dataset.media++; if (media.dataset.media > mediaItems.length) { media.dataset.media = 1; }
}
progress.addEventListener('animationiteration', update);
Sliding Tiles - Script Codes
Sliding Tiles - Script Codes
Home Page Home
Developer Nick Walsh
Username nickawalsh
Uploaded November 06, 2022
Rating 3
Size 2,978 Kb
Views 22,264
Do you need developer help for Sliding Tiles?

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!

Nick Walsh (nickawalsh) Script Codes
Name
Radar
Paddle
Constellations
Rollins
Animations without d3-timer
Mapping - 4
Mapping - 1
Extend Interpolation
Project DNA
Travel
Create amazing art & images 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!