Adatum
Мар
20
2013
CSS // HTML5 // jQuery // PHP /

Создаём портфолио с CSS3 переходами

portf
Этот урок покажет как создать современную, интерактивную страницу портфолио с использованием 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 эффектом анимации, но другие стили все равно меняються мгновенно. Это происходит потому, что только стили с переходами имеют эффект, все остальное меняются мгновенно.

portf2

Изменение CSS. Удалим переход из класса наведения, и добавим как CSS правила:

transition:all 2000ms 0ms linear

Теперь все выглядит великолепно !

portf3

Зачем использовать переходы?

Если 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, родные эффекты и аппаратное ускорение, выигрыш в производительности будет действительно заметен.

portf4

Итак, давайте начнем с некоторых примеров того, что мы можем сделать, чтобы сделать действительно быстрое приложение, которое можно использовать для портфолио, блогов, галерей изображений и.т.д.

Давайте начнем

Мы собираемся сделать несколько контейнеров, в которых будем показывать изображения. Контейнер будет иметь описание которое будет показано при нажатии на контейнер. Мы будем использовать 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&rsquo;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($(&lsquo;articles&rsquo;));

Затем немного дополнительных 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 для достижения того же эффекта.

Источник урока: http://www.netmagazine.com/tutorials/build-portfolio-css3-transitions
Перевел: Сергоманов Дмитрий

Похожие статьи

Оставить комментарий

  • В Опере не работает