CODEWITHSUNDEEP
htmlcsscss-animationsresponsive
Patrick
Patrick

Reputation: 820

Make animated background image scale with rest of object?

I have been working on this logo animation. You will notice if you make the window width smaller the logo is responsive. However the animated candy background image is showing on the bottom. I am having a hard time "hiding" it behind the top objects when window is resized. So i am trying to hide it or make it scale/responsive to avoid the issue

enter image description here

Any thoughts?

Here is my code: JS FIDDLE

@keyframes animatedBackground2 {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: 0px 956px;
  }
  /* set this to the height of the image */
}

@-webkit-keyframes animatedBackground2 {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: 0px 956px;
  }
  /* set this to the height of the image */
}

@-ms-keyframes animatedBackground2 {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: 0px 956px;
  }
  /* set this to the height of the image */
}

@-moz-keyframes animatedBackground2 {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: 0px 956px;
  }
  /* set this to the height of the image */
}

@-webkit-keyframes Wobble {
  from {
    -webkit-transform: rotate(6deg);
  }
  to {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(-6deg);
  }
}

.candyWobble {
  -webkit-animation: Wobble ease-in-out 0.7s infinite alternate;
}

.candy-animate-wrap {
  width: 255px;
  position: absolute;
  height: 200px;
  overflow: hidden;
  border-radius: 100%;
  top: 30px;
}

#animate-area2 {
  width: 213px;
  height: 956px;
  display: flex;
  position: absolute;
  background-image: url(https://vapesocietysupplies.com/wp-content/uploads/2017/05/scbg-2.jpg);
  background-position: 0 0;
  background-repeat: repeat-y;
  max-width: 277px;
  animation: animatedBackground2 8s infinite linear;
  -ms-animation: animatedBackground2 8s infinite linear;
  -moz-animation: animatedBackground2 8s infinite linear;
  -webkit-animation: animatedBackground2 8s infinite linear;
}
<div class="candyCo-VSSlogo">
  <img class="candyWobble" src="https://vapesocietysupplies.com/wp-content/uploads/2017/05/CanyCo-textlogo-1.png" style="width:100%;max-width:277px; position:absolute;z-index:2;">
  <img class="cover" src="https://vapesocietysupplies.com/wp-content/uploads/2017/05/CanyCo-VSS-Cover-bg.png" style="width:100%;max-width:277px;position:absolute;z-index:1;">
  <div class="candy-animate-wrap">
    <div id="animate-area2"></div>
  </div>
</div>

Thanks!

Upvotes: 1

Views: 368

Answers (1)

vals
vals

Reputation: 64254

I have used the padding-bottom trick, that helps getting a constant aspect ratio in your element (it relates to the parent width instead to the parent height).

Also, several others styles needed to be changed ... too many to make a detailed list.

See the result:

@keyframes animatedBackground2 {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: 0px 956px;
  }
}

@-keyframes Wobble {
  from {
    transform: rotate(6deg);
  }
  to {
    transform: rotate(-6deg);
  }
}

.candy {
  width: 100%;
  max-width: 277px;
  position: relative;
}

.candyWobble {
  animation: Wobble ease-in-out 0.7s infinite alternate;
  width: 100%;
  max-width: 277px;
  position: absolute;
  z-index: 2;
}

.candy-animate-wrap {
  width: 255px;
  position: absolute;
  height: 0px;
  overflow: hidden;
  border-radius: 100%;
  top: 0px;
  padding-bottom: 99%;
  max-width: 100%;
}

#animate-area2 {
  top: 0px;
}

#animate-area2 {
  width: 213px;
  height: 956px;
  display: flex;
  position: absolute;
  background-image: url(https://vapesocietysupplies.com/wp-content/uploads/2017/05/scbg-2.jpg);
  background-position: 0 0;
  background-repeat: repeat-y;
  max-width: 277px;
  animation: animatedBackground2 8s infinite linear;
}
<div class="candy">
  <img class="candyWobble" src="https://vapesocietysupplies.com/wp-content/uploads/2017/05/CanyCo-textlogo-1.png">
  <img class="cover" src="https://vapesocietysupplies.com/wp-content/uploads/2017/05/CanyCo-VSS-Cover-bg.png" style="width:100%;max-width:277px;position:absolute;z-index:1;">
  <div class="candy-animate-wrap">
    <div id="animate-area2"></div>
  </div>
</div>

Upvotes: 1

Related Questions