Blog. Just Blog

Эффект блика в предзагрузке на CSS

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Эффект блика в предзагрузке на CSS
Эффект блика в предзагрузке на CSS

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

Начинаем с таблицы стилей и небольшой теории. Создается контейнер нужного размера, который будет являться плейсхолдером. Внутри него создается блок с градиентным фоном, на который накладывается анимация. Принцип анимации блика заключается в следующем: вложенный блок сперва находится за левой границей контейнера, а затем перемещается за правую границу контейнера. Цвет и ширина блика, а также скорость его перемещения регулируется в CSS.
  1. <style type="text/css">
  2. .blink {
  3.     margin5px;
  4.     background#DDD;
  5.     border-radius10px;
  6.     positionrelative;
  7.     overflowhidden;
  8. }
  9.  
  10. .blink>div {
  11.     height100%;
  12.     width120px;
  13.     positionabsolute;
  14.     top0;
  15.     /* цвета градиента */
  16.     backgroundlinear-gradient(
  17.         90deg,
  18.         rgba(2552552550.01),
  19.         rgba(2552552550.3),
  20.         rgba(2552552550.01)
  21.     );
  22.     /* скорость анимации */
  23.     animationblink 2s infinite linear;
  24.     /* угол наклона блика */
  25.     transformskewX(-5deg);
  26. }
  27.  
  28. @keyframes blink {
  29.     0% { left: -150%; }
  30.     50% { left0%; }
  31.     100% { left150%; }
  32. }
  33. </style>
После этого останется только собрать страницу с плейсхолдерами в нужных позициях и нужного размера, отобразить ее на экране, запустить загрузку данных и после их получения скрыть плейсхолдеры. Верстка, например, может быть следующей:
  1. <div class="tblrow">
  2.     <div class="blink" style="width:50%; height:40px;"><div></div></div>
  3.     <div class="blink" style="width:50%; height:40px;"><div></div></div>
  4. </div>
  5.  
  6. <div class="tblrow">
  7.     <div class="blink" style="width:100%; height:10px;"><div></div></div>
  8. </div>
  9.  
  10. <div class="tblrow">
  11.     <div class="blink" style="width:25%; height:10px;"><div></div></div>
  12.     <div class="blink" style="width:45%; height:10px;"><div></div></div>
  13.     <div class="blink" style="width:15%; height:10px;"><div></div></div>
  14.     <div class="blink" style="width:25%; height:10px;"><div></div></div>
  15. </div>
Пример готовой страницы с плейсхолдерами, оформленными анимированными бликами, можно посмотреть здесь.

Поделиться ссылкой ВКонтакте
Просмотров: 248 | Комментариев: 0

Комментарии

Отзывы посетителей сайта о статье
Комментариeв нет

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

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.08 сек. / MySQL: 2 (0.005 сек.) / Память: 4.5 Mb
Наверх