20
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 для достижения того же эффекта.