CODEWITHSUNDEEP
javascripthtmlcssbackground-imagecss-transitions
mdhttr248
mdhttr248

Reputation: 5

Zoom Background Image with CSS or JavaScript

I would like to scale the background image of my div over time, so that it looks like it is zooming in and out (without hovering the mouse over - I'm just looking for the animation to start automatically). But, no matter what I try, the background animation just looks choppy.

If I set the div to scale, then the transition is smooth, but it scales the entire div, not just the background image. For additional information, I am running the most recent version of Chrome, and have tried on both Windows and OS. You can see an example here: https://jsfiddle.net/sdqv19a0/

 <div class="site-main-banner">

        <div class="caption">
            <!-- Bootstrap -->
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">

                        <!-- figure -->
                        <figure> <img src="images/signature.png" alt="signature"> </figure>
                        <!-- H1 Heading -->
                        <h1 class="typewrite" data-period="2000" data-type='[ "Purposeful design", "Data-driven marketing", "Dynamic branding", "I love it all." ]'> <span class="wrap"></span> </h1>
                        <!-- H2 Heading -->
                        <h2>graphic designer • web designer • analytical marketer</h2>
                        <div class="clearfix"> </div>
                        <!-- Button -->
                        <a href="#" class="theme-btn">view my portfolio</a>

                    </div>
                </div>
            </div>
        </div>

CSS:

.site-main-banner {
float:left;
width:100%;
background:url(https://preview.ibb.co/m8kxST/static_banner_new.jpg) no-repeat center center;
background-attachment:fixed;
background-size:cover;
margin: 0;
padding: 0;
display: block;
clear: both;
position: relative;
text-align:center;
overflow: hidden;
animation: shrink 5s infinite alternate steps(60);
}
@keyframes shrink {
0% {
background-size: 110% 110%;
}
100% {
background-size: 100% 100%;
}
}
.site-main-banner a.theme-btn {
color: #FFFFFF;
border:#FFFFFF solid 1px;
background:none;
box-shadow:none;
}
.site-main-banner a.theme-btn:hover {
color: #bc6ca7;
border:#FFFFFF solid 1px;
background:#FFFFFF;
box-shadow:none;
}
.site-main-banner .caption {
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%);
padding:300px 0;

}
.site-main-banner figure {
float:left;
width:100%;
text-align:center;
padding:0 0 15px 0;
}

Suggestions? I am open to a js solution, as well, just am not as comfortable with javascript. Thanks!

Upvotes: 0

Views: 3699

Answers (3)

Callam
Callam

Reputation: 11539

Separate your background into its own element behind the main banner so you can apply keyframe animations transforming the scale of the background individually instead.

body, html {
  margin: 0;
  padding: 0;
}

.site-space-background {
  position: fixed; height: 100%; width: 100%;
  background: #1A1939 no-repeat center center;
  background-image: url(https://preview.ibb.co/m8kxST/static_banner_new.jpg);
  background-attachment: fixed;
	background-size: cover;
  animation: shrink 5s infinite alternate steps(60);
}

@keyframes shrink {
  0% {
    transform: scale(1.2)
  }
  100% {
    transform: scale(1.0)
  }
}
<div class="site-space-background"></div>
<div class="site-main-banner">
    <!-- The rest -->
</div>

Upvotes: 3

Alvin Ching
Alvin Ching

Reputation: 25

Try using the transform: scale([values]); in your animation. Using transform element is good for applying scales animation. Look at this Jsfiddle. I tweaked some of your code (not that much since I only edited your css animation).

Upvotes: 0

Etienne Martin
Etienne Martin

Reputation: 11579

I would use the css transform property in combination with a pseudo element.

.site-main-banner {
    position: relative;
    overflow: hidden;
}

.site-main-banner:after {
    content: “”;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-image: url(...);
    // put your animation here
}

I can’t really send you a fully working example as I’m currently on my phone in the subway but I hope you get the idea.

Upvotes: 0

Related Questions