CSS-Only Full Page Slider
How do I make an css-only full page slider?
Tried to make it as simple yet as awesome as possible. I think it does pretty well at meeting those requirements. What is a css-only full page slider? How do you make a css-only full page slider? This script and codes were developed by Zach Saucier on 20 August 2022, Saturday.
CSS-Only Full Page Slider Previews
CSS-Only Full Page Slider - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS-Only Full Page Slider</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* If it jumps from one slide to the next then refresh the page */
html, body { margin:0; padding:0; width: 100%; height: 100%; overflow:hidden; -webkit-perspective: 550px; perspective: 550px;
}
.slide { position:absolute; width:100%; height:100%; -webkit-transform-origin: bottom center; transform-origin: bottom center;
}
.slide div { position:absolute; width:100%; height:100%; }
.slide:nth-of-type(1) { -webkit-animation:slideTop 20s 16s ease-out infinite; animation:slideTop 20s 16s ease-in-out infinite; }
.slide:nth-of-type(2) { -webkit-animation:slideRight 20s 12s ease-out infinite; animation:slideRight 20s 12s ease-in-out infinite; }
.slide:nth-of-type(3) { -webkit-animation:slideLeft 20s 8s ease-out infinite; animation:slideLeft 20s 8s ease-in-out infinite; }
.slide:nth-of-type(4) { -webkit-animation:slideBottom 20s 4s ease-out infinite; animation:slideBottom 20s 4s ease-in-out infinite; }
.slide:nth-of-type(5) { -webkit-animation:slideBottom 20s ease-out infinite; animation:slideBottom 20s ease-in-out infinite; }
@-webkit-keyframes slideBottom { 0%,5% { -webkit-transform: rotateX(0); z-index:1; } 10% { -webkit-transform: rotateX(90deg); } 13% { z-index:1; -webkit-transform: rotateX(90deg) translateY(100%); } 50% { z-index:-1; -webkit-transform: rotateX(90deg) translateY(100%); } 53%,73% { z-index:-1; -webkit-transform:rotateX(0) translateY(0); }
}
@keyframes slideBottom { 0%,5% { transform: rotateX(0); z-index:1; } 10% { transform: rotateX(90deg); } 13% { z-index:1; transform: rotateX(90deg) translateY(100%); } 50% { z-index:-1; transform: rotateX(90deg) translateY(100%); } 53%,80% { z-index:-1; transform:rotateX(0) translateY(0); } 81%,100% { z-index:0; }
}
/* Alternate directions: Use class or :nth-child to select the correct slide you want to affect, otherwise it will affect all of them */
/* .slide { to apply to all */
/* Left */
.slide:nth-of-type(3) { -webkit-transform-origin: left center; transform-origin: left center;
}
@-webkit-keyframes slideLeft { 0%,5% { -webkit-transform: rotateY(0); z-index:1; } 10% { -webkit-transform: rotateY(90deg); } 13% { z-index:1; -webkit-transform: rotateY(90deg) translateX(-100%); } 50% { z-index:-1; -webkit-transform: rotateY(90deg) translateX(-100%); } 53%,73% { z-index:-1; -webkit-transform:rotateY(0) translateX(0); }
}
@keyframes slideLeft { 0%,5% { transform: rotateY(0); z-index:1; } 10% { transform: rotateY(90deg); } 13% { z-index:1; transform: rotateY(90deg) translateX(-100%); } 50% { z-index:-1; transform: rotateY(90deg) translateX(-100%); } 53%,80% { z-index:-1; transform:rotateY(0) translateX(0); } 81%,100% { z-index:0; }
}
/* Right */
.slide:nth-of-type(2) { -webkit-transform-origin: right center; transform-origin: right center;
}
@-webkit-keyframes slideRight { 0%,5% { -webkit-transform: rotateY(0); z-index:1; } 10% { -webkit-transform: rotateY(-90deg); } 13% { z-index:1; -webkit-transform: rotateY(-90deg) translateX(100%); } 50% { z-index:-1; -webkit-transform: rotateY(-90deg) translateX(100%); } 53%,73% { z-index:-1; -webkit-transform:rotateY(0) translateX(0); }
}
@keyframes slideRight { 0%,5% { transform: rotateY(0); z-index:1; } 10% { transform: rotateY(-90deg); } 13% { z-index:1; transform: rotateY(-90deg) translateX(100%); } 50% { z-index:-1; transform: rotateY(-90deg) translateX(100%); } 53%,80% { z-index:-1; transform:rotateY(0) translateX(0); } 81%,100% { z-index:0; }
}
/* Top */
.slide:nth-of-type(1) { -webkit-transform-origin: top center; transform-origin: top center;
}
@-webkit-keyframes slideTop { 0%,5% { -webkit-transform: rotateX(0); z-index:1; } 10% { -webkit-transform: rotateX(-90deg); } 13% { z-index:1; -webkit-transform: rotateX(-90deg) translateY(-150%); } 50% { z-index:-1; -webkit-transform: rotateX(-90deg) translateY(-150%); } 53%,73% { z-index:-1; -webkit-transform:rotateX(0) translateY(0); }
}
@keyframes slideTop { 0%,5% { transform: rotateX(0); z-index:1; } 10% { transform: rotateX(-90deg); } 13% { z-index:1; transform: rotateX(-90deg) translateY(-150%); } 50% { z-index:-1; transform: rotateX(-90deg) translateY(-150%); } 53%,80% { z-index:-1; transform:rotateX(0) translateY(0); } 81%,100% { z-index:0; }
}
/* End alternate directions */
/* STYLISTIC THINGS: Photos from http://unsplash.com/ */
.slide:nth-of-type(1) div { background:#223d65; color:white; text-align:center; padding-top:200px; font-size:16pt; font-family: "Andale Mono", AndaleMono, monospace;
}
.slide:nth-of-type(2) div { background: url("http://24.media.tumblr.com/61e1f6d73861cfad6e320c6d5dcecc6e/tumblr_mx3trrzUOJ1st5lhmo1_1280.jpg") center center; background-size:cover;
}
.slide:nth-of-type(3) div { background: rgb(20,20,20); color:white; text-align:center; padding-top:200px; font-size:16pt; font-family:Book Antiqua;
}
.slide:nth-of-type(4) div { background: url("http://31.media.tumblr.com/3afad829ce330a66b3bbb98831c1c393/tumblr_mx3tpto69r1st5lhmo1_1280.jpg") center center; background-size:cover;
}
.slide:nth-of-type(5) div { background: url("http://25.media.tumblr.com/d7c46e775fa6d6c613f10bceb2703b38/tumblr_mx3tqsqckF1st5lhmo1_1280.jpg") center center; background-size:cover;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- Responsive slide count ranges from 2-5 (could be more, hadn't tested) Slides run in reverse order to fix z-index issue Can be placed in a container with no issues -->
<div class='slide'> <div>Created by Zach Saucier<br/><br/>http://zachsaucier.com/</div> <!-- Anything can go inside -->
</div>
<div class='slide'> <div></div>
</div>
<div class='slide'> <div>It works with any HTML you'd like!<br/><br/>And goes in four directions!</div>
</div>
<div class='slide'> <div></div>
</div>
<div class='slide'> <div></div>
</div> <script src="js/index.js"></script>
</body>
</html>
CSS-Only Full Page Slider - Script Codes CSS Codes
/* If it jumps from one slide to the next then refresh the page */
html, body { margin:0; padding:0; width: 100%; height: 100%; overflow:hidden; -webkit-perspective: 550px; perspective: 550px;
}
.slide { position:absolute; width:100%; height:100%; -webkit-transform-origin: bottom center; transform-origin: bottom center;
}
.slide div { position:absolute; width:100%; height:100%; }
.slide:nth-of-type(1) { -webkit-animation:slideTop 20s 16s ease-out infinite; animation:slideTop 20s 16s ease-in-out infinite; }
.slide:nth-of-type(2) { -webkit-animation:slideRight 20s 12s ease-out infinite; animation:slideRight 20s 12s ease-in-out infinite; }
.slide:nth-of-type(3) { -webkit-animation:slideLeft 20s 8s ease-out infinite; animation:slideLeft 20s 8s ease-in-out infinite; }
.slide:nth-of-type(4) { -webkit-animation:slideBottom 20s 4s ease-out infinite; animation:slideBottom 20s 4s ease-in-out infinite; }
.slide:nth-of-type(5) { -webkit-animation:slideBottom 20s ease-out infinite; animation:slideBottom 20s ease-in-out infinite; }
@-webkit-keyframes slideBottom { 0%,5% { -webkit-transform: rotateX(0); z-index:1; } 10% { -webkit-transform: rotateX(90deg); } 13% { z-index:1; -webkit-transform: rotateX(90deg) translateY(100%); } 50% { z-index:-1; -webkit-transform: rotateX(90deg) translateY(100%); } 53%,73% { z-index:-1; -webkit-transform:rotateX(0) translateY(0); }
}
@keyframes slideBottom { 0%,5% { transform: rotateX(0); z-index:1; } 10% { transform: rotateX(90deg); } 13% { z-index:1; transform: rotateX(90deg) translateY(100%); } 50% { z-index:-1; transform: rotateX(90deg) translateY(100%); } 53%,80% { z-index:-1; transform:rotateX(0) translateY(0); } 81%,100% { z-index:0; }
}
/* Alternate directions: Use class or :nth-child to select the correct slide you want to affect, otherwise it will affect all of them */
/* .slide { to apply to all */
/* Left */
.slide:nth-of-type(3) { -webkit-transform-origin: left center; transform-origin: left center;
}
@-webkit-keyframes slideLeft { 0%,5% { -webkit-transform: rotateY(0); z-index:1; } 10% { -webkit-transform: rotateY(90deg); } 13% { z-index:1; -webkit-transform: rotateY(90deg) translateX(-100%); } 50% { z-index:-1; -webkit-transform: rotateY(90deg) translateX(-100%); } 53%,73% { z-index:-1; -webkit-transform:rotateY(0) translateX(0); }
}
@keyframes slideLeft { 0%,5% { transform: rotateY(0); z-index:1; } 10% { transform: rotateY(90deg); } 13% { z-index:1; transform: rotateY(90deg) translateX(-100%); } 50% { z-index:-1; transform: rotateY(90deg) translateX(-100%); } 53%,80% { z-index:-1; transform:rotateY(0) translateX(0); } 81%,100% { z-index:0; }
}
/* Right */
.slide:nth-of-type(2) { -webkit-transform-origin: right center; transform-origin: right center;
}
@-webkit-keyframes slideRight { 0%,5% { -webkit-transform: rotateY(0); z-index:1; } 10% { -webkit-transform: rotateY(-90deg); } 13% { z-index:1; -webkit-transform: rotateY(-90deg) translateX(100%); } 50% { z-index:-1; -webkit-transform: rotateY(-90deg) translateX(100%); } 53%,73% { z-index:-1; -webkit-transform:rotateY(0) translateX(0); }
}
@keyframes slideRight { 0%,5% { transform: rotateY(0); z-index:1; } 10% { transform: rotateY(-90deg); } 13% { z-index:1; transform: rotateY(-90deg) translateX(100%); } 50% { z-index:-1; transform: rotateY(-90deg) translateX(100%); } 53%,80% { z-index:-1; transform:rotateY(0) translateX(0); } 81%,100% { z-index:0; }
}
/* Top */
.slide:nth-of-type(1) { -webkit-transform-origin: top center; transform-origin: top center;
}
@-webkit-keyframes slideTop { 0%,5% { -webkit-transform: rotateX(0); z-index:1; } 10% { -webkit-transform: rotateX(-90deg); } 13% { z-index:1; -webkit-transform: rotateX(-90deg) translateY(-150%); } 50% { z-index:-1; -webkit-transform: rotateX(-90deg) translateY(-150%); } 53%,73% { z-index:-1; -webkit-transform:rotateX(0) translateY(0); }
}
@keyframes slideTop { 0%,5% { transform: rotateX(0); z-index:1; } 10% { transform: rotateX(-90deg); } 13% { z-index:1; transform: rotateX(-90deg) translateY(-150%); } 50% { z-index:-1; transform: rotateX(-90deg) translateY(-150%); } 53%,80% { z-index:-1; transform:rotateX(0) translateY(0); } 81%,100% { z-index:0; }
}
/* End alternate directions */
/* STYLISTIC THINGS: Photos from http://unsplash.com/ */
.slide:nth-of-type(1) div { background:#223d65; color:white; text-align:center; padding-top:200px; font-size:16pt; font-family: "Andale Mono", AndaleMono, monospace;
}
.slide:nth-of-type(2) div { background: url("http://24.media.tumblr.com/61e1f6d73861cfad6e320c6d5dcecc6e/tumblr_mx3trrzUOJ1st5lhmo1_1280.jpg") center center; background-size:cover;
}
.slide:nth-of-type(3) div { background: rgb(20,20,20); color:white; text-align:center; padding-top:200px; font-size:16pt; font-family:Book Antiqua;
}
.slide:nth-of-type(4) div { background: url("http://31.media.tumblr.com/3afad829ce330a66b3bbb98831c1c393/tumblr_mx3tpto69r1st5lhmo1_1280.jpg") center center; background-size:cover;
}
.slide:nth-of-type(5) div { background: url("http://25.media.tumblr.com/d7c46e775fa6d6c613f10bceb2703b38/tumblr_mx3tqsqckF1st5lhmo1_1280.jpg") center center; background-size:cover;
}CSS-Only Full Page Slider - Script Codes JS Codes
// For more check out zachsaucier.com
| Developer | Zach Saucier |
| Username | Zeaklous |
| Uploaded | August 20, 2022 |
| Rating | 4.5 |
| Size | 4,161 Kb |
| Views | 44,528 |
Do you need developer help for CSS-Only Full Page Slider?
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!
Zach Saucier (Zeaklous) Script Codes
| Name | Size |
| Converting CSS Animations to Transitions | 1,995 Kb |
| Changing a CSS Animation at its Current Values | 3,781 Kb |
| Building Images | 3,909 Kb |
| SVG border animation 2 | 3,307 Kb |
| Simple, flat contact form | 2,719 Kb |
| Change transformation-origin mid animation | 2,138 Kb |
| Hipster date intro screen | 5,878 Kb |
| Asset loading effects demo | 4,936 Kb |
| Business card | 4,454 Kb |
| SVG clip path with blend mode | 8,886 Kb |
Create amazing blog posts 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!
Similar Scripts & Codes
| Name | Username | Size |
| Canvas stripes | Adrianparr | 1,948 Kb |
| Fullscreen audio play button | 72 | 2,148 Kb |
| Sort the Knowlege | Eprouver | 3,915 Kb |
| Zeichensatz | Moklick | 2,058 Kb |
| Pricing Table | Semenchenko | 6,784 Kb |
| Countdown Timer | Massiebn | 3,001 Kb |
| Two tables and header with jspdf-autotable | Someatoms | 2,245 Kb |
| ABVI Menu Discarded | Overdrivemachines | 3,607 Kb |
| Pomodoro Clock | Osycon | 3,705 Kb |
| Wikipedia API | Coderpilot | 2,802 Kb |
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. Hide Your IP Now!