I found a great pure CSS slider online that does exactly what I need but the slider isn't responsive. I'd like it to resize based on the viewport size, so that if I drag the browser smaller, the slider resizes smaller along with it.. I've tried lots of suggestions from different websites but none of them worked. What can I do?
#slider {
width: 952px;
height: 409px;
overflow: hidden;
position: relative;
margin-top: 23px;
margin-bottom: 45px;
margin-left: auto;
margin-right: auto;
background-color: #FFF;
}
#slider > div {
width: 100%;
height: 100%;
background-size: contain;
position: absolute;
animation: slide 20s infinite;
opacity: 0;
}
#slider > div:nth-child(2) {
animation-delay: 5s;
}
#slider > div:nth-child(3) {
animation-delay: 10s;
}
#slider > div:nth-child(4) {
animation-delay: 15s;
}
#slider > div:nth-child(5) {
animation-delay: 20s;
}
#keyframes slide {
10% {
opacity: 1;
}
20% {
opacity: 1;
}
30% {
opacity: 1;
}
40% {
opacity: 0;
}
}
<div id="slider">
<div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide1.png)"></div>
<div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide2.png)"></div>
<div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide3.png)"></div>
<div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide4.png)"></div>
</div>
Just add max-width:100vw; on #slider to make sure that the width of the slider does not overflow on your body.
DEMO
body{
margin:0; /* ADDED for SNIPPET Stackoverflow */
}
#slider {
width: 952px;
height: 409px;
overflow: hidden;
position: relative;
margin-top: 23px;
margin-bottom: 45px;
margin-left: auto;
margin-right: auto;
background-color: #FFF;
max-width:100vw; /* ADDED */
}
#slider > div {
width: 100%;
height: 100%;
background-size: contain;
position: absolute;
animation: slide 20s infinite;
opacity: 0;
}
#slider > div:nth-child(2) {
animation-delay: 5s;
}
#slider > div:nth-child(3) {
animation-delay: 10s;
}
#slider > div:nth-child(4) {
animation-delay: 15s;
}
#slider > div:nth-child(5) {
animation-delay: 20s;
}
#keyframes slide {
10% {
opacity: 1;
}
20% {
opacity: 1;
}
30% {
opacity: 1;
}
40% {
opacity: 0;
}
}
<div id="slider">
<div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide1.png)"></div>
<div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide2.png)"></div>
<div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide3.png)"></div>
<div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide4.png)"></div>
</div>
If you are familiar with the concepts of break-points and media queries you can make this responsive pretty easily.
You can use media-queries like this:
#media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
Which will apply a background-color to the body when the screen is smaller than 600px. By repeating this on all most common breakpoints (see bootstrap breakpoints) you will be able to style your pure css slider in a pretty efficient way.
https://getbootstrap.com/docs/5.0/layout/breakpoints/
Try this code it will help you
Make your Width:100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
#slider {
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
margin-top: 23px;
margin-bottom: 45px;
margin-left: auto;
margin-right: auto;
background-color: #FFF;
}
#slider > div {
width: 100%;
height: 100%;
background-size: contain;
position: absolute;
animation: slide 20s infinite;
opacity: 0;
}
#slider > div:nth-child(2) {
animation-delay: 5s;
}
#slider > div:nth-child(3) {
animation-delay: 10s;
}
#slider > div:nth-child(4) {
animation-delay: 15s;
}
#slider > div:nth-child(5) {
animation-delay: 20s;
}
#keyframes slide {
10% {
opacity: 1;
}
20% {
opacity: 1;
}
30% {
opacity: 1;
}
40% {
opacity: 0;
}
}
</style>
<div id="slider">
<div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide1.png)"></div>
<div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide2.png)"></div>
<div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide3.png)"></div>
<div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide4.png)"></div>
</div>
</body>
</html>
Let me know if this will work for you
Related
as a newbie in CSS animations i'm trying to make some spinners,
Unfortunately i am not able to make repeat a cycle of animations and i'm searching help!
Here is the code:
.rotate {
transform: rotate(-45deg);
display: flex;
}
#column {
display: flex;
flex-direction: column;
}
.block3 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s linear both;
animation-delay: 0s;
}
.block4 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s linear both;
animation-delay: .4s;
}
.block2 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s linear both;
animation-delay: .8s;
}
.block1 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s linear both;
animation-delay: 1.2s;
}
#keyframes fade {
0% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
100% {
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="it">
<head>
<style>
body {
position: absolute;
margin: 0;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.margin {
margin-top: 200px;
left: 50%;
transform: translate(-50%);
position: absolute;
}
</style>
</head>
<body>
<section class="animation rotate">
<div id="column">
<div class="block1"></div>
<div class="block2"></div>
</div>
<div id="column">
<div class="block3"></div>
<div class="block4"></div>
</div>
</section>
</body>
</html>
I even tried with infinite attribute but obviously it continues to repeat every block:
.rotate {
transform: rotate(-45deg);
display: flex;
}
#column {
display: flex;
flex-direction: column;
}
.block3 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s infinite linear both;
animation-delay: 0s;
}
.block4 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s infinite linear both;
animation-delay: .4s;
}
.block2 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s infinite linear both;
animation-delay: .8s;
}
.block1 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s infinite linear both;
animation-delay: 1.2s;
}
#keyframes fade {
0% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
100% {
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="it">
<head>
<style>
body {
position: absolute;
margin: 0;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.margin {
margin-top: 200px;
left: 50%;
transform: translate(-50%);
position: absolute;
}
</style>
</head>
<body>
<section class="animation rotate">
<div id="column">
<div class="block1"></div>
<div class="block2"></div>
</div>
<div id="column">
<div class="block3"></div>
<div class="block4"></div>
</div>
</section>
</body>
</html>
So in conclusion:
block1 executes, block2 executes, block3 executes, block4 executes then repeat from block1
You will need to create a keyframe for each block:
.rotate {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg) ;
display: flex;
flex-wrap: wrap;
width: 100px; /* change this to control the size */
}
.rotate div {
flex:1 1 48%; /* little less than 50% to consider the margin */
margin: 1px;
background-color: black;
animation: 2s linear infinite;
}
/* maintain square ratio*/
.rotate div::before {
content: "";
display: block;
padding-top: 100%;
}
/**/
.rotate div:nth-child(1) { animation-name:fade4}
.rotate div:nth-child(2) { animation-name:fade1}
.rotate div:nth-child(3) { animation-name:fade3}
.rotate div:nth-child(4) { animation-name:fade2}
/* [0% first one 20%][20% second one 40%][40% third one 60%][60% fourth one 80%][80% pause 100%] */
#keyframes fade1 {
0% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
20%,100% {
opacity: 0;
}
}
#keyframes fade2 {
0%,20% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
40%,100% {
opacity: 0;
}
}
#keyframes fade3 {
0%,40% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
60%,100% {
opacity: 0;
}
}
#keyframes fade4 {
0%,60% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
80%,100% {
opacity: 0;
}
}
<section class="animation rotate">
<div></div>
<div></div>
<div></div>
<div></div>
</section>
I have been trying this multiple ways with no success. JavaScript, TweenLite, etc. I need to alternate two <div> tags, slide1 & slide2, that live inside slide. Fading one out to fading one in. A continuous loop. I can use a basic css #keyframes animation like bellow. It works fine, but they are clickable links and one <div> will always remain on top.
Is there a way to loop the z-index of each div in the #keyframes anim?
Or maybe a completely better method?
CSS
.slider {
max-width: 300px;
height: 200px;
margin: 20px auto;
position: relative;
}
.slide1,.slide2 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
animation:fade 8s infinite;
-webkit-animation:fade 8s infinite;
}
.slide2 {
animation:fade2 8s infinite;
-webkit-animation:fade2 8s infinite;
}
#keyframes fade
{
0% {opacity:1}
33.333% { opacity: 0}
66.666% { opacity: 0}
100% { opacity: 1}
}
#keyframes fade2
{
0% {opacity:0}
33.333% { opacity: 1}
66.666% { opacity: 0 }
100% { opacity: 0}
}
HTML
<div class="slider">
<div class="slide1"></div>
<div class="slide2"></div>
</div>
They seem to be working for me, check it out: https://codepen.io/giovannipds/pen/LzgYaa
<style>
.slider {
line-height: 1.5;
height: 200px;
margin: 20px auto;
position: relative;
width: 300px;
}
.slide {
padding: 20px;
position: absolute;
width: 100%;
height: 100%;
}
.slide,
.slide a {
color: #fff;
}
.slide1 {
animation: fade 8s infinite;
background: red;
}
.slide2 {
animation: fade2 8s infinite;
background: blue;
}
#keyframes fade
{
0% { opacity: 1 ; z-index: 2; }
33.333% { opacity: 0; z-index: 1; }
66.666% { opacity: 0; z-index: 1; }
100% { opacity: 1; z-index: 2; }
}
#keyframes fade2
{
0% { opacity: 0; z-index: 1; }
33.333% { opacity: 1; z-index: 2; }
66.666% { opacity: 1; z-index: 2; }
100% { opacity: 0; z-index: 1; }
}
</style>
<div class="slider">
<div class="slide slide1">
<ul>
<li>Google</li>
<li>Globo.com</li>
</ul>
</div>
<div class="slide slide2">
<ul>
<li>Love Mondays</li>
<li>Hotmail</li>
</ul>
</div>
</div>
I have 2 images with transparent background and need to put one on top of each other with the same positioning:
1 spinning (underneath)
1 fixed (above)
I need to have the whole image composition to be centered and to have its size adjusted depending on the window size.
I used an ::after pseudo element for the fixed one but couldn’t get its position and size to follow the spinning one.
I suppose the background-size property should be involved but didn’t manage to use it properly.
Would appreciate any advice, even if it involves going with a totally different approach than the ::after pseudo class.
Many thanks.
body{
width: 100%;
height: 100%;
background-color: #000;
text-align: center;
color: #fff;
}
.main-container{
background-color: #00f;
width: 50%;
margin: 0 auto;
}
.engine-container{
}
.engine-complete{
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
}
.engine-complete::after{
content: "";
position: absolute;
width: 191px;
height: 192px;
top: 1px;
left: 0;
background-image: url(https://image.ibb.co/jOqNma/engine1_crpd.png);
}
.engine-rotating{
width: 50%;
height: auto;
}
.spin {
animation-duration: 15s;
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function:linear;
animation-play-state: running;
}
#keyframes spin {
from {
transform:rotate(360deg);
}
to {
transform:rotate(0deg);
}
}
<div class="main-container">
<h1>spinning engine</h1>
<div class="engine-container">
<div class="engine-complete">
<img src="https://image.ibb.co/nwOKXF/engine1.png" width=191 height=192 class="engine-rotating spin"/>
</div>
</div>
</div>
Something like this?
EDIT: Instead of setting the image as a background using the ::after pseudo-class, I added the fixed image into the html. I also eliminated one of your containers.
I centred the animated image using text-align:center and centred the fixed image using position: absolute
I set both images to 30% width relative their parent .engine-container
The fixed image has a higher z-index than the animated image so that it always appears over it. The images also change size accordingly, relative to window size.
body {
width: 100%;
height: 100%;
background-color: #000;
text-align: center;
color: #fff;
}
.main-container {
background-color: #00f;
width: 50%;
margin: 0 auto;
}
.engine-container {
text-align: center;
position: relative;
}
.engine-rotating,
.engine-fixed {
width: 30%;
}
.engine-fixed {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
z-index: 5000;
}
.spin {
animation-duration: 15s;
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-play-state: running;
}
#keyframes spin {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
<div class="main-container">
<h1>spinning engine</h1>
<div class="engine-container">
<img src="https://image.ibb.co/nwOKXF/engine1.png" class="engine-rotating spin" />
<img src="https://image.ibb.co/jOqNma/engine1_crpd.png" class="engine-fixed" alt="">
</div>
</div>
UPDATE
Heres what I came up with:
A similar effect using ::after. I was able to achieve this by inserting the image url into the content: rule, rather than setting a background image.
body {
width: 100%;
height: 100%;
background-color: #000;
text-align: center;
color: #fff;
}
.main-container {
background-color: #00f;
width: 50%;
margin: 0 auto;
}
.engine-container{
text-align: center;
position: relative;
}
.engine-rotating{
}
.engine-container::after{
content: url('https://image.ibb.co/jOqNma/engine1_crpd.png');
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
z-index: 5000;
}
.spin{
animation-duration: 15s;
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-play-state: running;
}
#keyframes spin{
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
<div class="main-container">
<h1>spinning engine</h1>
<div class="engine-container">
<img src="https://image.ibb.co/nwOKXF/engine1.png" class="engine-rotating spin" />
</div>
</div>
Set position for .engine-complete::after to relative
.engine-complete::after {position: relative}
body{
width: 100%;
height: 100%;
background-color: #000;
text-align: center;
color: #fff;
}
.main-container{
background-color: #00f;
width: 50%;
margin: 0 auto;
}
.engine-container{
}
.engine-complete{
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
}
.engine-complete::after{
content: "";
position: relative; /* this was changed */
width: 191px;
height: 192px;
top: 1px;
left: 0;
background-image: url(https://image.ibb.co/jOqNma/engine1_crpd.png);
}
.engine-rotating{
width: 50%;
height: auto;
}
.spin {
animation-duration: 15s;
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function:linear;
animation-play-state: running;
}
#keyframes spin {
from {
transform:rotate(360deg);
}
to {
transform:rotate(0deg);
}
}
<div class="main-container">
<h1>spinning engine</h1>
<div class="engine-container">
<div class="engine-complete">
<img src="https://image.ibb.co/nwOKXF/engine1.png" width=191 height=192 class="engine-rotating spin"/>
</div>
</div>
</div>
I cannot figure out why my css3 is not animating. Please help. I have the div and #keyframes set.
test
div {
animation: test 4s;
}
#keyframes test {
0% {
bottom: 0;
left: 0;
background-color: red;
}
100% {
bottom: 50px;
left: 350px;
background-color: blue;
}
}
</style>
</head>
<body>
<div>
Text
</div>
</body>
</html>
In this case you need to apply it to the div:
div {
animation: test 1s;
}
And also use prefixed css for Chrome and Safari:
#-webkit-keyframes test {
0% {
bottom: 0;
left: 0;
background-color: red;
}
100% {
bottom: 50px;
left: 350px;
background-color: blue;
}
}
#keyframes test {
0% {
bottom: 0;
left: 0;
background-color: red;
}
100% {
bottom: 50px;
left: 350px;
background-color: blue;
}
}
div {
-webkit-animation: test 1s;
animation: test 1s;
}
Here is a fiddle with vendor prefixed code: http://jsfiddle.net/zahanq0g/
To check which properties work with which browsers I recommend using Can I Use. E.g: http://caniuse.com/#search=keyframes
I'm trying to animate the background-position of a div, slowly, but without it having jerky movement. You can see the result of my current efforts here:
http://jsfiddle.net/5pVr4/2/
#-webkit-keyframes MOVE-BG {
from {
background-position: 0% 0%
}
to {
background-position: 187% 0%
}
}
#content {
width: 100%;
height: 300px;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
text-align: center;
font-size: 26px;
color: #000;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
I have been at this for hours and can't find anything that will animate slowly and smoothly at a sub-pixel level. My current example was made from the example code on this page: http://css-tricks.com/parallax-background-css3/
The smoothness of animation I'm after can be seen on this page's translate() example:
http://css-tricks.com/tale-of-animation-performance/
If it can't be done with the background-position, is there a way to fake the repeating background with multiple divs and move those divs using translate?
Checkout this example:
#content {
height: 300px;
text-align: center;
font-size: 26px;
color: #000;
position:relative;
}
.bg{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
animation-name: MOVE-BG;
animation-duration: 100s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes MOVE-BG {
from {
transform: translateX(0);
}
to {
transform: translateX(-187%);
}
}
<div id="content">Foreground content
<div class="bg"></div>
</div>
http://jsfiddle.net/5pVr4/4/
Animating background-position will cause some performance issues. Browsers will animate transform properties much cheaply, including translate.
Here is an example using translate for an infinite slide animation (without prefixes):
http://jsfiddle.net/brunomuller/5pVr4/504/
#-webkit-keyframes bg-slide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.wrapper {
position:relative;
width:400px;
height: 300px;
overflow:hidden;
}
.content {
position: relative;
text-align: center;
font-size: 26px;
color: #000;
}
.bg {
width: 200%;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) repeat-x;
position:absolute;
top: 0;
bottom: 0;
left: 0;
animation: bg-slide 20s linear infinite;
}
You should adjust your HTML and CSS little bit
Working Demo
HTML
<div id="wrapper">
<div id="page">
Foreground content
</div>
<div id="content"> </div>
</div>
CSS
#-webkit-keyframes MOVE-BG {
from { left: 0; }
to { left: -2000px; }
}
#wrapper {
position:relative;
width:800px;
height: 300px;
overflow:hidden;
}
#page {
text-align: center;
font-size: 26px;
color: #000;
}
#content {
width: 2000px;
height: 300px;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
position:absolute;
top: 0;
left: 0;
z-index:-1;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}