I'm trying to make a pure css top to bottom infinite photo banner (without any margins) with ability to use scrsets for larger displays and zooming (css background url is not an option for this case).
I can't figure it out how to calculate all the numbers that is necessary for the animation, can someone explain it to me, please?
1.1. What do I have to change if I add more images to the div?
The first frame is not moving (second frame suddenly "eats" the first one), why is it happening and how to fix it?
What am I doing wrong?
This is what I'm done so far:
#container {
width: auto;
height: auto;
overflow: hidden;
background: white;
margin: 0;
}
.photobanner {
height: 466px;
width: 350px;
margin-bottom: 0;
background-color: blue;
}
.photobanner img{
display: block;
}
.first {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
#keyframes "bannermove" {
0% {
margin-bottom: 0px;
}
100% {
margin-bottom: -466px;
}
}
#-moz-keyframes bannermove {
0% {
margin-bottom: 0px;
}
100% {
margin-bottom: -466px;
}
}
#-webkit-keyframes "bannermove" {
0% {
margin-bottom: 0px;
}
100% {
margin-bottom: -466px;
}
}
#-ms-keyframes "bannermove" {
0% {
margin-bottom: 0px;
}
100% {
margin-bottom: -466px;
}
}
#-o-keyframes "bannermove" {
0% {
margin-bottom: 0px;
}
100% {
margin-bottom: -466px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="container">
<!-- Each image is 350px by 233px -->
<div class="photobanner">
<img class="first" src="https://dummyimage.com/350x233/000/fff.png&text=1" alt="" />
<img src="https://dummyimage.com/350x233/000/fff.png&text=1" alt="" />
<img src="https://dummyimage.com/350x233/000/fff.png&text=2" alt="" />
<img src="https://dummyimage.com/350x233/000/fff.png&text=1" alt="" />
</div>
</div>
</body>
</html>
Take a look at this example I have created. I am using 3 separate images.
For this to work, I used images which are all of the same size.
Each image is 350 x 150 so from that I can determine the height/width ratio to be 0.4285
The ratio value can be used as padding to specify the height of the carousel - This trick can be used to create a responsive carousel:
.carousel {
height: 0;
overflow: hidden;
padding-bottom: 43%;
}
This will allow the carousel to scale in proportion with the images.
Since we want the carousel to be infinite scrolling, it needs to have a duplicate of the first slide at the bottom. This will allow the animation to continue seamlessly.
The animation itself is manipulating the transform value between 0% and 75%. I am using 75 here because there are a total of 4 images in the carousel and we want the animation to loop at the 3rd quarter of the progression.
If we have 3 images, we would need to change this value to 66.66%
Related
There are tons of horizontal scrolling backgrounds but that isn't my issue. Any time I create a vertical scroll using keyframes, the background image itself runs out, or it glitches out completely and starts the scroll effect over. That is not what I need. I need a seamless VERTICAL scrolling background that takes up the full width of the screen. There will be a container with the overflow hidden and it's background needs to scroll slowly upwards with a series of images that never glitches out, runs out etc. It needs to look like the one million examples of horizontal scrolling but vertically.
In the CSS is the actual dimensions of the image I am using. I am using a placeholder to start this conversation. Notice, even with the placeholder, the image just eventually stops.
Why does it do this with vertical scrolling, but typically not with horizontal? It doesn't make sense to me and there aren't many resources out there about vertical infinite scrolls of a background image, believe it or not.
If anyone has any recommendations, I will take it. JS or CSS whatever it is I am willing to listen and learn and understand why the f*** I can't figure this out. Thanks.
<div class="container">
<div class="sliding-background"></div>
</div>
.container {
overflow: hidden;
height: 600px;
}
.sliding-background {
background: url("https://images.fineartamerica.com/images/artworkimages/mediumlarge/2/a-dramatic-image-of-a-tall-tree-sitting-against-moody-skies-in-the-background-with-blue-and-yellow-tones-chris-cook.jpg") repeat-y;
height: 4980px;
width: 1440px;
animation: slide 30s linear infinite;
}
#keyframes slide{
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, -100%, 0);
}
}
<div class="container">
<div class="sliding-background"></div>
</div>
If you know the exact height of the image, this solution should work:
body {
margin: 0;
}
.container {
overflow: hidden;
height: 600px;
}
.sliding-background {
--imageHeight: 900px;
background: url("https://images.fineartamerica.com/images/artworkimages/mediumlarge/2/a-dramatic-image-of-a-tall-tree-sitting-against-moody-skies-in-the-background-with-blue-and-yellow-tones-chris-cook.jpg") repeat-y;
height: calc(var(--imageHeight) * 2);
animation: slide 4s linear infinite;
}
#keyframes slide {
from {
transform: translateY(0px);
}
to {
transform: translateY(calc(var(--imageHeight) * -1));
}
}
<div class="container">
<div class="sliding-background"></div>
</div>
If there is any confusion about the image height:
body {
margin: 0;
}
.container {
overflow: hidden;
height: 600px;
}
.sliding-background {
background: url("https://images.fineartamerica.com/images/artworkimages/mediumlarge/2/a-dramatic-image-of-a-tall-tree-sitting-against-moody-skies-in-the-background-with-blue-and-yellow-tones-chris-cook.jpg") repeat-y;
-webkit-animation: bgScroll 600s linear infinite;
animation: bgScroll 600s linear infinite;
height: 100%;
background-size: cover;
position: relative;
}
#keyframes bgScroll{
0% {
background-position: 0 0;
}
100% {
background-position: 0 10000%;
}
}
<div class="container">
<div class="sliding-background"></div>
</div>
So recently I had my exams and unfortunately failed because of CSS animation. One of the tasks was to make CSS animation with the squares.
I can't remember the exact question and task but it was like this:
Make three squares and let the first one go for 2 seconds to the right
Wait for the second square to do the same thing, without returning back.
The third one should do the same thing
After the third square touches the right side, they all should go back to the first place.
Does anyone have an idea how I can make squares to go back to the first place?
.row {
margin-bottom: 10px;
}
.row div {
display: inline-block;
padding: 50px;
background-color: red;
position: relative;
}
#first {
animation: first 2s linear forwards 0ms,
back 2s linear alternate 5s;
}
#second {
animation: first 2s linear forwards 2s;
}
#third {
animation: first 2s linear forwards 4s;
}
#keyframes first {
0% {
left: 0;
}
100% {
left: 100%;
}
}
#keyframes back {
0% {
right: 0%;
}
100% {
right: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animation testing</title>
</head>
<body>
<div class="row">
<div id="first"></div>
</div>
<div class="row">
<div id="second"></div>
</div>
<div class="row">
<div id="third"></div>
</div>
</body>
</html>
Interesting task. Today I learned something. Actually my first animation ever :)
To move the squares to the right:
I have used your existing and already correctly working first, second, and third keyframes with the same timings.
The first starts at 0s and takes 2 seconds, the second starts after two seconds and takes two seconds, so the third after 4 seconds.
To return the squares:
I have defined another back keyframe.
To start the back keyframe, I have added back 2s linear forwards 6s to all elements as a second animation.
The second animation takes 2 seconds and starts after 6 seconds when all others are finished (3 * 2 seconds each).
Note: You could also reverse the positions in the back keyframe and use one of the alternatives to forwards instead, see https://www.w3schools.com/css/css3_animations.asp.
.row {
margin-bottom: 10px;
}
.row div {
display: inline-block;
padding: 50px;
background-color: red;
position: relative;
}
#first {
animation: first 2s linear forwards 0s,
back 2s linear forwards 6s;
}
#second {
animation: second 2s linear forwards 2s,
back 2s linear forwards 6s;
}
#third {
animation: third 2s linear forwards 4s,
back 2s linear forwards 6s;
}
#keyframes first {
0% {
left: 0;
}
100% {
left: 100%;
}
}
#keyframes second{
0% {
left: 0;
}
100% {
left: 100%;
}
}
#keyframes third{
0% {
left: 0;
}
100% {
left: 100%;
}
}
#keyframes back{
0% {
left: 100%;
}
100% {
left: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animation testing</title>
</head>
<body>
<div class="row">
<div id="first"></div>
</div>
<div class="row">
<div id="second"></div>
</div>
<div class="row">
<div id="third"></div>
</div>
</body>
</html>
Try this, it may work.
.move-me {
display: inline-block;
padding: 20px;
color: white;
position: relative;
margin: 0 0 10px 0;
}
.move-me-1 {
animation: move-in-steps 8s steps(4) infinite;
}
.move-me-2 {
animation: move-in-steps 8s steps(4, start) infinite;
}
.move-me-3 {
animation: move-in-steps 8s infinite;
}
body {
padding: 20px;
}
#keyframes move-in-steps {
0% {
left: 0;
background: blue;
}
100% {
left: 100%;
background: red;
}
}
<div class="move-me move-me-1">steps(4, end)</div>
<br>
<div class="move-me move-me-2">steps(4, start)</div>
<br>
<div class="move-me move-me-3">no steps</div>
I have a little noobish CSS question If someone could share some free time to help. what I want to do is the div to stop and freeze at the position whenever I leave (hover off) my cursor, and not reset to his fixed starting position.
<script>
.rotatingDiv {
width: 50px;
height: 30px;
background-color: red;
margin: auto;
margin-top: 10rem;
cursor: pointer;
}
.rotatingDiv:hover {
animation: spin 4s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</script>
<body>
<div class="rotatingDiv"> </div>
</body>
as seen on the example the div keeps reseting to the starting position which is 0deg (default) on mouse-out, so what I want to achieve is for the div to freeze at the exact degree whenever I leave my cursor (mouse out/ hover off) from the div.
I think you wanted this thing it would be work
.rotatingDiv {
width: 50px;
height: 30px;
background-color: red;
margin: auto;
margin-top: 10rem;
cursor: pointer;
animation: spin 4s linear infinite;
animation-play-state: paused;
}
.rotatingDiv:hover {
animation: spin 4s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<body>
<div class="rotatingDiv"> </div>
</body>
I am working on a background animation where 3 images slide to the left, and while they are sliding they fade into each other. link: www.nettyneets.com
The page is a one page website (resize to browser window, 100%width, 100vh).
My problem is that because the image is 100%width, when it slides to the left there's nothing to the right, therefore I need to make the image bigger so that when it slides the background isn't visible but at the same time I need to keep the website 100%width, 100vh.
<div class="intro-body">
<img class="c" src="img/img3.jpeg" />
<img class="b" src="img/img2.jpeg" />
<img class="a" src="img/img1.jpeg" />
</div>
CSS
.intro .intro-body {
width:100%;
height:auto;
position:relative;
}
.intro-body img {
width:100%;
height:100vh;
position:absolute;
z-index:1;
}
img.a {
animation: animatedBg1 12s infinite;
z-index: 3;
opacity:0.5;
}
img.b {
animation-delay: 4s!important;
animation: animatedBg1 12s infinite;
z-index: 2;
}
img.c {
animation-delay: 8s!important;
animation: animatedBg1 12s infinite;
z-index: 1;
}
I dunno if this is the best solution but you can do this:
.intro-body{
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
and then you can set whatever size you want to images it wont go over 100% width and height.
I want to place my image left outside of page how to do it?
+-------------------+
| visible page part |
image -> | |
+-------------------+
Finally I want to move image inside page.
+-------------------+
| visible page part |
| image inside page |
+-------------------+
You can use either negative margin or translateX transform to achieve this. The below snippet has an example for both approaches.
One thing to note is that the two methods work a bit differently even though their end output is similar. While translateX(-100%) moves element to the left (on the X-axis) by as many pixels as the width of the image, margin-left: -100% moves the image by as many pixels as the width of the container of the image. So, if the emphasis is on just left outside the visible part then using translateX(-100%) is more suitable.
/* using negative margins */
.margin {
margin-left: -100%;
animation: marginmove 1s 3s forwards;
}
#keyframes marginmove {
from {
margin-left: -100%;
}
to {
margin-left: 0%;
}
}
/* using translate transforms */
.translate {
transform: translateX(-100%);
animation: translatemove 2s 3s forwards;
}
#keyframes translatemove {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0%);
}
}
/* Just for demo */
body {
max-width: 300px;
margin: 0 auto;
padding: 0;
border: 1px solid;
}
html,
body {
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Test content</div>
<img src="http://lorempixel.com/100/100/nature/1" class="margin" />
<div>Test content</div>
<img src="http://lorempixel.com/100/100/nature/2" class="translate" />
Note: As mentioned in comments, if there is a chance that the page's width can become lesser than the viewport's width then it would be imperative to add overflow: hidden to the root/parent element (as applicable) to prevent the image from showing up outside the page's left border.
You can adapt the above answer to work even when the image is part of a centered column which has equal margins on either sides. Below is a sample snippet to help you:
/* using negative margins */
.margin {
margin-left: -100%;
margin-right: 0%;
animation: marginmove 1s 3s forwards;
}
#keyframes marginmove {
from {
margin-left: -100%;
}
to {
margin-left: 0%;
}
}
/* using translate transforms */
.translate {
transform: translateX(-100%);
animation: translatemove 1s 3s forwards;
}
#keyframes translatemove {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0%);
}
}
/* Just for demo */
.container {
width: 300px;
margin: 0 auto;
border: 1px solid;
overflow: hidden;
}
.container > div{
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='container'>
<div>Centered column</div>
<img src="http://lorempixel.com/300/100/nature/1" class="margin" />
</div>
<div class='container'>
<div>Centered column</div>
<img src="http://lorempixel.com/300/100/nature/2" class="translate" />
</div>