Reputation: 2147
I am just trying to attach image to scroll so that when user scroll down image size/width will reduce smoothly with scroll for certain height or vice verse.
Smoothness like this link
I just want reduce size of image from 0px to 700px with smooth animation.
I used waypoints, bind function, addclass- remove class, transition (css) and much more but no success.
My code for waypoints
Jquery code
$('#slide-1-base').waypoint( // create a waypoint
function(direction) {
if (direction === 'down') {
$('.logo img').stop().animate({ "width" : "80%"}, 1000);
}
else {
$('.logo img').stop().animate({ "width" : "100%"}, 500);
}
});
HTML code
<div class="logo">
<a href="#slide-1">
<img src="assets/icon/logo.png"/>
</a>
</div>
<section id="slide-1" ></section>
Upvotes: 1
Views: 1283
Reputation: 3637
Judging from from you comment reply, this is what you need -
$( window ).scroll(function() {
var scrollAmount = $(document).scrollTop(); // This returns how far away you are from top of your page.
var picWidth = 100; //Insert any value here for your picture size
//$('.logo img').css('width', picWidth - (scrollAmount/100));
$('.logo img').animate({width:(picWidth - (scrollAmount/100))}, 100);
});
This is a rough representation. You need to tchange the logic and the math of the function, but this will resize your image based on how close you are to the top of your page.
Upvotes: 1
Reputation: 5958
Looks like you need something like this: fiddle. I think (based on what I see from your comments and previous answers) you want to check the height of the window the user is using and depending on what that returns you want to reduce the width of your specific element..
$( window ).scroll(function() {
if($(window).innerHeight() > 700){
$('.box').animate({'width': '50'});
}else{
$('.box').animate({'width': '100'});
}
});
Upvotes: 0
Reputation: 480
If you want to reduce the size then there is scroll function. check this
Upvotes: 1