Псоледовательный вывод элементов на CSS и jQuery

Парадокс, но вывод элементов с задержкой последовательно один за другим ускоряет процесс восприятия информации: у посетителя складывается ощущение интерактивного плавного взаимодействия с содержанием страницы.

 

Разметка

В нашем уроке мы разберем два варианта - на основе CSS и jQuery. Для обоих вариантов используется одинаковая структура разметки:

		<div id=fds>
			<img src=assets/img/tuwanek-sunshine-coast-bc.jpg alt="Tuwanek Sunshine Coast, British Columbia">
			<img src=assets/img/hornby-island-shoreline.jpg alt="Hornby Island shoreline, British Columbia">
			<img src=assets/img/mt-baker-washington.jpg alt="Mt Baker, Washington">
			<img src=assets/img/nelson-bridge.jpg alt="Nelson Bridge, Vancouver">
			<img src=assets/img/golden-skies-victoria.jpg alt="Golden skies, Victoria">
			<img src=assets/img/first-beach-vancouver.jpg alt="First beach, Vancouver">
		</div>

Основные свойства CSS очень просты:

	#fds{
		font-size:0;
	}
	#fds img{
		width:33.33%;
		opacity:0;
	}

(Мы используем font-size: 0 для бесшовного слияния картинок внутри элемента  div).

 

Используем CSS3

Последовательное проявление может быть создано с помощью покадровой анимации и свойства CSS animation-delay. Обычно анимации вызываются с последовательно увеличивающейся задержкой для каждого следующего элемента. (В коде опущены префиксы браузеров для наглядности).

    @keyframes fdsseq {  100% { opacity: 1; } }
     
    #fds img { animation: fdsseq .5s forwards; } 
    #fds img:nth-child(1) { animation-delay: .5s; }
    #fds img:nth-child(2) { animation-delay: 1s; }
    #fds img:nth-child(3) { animation-delay: 1.5s; }
    … 

Такое решение работает, но оно имеет несколько недостатков.

 

Недостатки решения на CSS

При использовании решения на чистом CSS трудно будет изменить время анимации: любые перемены значения delay потребуют пересчета для всех последующих элементов. Также CSS3 плохо масштабируется: чем больше изображений, тем больше строк кода потребуется добавить.

Нет возможности определить инкремент для значения задержки в CSS  Также все будет очень сильно зависеть от процесса загрузки элементов: полоса пропускания, порядок загрузки и скорость соединения могут существенно испортить впечатление.

В настоящее время лучшего результата можно добиться с помощью JavaScript (в демонстрации мы используем jQuery).

 

Решение на основе jQuery

Удаляем код CSS3 и пишем простой скрипт:

    $(function() {
          $('#fds img').each(function(i) {
        $(this).delay((i++) * 500).fadeTo(1000, 1); })
    }); 

JavaScript последовательно перебирает изображения в элементе div и устанавливает для каждого полную видимость в течении 1 секунды (1000 миллисекунд). Задержка для каждого элемента определяется порядком следования в элементе div умноженного на константу 500 миллисекунд. Первый элемент будет выводиться с задержкой в пол-секунды  (1 × 500 миллисекунд), следующий - с задержкой в 1 секунду (2 × 500 миллисекунд), и так далее

 

Делаем анимацию приглашения

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


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/tfJxxv8B1YQ/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Псоледовательный вывод элементов на CSS и jQuery | | 2013-02-13 00:09:49 | | Статьи Web-мастеру | | Парадокс, но вывод элементов с задержкой последовательно один за другим ускоряет процесс восприятия информации: у посетителя складывается ощущение интерактивного плавного взаимодействия с содержанием | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: