Adatum20
2013
Создаём портфолио с CSS3 переходами
Этот урок покажет как создать современную, интерактивную страницу портфолио с использованием CSS3 переходов.
Что такое CSS переходы?
Собственно это эффекты которые позволяют плавно изменить один стиль на другой.
Как бы просто это ни звучало, но с помощью CSS переходов создаются отличные вещи, и добавляется интерактивность на веб-сайте. К сожелению пока они поддерживаются не во всех браузерах, поддержка постоянно улучшается, и, используя такие библиотеки как Modernizr мы можем реализовать css переходы и в старых, менее поддерживаемых браузерах.
Создаём современные, интерактивные страницы портфеля с использованием CSS3 переходов, и заменим JQuery анимацию с HTML5 разметкой.
Основы CSS переходов
Если вы не слышали о CSS переходах раньше,то стоит подумать о них как о вещи позволяющей добиться потрясающих эффектов, которые ранее были доступны лишь с помощью JavaScript или jQuery. Если вы можете сделать какой то эффект с помощью JQuery, то сможете добиться того же и с помощью переходов CSS — например, ползунки и многое другое.
Оба метода CSS переходы и JQuery по существу делают одно и тоже, осуществляют переход от одного стиля к другому, в течение установленного периода времени. Синтаксис для перехода:
transition-property: height; transition-duration:3s; transition-delay: 2s; transition-timing-function: linear;
В сокращённом виде CSS:
transition : {transition-property} {transition-duration}
{transition-delay} {transition-timing-function}
Также мы можем группировать несколько переходов вместе, Отделяя их точкой с запитой. Например:
transition: height 200ms 50ms linear; width 400ms 500ms ease-in-out; color 600ms 0ms ease-in-out;
Обратите внимание, что вы также можете поместить несколько значений как на обычное обьект. Итак, теперь мы знаем, синтаксис, давайте сделаем простой пример, эффект при наведении на кнопку . Вот пример HTML:
<div class="button"> hover over me </div>
И стиль CSS:
div.button{
padding:2px 20px;
height:30px;
width:100px;
line-height:30px;
text-align:center;
border:2px solid #878787;
background-color:#c0c0c0;
border-radius:10px;
margin:20px;
cursor:pointer;
}
Теперь предположим, что мы хотим, чтобы объект выглядел по-разному при наведении курсора мыши, так что мы добавим еще несколько свойств CSS при наведении:
Стиль CSS:
div.button:hover{
background-color:#ff0000;
padding:40px;
border-width:4px;
border-color:green;
color:#ffffff;
}
Наведите указатель мыши на элемент кнопки и увидите что стиль меняется мгновенно. Это уже хорошо, но можно сделать еще лучше. Давайте добавим переход к классу при наведении:
transition:padding 2000ms 0ms linear;
Вот это да! Теперь, когда мы наведем, стиль меняется медленно, точно так же как и с JQuery эффектом анимации, но другие стили все равно меняються мгновенно. Это происходит потому, что только стили с переходами имеют эффект, все остальное меняются мгновенно.
Изменение CSS. Удалим переход из класса наведения, и добавим как CSS правила:
transition:all 2000ms 0ms linear
Теперь все выглядит великолепно !
Зачем использовать переходы?
Если CSS переходы могут достичь того же эффекта, как живая JQuery, почему бы не сэкономить себе время и узнать что-то новое? Зачем использовать то, что поддерживается не полностью?
Меньший размер файла по сравнению с JavaScript будет означать меньший размер файла сценария а значит и легче сайт, что приводит к более быстрой загрузке и меньшей блокировки при загрузке сценария.
Снижает использование библиотек JS, таких как JQuery.
К примеру рассмотрим этот пример на JQuery:
$('#element').mouseenter(function(){
$(this).animate({
'style':'value',
'style':'value',
'style':'value'} 600, 'ease-in-out'
);
}).mouseleave(function(){
$(this).animate({
'style':'value',
'style':'value',
'style':'value'} 600, 'ease-in-out'
);
});
Хотя это конечно не огромное количество кода, имеющие несколько подобных эффектов добавят вес в файле JS — плюс есть дополнительный вес JQuery библиотеки. То же самое может быть достигнуто с переходами CSS. Просто введите:
element{
'style':'value';
'style':'value';
'style':'value';
Transition: {values here}
}
element:hover{
'style':'value';
'style':'value';
'style':'value';
Transition: {values here}
}
С Помощю CSS переходов можно извлечь выгоду из аппаратного ускорения при работе в некоторых браузерах, которые имеют поддержку аппаратного ускарения. Это обеспечивает еще более высокую производительность по сравнению с использованием JQuery. Это также хорошо выглядит с мобильного телефона. С меньшим количеством скриптов JavaScript, родные эффекты и аппаратное ускорение, выигрыш в производительности будет действительно заметен.
Итак, давайте начнем с некоторых примеров того, что мы можем сделать, чтобы сделать действительно быстрое приложение, которое можно использовать для портфолио, блогов, галерей изображений и.т.д.
Давайте начнем
Мы собираемся сделать несколько контейнеров, в которых будем показывать изображения. Контейнер будет иметь описание которое будет показано при нажатии на контейнер. Мы будем использовать JQuery чтобы изменить класс на контейнере, и CSS переходы для обработки всех анимации. Вот наш контейнер:
<article class=""> <img src="http://placekitten.com/278/150" /> <p> some ipsum here </p> </article>
Удаление ненужных CSS сделает ваш сайт более лёгким и обеспечит более быструю загрузку страниц. Попробуйте helium.js. Это небольшой файл JavaScript, который сканирует ваш сайт и выделяет любые CSS которые ваш сайт не использует. Вы будете удивлены, как много можно безопасно удалить. Вот полная настройка CSS:
/*
** HTML CSS shiv/fix [Here I’ve used only the elements needed]
*/
article, header, section{display: block;}
/*
** [Some styles to add colour and context to the demo]
*/
html{font-size:100%;text-size-adjust:100%;background-color:#f0f0f0;
fontfamily:Tahoma;font-style:italic;color:#878787;}
body{margin:0;padding:0;height:700px;}
header{height:80px;background-color:#fbfbfb;border-bottom:2px solid
#878787;}
header h1{width:960px;margin:0 auto;font-weight:normal;padding-top:
10px;}
/*
** [Some styles used to create the CSS transition effects]
*/
section{width:960px;margin:0 auto;position:relative;}
section div{float:left;width:318px;}
Таким образом, мы установили стиль для статьи:
article.live{opacity:1;width:278px;height:150px;}
Далее обработка наведения курсора на контейнер:
article.live:hover{height:270px;}
Теперь CSS стили установлены,и мы можем добавить все важные стили CSS перехода. Полный код CSS с переходами:
article.live{opacity:1;width:278px;height:150px;transition:all 2s;}
article.live:hover{height:270px;transition:all 1s;}
Так что теперь все CSS на месте. Однако, если вы посмотрите на страницу в браузере, вы не увидите ничего. Причиной этого является то, что нам нужно добавить класс для всех элементов портфеля на странице загрузки. Для этого мы используем JQuery.
$(function(){
$("article"). addClass("live");
});
На данный момент у нас есть хороший эффект загрузки и эффект при наведении:
article.full{z-index:1;left:0;width:915px;
opacity:1;height:350px;transition:all 4s;}
article.gone{opacity:0;transition:all 1s;}
JQuery:
$("article").click(function () {
$('section div').toggleClass('hidden');
$("article").not($element).toggleClass("gone");
$("article").not($element).toggleClass("live");
$element.toggleClass("full");
$(this).toggleClass("live");
});
Мы использовали JQuery, чтобы добавить CSS классы элементов, но избежать вызова JQuery функций. Кроме того, можно пойти дальше и использовать чистый JavaScript, чтобы добавить событие щелчка и переключение класса.
Очень важно заметить, что CSS переход означает, что мы можем использовать меньшее сценариев для создания великолепных эффектов.
Таким образом, основная работа сделана, и это выглядит очень красиво, если возможно, просто немного подкорректировать. Итак, давайте добавим немного дополнительного CSS и JavaScript, чтобы оживить их.
Для начала, при добавлении в классе я добавлю случайной задержки при загрузке страницы. Это означает, что элементы будут загружаться в случайном порядке. Для этого мы будем использовать случайное число из заданного списка раз. Давайте сделаем функцию для добавления случайной временной задержки:
function addDelay(elements) {
var timeArray = new Array(200, 600, 1000, 1400, 1800, 2200, 2600);
for (var count = 0; count < elements.length; count++) {
setTimeout('$("article").eq('+count+').addClass("live)',
timeArray[parseInt(Math.random() * 6)]);
}
}
Затем вызовите его для наших контейнеров:
addDelay($(‘articles’));
Затем немного дополнительных CSS:
article{height:150px;z-index:0;position:relative;overflow:hidden;
opacity:0;margin:10px;padding:10px;float:left;border-radius:10px;
backgroundcolor:#fbfbfb;border:1px solid #878787;
transition:height 1s;}
article.live{opacity:1;width:278px;height:150px;transition:all 2s;}
article.live:hover{height:270px;transition:all 1s;}
article.full{z-index:1;left:0;width:915px;opacity:1;
height:350px;transition:all 4s;}
article.gone{opacity:0;transition:all 1s;}
article img{box-shadow:0 1px 2px #000;cursor:pointer;}
Теперь поддержку для старых браузеров
Теперь у нас есть перспективное портфолио, с анимацией на переходах CSS. Итак, теперь мы приходим к вопросу о не поддерживаемых браузерах — но сначала давайте воспользоваться моментом, чтобы уточнить, что я имею в виду, не поддерживают. Если браузер не поддерживает CSS переходы, мир не закончится. Вы по-прежнему получаете все изменения стиля, но они будут мгновенными, так же, как видели в первом примере.
Самое замечательное в этом то, что вы не теряете функциональность, как результат, нет не поддерживающих браузеров. Проблема только в том, что она просто не будет выглядеть столь же красиво, как в последнем Chrome и все других новые браузерах.
Основная среда не способствует поддержке браузеров, которые вы, вероятно, относятся Firefox 3.5 и ниже, а также Internet Explorer 9 и ниже.
Мы будем использовать библиотеку Modernizr, чтобы проверить на переходе поддержку, добавив, JQuery обработку событий.
Вот резервный код:
function fullySupported(){
/* we move all our functional JavaScript here, for supported browsers */
}
function nonSupportive(){
/* here is where you fall back would go */
/* fold IE and pre Firefox 3.5 browsers */
}
if(!Modernizr.CSStransitions){
nonSupportive();
}
else{
fullySupported();
}
Тогда нам просто нужно добавить JavaScript для не поддерживающих браузеров:
$("article").click(function () {
// cache the clicked item
var $element = $(this);
if(!$element.hasClass("full")){
$("article").not($element).animate({'opacity':0},1000);
$element.animate({
'width':'915px',
'height':'350px',
'opacity':1}, 4000, function(){
$(this).addClass("full");
});
}else{
$("article").not($element).animate({'opacity':1},1000);
$element.animate({
'width':'278px',
'height':'150px',
'opacity':1}, 4000, function(){
$element.removeClass("full");
$element.addClass("live");
});
}
});
Заключение
После выполнения этой инструкции мы создадим современное портфолио, которое можно использовать в своих проектах(попробуйте использовать его в WordPress).
Как я уже сказал, если вы можете сделать это с JQuery, вы можете сделать это и с переходами.
Пока они поддерживаются не полностью, вам придется рассмотреть вопрос об использовании резервного, будь то небольшой код JQuery для достижения того же эффекта.
