CODEWITHSUNDEEP
jquerycss
Prashant Tapase
Prashant Tapase

Reputation: 2147

How to bind image width to scroll for certain height?

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

Answers (3)

Alexey
Alexey

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

Michelangelo
Michelangelo

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

Anusha kurra
Anusha kurra

Reputation: 480

If you want to reduce the size then there is scroll function. check this

http://jsfiddle.net/LLbAu/

Upvotes: 1

Related Questions