10 Ефектів при завантаженні сторінки, що привертають увагу відвідувачів, javascript
Час завантаження сторінки залежить від декількох факторів. Деякі з цих факторів включають в себе швидкість з'єднання з Інтернетом, які використовуються пристрої або елементи, складові веб-сайт, на який заходять користувачі. Якою б не була причина, ваше завдання, як веб-дизайнера, зробити все можливе, щоб утримати увагу відвідувачів.
Як довго користувачі готові чекати, поки сайт завантажиться, перш ніж покинути сторінку, іноді залежить від того, як ви зможете розважити їх під час очікування. Відмінним способом захопити увагу користувачів, поки сторінка вантажиться, є демонстрація привабливою сторінки завантаження.
Нижче наведено кілька ідей ефектів завантаження, які ви можете застосувати, створюючи веб-дизайн.
1. Індикатор завантаження з равликом (Helixbar)
Ви коли-небудь бачили, щоб равлик пересувалася реально швидко? Можливо бачили, якщо дивилися мультфільм Турбо.
Але якщо немає, і хочете побачити щось подібне, скористайтеся ось таким індикатором завантаження з равликом (або Helixbar. Як його назвав розробник). Це супер креативний спосіб скрасити час очікування завантаження вашого веб-сайту.
2. Деталізований вертикальний індикатор прогресу
Особисто я вибрав цей індикатор, тому що в ньому використовуються креативні заголовки для розваги відвідувача, поки він чекає завантаження сайту.
Використання вкрай дотепних висловлювань по-справжньому підніме температуру на вашому сайті. Я тільки сподіваюся, що індикатор досягне точки кипіння і завантаження вашого сайту до того, як це зробить самовладання відвідувача.
3. За шматочках: плагін Pieces
Pieces це дуже креативний, а крім того, ще й простий плагін завантаження, який надає на вибір понад 300 анімацій завантаження. Ви побачите, які чарівні перетворення можуть відбуватися з вашою сторінкою в той час як користувач чекає крутий контент від вас!
4. Двигун CutJs
Використання движка CutJs дозволить додати трохи грайливості в дизайн. З колірною схемою як у Google. ваш екран завантаження буде, безумовно, забавним, з «запашком» дизайну Google.
5. Анімація завантаження від Йоакима Нильссона
Якщо ви шукаєте анімацію завантаження, яка додасть вашому сайту унікальну атмосферу, це те, що вам потрібно. З ефектом завантаження у вигляді рівнів стереозвуку, ваш веб-сайт ніколи не буде схожий на чийсь ще.
6. Шестерні
Шестерні! Ось що демонструє рух! Цей ефект завантаження точно підійде тим, хто розробляє веб-сайти для автомобільних компаній і гоночних ігор.
7. Все до останньої краплі
Це крута анімація, яку ви можете спробувати адаптувати для вашого веб-сайту. Як і в обертовому ефекті завантаження, в даній анімації використовуються прості, і в той же час креативні картинки, які поєднуються з пастельними квітами. Просте обертання все ще може служити дуже цікавим ефектом завантаження.
8. Анімація завантаження на основі CSS3
Ви можете подумати, що це просто якийсь неправильний плагіат іконки завантаження Windows 8. Але ні, ви помиляєтеся. Це інший погляд на цю анімацію.
Закохані в ефект завантаження на сайті Flickr.com. Ось точна копія цього ефекту! Увімкніть його в ваш сайт і отримаєте flickr-подібних настрій!
10. Рикошет завантаження
Це, напевно, найпростіша анімація завантаження з представлених в цьому списку, але в голову навіть не прийде думка виключити її з цієї статті. Невигадлива, як це може здатися, анімація буде ефективна, так як вона простіше і швидше для завантаження, ніж більшість наведених в цій статті анімацій.
висновок
Ви завжди можете перетворити нудний горизонтальний ефект завантаження в щось, що змусить ойкнути ваших відвідувачів. І якщо ви веб-дизайнер, створення такого ефекту в ваших руках!
На це вам доведеться витратити якийсь час. Вам потрібно буде докласти чимало зусиль і терпіння. Але, так само як і анімації завантаження, ви просто повинні працювати і чекати. І, врешті-решт, вийти щось прекрасне.
Переклад статті «10 Page Loading Effects That Catch Your Viewer's Attention» був підготовлений дружною командою проекту Сайтобудування від А до Я.