Показать Div при прокрутке позиции

Question

Прежде всего, я хотел бы обратиться к этому сайту: http://annasafroncik.it/ Мне нравится, как появляются анимации. Трудно создать подобную функцию в jquery? Есть ли плагины для создания такого эффекта?

Надеюсь, что кто-то поможет мне.

Answer 1

В принципе, вы хотите добавить класс «hideme» для каждого элемента, который вы хотите скрытые (то вы установили, что класс «Непрозрачность: 0»;

Затем с помощью JQuery вы установите $ (окно). прокрутки() событие, чтобы проверить расположение в нижней части каждого элемента «hideme» против нижнего края вашего видимого окна

Вот мясо этого ...

/* Every time the window is scrolled ... */ 
$(window).scroll(function(){ 

    /* Check the location of each desired element */ 
    $('.hideme').each(function(i){ 

     var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
     var bottom_of_window = $(window).scrollTop() + $(window).height(); 

     /* If the object is completely visible in the window, fade it in */ 
     if(bottom_of_window > bottom_of_object){ 

      $(this).animate({'opacity':'1'},500); 

     } 

    }); 

}); 

Вот полный jsfiddle.: http://jsfiddle.net/tcloninger/e5qaD/

Answer 2

Плагины? Возможно, но вы могли бы создать любые комбинации анимаций, которые вы могли бы себе представить с помощью jQuery. Если у вас есть твердая хватка на селекторах и CSS, предел неба! Я предлагаю начать с jQuery website и проверить some examples.

Чтобы помочь получить мяч, и, возможно, вы получите некоторые идеи, если вы уже знакомы с jQuery, вы можете попробовать следующее ... выяснить, как далеко вниз по вашей странице div, слушать события прокрутки, и когда фокус div (т. е. страница была прокручена мимо позиции div, которую вы разработали), запустите анимацию. Что-то вроде:

<div id="my_div">Some content</div> 

<script type="text/javascript"> 

    $(document).ready(function() { 

     var my_div = $("#my_div"); 
     var div_top = my_div.offset().top; 

     $(document).scroll(function() { 
      if (div_top <= $(document).scrollTop()) { 
       // do some cool animations... 
      } 
     }); 

    }); 

</script> 

Надеюсь, я не испортил свой синтаксис!

Answer 3

Попробуйте это. Он работал для меня

$(document).scroll(function() { 
    var y = $(this).scrollTop(); 
    if (y > 400) { 
    $("body").addClass("allowshow"); 
    } else { 
    $("body").removeClass("allowshow"); 
    } 
}); 

и CSS для этого

.showmydiv{display:block}