Как привлечь внимание пользователя к важной информации на вашем сайте? Как быть уверенным в том, что при прокрутке страницы сайта пользователь не упустит главного из виду? Ответ прост: сделайте появление блока заметным – добавьте CSS3 эффект.
В этом посте мы разберем применение библиотеки CSS3 эффектов. Будем добавлять к текстовым блокам, к которым пользователь доскролил мышкой, эффекты появления.
 

1. Скачиваем библиотеку

На этом сайте вы можете посмотреть все имеющиеся CSS3 эффекты в действии и скачать css файл с их свойствами к себе в проект.

 

добавляем к себе в проект:

	<link rel="stylesheet" type="text/css" href="css/animate.css">

2. Разбираем HTML структуру демо-примера

В нашем примере, на сайте будет основное меню, элементы которого будут ссылаться на текстовые блоки текущей страницы.
Чтобы при нажатии по ссылке мы переходили к определенному блоку, абзацу, необходимо в атрибут href прописать имя идентификатора того блока на который мы хотим сослаться, например:
у нас есть блока <div id=”main”>…</div>, внутренняя ссылка на этот блок будет иметь следующий вид: <a href=”#main”></a>
Таким образом все ссылки ссылаются на ID блоков.
Вот и сам код меню из демо-примера:

<nav id="menu">
	<ul>
		<li><a href="#ex1">ZoomIn</a></li>
		<li><a href="#ex2">BounceIn ex2</a></li>
		<li><a href="#ex3">BounceIn ex3</a></li>
		<li><a href="#ex4">ZoomIn</a></li>
	</ul>
</nav>

Каждая ссылка ссылается на соответствующий блок:

<div id="content">
	<section id="ex1">
		<article class="post">
			Текст статьи
		</article>
		<article class="post">
			Текст статьи
		</article>
		<article class="post last">
			Текст статьи
		</article>
		<article class="post">
			Текст статьи
		</article>
		<article class="post">
			Текст статьи
		</article>
		<article class="post last">
			Текст статьи
		</article>
		<article class="post">
			Текст статьи
		</article>
		<article class="post">
			Текст статьи
		</article>
		<article class="post last">
			Текст статьи
		</article>
	</section>
	<div class="separator"></div>
	<section id="ex2">
		<article class="post">
			Текст статьи
		</article>
		<article class="post last">
			Текст статьи
		</article>
	</section>
	<div class="separator"></div>
	<section id="ex3">
		<article class="post">
			Текст статьи
		</article>
		<article class="post last">
			Текст статьи
		</article>
	</section>
	<div class="separator"></div>
	<section id="ex4">
		<article class="post">
			Текст статьи
		</article>
		<article class="post">
			Текст статьи
		</article>
		<article class="post last">
			Текст статьи
		</article>
	</section>
</div>

В демо-примере у нас четыре блока со статьями <article class=”post”>Текст статьи</article>, первый отображает эффект при загрузке страницы, второй и третий при прокрутке выводит статьи слева и справа (т.е. эффект накладывается отдельно для каждой из двух статей), а четвертый блок отображает один эффект появления для всех статей, при прокрутке до него пользователем.

И как вы понимаете теперь осталось поговорить о логики скрипта, каким образом добавлять нужные классы эффектов.

3. Разбираем jQuery подход к добавлению эффектов

Начнем с первого блока в котором 9 статей. Ему мы добавим класс zoomIn эффекта сразу после загрузки.

$("#ex1 .post").addClass('animated zoomIn');

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

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

Таким образом нам нужно знать, что пользователю видна верхняя часть блока со статьями. Это произойдет, когда расстояние от начала страницы до верхней точки блока со статьями, будет равно или меньше чем расстояние проскроленное пользователем + высота окна браузера. Подробнее на картинке 🙂

Вот та часть кода которая отвечает за отслеживание достигли или нет мы верхнего края блока:

   
var h = $(window).height();
$(window).scroll(function(){
	if ( ($(this).scrollTop()+h) >= $("#ex2").offset().top) {...}
}

После того как мы достигли нашего блока с двумя статьями каждой нужно дать свой класс, делаем это следующим образом:

   
if ( ($(this).scrollTop()+h) >= $("#ex2").offset().top) {
	$("#ex2 .post").css({visibility:"visible"});
	$("#ex2 .post").eq(0).addClass('animated bounceInLeft');
	$("#ex2 .post").eq(1).addClass('animated bounceInRight');
} 

С помощью .eq(i) мы выбираем элемент выборки, где i – номер элемента в выборке jQuery и нумерация начинается с нуля.

Для того чтобы все элементы возвращались в исходную позицию после эффектного появления, я добавил условие, если пользователь вернулся в начало страницы, то все блоки с текстами (которые уже не видны) спрятать и удалить у них классы с эффектами, вот такой код получился:

  
if ( $(this).scrollTop() == 0 ) {
	$("#ex2 .post, #ex3 .post, #ex4 .post").each(function(){
		if ( $(this).hasClass('last') ) {
			$(this).removeClass().addClass('post last');
		} else {
			$(this).removeClass().addClass('post');
		}
		$(this).css({visibility:"hidden"});
	});
}

Вот весь скрипт который обрабатывает демо-пример:

  
$(document).ready(function(){

	$("#ex1 .post").addClass('animated zoomIn');
	
	var h = $(window).height();
	$(window).scroll(function(){
		if ( ($(this).scrollTop()+h) >= $("#ex2").offset().top) {
			$("#ex2 .post").css({visibility:"visible"});
			$("#ex2 .post").eq(0).addClass('animated bounceInLeft');
			$("#ex2 .post").eq(1).addClass('animated bounceInRight');
		} 
		if ( ($(this).scrollTop()+h) >= $("#ex3").offset().top) {
			$("#ex3 .post").css({visibility:"visible"});
			$("#ex3 .post").eq(0).addClass('animated bounceInLeft');
			$("#ex3 .post").eq(1).addClass('animated bounceInRight');
		} 
		if ( ($(this).scrollTop()+h) >= $("#ex4").offset().top) {
			$("#ex4 .post").css({visibility:"visible"});
			$("#ex4 .post").addClass('animated zoomIn');
		} 
		
		if ( $(this).scrollTop() == 0 ) {
			$("#ex2 .post, #ex3 .post, #ex4 .post").each(function(){
				if ( $(this).hasClass('last') ) {
					$(this).removeClass().addClass('post last');
				} else {
					$(this).removeClass().addClass('post');
				}
				$(this).css({visibility:"hidden"});
			});
		}
	});
});

 

Напомню, что подходы к реализации скрипта могут быть разными, все зависит от ситуации и мое решение – это всего лишь пример.

Если вам понадобится помощь в реализации эффектов, пишите комментарии к статье – помогу 😉

(14 голосов. Рейтинг: 5,00 из 5)
Загрузка...

58 thoughts on “Появление элементов сайта с CSS3 эффектами

      1. Код скрипта сохраните в отдельный файл, например script.js.
        Потом добавьте его в head, сразу после подключения библиотеки jquery
        вот так:
        <script type="text/javascript" src="script.js"></script>

        можете посмотреть код демо страницы, вбив эту строку
        view-source:http://demo.webcomplex.com.ua/17-09-2014/01/
        в адресной строке гугл хрома

        спрашивайте, если остались вопросы 🙂

          1. Хорошо, буду ждать 🙂
            Если возникнут интересные идеи или вопросы – пишите, буду отвечать новыми постами 😉

    1. Не думаю что это хорошая идея.
      Adsense не любит когда их код как-то по особому оформляют.
      Еще воспримут это как призыв пользователей ))

      1. Видел подобное на Корреспонденте. правда не Эдсенс, а МедиаТаргет. Выглядело эффектно. Еще тогда думал что-то подобное организовать =)

  1. После долгих танцев с бубном вокруг главной страницы решил, что я безнадежен…потом подумал “А что если попробовать на других ради эксперемента…” и Ура! получилось!
    Теперь никак не могу сообразить, что может мешать выполнению этой анимации?

    1. Тут нужно смотреть саму страницу, возможно на ней есть ошибка в другом скрипте и до анимации дело не доходит ))

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

      Или кидайте ссылку в студию я посмотрю 😉

      1. Пока в публикации сайт со старым содержанием… До конца рабочего дня 5 минут) завтра исправлю косяки и выложу обновленную версию. Обязательно скину ссылку.

          1. Рад, что у вас все заработало 🙂
            Если остались вопросы по этой теме или другой, пишите постараюсь ответить 😉

    1. Классно, получилось!
      мне понравилось как вы применили эффекты CSS анимации на своем сайте 🙂

  2. Автору спасибо!
    Но оказывается все мжно сделать проще, с помощью wow.min.js

    smartlanding.biz/animaciya-pri-prokrutke-stranicy.html

    1. Спасибо и вам за интересный скрипт 🙂
      Сейчас нет времени в ней разбираться,
      подскажите как в ней сделать анимацию не на прокрутку
      а на hover или click метод?

      Буду благодарен если дадите ответ!

      1. #sample {
        width:200px;
        height:200px;
        background: #aaa;
        }

        setInterval(function(){
        var $sample = $(“#sample”);
        if($sample.is(“:hover”)) {
        $(“#sample”).addClass(‘animated bounce’);
        }
        else {
        $sample.css(“background”, “”);
        }
        }, 200);

        1. Съело код)
          ====HTML=====
          div id=”sample”
          =====CSS=====
          #sample {
          width:200px;
          height:200px;
          background: #aaa;
          ======JS======
          setInterval(function(){
          var $sample = $(“#sample”);
          if($sample.is(“:hover”)) {
          $(“#sample”).addClass(‘animated bounce’);
          }
          }, 200);
          ==============

          1. Скажите пожалуйста, как мне сделать так, чтобы блоки появлялись не сразу, а как только блок мой покажется наполовину?

          2. Просто добавьте в условие высоту половины блока:

            if ( ($(this).scrollTop()+h) >= ($("#ex1").offset().top + $("#ex1").height()/2) )
            

            Лучше вынести выборку блока “#ex1” в переменную, получится что-то такое:

            var $ex1 = $('#ex1');
            if ( ($(this).scrollTop()+h) >= ($ex1.offset().top + $ex1.height()/2) )
            
          3. Спасибо, сработало, но беда появилась такая : когда прокрутываешь до этого момента блок уже виден, а когда опускаешься чуть ниже происходит анимация.

          4. Т.е. блок виден полностью или на половину?

    1. Доброе утро, Сергей!
      Эти эффекты можно подключить к любому движку.
      Просто, добавьте скачанный файл в область head вашего шаблона джумлы и пропишите скрипты для анимации в файле скриптов вашего шаблона.
      Если вы не знаете как это сделать, то напишите какая версия джумлы стоит у вас и какой шаблон, если у меня будет время постараюсь написать об этом на следующей неделе.

  3. Доброй ночи.А вот у меня все работает, но в фаербаге выдает ошибку
    Uncaught TypeError: Cannot read property ‘top’ of undefined script.js:18
    (anonymous function)jquery.min.js:3
    b.event.dispatchjquery.min.js:3
    b.event.add.v.handle

    и когда скроллю вверх-вниз – ошибка повторяется(((

    что делать? хелп

  4. Здравствуйте мой icq 642855618 мне нужно установить чтоб текст как в 2 и 3 блоке виежали справа и слева на сайт а сам сайт на joomla это реально я просто в этом не оч……. помогите !

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

  5. Здравствуйте! Подскажите как прописать скрипт, чтобы плавно по очереди появлялись с 1 эффектом? (если пропишу .other_class li) оно всем li выдает 1 и тот же bounce без задержки. Как сделать по очереди?

  6. Подскажите, как избавиться от глюка в Хроме. При эффекте fadeInRight текст остается на месте а на него наезжает эффект.Получается некрасивое двоение. В Мозиле все работает как положено.
    Спасибо.

    1. Здравствуйте, Иван! мне нужен сам код, так трудно что-то подсказать. Загрузите пример на jsfiddle.net

  7. Скажите пожалуйста,а как сделать так чтоб блоки виежали с задержкой,есть 6 блоков по два на рядок?Зарание спасибо!

  8. Здравствуй. Во-первых, огромное спасибо за скрипт.
    Во-вторых, помоги пожалуйста немного править скрипт.

    Итак, вот HTML код.

    Блок 1
    Блок 2
    Блок 3

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

    1. Здравствуйте, киньте ваш пример на jsfiddle.net, тут главное скрипт ваш посмотреть 🙂

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

    С наилучшими пожеланиями!

    1. Ой, не заметил ваш комментарий 🙁
      Для того чтобы показ зависел от нижней границы нужно добавлять значение высоты блока $el.height()
      Например: $(“#ex2”).offset().top + $(“#ex2”).height()

      Только какой смысл анимировать блок который уже прокрутили 🙂

  10. Здравствуйте. Хотел бы использовать эти анимации в мобильной версии сайта и все получилось, но только сразу в момент загрузки страници блоки появляются по умолчанию, а потом через пол секунды или быстрей анимация и это немного раздражает. Файлы сss и js, которые отвечают за анимацию поставил в самый вверх.

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

    Есть способ это исправить? Из-за чего это? Если намертво закэшировать скрипт это решит проблему? Спасибо.

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

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

      if ( $(this).scrollTop() == 0 ) {
      $("#ex2 .post, #ex3 .post, #ex4 .post").each(function(){
      if ( $(this).hasClass('last') ) {
      $(this).removeClass().addClass('post last');
      } else {
      $(this).removeClass().addClass('post');
      }
      $(this).css({visibility:"hidden"});
      });
      }

  12. Здравствуйте!Хочу сделать такой эффект: При появлении на экране блока с ним происходит анимация. То есть прокручиваю я вниз и появляется блок анимированный. (начинается анимация как только блок находится в видимости) Во. Возможно такое на css?

    1. Здравствуйте, на чистом CSS такое реализовать не получится, но вы можете сделать так как описано у меня в этой статье. Успехов! 🙂

  13. Здравствуйте, у меня все отлично работает, но вот при повторной прокрутке страницы (без ее обновления), анимация снова срабатывает, но блоки выплывают без стилей, такое ощущение, что файл со стилями отсутствует. Посмотрите плиз, вот адресс test2.ukreal.info

    1. Здравствуйте, посмотрел 🙂
      У Вас при обратной прокрутки удаляется класс panel-default и остается только panel, смотрите в сторону своего скрипта, а со стилями все в порядке 😉

      1. Спасибо, загадка конечно, что может удалять этот класс. К панелям никакие скрипты не прикрученны, конфликт какой то происходит, буду кумекать, спасибо!

      2. Докумекал) Удалялся класс panel-default в этой части кода, дописал его и все норм)
        if ( $(this).scrollTop() == 0 ) {

        $(“#block-content2, #block-content3″).each(function(){

        if ( $(this).hasClass(‘last’) ) {

        $(this).removeClass().addClass(‘panel panel-default last’);
        } else {

        $(this).removeClass().addClass(‘panel panel-default’);
        }

        $(this).css({visibility:”hidden”});
        });

  14. Спасибо большое и Вам за такой подробный и полезный урок! Имея нулевые знания в jQuery, получилось без проблем подключить скрипт, уря)

  15. Все работает) супер) только один вопрос: как сделать чтобы не к началу дива а началу+50px привязывать?

    1. Все очень просто, Вам нужно добавить эту величину в условие проверки:

      if ( ($(this).scrollTop()+h) >= ($(‘#ex2’).offset().top + 50)) {…}

  16. Помогите сделать прокрутку в другую сторону, что бы если крутить вверх элементы пропадали!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *