My image that is using #keyframes scales beyond my div="image-zoom". It zooms correctly but as it zooms within the div it goes outside and the horizontal slider increases.
HTML:
<section id="intro-section">
<div id="image-zoom">
<h1>WELCOME</h1>
</div> <!-- /.container -->
</section>
CSS:
#intro-section {
height: 400px;
width: 100%;
}
#image-zoom {
background-image: url(/img/fairy-bg.jpg);
background-size:100%;
position:relative;
top:237;
left:0;
width:100%;
height:400px;
animation: zoom 30s infinite;
padding: 0;
}
#keyframes zoom {
0% { transform:scale(1,1); }
50% { transform:scale(1.2,1.2); }
100% { transform:scale(1,1); }
}
I know it's simple but I can't see where the mistake is.
Try adding an overflow: hidden to the containing <div>
This is where the issue lies:
transform:scale(1.2,1.2)
The scale is more than the container size. (1 = container size)
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>
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%
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>
I have a keyframe animation using CSS, and I would like to (automatically) make it centered for all resolutions, browsers, etc. I've tried doing margin: auto, etc. But that always results in my animation not working. Perhaps I am inserting it incorrectly, but I don't know. This is what I currently have, without any auto margins.
Here is my CSS code:
#image {
text-align:center;
width:276px;
position:absolute;
left:50%;
margin-left: -130px; /*this is what works for me, I'd imagine it's not */
margin-top: -240px; /*centered for everyone */
animation:dampe 0.3s infinite;
-webkit-animation:dampe 0.3s infinite;
}
#keyframes image {
0% { top:45%; }
50% { top:50%; }
100% { top:45%; }
}
#-webkit-keyframes image {
0% { top:45%; }
50% { top:50%; }
100% { top:45%; }
}
Here is my HTML code:
<div id="image">
<img src="image.png" />
</div>
By aligning the element using the margin-left property and offsetting by a fixed px value like in Joseph's solution you will not achieve a centered effect on all resolutions.
To achieve the centered effect on all resolutions offset your element by 50% from the left side and afterwards set the transform:translate3d(-50%,0,0). This will ensure that your element is always centered on the X axis, no matter the screen size.
/*CSS Markup*/
.centerX{
left:50%;
-webkit-transform:translate3d(-50%,0,0);
}