CSS Only Banner Rotation
How do I make an css only banner rotation?
Using CSS animations to auto rotate banners.. What is a css only banner rotation? How do you make a css only banner rotation? This script and codes were developed by Brandon Kennedy on 18 September 2022, Sunday.
CSS Only Banner Rotation Previews
CSS Only Banner Rotation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Only Banner Rotation</title> <script src="https://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"> <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! */ * { box-sizing: border-box;
}
html,
body { font-size: 10px;
}
#banners { height: 10rem; overflow-x: hidden; position: relative; width: 100%;
}
#banners .banner { animation: bannerOne 15s linear infinite; height: 10rem; position: absolute; width: 100%;
}
#banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1 { color: #fff; font-size: 2rem; padding: 1rem; margin: 0;
}
#banners .banner.one h1 span, #banners .banner.two h1 span, #banners .banner.three h1 span { display: block;
}
#banners .banner.one .image, #banners .banner.two .image, #banners .banner.three .image { height: 100%; position: absolute; top: 0; width: 50%;
}
#banners .banner.one { background: red;
}
#banners .banner.one h1 { text-align: right; width: 50%;
}
#banners .banner.one .image { background: url("http://lorempixel.com/g/400/400/technics/2") no-repeat right center; background-size: 100%; right: 0;
}
#banners .banner.two { animation-name: bannerTwo; background: blue;
}
#banners .banner.two h1 { text-align: center;
}
#banners .banner.two .image { background: url("http://lorempixel.com/g/1000/200/technics/4") no-repeat center bottom; background-size: 100%; top: 50%; height: 50%; width: 100%;
}
#banners .banner.three { animation-name: bannerThree; background: green;
}
#banners .banner.three h1 { float: right; width: 50%;
}
#banners .banner.three .image { background: url("http://lorempixel.com/g/400/400/technics/5") no-repeat left center; background-size: 100%; left: 0;
}
@keyframes bannerOne { 0% { left: 0; } 31% { left: 0; } 34% { left: -100%; } 97% { left: 100%; } 100% { left: 0; }
}
@keyframes bannerTwo { 0% { left: 100%; } 31% { left: 100%; } 34% { left: 0; } 64% { left: 0; } 67% { left: -100%; } 100% { left: -100%; }
}
@keyframes bannerThree { 0% { left: 100%; } 64% { left: 100%; } 67% { left: 0; } 97% { left: 0; } 100% { left: -100%; }
}
/* smallest */
/*@media (max-width: 320px;) { #banners { height: 10rem; .banner { &.one, &.two, &.three { height: 10rem; h1 { font-size: 2rem; } } } }
}*/
/* small */
@media (min-width: 321px) and (max-width: 728px) { #banners { height: 12rem; } #banners .banner.one, #banners .banner.two, #banners .banner.three { height: 12rem; } #banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1 { font-size: 3rem; padding: 1.5rem; }
}
/* medium */
@media (min-width: 729px) and (max-width: 960px) { #banners { height: 20rem; } #banners .banner.one, #banners .banner.two, #banners .banner.three { height: 20rem; } #banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1 { font-size: 6rem; padding: 2rem; }
}
/* large */
@media (min-width: 961px) { #banners { height: 20rem; } #banners .banner.one, #banners .banner.two, #banners .banner.three { height: 20rem; } #banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1 { font-size: 6rem; padding: 2rem; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section id="banners"> <div class="banner one"> <h1>Banner One</h1> <div class="image"></div> </div> <div class="banner two"> <h1>Second Banner</h1> <div class="image"></div> </div> <div class="banner three"> <h1>Banner <span>The Third</span></h1> <div class="image"></div> </div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
CSS Only Banner Rotation - Script Codes CSS Codes
* { box-sizing: border-box;
}
html,
body { font-size: 10px;
}
#banners { height: 10rem; overflow-x: hidden; position: relative; width: 100%;
}
#banners .banner { animation: bannerOne 15s linear infinite; height: 10rem; position: absolute; width: 100%;
}
#banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1 { color: #fff; font-size: 2rem; padding: 1rem; margin: 0;
}
#banners .banner.one h1 span, #banners .banner.two h1 span, #banners .banner.three h1 span { display: block;
}
#banners .banner.one .image, #banners .banner.two .image, #banners .banner.three .image { height: 100%; position: absolute; top: 0; width: 50%;
}
#banners .banner.one { background: red;
}
#banners .banner.one h1 { text-align: right; width: 50%;
}
#banners .banner.one .image { background: url("http://lorempixel.com/g/400/400/technics/2") no-repeat right center; background-size: 100%; right: 0;
}
#banners .banner.two { animation-name: bannerTwo; background: blue;
}
#banners .banner.two h1 { text-align: center;
}
#banners .banner.two .image { background: url("http://lorempixel.com/g/1000/200/technics/4") no-repeat center bottom; background-size: 100%; top: 50%; height: 50%; width: 100%;
}
#banners .banner.three { animation-name: bannerThree; background: green;
}
#banners .banner.three h1 { float: right; width: 50%;
}
#banners .banner.three .image { background: url("http://lorempixel.com/g/400/400/technics/5") no-repeat left center; background-size: 100%; left: 0;
}
@keyframes bannerOne { 0% { left: 0; } 31% { left: 0; } 34% { left: -100%; } 97% { left: 100%; } 100% { left: 0; }
}
@keyframes bannerTwo { 0% { left: 100%; } 31% { left: 100%; } 34% { left: 0; } 64% { left: 0; } 67% { left: -100%; } 100% { left: -100%; }
}
@keyframes bannerThree { 0% { left: 100%; } 64% { left: 100%; } 67% { left: 0; } 97% { left: 0; } 100% { left: -100%; }
}
/* smallest */
/*@media (max-width: 320px;) { #banners { height: 10rem; .banner { &.one, &.two, &.three { height: 10rem; h1 { font-size: 2rem; } } } }
}*/
/* small */
@media (min-width: 321px) and (max-width: 728px) { #banners { height: 12rem; } #banners .banner.one, #banners .banner.two, #banners .banner.three { height: 12rem; } #banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1 { font-size: 3rem; padding: 1.5rem; }
}
/* medium */
@media (min-width: 729px) and (max-width: 960px) { #banners { height: 20rem; } #banners .banner.one, #banners .banner.two, #banners .banner.three { height: 20rem; } #banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1 { font-size: 6rem; padding: 2rem; }
}
/* large */
@media (min-width: 961px) { #banners { height: 20rem; } #banners .banner.one, #banners .banner.two, #banners .banner.three { height: 20rem; } #banners .banner.one h1, #banners .banner.two h1, #banners .banner.three h1 { font-size: 6rem; padding: 2rem; }
}
| Developer | Brandon Kennedy |
| Username | brandonkennedy |
| Uploaded | September 18, 2022 |
| Rating | 3 |
| Size | 3,959 Kb |
| Views | 36,432 |
Do you need developer help for CSS Only Banner Rotation?
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!
Brandon Kennedy (brandonkennedy) Script Codes
| Name | Size |
| Negative Padding | 4,069 Kb |
| Digital Static Search Box | 4,148 Kb |
| Slug loader | 3,481 Kb |
| BG Images WITHOUT Defining Them In CSS | 5,580 Kb |
| And yet another box shadow loader | 7,615 Kb |
| Space ship fun | 7,302 Kb |
| Change the Slide Behavior on Bootstrap Carousels | 5,015 Kb |
| Browser Detection | 3,803 Kb |
| Box-shadow loader | 2,834 Kb |
| 3D 2D Box-Shadow Fish | 6,333 Kb |
Create amazing love letters 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 |
| A Pen by Stan Williams | Stanssongs | 6,706 Kb |
| Monochrome Form | AlienPiglet | 3,096 Kb |
| Scroll effect with text with help from Skrollr | Luxonglassing | 2,935 Kb |
| A Pen by Huan Nghiem | Nightshade | 10,646 Kb |
| A Pen by MurabitoB | MurabitoB | 4,421 Kb |
| Fixed Scrolling Nav Bar | Philsinatra | 0 Kb |
| Dice | Fraina | 5,026 Kb |
| LBCA - Mail canvas | Emnbdx | 3,856 Kb |
| CSS3 Form | Tusharbandal | 1,836 Kb |
| SVG hamburger menu button | Elifitch | 2,602 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!