Using the codepen provided at http://codepen.io/anon/pen/fDqdJ, I am looking to enhance the functionality by implementing a feature where, upon reaching a specific distance from the top of the page, an already animated div undergoes a change in scale while moving.
I am facing challenges with the syntax and incrementing the scale of the animated div during scrolling. I believe that leveraging CSS transform is essential, but I require assistance!
Refer to the JavaScript example below:
var $window = $(window);
var $box = $("#box");
$window.scroll(function() {
var scrollTop = $window.scrollTop();
console.log(scrollTop);
if (scrollTop >= 250 && scrollTop < 400) {
$box.css({top: -250 + scrollTop});
} else if(scrollTop >= 400 && scrollTop < 460) {
$box.css({left: (10+(scrollTop-400)/2)+"%"})
} else if(scrollTop >= 460 && scrollTop < 580) {
$box.css({top: (50+(scrollTop-460)/2)+"%"})
} else if(scrollTop >= 580 && scrollTop < 620) {
$box.css('transform', 'scale(' + whateverTheScaleShouldBe + ')');
}
});
Below is the HTML structure:
<div class="wrapper">
<div class="row" id="row1">
</div>
<div class="row" id="row2">
<div id="box"></div>
</div>
<div class="row" id="row3">
</div>
<div class="row" id="row4">
</div>
</div>
Any assistance would be greatly appreciated! :)
J