Эффекты наклона при наведении


Оглавление (нажмите, чтобы открыть):

Эффект наклона для изображений на CSS

Оригинальный по своей анимации эффект при наведении курсора, который исполнен на чистом CSS, где присутствует красивый дизайн в формате 3D. Здесь мы предадим изображение такой анимационный эффект, который редко можно увидеть на простом софт портале. Он больше подходит на официальные сайты или где превалирует оригинальность. Так как это безусловно будет всеми замечено, ведь изначально видит одну картинку, которую расположили на страницы.

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

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

Так видим, где только наведенный клик, что начинается изгиб.

Здесь полностью завершенный эффект, и отчетливо замечаем надпись на форме в 3D.

Приступаем к установке:

.desacopgtu-kasebundes <
width: 738px; height: 397px; margin: 65px auto;
perspective: 1000px;
>
.desacopgtu-kasebundes a <
display: block; width: 100%; height: 100%;
background:
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url(«Ставим здесь ссылку для изображение»);
background-size: 0, cover;
transform-style: preserve-3d;
transition: all 0.6s;
>
.desacopgtu-kasebundes:hover a .desacopgtu-kasebundes a:after <
content: »; position: absolute; left: 0; bottom: 0;
width: 100%; height: 35px;
background: inherit; background-size: cover, cover;
background-position: bottom;
transform: rotateX(90deg); transform-origin: bottom;
>

.desacopgtu-kasebundes a span <
color: white; text-transform: uppercase;
position: absolute; top: 100%; left: 0; width: 100%;
font: bold 13px/37px Arial; text-align: center;

transform: rotateX(-89.99deg); transform-origin: top;
z-index: 1;
>

.desacopgtu-kasebundes a:before <
content: »; position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(14, 14, 14, 0.5);
box-shadow: 0 0 100px 48px rgba(14, 14, 14, 0.5);
transition: all 0.6s;

opacity: 0.16;
transform: rotateX(95deg) translateZ(-80px) scale(0.75);
transform-origin: bottom;
>
.desacopgtu-kasebundes:hover a:before <
opacity: 1;

box-shadow: 0 0 25px 25px rgba(14, 14, 14, 0.5);

transform: rotateX(0) translateZ(-60px) scale(0.85);
>

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

Девять простых примеров CSS3 анимации

CSS3 открывает неограниченные возможности перед UI-дизайнерами, и главный плюс состоит в том, что практически любую идею можно легко реализовать и воплотить в жизнь, не прибегая к использованию JavaScript.

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

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

Все эффекты работают с помощью свойства transition (англ. transition — «переход», «превращение») и псевдокласса :hover , который определяет стиль элемента при наведении на него курсора мыши (подробнее о псевдоклассах в нашем учебнике). Для наших примеров мы использовали блок div размером 500×309 пикселей, исходный цвет фона #6d6d6d и длительность перехода от одного состояния к другому 0,3 секунды.

1. Изменение цвета при наведении курсора

Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс :hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок:

2. Появление рамки

Интересная и яркая трансформация — внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс :hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px ) и её цвет:

3. Свинг

Данная CSS анимация — исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали:

  • @keyframes — базовую директиву для создания покадровой CSS-анимации, которая позволяет делать т. н. раскадровку и описывать анимацию в виде списка ключевых моментов;
  • animation и animation-iteration-count — свойства для задания параметров анимации (длительность и скорость) и количества циклов (повторов). В нашем случае повтор 1.

4. Затухание

Эффект плавного затухания — это, по сути, обычное изменение прозрачности элемента. Анимация создается в два этапа: сначала необходимо установить первоначальное состояние прозрачности 1 — то есть полная непрозрачность, после чего указать её значение при наведении мыши — 0.6 :

Для противоположного результата поменяйте значения местами:

5. Увеличение

Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2) . При этом блок увеличится на 20 процентов с сохранением своих пропорций:

6. Уменьшение

Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7) . Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера:

7. Трансформация в круг

Одна из часто используемых анимаций — прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS border-radius , использованного в паре с :hover и transition , это можно реализовать без проблем:

8. Вращение

Забавный вариант анимации — поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform , но уже с другим значением — rotateZ(20deg) . При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z:

9. 3D тень

Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта CSS3 анимация является весьма оригинальной и также используется на веб-страницах. Добиваться трехмерного эффекта будем с помощью уже знакомых нам свойств box-shadow (создаст многослойную тень) и transform с параметром translateX(-7px) (обеспечит сдвиг блока по горизонтали влево на 7 пикселей):

Поддержка браузерами

На сегодняшний день свойство transition поддерживается следующими браузерами:

Десктопные браузеры
Internet Explorer Поддерживается версией IE 10 и выше
Chrome Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit- )
Firefox Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz- )
Opera Поддерживается с версии 12.1
Safari Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit- )
Мобильные браузеры
iOS Safari & Chrome Поддерживается с версии 7.0 (в версиях 3.2-6.1 работает с префиксом -webkit- )
Opera Mobile Поддерживается с версии 12.1
Android Browser Поддерживается с версии 4.4 (в версиях 2.1-4.3 работает с префиксом -webkit- )
Chrome/Firefox для Android Поддерживается с версии 47/44
Internet Explorer Mobile Поддерживается версией IE Mobile 10 и выше
UC Browser для Android Поддерживается с префиксом -webkit-

Остальные свойства, использованные в данных примерах, такие как transform , box-shadow и т. д., также поддерживаются почти всеми современными браузерами. Однако, если вы собираетесь использовать эти идеи для своих проектов, настоятельно рекомендуем перепроверять кроссбраузерность.

Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!

CSS hover эффекты — для картинок, кнопок, при наведении на ссылки, блоки и др.

Очень часто на сайтах вы могли встречать изменение оформления ссылок или кнопок при наведении. Реализовать задачу позволяет специальный псевдокласс :hover в CSS. Сегодня рассмотрим некоторые приемы верстки позволяющие сделать эту фишку, а ниже опубликуем список наиболее интересных из них (с краткими описаниями/пояснениеми). Все варианты разделим на:

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

Hover эффект в CSS стилях добавляется справа от элемента следующим образом:

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

Современные браузеры одинаково корректно воспринимают CSS hover эффект при наведении, хотя в старых версиях IE 6 и ниже он срабатывает исключительно для линков. Плюс в некоторых источниках говорилось, что этому браузеру обязательно нужно указывать в коде .

Кстати, при задании стилей ссылок также дополнительно могут использоваться селекторы :link — для не посещенных еще страниц, :visited — тех, где вы уже были + :active определяет активный сейчас адрес. Важно размещать hover эффект в CSS после :link и :visited, если они существуют.

Перейдем от теории к практике. Ниже представлен список полезных материалов и сниппетов — переходите по ссылкам дабы просмотреть исходники.

Hover эффекты кнопок и ссылок

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

Простые примеры для кнопок

В данной статье приведены 8 базовых способов как можно оригинальным образом обыграть динамические hover эффект при наведении: добавление иконки, создания прозрачного фона, 3D преобразование, наклон и т.п. Все коды достаточно простые, вот один из них:

Мастер Йода рекомендует:  Создание приложения, работающего с XML-данными - 2

Необычный градиентный в кнопке

Здесь при наведении появляется яркий цветной градиент, который следует за передвижением курсора. В реализации используются CSS переменные, а также скрипт определения позиции мышки. Результат выглядит это достаточно оригинально. Описание метода ищите тут.

Sullivan Buttons

Фишка в том, что при наведении на разные кнопки кроме изменения цвета фона запускается также небольшая анимация с иконками (причем у каждой своя).


CSS Icons on Hover

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

Button Hover Effects

По сравнению с прошлым примером эти 12 функций срабатывания выглядят куда интереснее: как визуально, так и в плане кода. Не обошлось без JS.

Nav Hovers

Несколько фишек, которые позволяют сделать более необычные подчеркивания ссылок на CSS нежели с базовым свойством text-decoration. Фон кнопки дополнительно заполняется разными визуальными эффектами.

Info on Hover

Функциональность всплывающих подсказок сейчас поддерживается во всех браузерах, но вы можете доработать ее под свои нужды. В текущем примере срабатывание псевдокласса происходит для тега dfn, смотрится стильно. Код достаточно компактный HTML + CSS.

Mana Button

Один из самых оригинальных вариантов hover эффекта в блоках — при наведении выполняется словно заполнение его жидкостью. В реализации используется CSS, HTML и SVG. В определенной тематике сайтов данный сниппет однозначно будет находкой.

Hover эффекты для изображений

15 базовых приемов

Не смотря на то, что статья была опубликована достаточно давно методы корректно работают и сейчас. Здесь, наверное, собраны все возможные типовые преобразования для графики: несколько видов зума, повороты, размытие, ч/б, прозрачность, фильтры, сияние и др. Очень полезный материал.

Красивые hover эффекты изображений

Подборка из 30 приятных и плавных действий при наведении на картинку. За счет простых визуальных манипуляций в виде зума, добавления линий создается хороший комплексное впечатление. Местами увеличивается заголовок и «подтягивается» краткое описание. Отличный вариант для портфолио.

Barberpole Hover Animation

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

CSS hover эффекты с определением направления

Отличная подборка сниппетов и кодов по теме находится в статье с css-tricks.com. Все эти примеры объединяет тот факт, что в процессе работы определяется местоположение и направление движения курсора. Это, в свою очередь, позволяет создавать достаточно оригинальные реакции при наведении на элементы страницы:

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

Direction Aware Hover Goodness

Direction Aware Tiles using clip-path Pure CSS

Остальные фишки ищите в оригинальной статье.

Animatism

В этой разработке более 100 простых способов «анимации» изображений или объектов при наведении. С помощью данных функций сможете реализовать разное появление кнопок, заголовков, текстов, социальных иконок и т.п. Есть варианты с изменением отображения картинок, накладками полупрозрачного фона.

Caption Hover Effects

По ссылке находится 7 CSS3 hover эффектов заголовков — когда при наведении на изображение, пользователь увидит информационный блок с тайтлом, кратким описанием и ссылкой для перехода. Нельзя сказать, что примеры очень оригинальные, но они однозначно помогут разнообразить статичный контентный проект.

CSS Hover библиотеки

Hover.css

Проект под незамысловатым названием Hover.css содержит коллекцию CSS3 эффектов для ссылок, кнопок, блоков и т.п. Можете использовать готовый код и/или добавлять в него свои модификации. Здесь много интересного: 2D/3D преобразования, работа с фоном и рамками, тени, иконки. Решение доступно в CSS, LESS и Sass форматах.

Imagehover.css

Еще одна библиотека задающая hover эффекты картинкам — в бесплатной версии найдете 44 варианта преобразований (премиальный набор содержит их в 5 раз больше). Тут также поддерживаются LESS и SCSS, весит это дело лишь 19кб. На сайте имеется страница с демонстрацией всех работающих примеров. Предлагается много уникальных фишек, которые не встречались выше.

iHover

В проекте iHover более 30 разных приемов для круглых и квадратных по формату объектов. Все они достаточно оригинальные, простых «одноэлементных» действий в виде обычного зума/вылетания практически нет. Реализована задача на чистом CSS3 + HTML (плюс Scss файлы включены). Отличная совместимость с Bootstrap 3, есть документация.

Итого. Надеемся эти css hover эффекты при наведении на картинки, блоки, ссылки и другие элементы страницы помогли вам разобраться в данной теме. Самые удачные, на ваш, взгляд решения можете внедрить в своих сайтах — будь то подключение полноценной библиотеки или просто интеграция небольшого варианта кода.

Если знаете еще какие-то интересные фишки и сниппеты, присылайте URL’ы на них в комментариях. И мы в будущем дополним статью.

Простые hover-эффекты для изображений при помощи CSS

19 декабря 2012 | Опубликовано в css | 15 Комментариев »

Hover-эффекты — достаточно интересная тема для изучения. Ведь их применение может сделать ваш сайт более динамичным и живым. Сегодня мы рассмотрим некоторые эффекты для работы с изображениями. Каждый пример имеет HTML и CSS коды, которые вы можете увидеть в действии.

Посмотрите на демо ниже, чтобы увидеть все hover-эффекты, которые будут рассматриваться в этом уроке.

Установка

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

Большинство это основные вещи: box-sizing позволяет управлять моделями (не стесняйтесь применять более точные настройки, если вам не нравится универсальный селектор). Класс pic дает нам место, чтобы применять некоторые основные стили для каждой фотографии.

Масштабирование и панорамирование

Первая группа эффектов включает в себя использование некоторых приемов с hidden overflow.

Увеличение

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

Вот HTML-код:

Обратите внимание, что изображение, которое было использовано в примере имеет размеры 400px на 400px. Теперь давайте посмотрим CSS.

Мы вначале устанавливаем размер изображения зооpx на 300px, а затем, когда пользователь наводит на него курсор, увеличиваем к 400px. Поскольку у нас overflow — hidden, это позволит нам получить эффект масштабирования.

Сжатие

В прошлом примере, мы посмотрели, как изображение при наведении курсора мыши увеличивается. Рассмотрим обратный эффект. Этот метод в целом точно такой же, только на этот раз вы начнете с размеров в 400px и при наведении курсора уменьшите их на 300 пикселей.

HTML

CSS

Боковое панорамирование

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

HTML

Здесь мы используем изображение шириной 600px и высотой только 300px — мы изменяем горизонтальное положение фотографии и нам не нужно применять эффекты к высоте.

CSS

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

Вертикальное панорамирование


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

HTML

CSS

Код практически такой же, как и в прошлый раз, только теперь вместо margin-left мы используем margin-top.

Трансформация

Следующие эффекты более динамичны.

Наклон

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

HTML

CSS

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

Скругление углов

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

HTML

CSS

Здесь установлен класс morph, который начинает вращаться на 360 градусов при наведении курсора мыши на него, а border-radius будет постепенно изменяться до 50%, в результате чего превратится в круг.

Фокус

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

HTML

CSS

Мы взяли border 10px и превратил его в 70px черную рамку при проворачивании радиусе до 50%, как мы это делали в предыдущем примере.

Webkit-фильтры

В отличие от приведенных выше примеров, каждый из которых использует несколько префиксов, чтобы обеспечить максимальную совместимость браузера, следующие примеры используют только префикс WebKit. Данные примеры работают только в Safari и Chrome. Несмотря на ограничения, Webkit-фильтры позволяют выполнять некоторые довольно удивительные эффекты! Демо

Размытие

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

HTML

CSS

Как вы видите, мы используем -webkit-filter , а затем устанавливаем размытие blur 5px.

B&W

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

HTML

CSS

Здесь для grayscale было установлено значение 100%.

Яркость

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

HTML

CSS

По материалам Joshua Johnson.

Перевод — Дежурка.

Возможно, вас также заинтересуют следующие статьи:

13 jquery плагинов hover эффектов

Сегодня опять будем говорить о эффектах при наведении на изображение. Это довольно актуальная тема, так как данные плагины очень востребованы. Они придают динамику сайту и просто делают страничку интересней для посетителей. Не так давно я уже публиковал пост с коллекцией похожих Jquery плагинов, но их так много, что одним постом не отделаться. В будущем будет еще очень много статей по этой теме, так как прогресс не стоит на месте и практически каждый день разработчики создают плагины hover эффектов.
Итак. К вашему вниманию сборник плагинов эффектов при наведении на изображение Jquery.

IPICTURE (Бесплатно)

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

Magnifying glass for image zoom (Бесплатно)

Плагин позволяет сделать эффект увеличительного стекла.

ADIPOLI (Бесплатно)

Когда-то я этот плагин долго искал и не нашел. Сейчас же, когда он уже не нужен, попался. Закон подлости.
Jquery плагин имеет в своем арсенале ряд эффектов таких как: Перевод цветного изображения в черно-белое, zoom эффект при наведении и ряд анимированных эффектов.

Swish (Бесплатно)

Интересный Jquery плагин, который позволяет увеличивать картинку при наведении мышкой (zoom эффект).

JSQUARES (Бесплатно)

Плагин позволяет выводить скрытый текст при наведении на изображение. На вид он не очень красив, но работает как часики в старых браузерах (IE6 +, FF 3 +, Safari 3 + и Opera 10). Это не опечатка. В IE6 он тоже работает.

Быстрая смена изображения при наведении

С помощью этого плагина можно сделать быструю смену изображений при наведении курсором. Плагин поможет добавить динамики вашему сайту.

Плагин Jquery «Спойлер с рамытием»

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

Мастер Йода рекомендует:  Руководство для новичков по массивам PHP
Image Color Up

Плагин Jquery, который позволяет менять цветовой тон изображения при наведении на него.

HOVERIZR (Бесплатно)

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

ZALKI (7$)

Крутейший кроссбраузерный плагин Jquery для создания анимированных эффектов при наведении на изображение. Содержит 30 вариантов анимаций. Плагин поддерживает даже IE7, который, как мы знаем, не поддерживает прозрачность. Плагин умеет автоматически подстраиваться под различные размеры изображений, даже если они находятся на одной странице.


HOVEREX (8$)

Отличный плагин Jquery с поддержкой 36-ти вариантов анимации. Идеален для организации фотогалереи или портфолио.

Social Image Hover for jQuery (8$)

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

jQuery Hover Cards (5$)

Простенький и легкий плагин Jquery, но с изюминкой.

Оригинальные эффекты при наведении курсора мыши на объекты

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

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

Разметка HTML

Структура разметки весьма проста и интуитивна. Создаем контейнер, который будет содержать изображение и всю остальную информацию.

Внутри элемента view содержится элемент с классом mask , который реализует наш эффект с использованием CSS3. В элементе с классом mask содержится заголовок, описание и ссылка (Для некоторых примеров элемент с классом mask используется отдельно, а содержание помещается в контейнер с классом content ).

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

А теперь представим 10 эффектов. Открывайте демонстрационную страницу в отдельном окне или вкладке, смотрите и изучайте код.

Пример 1

Добавляем специальный класс view-first к элементу с классом view для данного эффекта. Специальный класс будет добавляться в каждом примере к элементу с классом view (view-first, view-second, view-third, и так далее).

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

А теперь перейдем к основе нашего эффекта. Когда курсор мыши проходит над изображением мы используем задержку для имитации простой анимации. Свойство transition-delay , которое используется в псевдо-классах hover , может вносить изменения для отличия от обычного класса. В данном примере мы не используем задержки в обычном классе, но в псевдо-классах hover запуск переходов немного задерживается. Когда курсор мыши покидает объект, будет использоваться значение по умолчанию 0s, и «восстановление» произойдет быстро.

Пример 2

Во втором примере мы добавляем специальный класс view-second , но элемент с классом mask будет пустым, а содержание будет помещено в элемент с классом content .

Здесь класс mask имеет другие атрибуты для построения эффекта. Мы собираемся использовать свойства трансформации ( translate и rotate ):

Для нашего эффекта будет использоваться трансформация translate для перемещения элементов на место. А маска будет также вращаться. Элементы описания будут появляться с небольшой задержкой друг за другом.

Пример 3

В третьем примере мы будем использовать трансформации translate и rotate для вывода наших элементов описания:

Достаточно простые инструкции для получения эффекта.

Пример 4

В четвертом примере будет использоваться простое масштабирование изображения и содержания с использованием трансформации scale . Для изображения будет установлена задержка 0.2s в стилях, но при наведении курсора задержка будет 0s. Поэтому при наведении курсора мыши эффект проявится немедленно, а при убирании курсора мыши будет задержка.

Простые инструкции для получения эффекта. CSS3 может все.

Пример 5

В пятом примере содержание будет выскальзывать слева благодаря использованию свойства translate в сочетании с функцией перехода ease-in-out .

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

Пример 6

В данном примере мы содержание будет «падать» с переднего плана, уменьшая масштаб от 10 до 1 (нормального размера). А кнопка будет выскальзывать снизу.

Обратная трансформация также выполняется плавно:

Пример 7

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

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

Пример 8

В данном примере создается эффект отскока при опускании элементов описания сверху.

Мы добавляем анимацию к элементу mask и определяем задержи для элеменетов описания:

Для создания эффекта отскока используется функция translateY и несколько фреймов:

Пример 9

В данном примере мы используем два элемента маски для создания эффекта закрывающихся штор:

Две маски имеют различные параметры для трансформаций. Также они выравнены по-разному.

Содержание стилизовано так, что выглядит появляющимся из тонкой линии соприкосновения масок:

При наведении курсора мыши появляется содержание из границы соприкосновения масок:

Для масок используется свойство transition-delay , поэтому при наведении курсора мыши трансформации начинаются немедленно. Но обратная трансформация осуществляется с задержкой, чтобы содержание успело свернуться.

Пример 10

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

При наведении курсора просто изменяется масштаб изображения и прозрачность:

Заключение

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/
Перевел: Сергей Фастунов
Урок создан: 15 Декабря 2011
Просмотров: 95663
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица


Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Потрясающие эффекты CSS3 при наведении

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

Пример можно увидеть здесь:

Посмотреть примерСкачать

Потрясающие эффекты CSS3 при наведении курсора

В демо есть 7 примеров с разными эффектами. Будем рассматривать их по порядку.

Пример 1

HTML часть

Структура HTML в данном случае выглядит следующим образом:

CSS часть

А эффект — это появление внутреннего круга с текстом и прозрачным фоном. Для него будут следующие стили:

Пример 2

HTML часть

Структура HTML точно такая же как и в первом примере.

CSS часть

А вот CSS отличается, так как здесь другой эффект(круг закрашивается снаружи), также используем другие изображения:

Пример 3

HTML часть

В данном случае структура несколько иная, потому что у нас есть две части формы: та что мы видим изначально, и та, которая показывается при наведении:

CSS часть

Эффект здесь также интересный: изображение как бы прибито гвоздиком, и при наведении съезжает вниз одна часть:

Пример 4

HTML часть

Как и в предыдущем примере здесь есть две части формы: видимая и невидимая. Поэтому HTML структура очень похожа:

CSS часть

Очень красивый эффект поворота внутренней части:

Пример 5

HTML часть

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

CSS часть

Суть эффекта состоит в следующем: внутренний круг уменьшается и заменяется содержимым с текстом:

Пример 6

HTML часть

В HTML всё точно также, как и в прошлых двух примерах, поэтому ничего не меняем.

CSS часть

При наведении на данный блок, видимая часть смещается вниз и мы видим текст, который находится за видимой частью:

Пример 7

HTML часть

Здесь опять же ничего не меняем, оставляем как в прошлом примере.

CSS часть

В этом примере используется 3D преобразование и смотрится оно очень красиво:

Вывод

Мы рассмотрели 7 очень красивых и оригинальных эффектов, которые можно использовать на своём сайте. Я очень редко встречаю подобные вещи на сайтах. Они придадут вашему сайту оригинальность и неповторимость, но только не переборщите с ними, чтобы все эти преобразования не мешали посетителям просматривать ваш сайт.

Бесплатная подборка из 40 эффектов CSS

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

1. Часы CSS3 с jQuery

Эти часы созданы с использованием одного из основных инструментов CSS3 – rotate и с подключением библиотеки JQuery.

2. Аналоговые часы CSS

Более классические, аналоговые часы. Они созданы с помощью webkit transition и свойства transform CSS. А вот для того, чтобы время соответствовало текущему, понадобиться JavaScript.

3. Вращающийся 3D-куб

Вращение и перемещение по сторонам куба будет производиться стандартными клавишами «вверх», «вниз», «влево» и «вправо». Сама 3D-фигура построена с использованием webkit-perspective, -webkit-transform и -webkit-transition.

4. Несколько выдвигающихся 3D-кубов

Здесь представлено уже несколько 3D-кубов, использующих CSS3 и непосредственно свойства transform и transition. Наведение курсора на куб заставляет его отъехать в сторону, открывая текст, который находиться на другой стороне фигуры.

5. Accordion меню

Эффект «меню-гармошки» на чистом CSS, где клик по каждой из строк открывает дополнительное окно в теле самого списка. Собственная анимация в браузерах на базе WebKit.

6. Параллакс-скроллинг на CSS

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

7. Матрица

Культовый фильм «Матрица» — одна из лучших фантастических кинокартин. На примере показано, как воссоздать примерно такую же удивительную анимацию (черный экран с бегущими цифрами) в CSS3.


8. Динамичные Палароиды

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

9. Масштабирование изображений

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

10. Эффекты JavaScript на CSS3

В качестве альтернативы JavaScript, в посте предложено семь эффектов на CSS3: различные блоки, которые вращаются, исчезают, выезжают, увеличиваются и т.д.

11. Виртуальные пластинки DJ Hero

В посте рассказывается, как создать крутящиеся пластинки. Скорость вращения можно регулировать прямо на экране.

12. Скользящий винил

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

13. Эффекты при наведении на картинку

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

14. Вращающийся треугольник

При нажатии на треугольник, он начинает вращаться.

Мастер Йода рекомендует:  Обзор Joker 2020 хардкор, который хочется посетить ещё

15. Космос

Целое космическое пространство, умещенное в CSS. Выступает примером наложения вращающихся слоев (более заметно при уменьшении масштаба изображения в браузере).

16. «Менины» в 3D

Интересный эффект CSS, с помощью которого известная картина Диего Веласкеса «Менины» начинает казаться трехмерной.

17. CSS для Mac OS Х

В нижней части экрана представлен набор основных иконок Mac OS Х, которые при наведении увеличиваются. Эффект придает динамики сайту.

18. Drop-In Modals

CSS3 эффекты и свойств Drop-In Modals помогут в создании быстрого, анимированного и простого изменения модальных окон.

19. Анимирование объектов

Трансформация изменяет внешний вид элемента в браузере. Показано на примере ракеты, которая «летит» из одного конца экрана в другой. Могут использоваться инструменты перемещения, вращения и т.д.

20. Цветные часы

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

21. Гелерея Lightbox на jQuery и CSS3

Это замечательная галерея, которая позволяет сортировать и раскладывать изображения в выборочном порядке. Для интерактивности галерея использует JQuery, JQuery UI и JQuery плагин FancyBox. Lightbox поддерживает название и описание картинок, группирует их и автоматически выстраивает слайды в ряд.

22. «Эластичные» превью

Увеличение превью изображений при наведении. Таким образом при клике меню пропорционально увеличивается.

23. Динамичные карточки

Этот пример представляет собой динамический набор карточек с использованием функций HTML и CSS3.

24. Выдвижное JQuery меню

Выдвижное меню из примера создано комбинацией CSS3 и JQuery. При наведении на картинку появляется всплывающее окно с текстом.

25. Табы CSS

В примере наведение курсора мыши на заголовки табов сопровождается сменой приведенного ниже списка.

26. Fisheye меню

На примере продемонстрировано, как с помощью анимации CSS и SVG создать Fisheye меню. В качестве дополнительного бонуса используется демо-SVG в тэге IMG.

27. Выпадающее меню

Такой тип обеспечивает очень удобную навигацию по основному меню, благодаря использованию переходов CSS3.

28. Титры из «Звездных войн»

Знаменитые титры из «Звездных войн». Для их запуска будет достаточно HTML и CSS.

29. Еще эффекты Fisheye на CSS

Опять таки, увеличивающиеся при наведении значки.

30. Анимация по типу «кадр за кадром»

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

31. Имперский шагоход AT-AT

И снова «Звездные войны» — этот движущийся шагоход AT-AT сделан с помощью CSS3.

32. Еще одна «гармошка» CSS

При клике на строку, таблица раскладывается.

33. Простое выдвижное меню

При наведении секции меняют цвет и выдвигаются.

34. Магические анимационные эффекты в CSS

Показательная подборка разнообразных формаций эффектов. Достаточно кликнуть по клавишам «magic», «swap» и т.д. для демонстрации эффекта.

35. Меню из закладок

36. Прогресс бар

Анимационный прогресс бар на CSS.

37. Салют CSS

В примере показано, как создать салют из кругов на JQuery и CSS.

38. Включатель/выключатель

На примере показано, каким образом можно создать анимированную кнопку on/off с помощью CSS.


39. Цветная загрузка

Пример оригинальной разноцветной анимации загрузки на CSS.

40. Выпадающее меню
Еще один вариант простого и симпатичного выпадающего меню на CSS.

Девять простых примеров CSS3 анимации

CSS3 открывает неограниченные возможности перед UI-дизайнерами, и главный плюс состоит в том, что практически любую идею можно легко реализовать и воплотить в жизнь, не прибегая к использованию JavaScript.

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

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

Все эффекты работают с помощью свойства transition (англ. transition — «переход», «превращение») и псевдокласса :hover , который определяет стиль элемента при наведении на него курсора мыши (подробнее о псевдоклассах в нашем учебнике). Для наших примеров мы использовали блок div размером 500×309 пикселей, исходный цвет фона #6d6d6d и длительность перехода от одного состояния к другому 0,3 секунды.

1. Изменение цвета при наведении курсора

Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс :hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок:

2. Появление рамки

Интересная и яркая трансформация — внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс :hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px ) и её цвет:

3. Свинг

Данная CSS анимация — исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали:

  • @keyframes — базовую директиву для создания покадровой CSS-анимации, которая позволяет делать т. н. раскадровку и описывать анимацию в виде списка ключевых моментов;
  • animation и animation-iteration-count — свойства для задания параметров анимации (длительность и скорость) и количества циклов (повторов). В нашем случае повтор 1.

4. Затухание

Эффект плавного затухания — это, по сути, обычное изменение прозрачности элемента. Анимация создается в два этапа: сначала необходимо установить первоначальное состояние прозрачности 1 — то есть полная непрозрачность, после чего указать её значение при наведении мыши — 0.6 :

Для противоположного результата поменяйте значения местами:

5. Увеличение

Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2) . При этом блок увеличится на 20 процентов с сохранением своих пропорций:

6. Уменьшение

Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7) . Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера:

7. Трансформация в круг

Одна из часто используемых анимаций — прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS border-radius , использованного в паре с :hover и transition , это можно реализовать без проблем:

8. Вращение

Забавный вариант анимации — поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform , но уже с другим значением — rotateZ(20deg) . При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z:

9. 3D тень

Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта CSS3 анимация является весьма оригинальной и также используется на веб-страницах. Добиваться трехмерного эффекта будем с помощью уже знакомых нам свойств box-shadow (создаст многослойную тень) и transform с параметром translateX(-7px) (обеспечит сдвиг блока по горизонтали влево на 7 пикселей):

Поддержка браузерами

На сегодняшний день свойство transition поддерживается следующими браузерами:

Десктопные браузеры
Internet Explorer Поддерживается версией IE 10 и выше
Chrome Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit- )
Firefox Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz- )
Opera Поддерживается с версии 12.1
Safari Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit- )
Мобильные браузеры
iOS Safari & Chrome Поддерживается с версии 7.0 (в версиях 3.2-6.1 работает с префиксом -webkit- )
Opera Mobile Поддерживается с версии 12.1
Android Browser Поддерживается с версии 4.4 (в версиях 2.1-4.3 работает с префиксом -webkit- )
Chrome/Firefox для Android Поддерживается с версии 47/44
Internet Explorer Mobile Поддерживается версией IE Mobile 10 и выше
UC Browser для Android Поддерживается с префиксом -webkit-

Остальные свойства, использованные в данных примерах, такие как transform , box-shadow и т. д., также поддерживаются почти всеми современными браузерами. Однако, если вы собираетесь использовать эти идеи для своих проектов, настоятельно рекомендуем перепроверять кроссбраузерность.

Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!

13 jquery плагинов hover эффектов

Сегодня опять будем говорить о эффектах при наведении на изображение. Это довольно актуальная тема, так как данные плагины очень востребованы. Они придают динамику сайту и просто делают страничку интересней для посетителей. Не так давно я уже публиковал пост с коллекцией похожих Jquery плагинов, но их так много, что одним постом не отделаться. В будущем будет еще очень много статей по этой теме, так как прогресс не стоит на месте и практически каждый день разработчики создают плагины hover эффектов.
Итак. К вашему вниманию сборник плагинов эффектов при наведении на изображение Jquery.

IPICTURE (Бесплатно)

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

Magnifying glass for image zoom (Бесплатно)

Плагин позволяет сделать эффект увеличительного стекла.

ADIPOLI (Бесплатно)

Когда-то я этот плагин долго искал и не нашел. Сейчас же, когда он уже не нужен, попался. Закон подлости.
Jquery плагин имеет в своем арсенале ряд эффектов таких как: Перевод цветного изображения в черно-белое, zoom эффект при наведении и ряд анимированных эффектов.

Swish (Бесплатно)

Интересный Jquery плагин, который позволяет увеличивать картинку при наведении мышкой (zoom эффект).

JSQUARES (Бесплатно)

Плагин позволяет выводить скрытый текст при наведении на изображение. На вид он не очень красив, но работает как часики в старых браузерах (IE6 +, FF 3 +, Safari 3 + и Opera 10). Это не опечатка. В IE6 он тоже работает.

Быстрая смена изображения при наведении

С помощью этого плагина можно сделать быструю смену изображений при наведении курсором. Плагин поможет добавить динамики вашему сайту.

Плагин Jquery «Спойлер с рамытием»

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

Image Color Up

Плагин Jquery, который позволяет менять цветовой тон изображения при наведении на него.

HOVERIZR (Бесплатно)

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

ZALKI (7$)

Крутейший кроссбраузерный плагин Jquery для создания анимированных эффектов при наведении на изображение. Содержит 30 вариантов анимаций. Плагин поддерживает даже IE7, который, как мы знаем, не поддерживает прозрачность. Плагин умеет автоматически подстраиваться под различные размеры изображений, даже если они находятся на одной странице.

HOVEREX (8$)

Отличный плагин Jquery с поддержкой 36-ти вариантов анимации. Идеален для организации фотогалереи или портфолио.

Social Image Hover for jQuery (8$)

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

jQuery Hover Cards (5$)

Простенький и легкий плагин Jquery, но с изюминкой.

Добавить комментарий