Каскадный режим | Линейный режим

***Admin*** · 06.12.2014 19:00:19

В данной теме хотим предложить Вам немного доработанную версию скрипта Последовательного появления элементов. Суть доработки заключается в том, что появление элементов начинается только тогда, когда страничка была прокручена до месторасположения данных элементов.

Другими словами, раньше появление элементов начиналось сразу после загрузки странички, из-за чего при расположении элементов в конце длинной странички данного эффекта попросту не было видно. В данном скрипте данный момент исправлен и появление элементов начинается только тогда, когда страничка прокручена до месторасположения данных элементов.

Но остался небольшой недостаток (лень исправлять Tired

) который заключается в том, что если позиция элементов находится в начале странички, то их появление начнется только после начала прокрутки странички.

Меньше слов, больше кода Big Grin

:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<style type="text/css">

 img.fade { display: none; }

</style>

<div class="fade_block">

 <img class="fade" src="image/img_1.png" alt="">

 <img class="fade" src="image/img_2.png" alt="">

 <img class="fade" src="image/img_3.png" alt="">

 <img class="fade" src="image/img_4.png" alt="">

</div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

window.onscroll = function() {

$('img.fade').each(function(){

if ($(window).scrollTop()>=$('.fade_block').offset().top-$(window).height() && $(window).scrollTop()<=$('.fade_block').offset().top) $('img.fade').fade_img();

});

}

$.fn.fade_img = function (ops) {

var $elem = this;

var res = $.extend({ delay: 600, speed: 600 }, ops);

for (var i=0, pause=0, l=$elem.length; i<l; i++, pause+=res.delay) $elem.eq(i).delay(pause).fadeIn(res.speed);

return $elem;

};

});

</script>

</html>

***Admin*** · 23.02.2015 23:22:21

Для устранения недостатка, связанного с тем, что появление элементов начинается только после прокрутки странички, следует после строк:

Код:

return $elem;

};

добавить всего одну строчку:

Код:

if ($(window).scrollTop()>=$('.fade_block').offset().top-$(window).height() && $(window).scrollTop()<=$('.fade_block').offset().top) $('img.fade').fade_img();

nuska · 24.02.2015 16:21:39

Большое спасибо за скрипт! Не поняла в чем разница после добавления строки, но всё равно использую.

А нельзя в этот скрипт еще и текст вставлять, чтобы он тоже был всплывающим?

***Admin*** · 24.02.2015 20:34:59

Разница в том, что если изображения находятся в верхней части экрана, то сразу после полной загрузки странички они начнут поочередно появляться, а без дополнительной строчки кода пришлось бы немного прокрутить страничку чтобы запустить скрипт появления изображений.

Для того чтобы вместо изображений использовать любые другие элементы, достаточно в CSS коде и в JavaScript коде img.fade заменить на .fade. Блокам с появляющимся текстом следует добавить класс .fade:

Код:

<p class="fade">Появляющийся абзац!!!</p>

<div class="fade">Или обычный блок с текстом.</div>

nuska · 25.02.2015 11:02:35

Обязательно попробую! Спасибо!

steyra · 04.01.2016 14:54:25

Здравствуйте, у меня срабатывает это чудо не совсем корректно. При вставке нескольких div с текстом они показываются по очереди, то есть следующий появляется после исчезновения предыдущего, а ведь должны просто появиться последовательно и никуда не исчезать. В чем может быть причина?

Скрипт брала с сайта.

***Admin*** · 04.01.2016 15:19:54

Здравствуйте.
Возможно, на работу нашего скрипта влияет какой-нибудь другой скрипт, имеющийся у Вас на сайте.

Тестируйте сначала на пустой страничке, а потом уже встраивайте на сайт.

Вот, например, рабочий код, который прекрасно работает в разных браузерах:

Код:

<div class="fade">111</div>

<div class="fade">222</div>

<div class="fade">333</div>

<div class="fade">444</div>

<style type="text/css">

 .fade { display: none; }

</style>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

 $.fn.fade_img = function (ops) {

  var $elem = this;

  var res = $.extend({ delay: 600, speed: 600 }, ops);

  for (var i=0, pause=0, l=$elem.length; i<l; i++, pause+=res.delay) {

   $elem.eq(i).delay(pause).fadeIn(res.speed);

  }

  return $elem;

 };

 $('.fade').fade_img();

});

</script>

Каскадный режим \| Линейный режим Доработка скрипта последовательного появления элементов
Автор	Сообщение