CODEWITHSUNDEEP
jqueryscrollscale
tibewww
tibewww

Reputation: 603

scale image when scroll ( Keeping good proportion)

I'm trying to scale an image when the user scroll down.

It works fine, but the problem I'm having is that it doesn't keep the good proportion. What i mean is my image is 212 px width by 800px height. In scale is on scroll like it was a square image .. .

Here is my Jsfiddle which will make more sens i suppose . ..

Any help would be really amazing :)

http://jsfiddle.net/mw73enz8/6/

<img src="http://i57.tinypic.com/2d9v77d.png"">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

css:

img {
    position: fixed;
    left: 0;
    top: 0;
    width: 0px;
    height: 0px;
}

$(window).on("scroll", function() {
    var s = Math.min(400, $(document).scrollTop()) + 100;
    $("img").width(s).height(s);
});

Upvotes: 0

Views: 4337

Answers (1)

user1399844
user1399844

Reputation: 

$(function() {
    var width = $('img').width();
    var height = $('img').height();

    //set width,height to 0 now in order to get real width and height
    $('img').width(0).height(0);

    var ratio = width/height;


$(window).on("scroll", function() {

    console.log(ratio);
    var w = $(document).scrollTop();    
        $("img").width(w*ratio).height(w)
});

});

Upvotes: 1

Related Questions