Пять интересных эффектов при наведении с использованием нескольких фоновых изображений

Original author: Joshua Johnson
  • Translation
  • Tutorial
Сегодня мы рассмотрим все преимущества использования множественных фонов. Изучим базовые основы и создадим крутые эффекты при наведении с помощью CSS свойств hover и transition.

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

Что должно получиться


Посмотрим на то, что должно получиться в итоге. Подумайте, как можно реализовать эти эффекты чисто на одном CSS.

Демонстрация





Множественные фоны (мультифон)


До недавнего времени, я не использовал несколько изображений в качестве фона. Я знал, что такая возможность существует, но не мог найти ей интересного применения. Вариант с параллаксом конечно же интересный, но уже всем надоел.

В итоге я придумал использовать концепцию мультифона при наведении на объект. Получилось своего рода анимация. Это очень простой трюк, но я его нигде раньше не встречал, поэтому решил показать вам, как его можно использовать.

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

Концепция


В основном, при наведении курсора на объекты происходит обычная анимация. Например, одно изображение перекрывает другое, что-то вращается или отскакивает, блекнет цвет и так далее.

При использовании мультифона появляется много вариантов анимации. Не прилагая больших усилий можно создать, на первый взгляд, сложную анимацию, используя только CSS-свойство transition, которое на данный момент подерживается браузерами лучше, чем свойство animate.

Предположим, мы хотим сделать анимацию открывающихся дверей. Для этого просто сделаем смещение двух фоновых изображений в разные стороны:



Теперь мы имеем представление о дальнейшей работе. Так что перейдем к самому интересному — начнем создать эффекты.

Анимация горизонтально открывающихся дверей




Попытаемся создать эффект, рассмотренный на предыдущем рисунке. Для начала, нам понадобиться два фоновых изображения.

Так как мы рассматриваем только саму идею, не важно, какие будем использовать изображения. Я взял текстуру темного дерева и пиктограмму машины из бесплатного шрифта.



Базовая разметка

Создадим на странице блок div с классом circles. Этот класс так же применим к остальным примерам.

Все примеры будут располагаться на одной странице, поэтому я добавил стили для позиционирования элементов. Но самое важное, это применение свойства border-radius для создания формы круга.

.circles {
	float: left;
	height: 200px; width: 200px;
	background-color: #eee;
	margin: 0 50px 50px 0;
 
	/*Задаем форму круга*/
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
}


Наши фоновые изображения будут располагаться в одном ряду, здесь они показаны уже с применением скругления.



Применяем мультифон

Сначала используем два изображения в качестве фона. Далее используем хитрость, которая заключается в том, что текстуру дерева надо использовать дважды. В итоге получится три изображения.

В CSS несколько изображений задаются довольно просто, просто перечисляем их через запятую.

#slidingDoors {
	/*Применяем несколько фоновых рисунков*/
	background-image: url('wood.jpg'), url('wood.jpg'), url('car.jpg');
}


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



В свойстве background можно указать и путь изображениям, и их позиционирование. Но для лучшего восприятия задавать эти атрибуты будем отдельно, то есть для указания позиции будем использовать свойство background-position.

/*Применяем несколько фоновых рисунков*/
#slidingDoors {
	background-image: url('wood.jpg'), url('wood.jpg'), url('car.jpg');
	background-repeat: no-repeat;
 
	/*Задаем их положение*/
	background-position: -100px 0px, 100px 0px, 0px 0px;
}


Очевидно, что заданные группы значений соответствуют заданным изображениям. Первое значение в каждой группе двигает изображение вправо, если число положительное, или влево, если число отрицательное. Второе значение, соответственно, перемещает изображение вверх при положительном числе или вниз при отрицательном.

Как вы могли заметить, я разделил окружность с деревом на две части, а машину оставил без изменений.



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

Анимируем изображения

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

Для этого, не забывая указывать префиксы для браузеров, зададим время анимации длительностью в 1 секунду. Затем благодаря свойству hover, переместим одну часть текстуры влево, а другую часть — вправо.

#slidingDoors {
 
	/*Применяем несколько фоновых рисунков*/
	background-image: url('wood.jpg'), url('wood.jpg'), url('car.jpg');
	background-repeat: no-repeat;
 
	/*Задаем их положение*/
	background-position: -100px 0px, 100px 0px, 0px 0px;
 
	/*Параметры анимации*/
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
 
#slidingDoors:hover {
	background-position: -200px 0px, 200px 0px, 0px 0px;
}


Вместе с этим, мы реализовали первый пример. При наведении мыши двери раскроются в разные стороны и мы увидим машину.

Анимация вертикально открывающихся дверей




Теперь, когда мы рассмотрели первый пример, сделать этот будет легче. Здесь мы используем те же свойства transition и background-image. Изменим только положение частей текстуры. В этот раз при наведении они будут раскрываться вертикально.

#slidingDoorsVert {
 
	/*Применяем несколько фоновых рисунков*/
	background-image: url('wood.jpg'), url('wood.jpg'), url('car.jpg');
	background-repeat: no-repeat;
 
	/*Задаем их положение*/
	background-position: 0px -100px, 0px 100px, 0px 0px;
 
	/*Параметры анимации*/
	-webkit-transition: all 0.7s ease-in-out;
	-moz-transition: all 0.7s ease-in-out;
	-o-transition: all 0.7s ease-in-out;
	-ms-transition: all 0.7s ease-in-out;
	transition: all 0.7s ease-in-out;
}
 
#slidingDoorsVert:hover {
	background-position: 0px -200px, 0px 200px, 0px 0px;
}


Квадратное разъединение частей




Давайте сделаем еще один шаг вперед и используем для анимации уже 5 изображений. Нам надо, что бы при наведении курсора на изображение оно разбивалось на 4 части и показывалась картинка с машиной.

Мы выстраиваем 4 части изображения так, чтобы они располагались вертикально и горизонтально непосредственно в центре круга. При наведении они будут перемещаться к центру.

#breakApart { 
	background-image: url('squares.jpg'), url('squares.jpg'), url('squares.jpg'), url('squares.jpg'), url('car.jpg');
	background-repeat: no-repeat;
	background-position: -100px -100px, 100px 100px, -100px 100px, 100px -100px, 0px 0px;

/*Параметры анимации*/
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

#breakApart:hover {
	background-position: -200px -200px, 200px 200px, -200px 200px, 200px -200px, 0px 0px;
}


Округлое разъединение частей




Немного сложнее будет повторить этот же эффект с округлым разъединением, так как во-первых, необходимо использовать прозрачное изображение, и во-вторых, нужно сделать так, чтобы они накладывались друг на друга в обозначенном месте. Здесь могут возникнуть проблемы из-за использования текстуры дерева. Но если использовать более простую текстуру с шумом, проблем быть не должно.

Поворот и разъединение




Понять суть этого примера можно по картинке сверху. В этом примере я сделал чтобы машина поворачивалась перед тем, как открываются части изображения с текстурой.

Это включает в себя несколько нюансов. Проблема заключается в том, что поворачивается все фоновые изображения, в том числе изображение машины под ними. Учитывая это, я заранее повернул машину в обратную сторону, чтобы при повороте она возвращалась в нужное положение.

Еще одна интересная вещь, это время, за которое происходит анимация. Обратите внимание, что для эффекта поворота и эффекта перемещения я указал разное время. Благодаря этому можно сделать невероятно большое количество примеров.

#twistAndShout {
	background-image: url('crisscross.jpg'), url('crisscross.jpg'), url('crisscross.jpg'), url('crisscross.jpg'), url('car.jpg');
	background-repeat: no-repeat;
	background-position: -100px -100px, 100px 100px, -100px 100px, 100px -100px, 0px 0px;
 
	/* Поворот */
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	-o-transform:rotate(-90deg);
	-ms-transform:rotate(-90deg);
	transform:rotate(-90deg);
 
	/*Параметры анимации*/
	-webkit-transition: background-position .6s ease-in-out, -webkit-transform .3s ease;
	-moz-transition: background-position .6s ease-in-out, -moz-transform .3s ease;
	-o-transition: background-position .6s ease-in-out, -o-transform .3s ease;
	-ms-transition: background-position .6s ease-in-out, -ms-transform .3s ease;
	transition: background-position .6s ease-in-out, transform .3s ease;
}
 
#twistAndShout:hover {
	background-position: -200px -200px, 200px 200px, -200px 200px, 200px -200px, 0px 0px;
 
	/*Поворот*/
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	transform:rotate(0deg);	
}


Дополнение от psywalker
Оригинал статьи был опубликован в ноябре 2011 г. Сообщение об отмене префиксов для многих CSS-свойств, включая transition и transform, в IE10 появилось после ее выхода. Поэтому мы оставили в статье авторский вариант кода, но для практических задач имейте в виду, что префикс -ms- для наиболее популярных свойств CSS3 — таких как transition,transform, animation, linear-gradient и т.п. — уже не нужен.
Share post

Comments 32

    –14
    << чисто на одном CSS
    Чисто на одном CSS — это без картинок. А последние три анимации весьма интересны.
      –12
      Хотя конечно, картинки тут не принципиальны. Просто заметил. :)
        +5
        Имелось в виду, что без использования JS.
          –5
          Понятное дело. Я имел ввиду, что если совсем убрать картинки можно демо сделать более технологичным, раскрывая и другие возможности css.
            +1
            Можно картинки в base64, и забить в css:

            html { background: white url(data:image/png;base64, ...); }
            


            Тогда будет на чистом css (хотя может тут есть свои подводные камни).
          +36
          Вы бы ещё сказали что на чистом CSS — это без html.
            –4
            Учитывая то, что на хабре уже сколько лет публикуются статьи о том, как сделать то, или иное без картинок на css, мой комментарий вполне логичен. Вам ссылки привести? С десяток статей таких точно было.
              +6
              Вы не поверите! Можно и без HTML:
              css-tricks.com/using-css-without-html/
            +17
            Кстати, для задания формы круга лучше указывать радиус 50%, а не точные размеры.

            .circles {
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
            }
              +4
              Толковое замечание.
                0
                К сожалению, андроид девайсы версии младше 2.3 не понимают такого.
                0
                Надпись «hover effects» на картинках каким шрифтом сделана?
                –1
                Огромное спасибо. Почерпнул для себя новые знания и толчок к размышлениям. Обязательно использую где-нибудь в проекте Ваш пример.
                  –2
                  вы сможете это использовать только в своем личном некоммерческом проекте, в котором вам насрать на пользователей с браузерами, не поддерживающими этот фокус. Ни один клиент, который платит за сайт, не согласится на такое.
                    0
                    Вообще, если не использовать несколько фоновых изображений, а просто затолкать внутрь элемента несколько дочерних (по одному на один фон, очевидно), то можно использовать и на вполне боевом сайте — ничего страшного, если часть пользователей увидят не анимацию открывания «дверей», а просто резкую смену изображения «дверей» на изображение автомобиля.
                  +2
                  Вообще это, конечно, все интересно, но иногда, заходя на сайты использующие кучу подобных эффектов, поневоле вспоминаешь начало массового развития веба, когда заходишь на сайт а там МИГАЮЩИЕ КНОПОЧКИ ПЕРЕЛИВАЮЩИЕСЯ КАРТИНОЧКИ УЕЗЖАЮЩИЕ ТЕКСТЫ. Ненависть =)
                    –1
                    Неуважение к пользователям IE можно понять, они это заслужили, но плевать на пользователей планшетов и смартфонов за что? Забудьте про hover. Он стал старым, морщинистым и фактически умер. Статья интересная, но, увы, полностью бесполезная.
                      0
                      Лично я узнал много нового и интересного.
                        0
                        А ещё сегодня вы узнали как получать проклятья в свой адресс, если будете использовать этот эффект на ссылочные элементы.
                          0
                          Для планшетов можно подгружать отдельный css, убирающий два верхних слоя, либо использовать @media (max-width), вариантов много, нет смысла отказываться от чего-то в угоду части пользователей.
                            +1
                            А когда-то били за сайты во flash без html версии.
                      +4
                      Автор, если переводите такую старую статью, то хотя бы позаботьтесь о том, чтобы люди знали про отмену префиксов для IE10. Поставьте в конце статьи вот этот абзац!

                      «Оригинал статьи был опубликован в ноябре 2011 г. Сообщение об отмене префиксов для многих CSS-свойств, включая transition и transform, в IE10 появилось после ее выхода. Поэтому мы оставили в статье авторский вариант кода, но для практических задач имейте в виду, что префикс -ms- для наиболее популярных свойств CSS3 — таких как transition,transform, animation, linear-gradient и т.п. — уже не нужен.»
                        0
                        Я и забыл об этом. Спасибо что напомнили, добавил.
                        0
                        Интересный материал. Единственное, что не написано, в каких браузерах будет работать. Пришлось потерять минуту времени и запустить пример во всех своих браузерах. Итог: FF и Chrome — роботает, IE9 — картинка меняется, но без анимации. Впринципе сойдет, но я все же пока буду на js такое анимировать, т.к. по моему опыту во всех браузерах должно быть одинаково, чтоб заказчик потом лишних вопросов не задавал.
                          0
                          У меня есть мнение что вместо того чтобы заморачиватся делая такие вещи в цсс, гораздо проще, в век когда подавляющее большинство использует броузеры легко переваривающие жскрипт, сделать например это на жквайри, который будет занимать всего пару строк когда, и при этом не будет необходимости городить кучу стилей без которых можно было вполне обойтись.
                            0
                            Как существенный плюс хочу отметить, что получая большую гибкость жертвуя лишь 92,6 кб мы «лишаемся счастья» иметь геммор с кроссброузерностью.
                            –1
                            Первый мой компьютер мне отец подарил в 1990 году, когда в 1995 году он меня привел за компьютер в Спорт Комитете СПБ и я увидел интернет на экране монитора это было ЧТО-ТО. Через 3 года я стал главным администратором этого замечательного заведения. В это время я познал Кроватку и Диван это было что-то НЕЧТО и их разработчики еще тогда могли сделать фейсбук, но на первом фронте стояло общение… где теперь оно?.. Названивая Арту я пытался получить «Администратора». Сейчас когда я вижу, что со временем все технологии воплощаются в жизнь и каждая технология будет применена я рад, надо только время.
                              0
                              Думаю, что с повсеместным развитием тач устройств, не имеет смысла так заморачиваться с hover, который там не работает. Уверен, на любом сайте есть гораздо более актуальные задачи, которые действительно порадуют посетителей.

                              Only users with full accounts can post comments. Log in, please.