CODEWITHSUNDEEP
javascriptjqueryhtmlparallax
userdead
userdead

Reputation: 78

Jquery fade in and out a div in parallax animation

I have a home page which just shows some logo and etxt and a div on click it scroll to another page.

Now I have done the animation part of scrolling. What I need is when someone click on FIND YOUR HEART the nav div must come as a fade in effect. I tried window method and take the scroll position, but nothing works.

Upvotes: 0

Views: 913

Answers (2)

Jan Hommes
Jan Hommes

Reputation: 5152

if you want to scroll to the navigation-div use this code:

$("#findYourHeartDiv").click(function() {
  $('html, body').animate({
    scrollTop: ($("#navDiv").offset().top)
  }, 800);
});

If you want to fade it in, hide it first (e.g. with css display:none;), then use this code:

$("#findYourHeartDiv").click(function() {
  $("#navDiv").fadeIn(); 
});

You can combine both to scroll to it and fade it in:

$("#findYourHeartDiv").click(function() {
    $('html, body').animate({
      scrollTop: ($("#navDiv").offset().top)
    }, 
    500,
    function() {
      //animation complete function
      $("#navDiv").slideDown();
    });
});

To fade in if the user scrolls to a position:

$(window).bind("scroll", function () {
  var wintop = $(window).scrollTop(); // the scroll position
  if(wintop>$("#navDiv").offset().top) {
    $("#navDiv").fadeIn();
  }
  else {
    $("#navDiv").fadeOut();
  }
});

Upvotes: 0

user2485649
user2485649

Reputation: 235

Check this: http://imakewebthings.com/jquery-waypoints/ It can help you.. :)

Upvotes: 1

Related Questions