Октябрь 25, 2019 Запись была обновлена
Анимация при загрузке на CSS3
Когда сайт подгружается, можно сделать так чтобы пользователь не смотрел на появление отдельных частей сайта, а дождался загрузки всего сайта и увидел его полностью загруженный вариант. Для этого используются прогресс бары. И обычно делается так, что основная часть затемняется, а видно только прогресс бар. И сегодня я хочу представить 3 вида анимации при загрузке на CSS3.
Пример 3-х прогресс баров можно увидеть здесь:
Посмотреть примерСкачать
Первый вид прогресс бара
HTML часть
Разметка очень проста. Мы создадим неупорядоченный список и внутри два блока <div> для создания эффекта анимации путем заполнения одного из них:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <ul id="progress"> <li> <div id="layer1" class="ball"></div> <div id="layer7" class="pulse"></div> </li> <li> <div id="layer2" class="ball"></div> <div id="layer8" class="pulse"></div> </li> <li> <div id="layer3" class="ball"></div> <div id="layer9" class="pulse"></div> </li> <li> <div id="layer4" class="ball"></div> <div id="layer10" class="pulse"></div> </li> <li> <div id="layer5" class="ball"></div> <div id="layer11" class="pulse"></div> </li> </ul> |
CSS часть
Здесь мы сначала задаем простые стили для списков, а затем с помощью свойств анимации создаем эффект заполнения:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | ul#progress { list-style:none; width:125px; margin:0 auto; padding-top:50px; padding-bottom:50px; } ul#progress li { float:left; position:relative; width:15px; height:15px; border:1px solid #fff; border-radius:50px; margin-left:10px; border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; background:#000; } ul#progress li:first-child { margin-left:0; } .running .ball { background-color:#2187e7; background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); width:15px; height:15px; border-radius:50px; -moz-transform:scale(0); -webkit-transform:scale(0); -moz-animation:loading 1s linear forwards; -webkit-animation:loading 1s linear forwards; } .running .pulse { width:15px; height:15px; border-radius:30px; border: 1px solid #00c6ff; box-shadow: 0 0 5px #00c6ff; position:absolute; top:-1px; left:-1px; -moz-transform:scale(0); -webkit-transform:scale(0); -webkit-animation:pulse 1s ease-out; -moz-animation:pulse 1s ease-out; } #layer1 { -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; } #layer2 { -moz-animation-delay:1s; -webkit-animation-delay:1s; } #layer3 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; } #layer4 { -moz-animation-delay:2s; -webkit-animation-delay:2s; } #layer5 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; } #layer7 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; } #layer8 { -moz-animation-delay:2s; -webkit-animation-delay:2s; } #layer9 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; } #layer10 { -moz-animation-delay:3s; -webkit-animation-delay:3s; } #layer11 { -moz-animation-delay:3.5s; -webkit-animation-delay:3.5s; } @-moz-keyframes loading { 0%{-moz-transform:scale(0,0);} 100%{-moz-transform:scale(1,1);} } @-webkit-keyframes loading { 0%{-webkit-transform:scale(0,0);} 100%{-webkit-transform:scale(1,1);} } @-moz-keyframes pulse { 0% {-moz-transform: scale(0);opacity: 0;} 10% {-moz-transform: scale(1);opacity: 0.5;} 50% {-moz-transform: scale(1.75);opacity: 0;} 100% {-moz-transform: scale(0);opacity: 0;} } @-webkit-keyframes pulse { 0% {-webkit-transform: scale(0);opacity: 0;} 10% {-webkit-transform: scale(1);opacity: 0.5;} 50% {-webkit-transform: scale(1.75);opacity: 0;} 100% {-webkit-transform: scale(0);opacity: 0;} } |
Второй вид прогресс бара
HTML часть
В этом случае мы создадим полосу загрузки под любое разрешение экрана. Для нужен блок с шириной 100%, внутри которого находится полоса загрузки:
1 2 3 | <div id="content"> <span class="expand"></span> </div> |
CSS часть
Код в файле стилей еще проще и меньше, чем в предыдущем примере. Это лишь основные стили и вы можете их изменить по своему усмотрению:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | #content { width:100%; height:5px; margin:50px auto; background:#000; } .fullwidth .expand { width:100%; height:1px; margin:2px 0; background:#2187e7; position:absolute; box-shadow:0px 0px 10px 1px rgba(0,198,255,0.7); -moz-animation:fullexpand 10s ease-out; -webkit-animation:fullexpand 10s ease-out; } @-moz-keyframes fullexpand { 0% { width:0px;} 100%{ width:100%;} } @-webkit-keyframes fullexpand { 0% { width:0px;} 100%{ width:100%;} } |
Третий вид прогресс бара
HTML часть
В этом последнем примере мы создадим анимацию на основе свойства opacity:
1 2 3 4 5 6 7 8 9 10 11 12 | <ul id="loadbar"> <li><div id="layerFill1" class="bar"></div></li> <li><div id="layerFill2" class="bar"></div></li> <li><div id="layerFill3" class="bar"></div></li> <li><div id="layerFill4" class="bar"></div></li> <li><div id="layerFill5" class="bar"></div></li> <li><div id="layerFill6" class="bar"></div></li> <li><div id="layerFill7" class="bar"></div></li> <li><div id="layerFill8" class="bar"></div></li> <li><div id="layerFill9" class="bar"></div></li> <li><div id="layerFill10" class="bar"></div></li> </ul> |
CSS часть
Как можете видеть ниже, данный пример похож на тот, который мы рассматривали самым первым, но в качестве заполнения в этом случае ппрямоугольники:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | ul#loadbar { list-style:none; width:140px; margin:0 auto; padding-top:50px; padding-bottom:75px; } ul#loadbar li { float:left; position:relative; width:11px; height:26px; margin-left:1px; border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; background:#000; } ul#loadbar li:first-child { margin-left:0; } .ins .bar { background-color:#2187e7; background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff); background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff); width:11px; height:26px; opacity:0; -webkit-animation:fill .5s linear forwards; -moz-animation:fill .5s linear forwards; } #layerFill1 { -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; } #layerFill2 { -moz-animation-delay:1s; -webkit-animation-delay:1s; } #layerFill3 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; } #layerFill4 { -moz-animation-delay:2s; -webkit-animation-delay:2s; } #layerFill5 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; } #layerFill6 { -moz-animation-delay:3s; -webkit-animation-delay:3s; } #layerFill7 { -moz-animation-delay:3.5s; -webkit-animation-delay:3.5s; } #layerFill8 { -moz-animation-delay:4s; -webkit-animation-delay:4s; } #layerFill9 { -moz-animation-delay:4.5s; -webkit-animation-delay:4.5s; } #layerFill10 { -moz-animation-delay:5s; -webkit-animation-delay:5s; } @-moz-keyframes fill { 0%{ opacity:0; } 100%{ opacity:1; } } @-webkit-keyframes fill { 0%{ opacity:0; } 100%{ opacity:1; } } |
Вывод
В этой статье мы создали простые, но симпатичные прогресс бары. Если вы применяете данный способ загрузки, то возможно вам пригодятся эти решения. А работать анимация полноценно будет в современных браузерах: Mozilla, Safari и Chrome.
Успехов!
Источник: alessioatzeni.com
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Чет я так и не понял как сделать, что бы страница грузилась и была загрузка, там приходиться нажимать на кнопку ! что бы анимация работала.
Здравствуйте! Потому что в файле index.html есть строчки на jQuery:
12 строка:
... $('.trigger').click(function() { ...
23 строка:
... $('.triggerFull').click(function() { ...
34 строка:
... $('.triggerBar').click(function() { ...
Которые «отлавливают» клик мыши.
Чтобы сделать полноценно как преподносит автор — надо изменить JavaScript-код и еще кое-что по мелочи. А много тут владеющих полноценно Java? Процентов 10% от силы. Поэтому данная статья полезна лишь для этих 10%.
Остальные 90% попробуют — не получится сделать и уйдут к другому сайту, где в файлах сразу есть готовый шаблон 'Анимация при загрузке' на CSS3 и все сразу доступно.
Я отношусь к 90% и потому так и не смог "победить кнопку" и сделать так, чтобы во время полной прогрузки страницы появлялся I вариант, а потом — "выплывал" мой контент странички.
В связи с вышесказанным:
1. Прошу знатоков сказать что нужно изменить в файлах, чтобы как только открылась страничка — появился "загрузчик" (напр, I вариант), а потом появился сам контент html-странички?
2. Прошу автора сайта изменить файлы в соответствии с вариантом загрузчика (index1.html, index2.html, index3.html) и сам java-код, чтобы во время загрузки изображения и контента, отображался соотв-щий загрузчик, а потом уже только — контент странички.
С уважением, Денис