Issue
below is my css animation(actually copied from Animista)
@-webkit-keyframes kenburns-top {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
-webkit-transform-origin: 50% 16%;
transform-origin: 50% 16%;
}
100% {
-webkit-transform: scale(1.25) translateY(-15px);
transform: scale(1.25) translateY(-15px);
-webkit-transform-origin: top;
transform-origin: top;
}
}
@keyframes kenburns-top {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
-webkit-transform-origin: 50% 16%;
transform-origin: 50% 16%;
}
100% {
-webkit-transform: scale(1.25) translateY(-15px);
transform: scale(1.25) translateY(-15px);
-webkit-transform-origin: top;
transform-origin: top;
}
}
body {
background: url(https://images.pexels.com/photos/934062/pexels-photo-934062.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
background-size: cover;
background-position: center;
color: white;
font-family: "Open Sans", sans-serif !important;
}<body></body>I need to apply this to body background image
body {
background: url(https://images.pexels.com/photos/934062/pexels-photo-934062.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
background-size: cover;
background-position: center;
color: white;
font-family: "Open Sans", sans-serif !important;
}
when I try to apply the animation everything inside the body is moving except the background image, please help me out here I am all new to these.
Solution
As far as I know you can't add animation to background image. You have to simulate the way background image works and then add the animation to that image. I used CSS positioning to accomplish this. I didn't add your animations completely but you can add it as you like.
CSS:
body {
color: white;
font-family: 'Open Sans', sans-serif !important;
}
#bg-image {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: auto;
z-index: -10;
animation-name: kenburns-top;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@-webkit-keyframes kenburns-top {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
-webkit-transform-origin: 50% 16%;
transform-origin: 50% 16%;
}
100% {
-webkit-transform: scale(1.25) translateY(-15px);
transform: scale(1.25) translateY(-15px);
-webkit-transform-origin: top;
transform-origin: top;
}
}
and the body tag will be like:
<body>
<img
id="bg-image"
src="https://images.pexels.com/photos/934062/pexels-photo-934062.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
/>
<h1>Web Page</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eligendi
cupiditate non? Voluptas, in, deserunt quis expedita, laudantium suscipit
ab sint amet quia dolorum illum saepe. Placeat libero enim dicta!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium iure
veritatis eligendi ipsa ad suscipit, quo illum ut rem incidunt eos rerum
iusto repellendus voluptatibus saepe veniam ullam, quod vel?
</p>
</body>
Answered By - BEORN Answer Checked By - David Goodson (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.