CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Courtney Ball
Courtney Ball

Reputation: 491

jQuery zoom out of background image but keep height

I'm trying to zoom out of a background image, however with a smaller screen resolution the final image after the zoom doesn't fill the container. Is there a way to zoom out of the image but still maintain the height of the wrapper.

$('#banner').css("background-size", "200%");
$('#banner').delay(500).animate({
  backgroundSize: '100%',
  height: '500px',
}, 7500);


#banner{
    background-image: url('../imgs/banner.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 500px;
    border-bottom: 3px solid #D33F44;
    padding: 150px 0px;
}

JSFiddle here

Notice the white space under the background image after the animation has finished?

Upvotes: 2

Views: 1064

Answers (1)

Edmundo Santos
Edmundo Santos

Reputation: 613

You can use a combination of pseudo elements and keyframe animations, I don't think jQuery is necessary here.

.banner {
  position: relative;
  overflow: hidden; /* prevent “spillage” of image */
  width: 100%;
  min-height: 300px;
  padding: 150px 0;
  color: #fff;
  border-bottom: 3px solid #D33F44;
}

/* Image align to the center, behind the banner */

.banner:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('http://i.imgur.com/75olaoq.jpg') no-repeat center;
  background-size: cover;
  transform-origin: center; /* scale from the center */
  transform: scale(2);
  z-index: -1;
  pointer-events: none;
  animation: zoom-out 7.5s both;
}

/* Simple keyframe animation to zoom out the image */

@keyframes zoom-out {
  0%   { transform: scale(2); }
  100% { transform: scale(1.2); }
}
<div class="banner">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at imperdiet purus. Aenean vitae urna tortor. Vestibulum maximus ut enim vel ultrices.</p>
</div>

I recommend reading Using CSS animations on MDN, you will find lots of cool info on how to animate with CSS.

You can also see the demo on JSFiddle: https://jsfiddle.net/r52rwvmk/6/

Upvotes: 2

Related Questions