Andrei P
Andrei P

Reputation: 309

Slide div from bottom on scroll

I'm trying to obtain this effect (you need to scroll down a bit to see the divs sliding in)

I'm not that good with JS but I managed to make the divs fade in from 0 opacity to full opacity using this code:

  tiles = $(".recipe").fadeTo(0, 0);
  $(window).scroll(function(d,h) {
      tiles.each(function(i) {
          a = $(this).offset().top + $(this).height();
          b = $(window).scrollTop() + $(window).height();
          if (a < b) $(this).fadeTo(500,1);
      });
  });

Can anyone help me optain the desired effect? I need the divs to slide up from 0 opacity to 100 percent opaque, from bottom to top, when scrolling.

Hope this makes sense, thanks.

Upvotes: 0

Views: 2328

Answers (2)

PSanetra
PSanetra

Reputation: 524

I think this is a possible solution:

var scrollCb = function () {
    var tiles = $(".tile:not(.animated)");
    var $window = $(window);
    var b = $window.scrollTop() + $window.height();

    tiles.each(function (i) {
        var $this = $(this);
        var a = $this.offset().top + $this.height();

        if (a < b) {
            $this.addClass("animated").addClass("fadeInUp");
        }
    });
};

$(scrollCb);

$(window).scroll(scrollCb);

http://jsfiddle.net/74u765q2/4/

animate.css realizes the animation part.

Upvotes: 2

Diego Unanue
Diego Unanue

Reputation: 6826

That page uses a jquery library called waypoints. You have to download the waypoint library, this library has a lot of functions for scroll event:

for example:

$('#example-offset-percent').waypoint(function() {
    notify('25% from the top');
}, { offset: '25%' });

this code triggers the notify when the object is 25% from the top of the screen.

here is the link to the page:

http://imakewebthings.com/jquery-waypoints/

Upvotes: 0

Related Questions