Designed an animation to reveal a div container box, but it did not meet the desired criteria.
Expectations:
- Initiate animation horizontally from 0% to 100%.
- Then expand vertically to 100% height.
The horizontal animation from 0% to 100% is not visible to users and the speed of the animation cannot be controlled effectively with this method. A slow and seamless animation is needed for better user experience.
Thank you!
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;
}