Preloader для сайта с помощью HTML и CSS
 | |
| В статье представлена два Loaders или загрузчика для сайта и страниц, которые идут с интересным решениями CSS анимации для сайта на HTML и CSS. Они созданы на CSS со свойством animation и правилом @keyframe, которое задается в стилистике. Также проверены на сайте, ведь если мы говорим про второй вариант, то он в сети уже давно ходит, где многие его устанавливали. Они по своим функциям не сильно отличаются, но если брать первый вариант, то там идет анимация на темно синем фоне, и пока страница полностью не загрузится, то загрузчик не исчезнет. А второй как раз идет только по своим линиям, но так заметил, хотя на demo страницы у всех присутствует задний фон. Вообще как можно понять, что если вы считаете, что у вас слабое интернет соединение, то думаю не стоит устанавливать на полный сайт, ведь есть вариаций другие, где можно разместить в нужной категории. А если ставить на все страницы, это на полный интернет ресурс, то здесь нужно стили и код выставить в самом верху в шапке, или в подвале в низ сайта. Первый вариант:  Устанавливаем вниз сайта или на странице, где хотите видеть. Код <style type="text/css">#kudemilosaped>p{display:none;}#vedsutesan_kigudexam{display: block;position: fixed;z-index: 99999;top: 0;left: 0;width: 100%;height: 100%;min-width: 1000px;background: #186da7 url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/audio.svg) center center no-repeat;background-size:41px;}</style> <div id="kudemilosaped"><div id="vedsutesan_kigudexam"></div></div> <script type="text/javascript">var hellopreloader = document.getElementById("vedsutesan_kigudexam");function fadeOutnojquery(el){el.style.opacity = 1;var interhellopreloader = setInterval(function(){el.style.opacity = el.style.opacity - 0.05;if (el.style.opacity <=0.05){ clearInterval(interhellopreloader);hellopreloader.style.display = "none";}},16);}window.onload = function(){setTimeout(function(){fadeOutnojquery(hellopreloader);},1000);};</script> На этом вся установка, остается только сохранить. Демонстрация Второй вариант: А вот второй вариант нашел в папке, что также решил проверить на сайте системы uCoz, где по работоспособности отлично показал в загрузке или перезагрузки страницы.  Код <div id="gesekpolasnuved"> <div id="mugedsavu_kopibsamun"> <div id="cenudsaved_kotedub_lotung"></div> </div> </div> <script> jQuery(function($) { $(window).load(function() { $("#gesekpolasnuved").fadeOut(700); }); }); </script> <style> #gesekpolasnuved { background-color: #123; bottom: 0; display: block; height: 100%; left: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 11000; } #mugedsavu_kopibsamun { width: 300px; height: 2px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #f25; } #mugedsavu_kopibsamun::before, #mugedsavu_kopibsamun::after { content: ''; width: 75%; height: 50%; position: absolute; left: 50%; transform: translateX(-50%); background-color: #f25; animation: sub-lines 4s cubic-bezier(0.25, 0.65, 1, 0.85) infinite; } #mugedsavu_kopibsamun::before { top: -20px; } #mugedsavu_kopibsamun::after { bottom: -20px; } #cenudsaved_kotedub_lotung { width: 100%; height: 100%; position: absolute; z-index: 20; background-color: #123; animation: mask 4s cubic-bezier(0.25, 0.65, 1, 0.85) infinite; } @keyframes mask { 0% { transform: scale(1, 1); } 25% { transform: scale(0, 1); } 75% { transform: scale(0, 1); } 100% { transform: scale(1, 1); } } @keyframes sub-lines { 0% { transform: translateX(-50%) scale(0, 1); } 25% { transform: translateX(-50%) scale(0, 1); } 50% { transform: translateX(-50%) scale(1, 1); } 75% { transform: translateX(-50%) scale(0, 1); } 100% { transform: translateX(-50%) scale(0, 1); } } </style> Preloader использует CSS-анимацию, которая широко поддерживается всеми современными браузерами, такими как Google Chrome и Mozilla Firefox. Здесь нужно заметить, что все представленные загрузчики или Loaders, анимированные при помощи стилей CSS3, и по этому должны корректно и отлично показывать и работать на всех современных браузерах, где происходит поддержка свойств, таких как переходы и преобразование, @keyframes, анимации. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 3 | |
|
| |
