20 сайтов с креативным MouseOver эффектом


Содержание

20 сайтов с креативным MouseOver эффектом

Mouseover- эффект (он же — эффект одновременного нажатия клавиш или rollovers). Эффект проявляется при наведении курсора на изображение.

Для создания Mouseover- эффекта щелкните по кнопке Insert Rollover на панели вставок (правая панель). Ниже — пример создания кнопки с Mouseover- эффектом.

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

Изображениям можно назначить ссылку.

Пример Mouseover- эффекта и ссылки — выше. Из созданных таким образом кнопок можно составить панель навигации.

Для создания всплывающего изображения применяется так называемый pop- up rollovers .

В данном случае одно изображение сменяет другое, но первоначальное и вторичное изображение (то, которое появляется при наведении курсора) — это одно изображение, но разного масштаба.

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

Пример pop- up rollovers — слева.

Для создания pop- up rollovers щелкните по кнопке на панели вставок

или выберите Web Object из меню Insert и выберите Pop- Up Rollover

В окне настроек выберите изображение для создания эффекта.

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

Чтобы отличить первичное изображение от вторичного, используйте кнопку Set Rollover Position — Normal Selection/ Over Selection.

Caption Selection — Выбор Заголовка. Текст заголовка может принять различные признаки, такие как шрифт, полужирный / курсив, размер, цвет.

Движение мыши: mouseover/out, mouseenter/leave

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

События mouseover/mouseout, relatedTarget

Событие mouseover происходит в момент, когда курсор оказывается над элементом, а событие mouseout – в момент, когда курсор уходит с элемента.

Эти события являются особенными, потому что у них имеется свойство relatedTarget . Оно «дополняет» target . Когда мышь переходит с одного элемента на другой, то один из них будет target , а другой relatedTarget .

Для события mouseover :

  • event.target – это элемент, на который курсор перешёл.
  • event.relatedTarget – это элемент, с которого курсор ушёл ( relatedTarget → target ).

Для события mouseout наоборот:

  • event.target – это элемент, с которого курсор ушёл.
  • event.relatedTarget – это элемент, на который курсор перешёл ( target → relatedTarget ).

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

Каждое из них содержит информацию о target и relatedTarget :

Свойство relatedTarget может быть null .

Это нормально и означает, что указатель мыши перешёл не с другого элемента, а из-за пределов окна браузера. Или же, наоборот, ушёл за пределы окна.

Следует держать в уме такую возможность при использовании event.relatedTarget в своём коде. Если, например, написать event.relatedTarget.tagName , то при отсутствии event.relatedTarget будет ошибка.

Пропуск элементов

Событие mousemove происходит при движении мыши. Однако, это не означает, что указанное событие генерируется при прохождении каждого пикселя.

Браузер периодически проверяет позицию курсора и, заметив изменения, генерирует события mousemove .

Это означает, что если пользователь двигает мышкой очень быстро, то некоторые DOM-элементы могут быть пропущены:

Если курсор мыши передвинуть очень быстро с элемента #FROM на элемент #TO , как это показано выше, то лежащие между ними элементы

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

С другой стороны, мы должны иметь в виду, что указатель мыши не «посещает» все элементы на своём пути. Он может и «прыгать».

В частности, возможно, что указатель запрыгнет в середину страницы из-за пределов окна браузера. В этом случае значение relatedTarget будет null , так как курсор пришёл «из ниоткуда»:

Вы можете проверить это «вживую» на тестовом стенде ниже.

В его HTML есть два элемента,

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

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

Если указатель «официально» зашёл на элемент, то есть было событие mouseover , то при выходе с него обязательно будет mouseout .

Событие mouseout при переходе на потомка

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

То есть, визуально указатель всё ещё на элементе, но мы получим mouseout !

Это выглядит странно, но легко объясняется.

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

Таким образом, если курсор переходит на другой элемент (пусть даже дочерний), то он покидает предыдущий.

Обратите внимание на важную деталь.

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

Вы можете наглядно увидеть это в примере ниже:

При переходе мышью с внешнего элемента на внутренний, вы увидите сразу два события: mouseout [target: parent] (ушли с родителя) и mouseover [target: child] (перешли на потомка, событие всплыло).

При переходе с родителя элемента на потомка – на родителе сработают два обработчика: и mouseout и mouseover :

Если код внутри обработчиков не смотрит на target , то он подумает, что мышь ушла с элемента parent и вернулась на него обратно. Но это не так! Мышь никуда не уходила, она просто перешла на потомка.

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

Чтобы этого избежать, можно смотреть на relatedTarget и, если мышь всё ещё внутри элемента, то игнорировать такие события.

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

События mouseenter и mouseleave

События mouseenter/mouseleave похожи на mouseover/mouseout . Они тоже генерируются, когда курсор мыши переходит на элемент или покидает его.

Но есть и пара важных отличий:

  1. Переходы внутри элемента, на его потомки и с них, не считаются.
  2. События mouseenter/mouseleave не всплывают.

События mouseenter/mouseleave предельно просты и понятны.

Когда указатель появляется над элементом – генерируется mouseenter , причём не имеет значения, где именно указатель: на самом элементе или на его потомке.

Событие mouseleave происходит, когда курсор покидает элемент.

Вот тот же пример, что и выше, но на этот раз на верхнем элементе стоят обработчики mouseenter/mouseleave вместо mouseover/mouseout .

Как вы сами можете увидеть, генерируются только события, связанные с движением курсора относительно верхнего

Делегирование событий

События mouseenter/leave просты и легки в использовании. Но они не всплывают. Таким образом, мы не можем их делегировать.

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

Очевидное решение – определить обработчик на родительском элементе

и там обрабатывать возникающие события. Но, так как mouseenter/leave не всплывают, то если событие происходит на ячейке
, то только обработчик на может поймать его.

Обработчики событий mouseenter/leave на

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

Что ж, не проблема – будем использовать mouseover/mouseout .

Начнём с простых обработчиков, которые выделяют текущий элемент под указателем мыши:

Вот они в действии. При переходе между элементами этой таблицы, текущий будет подсвечен:

В нашем случае мы хотим обрабатывать переходы именно между ячейками

: вход на ячейку и выход с неё. Прочие переходы, в частности, внутри ячейки или вообще вне любых ячеек, нас не интересуют, хорошо бы их отфильтровать.

Можно достичь этого так:

  • Запоминать текущую ячейку
в переменную, которую назовём currentElem .
  • На mouseover – игнорировать событие, если мы всё ещё внутри той же самой ячейки
  • .
  • На mouseout – игнорировать событие, если это не уход с текущей ячейки
  • .

    Вот пример кода, учитывающего все ситуации:

    Полный пример со всеми деталями:

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

    .

    Итого

    Мы рассмотрели события mouseover , mouseout , mousemove , mouseenter и mouseleave .


    Особенности, на которые стоит обратить внимание:

    • При быстром движении мыши события не будут возникать на промежуточных элементах.
    • События mouseover/out и mouseenter/leave имеют дополнительное свойство: relatedTarget . Оно дополняет свойство target и содержит ссылку на элемент, с/на который мы переходим.

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

    События mouseenter/leave в этом отличаются. Они генерируются, когда курсор переходит на элемент в целом или уходит с него. Также они не всплывают.

    Задачи

    Улучшенная подсказка

    Напишите JavaScript код, который показывает подсказку над элементом с атрибутом data-tooltip . Значение атрибута должно становиться текстом подсказки.

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

    Только одна подсказка может быть показана в любой момент времени.

    Результат в iframe:

    «Умная» подсказка

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

    Другими словами, если пользователь подвинул курсор на элементе и остановился – показывать подсказку. А если он просто быстро провёл курсором по элементу, то не надо ничего показывать. Кому понравится лишнее мелькание?

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

    Создайте для этого универсальный объект new HoverIntent(options) .

    Его настройки options :

    • elem – отслеживаемый элемент.
    • over – функция, вызываемая, при заходе на элемент, считаем что заход – это когда курсор медленно двигается или остановился над элементом.
    • out – функция, вызываемая при уходе курсора с элемента (если был заход).

    Пример использования такого объекта для показа подсказки:

    Если двигать кусор над «часами» быстро, то ничего не произойдёт, а если вы замедлите движение курсора над элементом или остановите его, то будет показана подсказка.

    Обратите внимание: подсказка не должна пропадать (мигать), когда курсор переходит между дочерними элементами часов.

    Алгоритм выглядит просто:

    1. Назначаем обработчики onmouseover/out на элементе. Также можно было бы использовать onmouseenter/leave , но они менее универсальны и не сработают с делегированием.
    2. Когда курсор переходит на элемент, начинаем измерять скорость его движения, используя mousemove .
    3. Если скорость низкая, то вызываем over .
    4. Когда мы выходим из элемента, если запускали over , вызываем out .

    Но как измерить скорость?

    Первая идея может быть такой: запускать нашу функцию каждые 100ms и находить разницу между прежними и текущими координатами курсора. Если она мала, то значит и скорость низкая.

    К сожалению, в JavaScript нет возможности получать текущие координаты мыши. Не существует функции типа получитьТекущиеКоординатыМыши() .

    Единственный путь – это слушать события мыши, например mousemove , и координаты брать из объекта события.

    Так что поставим обработчик на mousemove , чтобы отслеживать координаты и запоминать их. И будем сравнивать результаты каждые 100ms .

    33 CSS3 эффекта при наведении, о которых вы должны знать

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

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

    1. 10 Stylish Hover Effects

    Как следует из названия, это коллекция из 10 невероятно стильных эффектов наведения.

    2. Direction-aware Hover Effect

    Когда вы наводите указатель мыши на различные элементы, CSS hover эффект при наведении следует за курсором и создает удивительные 3D презентации.

    3. Wacom Hover Effect

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

    4. CSS3 Hover Effects

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

    5. Hover Animation from UNIQLO

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

    6. Button Hover Effects

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

    7. 10 Stunning Hover Effects

    Еще один набор из 10 hover эффектов CSS для кнопок. Большинство из них довольно впечатляющие.

    8. CSS3 Hover Effects 2

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

    9. Bounce on Hover

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

    10. 8-bit Hovers

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

    11. Simple Title Hover Effect

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

    12. Flip Down Effect

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

    13. Curiosity Award

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

    14. Image Hover Effect

    Это невероятный CSS hover эффект рамки для изображений. Способ, с помощью которого одно изображение проявляется на фоне другого, невероятен!

    15. Hover Animation

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

    16. Hover Me Brother

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

    17. Nautilus SCSS HAML Hover Effects

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

    18. SVG Border Hover Effect 1

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

    19. Hover Search Map Icon

    Вам нужен CSS hover эффект при наведении для панели поиска или иконки карты? Это именно он. Его бесшовные преобразования — сплошное удовольствие для глаз.

    20. Social Icon Pane

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

    21. Product Item Additions Info

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

    22. Animated Envelope

    Идеальный CSS hover эффект при наведении для раздела « Связаться с нами «. Он отображает контактную информацию в раскрывающемся конверте, но только после того, как пользователь наведет курсор мыши на изображение.

    23. Back to Top

    Этот уникальный эффект наведения для кнопки « Вверх » позволяет предоставить посетителям красивый, анимированный указатель.

    24. Fancy Hover

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

    25. Reminders Icon Hover Effect

    Этот hover эффект CSS добавляет к изображению красивые стили.

    26. Circle Image Hover

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

    27. Safari Icon Hover Effect

    Этот CSS hover эффект при наведении воссоздает анимацию иконок Safari . Вы можете заменить значок собственным изображением или логотипом.


    28. Simple Button Hover

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

    29. 3D Photo Effect Fold

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

    30. 3D Thumb Image Hover Effect

    Это поистине уникальный CSS hover эффект рамки. При наведении курсора мыши он « кладет изображение на землю «.

    31. Background Change CSS

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

    32. Direction Aware Hover

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

    33. SVG Hover Animation

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

    Заключение

    Что вы думаете об описанных мною hover эффектах CSS ? Какие из них понравились вам больше всего? Напишите об этом в комментариях.

    Данная публикация представляет собой перевод статьи « 30+ CSS3 Hover Effects You should be Familiar With » , подготовленной дружной командой проекта Интернет-технологии.ру

    jQuery метод .mouseover()

    Определение и применение

    jQuery метод .mouseover() привязывает JavaScript обработчик событий «mouseover» (срабатывает, когда указатель мыши входит в элемент), или запускает это событие на выбранный элемент.

    Обращаю Ваше внимание, что в отличие от события «mouseover», событие «mouseenter» срабатывает только тогда, когда указатель мыши входит в выбранный элемент. Событие «mouseover» срабатывает даже тогда, когда указатель мыши переходит с родительского элемента на дочерний (вложенный) и с дочернего элемента обратно на родительский не смотря на то, что указатель в этот момент не покидал пределы родительского элемента (event bubbling).

    jQuery синтаксис:

    Обращаю Ваше внимание, что метод .mouseover(), используемый вместе с функцией, переданной в качестве параметра (handler) является, короткой записью метода .on(), а без параметра является короткой записью метода .trigger():

    Добавлен в версии jQuery

    Значения параметров

    Параметр Описание
    eventData Объект, содержащий данные, которые будут переданы в обработчик событий.
    handler Функция, которая будет выполнена каждый раз, когда событие срабатывает. Функция в качестве параметра может принимать объект Event .

    Пример использования

    В этом примере с использованием jQuery метода .mouseover() мы при нажатии на элемент (кнопка) вызываем событие «mouseover» на элементе

    Результат нашего примера:

    Пример использования jQuery метода .mouseover() (без параметров и с функцией)

    Рассмотрим следующий пример в котором сравним разницу в срабатывании событий «mouseenter» и «mouseover»:

    В этом примере для демонстрации отличий между событиями «mouseenter» и «mouseover» мы создали два отдельних родительских блока, содержащих в себе дочерние блоки. Обратите внимание, что событие «mouseover» срабатывает даже тогда, когда указатель мыши переходит с родительского элемента на дочерний (вложенный) и с дочернего элемента обратно на родительский не смотря на то, что указатель в этот момент не покидал пределы родительского элемента (event bubbling), а событие «mouseenter» срабатывает только когда указатель входит на родительский элемент, независимо от того перемещается он по дочерним элементам, или нет.

    Результат нашего примера:

    Отличие событий mouseenter и mouseover jQuery события

    20 сайтов с креативным MouseOver эффектом

    Это регулярно обновляемая коллекция, в которой мы собираем самые интересные меню для сайта, созданные с помощью HTML и CSS (CSS3 & HTML5), а также в некоторых разработках присутствует немного JavaScript (jQuery). Hover-эффекты, эффекты скольжения, с выпадающими списками, полноэкранные, горизонтальные, мобильные, раздвижные, круглые, с иконкой-гамбургер и так далее… Вы можете сразу на странице посмотреть Демо и скачать исходный код (* zip).

    Mouseover shop scroll effect

    I would like to include the mouseover ‘Shop Now’ effect on my images, I used this code:

    But when I run it on my site the scroll effect works for all 3 images at the same time. As shown below:

    What can I do to solve this problem? I have been told previously that if I change the container size to just fit the image it should work, but how would I do that?

    2 Answers 2

    you used the wrong syntax for css. style= «width:300px;height:300px;» would be correct if it was in your html like so:

    but in css the style is already implied throught the tags so in css all you need to do is:

    note: to avoid future problems learn about chrome’s inspect tool. It will help you get a better understanding of your page layout and the size of elements and what not. https://developers.google.com/web/tools/chrome-devtools/inspect-styles/

    Few short notes:

    U cannot use style= «width:300px;height:300px;» within css. Within your example, your first line should be:

    You can only use the style-attribute within your html, but it is not nessesairy. If you do this, it will bypass your css:

    You furthermore don’t really have to call width and height both, since an image will scale automatically when it has one of these.

    With all this being said, I believe this code solves your problem:

    40 CSS 3 и Jquery красивостей для сайта

    1. CSS текстовый эффект

    Плагин для реализации сменяющихся слов с различными анимированными эффектами. CSS эффект подойдет для реализации промо-сайтов и анимированных баннеров.

    2. CSS3 вертикальные и горизонтальные вкладки (табы)

    Реализация разбиения содержимого страницы на вкладки (табы) с использованием анимированных CSS3 эффектов. Четыре варианта исполнения: горизонтальные и вертикальные табы с различными анимированными эффектами.

    3. Адаптивный jQuery слайдер на основе плагина IMPRESS.JS

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

    4. jQuery CSS плагин «Responsive Horizontal Layout»

    jQuery решение для создания удобной навигации по разделам документа без перезагрузки страницы. Каждый раздел отображается в отдельном блоке с вертикальной прокруткой, а переход между ними можно осуществить как с помощью клика мыши, так и воспользовавшись заглавием (при большом расширении экранов содержание заглавие отображается с левой стороны, при просмотре сайта на малом экране — сверху документа).

    5. HTML5 CSS3 стильная форма авторизации и регистрации

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

    6. Плагин «Content Navigator» с применением CSS3

    Реализация навигации по содержимому в виде Список категорий → Список разделов → Содержимое раздела. Навигация сопровождается различными JS эффектами.

    7. CSS3 слайд-шоу с Parallax эффектом

    Пролистывание слайдов осуществляется с Parallax эффектом (движение слоев с различной скоростью, в совокупности создают 3D эффект). Размер слайдера изменяется пропорционально изменению размера окна браузера.

    8. Аудио слайд-шоу с использованием jQuery плагина jPlayer

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

    9. Parallax эффект при прокручивании страницы с помощью jQuery и CSS

    jQuery решение для реализации 3D эффекта при прокрутке страницы. Вы также можете подробнее почитать по-русски.

    10. jQuery плагин для загрузки файлов на сервер «File Upload»

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

    11. Своеобразное меню на jQuery и CSS

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

    12. Горизонтальное анимированное jQuery меню

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

    13. «TimeLine» плагин для хронологического отображения выполненных работ в портфолио

    Обалденный jQuery CSS плагин, будет очень полезным дополнением для сайта любой веб-студии или фрилансера. С его помощью можно наглядно отобразить примеры выполненных работ с разбивкой по времени. Внизу отображается сама временная шкала, а сверху выполненные работы. Для перехода между работами можно использовать как шкалу, так и стрелки влево/вправо.

    14. Галерея «TouchTouch», оптимизированная для просмотра с мобильных устройств

    15. CSS3 слайдер изображений «Cycle Slider»

    16. CSS галерея изображений в стиле аккордеон

    При клике на название выезжает изображение с описанием. Используется только CSS3.
    Урок по созданию галереи [in English].

    17. Классные яркие всплывающие подсказки jQuery и CSS3

    Всплывающие jQuery подсказки в 7 стилевых оформлениях. Легко подключить и использовать в своих проектах.

    18. «jPages» галерея изображений с миниатюрами

    Если изображений в галерее больше 5, то появляются стрелки влево/вправо для навигации по фотографиям.

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

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

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

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

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


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

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

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

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

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

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

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

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

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

    Sullivan Buttons

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

    CSS Icons on Hover

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

    Button Hover Effects

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

    Несколько фишек, которые позволяют сделать более необычные подчеркивания ссылок на 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’ы на них в комментариях. И мы в будущем дополним статью.

    Движение мыши: mouseover/out, mouseenter/leave

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

    События mouseover/mouseout, relatedTarget

    Событие mouseover происходит в момент, когда курсор оказывается над элементом, а событие mouseout – в момент, когда курсор уходит с элемента.

    Эти события являются особенными, потому что у них имеется свойство relatedTarget . Оно «дополняет» target . Когда мышь переходит с одного элемента на другой, то один из них будет target , а другой relatedTarget .

    Для события mouseover :

    • event.target – это элемент, на который курсор перешёл.
    • event.relatedTarget – это элемент, с которого курсор ушёл ( relatedTarget → target ).

    Для события mouseout наоборот:

    • event.target – это элемент, с которого курсор ушёл.
    • event.relatedTarget – это элемент, на который курсор перешёл ( target → relatedTarget ).

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

    Каждое из них содержит информацию о target и relatedTarget :

    Свойство relatedTarget может быть null .

    Это нормально и означает, что указатель мыши перешёл не с другого элемента, а из-за пределов окна браузера. Или же, наоборот, ушёл за пределы окна.

    Следует держать в уме такую возможность при использовании event.relatedTarget в своём коде. Если, например, написать event.relatedTarget.tagName , то при отсутствии event.relatedTarget будет ошибка.

    Пропуск элементов

    Событие mousemove происходит при движении мыши. Однако, это не означает, что указанное событие генерируется при прохождении каждого пикселя.

    Браузер периодически проверяет позицию курсора и, заметив изменения, генерирует события mousemove .

    Это означает, что если пользователь двигает мышкой очень быстро, то некоторые DOM-элементы могут быть пропущены:

    Если курсор мыши передвинуть очень быстро с элемента #FROM на элемент #TO , как это показано выше, то лежащие между ними элементы

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

    С другой стороны, мы должны иметь в виду, что указатель мыши не «посещает» все элементы на своём пути. Он может и «прыгать».

    В частности, возможно, что указатель запрыгнет в середину страницы из-за пределов окна браузера. В этом случае значение relatedTarget будет null , так как курсор пришёл «из ниоткуда»:

    Вы можете проверить это «вживую» на тестовом стенде ниже.

    В его HTML есть два элемента,

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

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

    Если указатель «официально» зашёл на элемент, то есть было событие mouseover , то при выходе с него обязательно будет mouseout .

    Событие mouseout при переходе на потомка

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

    То есть, визуально указатель всё ещё на элементе, но мы получим mouseout !

    Это выглядит странно, но легко объясняется.

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

    Таким образом, если курсор переходит на другой элемент (пусть даже дочерний), то он покидает предыдущий.

    Обратите внимание на важную деталь.

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

    Вы можете наглядно увидеть это в примере ниже:

    При переходе мышью с внешнего элемента на внутренний, вы увидите сразу два события: mouseout [target: parent] (ушли с родителя) и mouseover [target: child] (перешли на потомка, событие всплыло).

    При переходе с родителя элемента на потомка – на родителе сработают два обработчика: и mouseout и mouseover :


    Если код внутри обработчиков не смотрит на target , то он подумает, что мышь ушла с элемента parent и вернулась на него обратно. Но это не так! Мышь никуда не уходила, она просто перешла на потомка.

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

    Чтобы этого избежать, можно смотреть на relatedTarget и, если мышь всё ещё внутри элемента, то игнорировать такие события.

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

    События mouseenter и mouseleave

    События mouseenter/mouseleave похожи на mouseover/mouseout . Они тоже генерируются, когда курсор мыши переходит на элемент или покидает его.

    Но есть и пара важных отличий:

    1. Переходы внутри элемента, на его потомки и с них, не считаются.
    2. События mouseenter/mouseleave не всплывают.

    События mouseenter/mouseleave предельно просты и понятны.

    Когда указатель появляется над элементом – генерируется mouseenter , причём не имеет значения, где именно указатель: на самом элементе или на его потомке.

    Событие mouseleave происходит, когда курсор покидает элемент.

    Вот тот же пример, что и выше, но на этот раз на верхнем элементе стоят обработчики mouseenter/mouseleave вместо mouseover/mouseout .

    Как вы сами можете увидеть, генерируются только события, связанные с движением курсора относительно верхнего

    Делегирование событий

    События mouseenter/leave просты и легки в использовании. Но они не всплывают. Таким образом, мы не можем их делегировать.

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

    Очевидное решение – определить обработчик на родительском элементе

    и там обрабатывать возникающие события. Но, так как mouseenter/leave не всплывают, то если событие происходит на ячейке
    , то только обработчик на может поймать его.

    Обработчики событий mouseenter/leave на

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

    Что ж, не проблема – будем использовать mouseover/mouseout .

    Начнём с простых обработчиков, которые выделяют текущий элемент под указателем мыши:

    Вот они в действии. При переходе между элементами этой таблицы, текущий будет подсвечен:

    В нашем случае мы хотим обрабатывать переходы именно между ячейками

    : вход на ячейку и выход с неё. Прочие переходы, в частности, внутри ячейки или вообще вне любых ячеек, нас не интересуют, хорошо бы их отфильтровать.

    Можно достичь этого так:

    • Запоминать текущую ячейку
    в переменную, которую назовём currentElem .
  • На mouseover – игнорировать событие, если мы всё ещё внутри той же самой ячейки
  • .
  • На mouseout – игнорировать событие, если это не уход с текущей ячейки
  • .

    Вот пример кода, учитывающего все ситуации:

    Полный пример со всеми деталями:

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

    .

    Итого

    Мы рассмотрели события mouseover , mouseout , mousemove , mouseenter и mouseleave .

    Особенности, на которые стоит обратить внимание:

    • При быстром движении мыши события не будут возникать на промежуточных элементах.
    • События mouseover/out и mouseenter/leave имеют дополнительное свойство: relatedTarget . Оно дополняет свойство target и содержит ссылку на элемент, с/на который мы переходим.

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

    События mouseenter/leave в этом отличаются. Они генерируются, когда курсор переходит на элемент в целом или уходит с него. Также они не всплывают.

    Задачи

    Улучшенная подсказка

    Напишите JavaScript код, который показывает подсказку над элементом с атрибутом data-tooltip . Значение атрибута должно становиться текстом подсказки.

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

    Только одна подсказка может быть показана в любой момент времени.

    Результат в iframe:

    «Умная» подсказка

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

    Другими словами, если пользователь подвинул курсор на элементе и остановился – показывать подсказку. А если он просто быстро провёл курсором по элементу, то не надо ничего показывать. Кому понравится лишнее мелькание?

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

    Создайте для этого универсальный объект new HoverIntent(options) .

    Его настройки options :

    • elem – отслеживаемый элемент.
    • over – функция, вызываемая, при заходе на элемент, считаем что заход – это когда курсор медленно двигается или остановился над элементом.
    • out – функция, вызываемая при уходе курсора с элемента (если был заход).

    Пример использования такого объекта для показа подсказки:

    Если двигать кусор над «часами» быстро, то ничего не произойдёт, а если вы замедлите движение курсора над элементом или остановите его, то будет показана подсказка.

    Обратите внимание: подсказка не должна пропадать (мигать), когда курсор переходит между дочерними элементами часов.

    Алгоритм выглядит просто:

    1. Назначаем обработчики onmouseover/out на элементе. Также можно было бы использовать onmouseenter/leave , но они менее универсальны и не сработают с делегированием.
    2. Когда курсор переходит на элемент, начинаем измерять скорость его движения, используя mousemove .
    3. Если скорость низкая, то вызываем over .
    4. Когда мы выходим из элемента, если запускали over , вызываем out .

    Но как измерить скорость?

    Первая идея может быть такой: запускать нашу функцию каждые 100ms и находить разницу между прежними и текущими координатами курсора. Если она мала, то значит и скорость низкая.

    К сожалению, в JavaScript нет возможности получать текущие координаты мыши. Не существует функции типа получитьТекущиеКоординатыМыши() .

    Единственный путь – это слушать события мыши, например mousemove , и координаты брать из объекта события.

    Так что поставим обработчик на mousemove , чтобы отслеживать координаты и запоминать их. И будем сравнивать результаты каждые 100ms .

    Обработка событий onmouseover и onmouseout

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

    Пример обработчика события onmouseover как атрибута элемента

    Сейчас речь пойдет о событии onmouseover, которое происходит, когда указатель мыши перемещается на элемент или на один из его дочерних элементов. Например,

    Наведи мышь, и текст покраснеет

    Однако, это событие редко используется самостоятельно. Обычно оно «идет в паре» с обработкой события onmouseout, которое происходит , когда пользователь убирает указатель мыши с элемента или с одного из его дочерних элементов, т.е. выполняет действие, обратное для onmouseover. Посмотрим, как похожий пример будет выглядеть с обработкой 2-х событий:

    Наведи мышь, и текст покраснеет, а потом почернеет снова

    В примерах выше в обоих случаях было использовано ключевое слово this , которое указывает на объект, к которому применяется обработчик события. В нашем случае это был абзац с текстом.

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

    Наведи мышь, и текст покраснеет, а потом почернеет снова

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

    Обработка наведения/уведения курсора мыши для изображений

    Рассмотрим пример посложнее. Предположим, на нужно заменить одно изображение другим. Просто так это в CSS или HTML не сделать, хотя можно использовать свойства background-image или свойство content:url() в псевдоэлементах ::before или ::after. Для тега это нужно будет сделать с помощью JavaScript:

    Наведите курсор мыши на изображение, а затем уберите его

    Пример обработки событий onmouseover и onmouseout с делегированием событий

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

    Для примера нам понадобится 2 div-а-контейнера:

    1. для 4х небольших изображений, уменьшенных с помощью css-кода
    2. для увеличенного изображения с абсолютным позиционированием

    Ниже представлена разметка и CSS-стили.

    Сам пример выглядит так:

    Код на JavaScript:

    Обратите внимание, что здесь использована обработка событий с помощью метода addEventListener . В этом случае вместо onmouseover ( onmouseout ) записывается только название, а не обработчик события — mouseover ( mouseout ).

    Делегирование событий заключается в том, что мы не писали обработчики для каждого тега img , а задали всего один для их родительского элемента — div-a c . В функции же, которая обрабатывает действия пользователя, мы использовали строку var target = event.target для того, чтобы определить целевой объект события, т.е. тег img .

    Также в коде мы учли, что между изображениями в div-e есть отступы, которые относятся к родительскому элементу, поэтому строка if (target.tagName != «IMG») проверяет, а является ли наш целевой объект тегом , и только в этом случае отображает увеличенное изображение. Вы можете самостоятельно отследить, для какого элемента наступает событие при наведении курсора мыши с помощью строки console.log(target.tagName) и консоли в браузере (ее вызывает клавиша F12), если откроете пример в новой вкладке.

    На скриншоте представлена консоль в браузере Mozilla Firefox. Стрелками показаны места наведения указателя мыши.

    Цукерберг рекомендует:  Программы - Помогите найти программы
    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих