Menu
I would like to bring some more interactive elements into my webpage.
What i've seen before on some website's, is that the background image zoom's in slowly and back out. So that it looks more like a living thing.
I've been searching on the internets and here. But i dont know how this technique is done exactly and i dont know the name for this kind of effect.
I also think this should be fairly easy to achiev this with some CSS3 and HTML5.
The questions are:
Here is the html i had in mind:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test page</title>
<style>
body {
background-image: url("http://wallpapercave.com/wp/LXR5gFx.png");
background-size: 100% auto;
}
</style>
</head>
<body>
</body>
</html>
The goal is to let the background image zooming in slowly and back out. Like it is breathing.
368
When you work with background images, you may want an image to stretch to fit the page despite the wide range of devices and screen sizes. The best way to stretch an image to fit the background of an element is to use the CSS3 property, for background-size, and set it equal to cover.
The background-size CSS property lets you resize the background image of an element, overriding the default behavior of tiling the image at its full size by specifying the width and/or height of the image. By doing so, you can scale the image upward or downward as desired.
You can use the CSS background-size: cover; to stretch and scale an image in the background with CSS only. This scales the image as large as possible in such a way that the background area is completely covered by the background image, while preserving its intrinsic aspect ratio.
There is mainly 2 different ways, using either animation or transition.
animation is normally better when one want something running all the time, and transition is more efficient for e.g. hover effects.
Here is a start using animation.
Stack snippet
html, body {
height: 100%;
margin: 0
}
@keyframes breath {
0% { background-size: 100% auto; }
50% { background-size: 140% auto; }
100% { background-size: 100% auto; }
}
#bkg{
width: 100%;
height: 100%;
animation: breath 4s linear infinite;
background: url("http://wallpapercave.com/wp/LXR5gFx.png") center center no-repeat;
}<div id="bkg"></div>And here is another using transition and :hover.
Stack snippet
html, body {
height: 100%;
margin: 0
}
#bkg {
width: 180px;
height: 180px;
position: relative;
overflow: hidden;
}
#bkg::before {
content: '';
position: absolute;
left: 0; top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url("http://wallpapercave.com/wp/LXR5gFx.png");
background-position: center;
background-repeat: no-repeat;
transition: transform .5s linear;
}
#bkg:hover::before{
transform: scale(1.3);
}<div id="bkg"></div>What you are looking for is called keyframes.
This is the code in the following example.
@keyframes zoom {
0% { transform:scale(1,1); }
50% { transform:scale(1.2,1.2); }
100% {
transform:scale(1,1);
}
}
Css transform has properties which can br run "frame by frame", in the above, we want the picture to be zoomed by the factor 1.2 on the x and y axis by the time 50% of the animation have passed. We start at no zoom, zoom it by 20% and then we go back tot he original state.
And here is how we add this to the class:
animation: zoom 30s infinite;
just add that to your class and it will run. There are more parameters, but this gets complicated for someone who is unfamiliar with, thus, an easy example.
Here the link to the codepen in action
http://codepen.io/damianocel/pen/QyqRgw
28
You want to use a separate element with transform(), for three reasons:
body background will cause the entire page to repaint on every frameAlso, animating the background-position will create a juggle effect, as the browser will try to round the position to the nearest pixel.
With a transform: scale() on the other hand, the browser will position the element with subpixel rendering, resulting in a way smoother movement.
@keyframes breath {
from {
transform: scale(1);
}
to {
transform: scale(1.05)
}
}
div{
width: 100vw;
height: 100vh;
animation: breath 2s ease-in-out alternate infinite;
background: url("https://www.placecage.com/800/600");
background-size: cover;
}
body {
margin: 0;
}<div></div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
