Прежде всего, я хотел бы сослаться на этот сайт: http://annasafroncik.it/ Мне нравится, как появляются анимации. Трудно ли создать подобную функцию в jquery? Существуют ли какие-либо плагины для создания такого эффекта?
Надеюсь, кто-то поможет мне.
Прежде всего, я хотел бы сослаться на этот сайт: http://annasafroncik.it/ Мне нравится, как появляются анимации. Трудно ли создать подобную функцию в jquery? Существуют ли какие-либо плагины для создания такого эффекта?
Надеюсь, кто-то поможет мне.
В принципе, вы хотите добавить класс "hideme" для каждого элемента, который вы хотите скрыть (тогда вы установите для этого класса значение "opacity: 0";
Затем, используя jQuery, вы устанавливаете событие $(window).scroll(), чтобы проверить местоположение нижней части каждого элемента "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/
Плагины? Возможно, но вы могли бы создать любые комбинации анимаций, которые вы могли бы себе представить с помощью jQuery. Если у вас есть твердая хватка на селекторах и CSS, небо предел! Я предлагаю начать с jQuery website и проверить несколько примеров.
Чтобы помочь получить мяч, и, возможно, вы получите некоторые идеи, если вы уже знакомы с 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>
Надеюсь, я не испортил свой синтаксис!
Попробуйте это. Это сработало для меня
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 400) {
$("body").addClass("allowshow");
} else {
$("body").removeClass("allowshow");
}
});
а css для этого -
.showmydiv{display:block}