Понедельник, 22 Октября 2012 15:23

Элементы загрузки или preload при помощи CSS3 для WebKit

Written by 
Оцени эту запись
(1 Голос)

Элементы загрузки или preload для WebKit при помощи свойств -webkit-animation и -webkit-transform.

 

 

 

 

 
               
               

 

HTML код прелоадов такой:

 

 

<div class="preloader_holder">
    <div class="preloader1" id="preloader1"><span></span></div>
    <div class="preloader2" id="preloader2">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="preloader3" id="preloader3">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>
 
 
 
У них всех используется зацикленная анимация такого вида:
 
 
@-webkit-keyframes 'rot'{
        0%{-webkit-transform: rotate(0deg)}
        25%{-webkit-transform: rotate(90deg)}
        50%{-webkit-transform: rotate(180deg)}
        75%{-webkit-transform: rotate(270deg)}
        100%{-webkit-transform: rotate(360deg)}
    }
 
 
То есть, осуществляется простой поворот на 360 градусов.
 
 
Первый preload реализован в виде блока с фоновым градиентом, у которого внутри меньший блок черного (по желанию фонового) цвета:
 
 
 
.preloader1 {
        width: 30px;
        height: 30px;
        background: red;
        -webkit-transform:rotate(0deg);
        -webkit-animation:'rot' 1s infinite linear;
        -webkit-animation-delay: 0s;
        -webkit-animation-duration: 1s;
        display: -webkit-box;
        -webkit-border-radius: 15px;
        background: -webkit-linear-gradient(45deg, rgb(255, 13, 138) 50%, rgb(87, 52, 255) 50%);
        margin: 0 20px;
    }
    .preloader1 span {
        display: -webkit-box;
        background: black;
        -webkit-border-radius: 10px;
        width: 20px;
        height: 20px;
        margin: 5px;
    }
 
 
 
Второй и третий прелоады реализованы при помощи восьми внутренних эломентов. В первом случае мы из них делаем кружки, задаем каждому прозрачность, разные размеры и смещение относитетельно родительского блока:
 
 
.preloader2, .preloader3 {
        display: -webkit-box;
        width: 30px;
        height: 30px;
        -webkit-transform:rotate(0deg);
        -webkit-animation:'rot' 1s infinite linear;
        -webkit-animation-delay: 0s;
        -webkit-animation-duration: 1s;
        display: -webkit-box;
        margin: 0 20px;
    }
 
 
 
.preloader2 span {
        width: 5px;
        height: 5px;
        background: #ff0084 ;
        display: block;
        -webkit-border-radius: 5px;
    }
    .preloader2 span:nth-child(1) {
        opacity: .15;
        -webkit-transform: scale(0.4, 0.4) translate(34px, -6px);
    }
    .preloader2 span:nth-child(2) {
        opacity: .3;
        -webkit-transform: scale(0.5, 0.5) translate(33px, 4px);
    }
    .preloader2 span:nth-child(3) {
        opacity: .45;
        -webkit-transform: scale(0.6, 0.6) translate(27px, 17px);
    }
    .preloader2 span:nth-child(4) {
        opacity: .6;
        -webkit-transform: scale(0.7, 0.7) translate(12px, 28px);
    }
    .preloader2 span:nth-child(5) {
        opacity: .7;
        -webkit-transform: scale(0.8, 0.8) translate(-9px, 30px);
    }
    .preloader2 span:nth-child(6) {
        opacity: .8;
        -webkit-transform: scale(0.9, 0.9) translate(-24px, 23px);
    }
    .preloader2 span:nth-child(7) {
        opacity: .9;
        -webkit-transform: scale(1, 1) translate(-30px, 12px);
    }
    .preloader2 span:nth-child(8) {
        opacity: 1;
        -webkit-transform: scale(1.1, 1.1) translate(-29px, 2px);
    }
 
 
 
Для последнего preload'а мы делаем другую историю. У него внутренние элементы прямоугольные, повернутые на разные углы. За счет градиентной заливки внутренних элементов, получаем интересных цветовой эффект. 
 
 
 
 
.preloader3 span {
        width: 6px;
        height: 10px;
        -webkit-border-top-left-radius: 4px;
        -webkit-border-top-right-radius: 4px;
        display: -webkit-box;
        background-image:-webkit-linear-gradient(45deg, orange, yellow, green, blue,  black);
    }
    .preloader3 span:nth-child(1) {
        -webkit-transform: rotate(0deg) translate(22px, 0px);
    }
    .preloader3 span:nth-child(2) {
        -webkit-transform: rotate(-45deg) translate(-1px, 5px);
    }
    .preloader3 span:nth-child(3) {
        -webkit-transform: rotate(-90deg) translate(-19px, -10px);
    }
    .preloader3 span:nth-child(4) {
        -webkit-transform: rotate(-135deg) translate(-16px, -32px);
    }
    .preloader3 span:nth-child(5) {
        -webkit-transform: rotate(-180deg) translate(2px, -40px);
    }
    .preloader3 span:nth-child(6) {
        -webkit-transform: rotate(-225deg) translate(19px, -29px);
    }
    .preloader3 span:nth-child(7) {
        -webkit-transform: rotate(-270deg) translate(18px, -6px);
    }
    .preloader3 span:nth-child(8) {
        -webkit-transform: rotate(-315deg) translate(-1px, 8px);
    }
 
 
Для того, чтобы такую анимацию прикрутить к странице сайта в роли именно прелоадера, можно воспользоваться свойством остановки анимации.
Водключаем к body функцию, которая ьудет останавливать анимацию. Причем, подключаем на onload. В данном случае, пока страница будет грузиться, пользователь будеть видеть preloader. Он исчезнет, как только страница будет полностью загружена.
 
 
 <body onload="StopPreload()"> </body>
 
 
 
Сама функция будет иметь такой вид:
 
 
<script>
function StopPreload() {
document.getElementById('preloader').style.webkitAnimationPlayState = 'paused';
document.getElementById('preloader_holder').style.display="none";
}
</script>
 
 
Где preloader - элемент, на котором висит наша анимация, а preloader_holder - общий контейнер. Данный контейнер preloader_holder служит для затемнения основной страницы и ему можно поставить стили:
 
 
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
 
 
 
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов