Анимирование страницы с использованием маски и градиента

​​​

Одним из последних проектов 2012 года разработчиков сайта Parse Blog стал редизайн страницы Аbout. Главной целью являлось создание красивой, содержательной и приятной страницы. Давайте подробнее рассмотрим реализацию анимации на этой странице.

В процессе создания применялись новейшие свойства CSS3. Чтобы код стал более читаемым внесены SASS/Compass.

Создадим HTML для объектов, которые будут использоваться в анимации:

  

   

     
 
   
  

    
 
  

  
Parse

У нас есть блок container, который спозиционирован в нужном месте страницы и содержит тёмный фон. SCSS код очень простой. Мы добавляем радиальный градиент, который начинается в верхней центральной части container и резервный фон для браузеров не поддерживающих градиенты. Примесь @include clearfix обеспечивается поддержкой Compass и добавляет к нужным классам свойство overflow: hidden.

.container{
    width: 1080px;
    height: 1080px;
    background-color: #1d1d1d;
    @include background-image(radial-gradient(center top, circle, color-stops(rgba(#686868, 0.8), rgba(#1d1d1d, 0.6) 500px)));
    @include clearfix;
}

Класс container содержит два дочерних блока:

• Блок с классом background будет содержать движущиеся объекты. Этот контейнер в свою очередь содержит два блока, с помощью которых мы создадим два слоя объектов: один для объекта с серым цветом, другой для цветного.
• Блок сloud содержит прозрачный png

​

Теперь рассмотрим самую интересную часть – движущиеся объекты. Чтобы предотвратить долгую загрузку страницы, а также, чтобы показать внутри png (которое имеет вид облака) только цветные объекты, мы будем использовать свойство -webkit-mask. К сожалению оно не поддерживается IE и Firefox, но так как по статистике 90% пользователей Parse Blog используют webkit, будем применять -webkit-mask, для остальных браузеров будем использовать запасное изображение.

Для начала зададим классам devices_gray, .devices_gray .bg и .devices_colorful .bg нужные размеры и позиционирование:

.devices_gray, .devices_gray .bg, .devices_colorful .bg {
    width: 2600px;
    height: 1200px;
    position: absolute;
    top: 0px;
    left: 0px;
}

Поработаем над классом devices_gray, который необходим для показа серого объекта. Для этого внутреннему блоку с классом bg зададим серый цвет, а также используем свойство -webkit-mask-image для изображения devices.png

.devices_gray {
    -webkit-mask-image: -webkit-gradient(linear, left 80%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
    z-index: 1;
     
    .bg {
        left: -1500px;
        top: 0px;
        background: #252525;
        opacity: 0.4;
        -webkit-mask-image: url(/images/about/devices.png);
    }
}

Стоит отметить, что мы использовали z-index: 1, чтобы класс devices_gray был расположен над цветным объектом, но самое главное, что мы использовали -webkit-gradient с цветвым переходом от тёмного к прозрачному, как маску к этому блоку. Так что теперь блок devices_gray плавно исчезает в нижней части общего контейнера. Это отличная техника, если вам необходимы эффекты с прозрачностью и градиентами в webkit.

Теперь поработаем над классом devices_colorful:

.devices_colorful {
    -webkit-mask-image: url(/images/about/cloud_mask.png);
    width: 473px;
    height: 308px;
    position: absolute;
    left: 270px;
    top: 170px;
    z-index: 2;
     
    .bg {
        left: - 270px - 1500px;
        top: - 170px;
        @include background-image(linear-gradient(left, #FECC62 0%, #FECC62 5%, #FEA862 10%, #FE4762 15%, #FE47D8 20%, #E069FB 25%, #B285FB 30%, #65C1FB 35%, #FECC62 40%, #FECC62 45%, #FEA862 50%, #FE4762 55%, #FE47D8 60%, #E069FB 65%, #B285FB 70%, #65C1FB 75%, #FECC62 80%, #FECC62 85%, #FEA862 90%, #FE4762 95%, #FECC62 100%)); 
        -webkit-mask-image: url(/images/about/devices.png); 
        -webkit-mask-position: 0px 110px;
    }
}

Здесь мы опять используем изображение devices.png в качестве маски для верхней части градиента внутреннего блока bg.

Для блока devices_colorful повторно применяем -webkit-mask-image и картинку png чёрного цвета, которая имеет точно такую же форму и размеры, как и картинка с облаком. Применив это к devices_colorful, добьёмся отображения содержимого только в области ограниченной облаком. Таким образом, эффект, при котором цветной объект отображается в блоке ограниченном картинкой облака, получен.

Осталось анимировать объекты. Есть два пути к анимации:

• Анимировать маски, если мы хотим , чтобы цветной объект перемещался по верхней части градиента, или изображение, если хотим, чтобы он бесконечно двигался в одном направлении. К сожалению, такие манипуляции требуют большого потребления ресурсов и сделает анимацию медленной.
• Анимировать два блока bg. Этот вариант мы и будем использовать, так как он использует свойство translate которое не требует затраты больших ресурсов.

.devices_colorful .bg, .devices_gray .bg {
    @include animation(devicesBackground, 30s, 0s, ease-in-out, infinite, alternate);
}

Здесь мы добавили к обоим блокам bg анимацию под именем devicesBackground, с продожительностью 30 сек. Анимация запустится сразу с эффектом ослабления ease-in-out и будет работать бесконечно в обоих направлениях.

Так как у Compass нет достойных решений для примесей в анимациях, предоставим своё решение:

@mixin animation($name: fadeIn, $duration: 1s, $delay: 0s, $function: ease, $iterations: infinite, $mode: both) {
  @each $prefix in webkit, moz, ms {
    #{""}-#{$prefix}-animation: $name $duration $delay $function $iterations $mode;
  }
  animation: $name $duration $delay $function $iterations $mode;
}

Всё что осталось сделать это задать анимацию для devicesBackground:

// создаем только WebKit keyframes так что анимация будет работать только в webkit
@-webkit-keyframes devicesBackground {
  0% { -webkit-transform: translate3d(0px, 0px, 0); }
  100% { -webkit-transform: translate3d(1300px, 0, 0); }
}

Отлично! Теперь у нас есть цветной и серый объекты движущиеся вместе. Последнее, что осталось сделать, это добавить наверх изображение Cloud transparent PNG.

.cloud {
    background: url(/images/about/cloud.png) no-repeat;
    width: 473px;
    height: 308px;
    position: absolute;
    left: 270px;
    top: 170px;
    z-index: 3;
    font-family: 'Raleway', 'Helvetica Neue', Helvetica, arial, sans-serif;
    font-size: 65px;
    text-align: center;
    line-height: 350px;
    color: white;
    text-shadow: rgba(black, 0.7) 0px 2px 7px;
    font-weight: 400;
}

Готово! Мы получили отличную анимацию из нескольких объектов!

Полный SCSS код:

@-webkit-keyframes devicesBackground {
  0% { -webkit-transform: translate3d(0px, 0px, 0); }
  100% { -webkit-transform: translate3d(1300px, 0, 0); }
}
 
$container_width: 1080px;
$container_height: 1080px;
$left_positionning : -1500px;
$cloud_left: 270px;
$cloud_top: 170px;
 
.container{
    width: $container_width;
    height: $container_height;
    background-color: #1d1d1d;
    @include background-image(radial-gradient(center top, circle, color-stops(rgba(#686868, 0.8), rgba(#1d1d1d, 0.6) 500px)));
    @include clearfix;
     
    .devices_gray, .devices_gray .bg, .devices_colorful .bg {
        width: 2600px;
        height: 1200px;
        position: absolute;
        top: 0px;
        left: 0px;
    }
    .devices_gray {
        -webkit-mask-image: -webkit-gradient(linear, left 80%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
        z-index: 1;
         
        .bg {
            left: $left_positionning;
            top: 0px;
            background: #252525;
            opacity: 0.4;
            -webkit-mask-image: url(/images/about/devices.png);
        }
    }
 
    .devices_colorful {
        -webkit-mask-image: url(/images/about/cloud_mask.png);
        width: 473px;
        height: 308px;
        position: absolute;
        left: $cloud_left;
        top: $cloud_top;
        z-index: 2;
         
        .bg {
            left: - $cloud_left + $left_positionning;
            top: - $cloud_top;
            @include background-image(linear-gradient(left, #FECC62 0%, #FECC62 5%, #FEA862 10%, #FE4762 15%, #FE47D8 20%, #E069FB 25%, #B285FB 30%, #65C1FB 35%, #FECC62 40%, #FECC62 45%, #FEA862 50%, #FE4762 55%, #FE47D8 60%, #E069FB 65%, #B285FB 70%, #65C1FB 75%, #FECC62 80%, #FECC62 85%, #FEA862 90%, #FE4762 95%, #FECC62 100%)); 
            -webkit-mask-image: url(/images/about/devices.png);
        }
    }
         
    .devices_colorful .bg, .devices_gray .bg {
        @include animation(devicesBackground, 30s, 0s, ease-in-out, infinite, alternate);
    }
         
    .cloud {
        background: url(/images/about/cloud.png) no-repeat;
        width: 473px;
        height: 308px;
        position: absolute;
        left: $cloud_left;
        top: $cloud_top;
        z-index: 3;
        font-family: 'Raleway', 'Helvetica Neue', Helvetica, arial, sans-serif;
        font-size: 65px;
        text-align: center;
        line-height: 350px;
        color: white;
        text-shadow: rgba(black, 0.7) 0px 2px 7px;
        font-weight: 400;
    }
}

Посмотреть демо можно ЗДЕСЬ