OnScroll enlarge image

Question

On my app i have 10 images which are all 200px x 200px, when i scroll i want to increase the top image to 400px x 400px

I have this so far to check if i am scrolling onto a div to change the size:

    $.fn.isOnScreen = function(){

    var win = $(window);

    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

};

$(window).scroll(function(){
    if($('#boxorange').isOnScreen() == true){
        $('#boxorange').css({"height":"400px"}); 
      $('#boxorange').css({"width":"400px"}); 
    } else{
            $('#boxorange').css({"height":"200px"}); 
        $('#boxorange').css({"width":"200px"});     }
});

But without creating separate if statements each time, which ever div is on top of the screen i want to increase in size but i am having no luck

Welcome to Stack Overflow. Are you looking for scroll action on the mouse or the movement of the scroll bar? — Twisty, Mar 26 '19 at 19:04
Possible duplicate of https://stackoverflow.com/questions/8189840/get-mouse-wheel-events-in-jquery — Twisty, Mar 28 '19 at 01:50

score 0 · Answer 1 · answered Mar 28 '19 at 02:09

You are referring to the Mouse Wheel. You might consider the following code:

$(window).on("wheel", function(e) {
  if (e.originalEvent.wheelDelta / 120 > 0) {
    console.log('Wheel Up');
  } else {
    console.log('Wheel Down');
  }
});

See More: https://developer.mozilla.org/en-US/docs/Web/Events/wheel

Working Example: http://jsfiddle.net/Twisty/6jexbn07/

Hope this helps.

OnScroll enlarge image

1 Answers1