CODEWITHSUNDEEP
jquerycss
TDG
TDG

Reputation: 1302

Jquery/CSS - Animation to open div box container smooth

Created an animation to open div container box. But, it was not up to the requirements.

Expected.

  1. Start animation from 0 to 100% horizontal.
  2. then open vertical to 100% height.

Somehow animation from 0 to 100% in horizontal is not visible to user and cant able to control the animation speed with this approach. Required, slow and smooth animation for user to view.

Thanks

HTML:

<div class="inactive" id="special-deals-animation">
  <div id="animation-container">
    <h3>Save up to 20% when you book in advance</h3>
    <p>Every savings of up to 20%</p>
    <a class="button button-primary text-center more-details" href="serviced-suites.html">More Details</a>
  </div>
</div>

JS:

$(window).scroll(function () {
    var scroll_pos = $(window).scrollTop() + $(window).height();
    var element_pos = component.offset().top + component.height();
    if (scroll_pos > element_pos) {
      component.removeClass('inactive');
      component.addClass('active');
      $('#animation-container').delay(600).fadeIn('fast');
    }
});

CSS:

#special-deals-animation {
  position: relative;
  width: 100%;
  background-color: #fff;
  height:auto;
  overflow :hidden;
  margin: 20px 0;
}

#animation-container {
  width: 50%;
  margin: 2% 25%;
  display: none;
  text-align: center;
}

#special-deals-animation.active {
  border: 1px solid #f00;
  width: 100%;
  transition: left 0.15s ease 0.15s, height 0.5s ease 0.5s;
  animation-iteration-count: 1;
}

#special-deals-animation.inactive {
  width: 0;
  height: 0;
  transition: left 0.15s ease 0.5s, height 0.5s ease;
  animation-iteration-count: 1;
}

Upvotes: 0

Views: 653

Answers (1)

doğukan
doğukan

Reputation: 27431

You can achieve as very easy like in this example:

html, body {
  height:100%;
  margin:0;
}

/* html and body should has "height:100%" also */

div {
  height:100px;
  width: 100px;
  background: pink;
  animation:toright 2s linear forwards, tobottom 2s 2s linear forwards;
}

/* 2nd 2s is animation-delay for 1st animation's animation-duration */

@keyframes toright {
  to {
    width:100%;
  }
}

@keyframes tobottom {
  to {
    height:100%;
  }
}
<div></div>

Upvotes: 1

Related Questions