10 эффектов при загрузке страницы, привлекающих внимание посетителей

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

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

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

1. Индикатор загрузки с улиткой (Helixbar)

Вы когда-нибудь видели, чтобы улитка передвигалась реально быстро? Возможно видели, если смотрели мультфильм Турбо.

Но если нет, и хотите увидеть нечто подобное, воспользуйтесь вот таким индикатором загрузки с улиткой (или Helixbar, как его назвал разработчик). Это супер креативный способ скрасить время ожидания загрузки вашего веб-сайта.

2. Детализированный вертикальный индикатор прогресса

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

Использование крайне остроумных высказываний по-настоящему поднимет температуру на вашем сайте. Я только надеюсь, что индикатор достигнет точки кипения и загрузки вашего сайта до того, как это сделает самообладание посетителя.

3. По кусочкам: плагин Pieces

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

4. Движок CutJs

Использование движка CutJs позволит добавить немного игривости в дизайн. С цветовой схемой как у Google, ваш экран загрузки будет, безусловно, забавным, с «запашком» дизайна Google.

5. Анимации загрузки от Йоакима Нильссона

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

6. Шестерни

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

7. Все до последней капли

[IMG = http://www.1stwebdesigner.com/wp-content/uploads/2014/02/ever-last-drop.png]

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

8. Анимация загрузки на основе CSS3

Вы можете подумать, что это просто какой-то неправильный плагиат иконки загрузки Windows 8. Но нет, вы ошибаетесь. Это другой взгляд на эту анимацию.

9. Flickr

Влюблены в эффект загрузки на сайте Flickr.com? Вот точная копия этого эффекта! Включите его в ваш сайт и получите flickr-подобное настроение!

10. Рикошет загрузки

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

Заключение

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

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