Анимация фонового изображения с помощью jQuery

Метки: javascript, jquery

Using jQuery for Background Image Animations Using jQuery for Background Image Animations

Мне стало интересно, что можно сделать с использованием простой HTML-структуры (без избыточных тегов), а также простейшего кода.
Изменение позиции фонового изображения будет лучшим решением для создания нужного эффекта (и я не первый, кому это пришло в голову, смотри пример в конце статьи).
jQuery является отличным решением для такого рода задач, но к сожалению, в стандартной сборке не содержится средств для нормального изменения позиции фонового изображения, так как для этого нужно менять два параметра вместо одного (к сожалению, не все браузеры поддерживают background-position-x и -y). Возьмите последнюю версию плагина Background-Position. В предыдущих версиях не было поддержки отрицательных и дробных значений свойств.
HTML
Никому не нравится добавлять дополнительный HTML-код при каждой новой фиче, нам нужен очень простой маркированный список:
Убрать подсветку кода
1
2
3
4
5
<ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
</ul>


Простой CSS
Я установил плавающую навигацию и указал блочное отображение ссылок с небольшим отступом. Ничего заумного (в этом вся фишка).
Убрать подсветку кода
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
ul {
        list-style:none;
        margin:0;
        padding:0;
}
li {
        float:left;
        width:100px;
        margin:0;
        padding:0;
        text-align:center;
}
li a {
        display:block;
        padding:5px 10px;
        height:100%;
        color:#FFF;
        text-decoration:none;
        border-right:1px solid #FFF;
}
li a {
        background:url(bg.jpg) repeat 0 0;
}
li a:hover {
        background-position:50px 0;
}

Заметьте, что было описано действие при наведении курсора. Посетители у которых отсутствует поддержка JavaScript увидят хотя бы конечное состояние. Я описал фон в «li a» отдельно, чтобы он выделялся, но начальная позиция фона должна быть установлена в соответствии с фоновым рисунком, который вы выберите для использования эффекта.

Рисунок
Вы можете достигать разного рода эффекты, создавая ваши рисунки в разной манере.
Анимация фонового изображения с помощью jQuery
Рисунок 1: Перекрывание

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

Анимация фонового изображения с помощью jQuery
Рисунок 2: Затухание

Рассмотрим рисунок 2 более детально. Количество видимого пространства в нормальном состоянии и при наведении, находятся в самом верху и в самом низу изображения. Большой градиент по середине создает эффект затухания и рассвета, при анимации.
Простота рисунков позволяет достигать очень маленьких размеров файлов. Рисунки с более сложной анимацией требуют большую глубину цвета и соответственно будут весить больше. Всегда ищите золотую середину между эффектом и выполнением. Можете посмотреть демо, чтобы увидеть как эти (и несколько других) эффектов смотрятся в действии.

Скрипт
Наконец-то сам скрипт, который заставляет все это работать, довольно прост. Анимация должна срабатывать при каждом наведении и отведении курсора мыши от навигации.
Убрать подсветку кода
1
2
3
4
5
6
7
8
9
10
11
12
$('#nav a')
        .css( {backgroundPosition: "0 0"} )
        .mouseover(function(){
                $(this).stop().animate(
                        {backgroundPosition:"(0 -250px)"}, 
                        {duration:500})
                })
        .mouseout(function(){
                $(this).stop().animate(
                        {backgroundPosition:"(0 0)"}, 
                        {duration:500})
                })

Элементы захватываются с помощью $ функция и CSS. Это важно для Internet Explorer и Firefox, которые не устанавливают значение по-умолчанию для позиции фона. В IE вы можете обойтись объявлением background-position-x и -y, но проще установить начальные значения в скрипте. Затем, элементы приводятся в действие используя события mouseover и mouseout. Заметьте важный момент, что каждая анимация останавливается до того как начнется заново.
jQuery также имеет метод hover, который может использоваться вместо отдельного использования методов mouseover и mouseout. Причина, по которой я не стал его использовать, потому что с использованием двух методов более ясно их назначение. Метод hover принимает два параметра: функция, которая должна выполняться при наведении и функция, которая должна быть выполнена при отведении курсора мыши.

Оригинал: Using jQuery for Background Image Animations

Рейтинг: 12345   << Вы можете поставить оценку этой статье


Подобные статьи:
   Понимание области видимости в объектно-ориентированном JavaScript
   Продвинутая отладка в JavaScript
   Определение и использование собственных событий в JavaScript


Обсуждение статьи:

 
Нормальный чел [2010-06-04]
А че трудно размещать примеры для скачивания?
Все сайты такие стали, косите под яйце-головых.


Разработчик [2011-03-09]
В IE6 не работает.


Alexon [2011-11-28]
у меня получилось. Пример здесь http://gayrest.com. Но я использовал другую методику


пример [2011-12-11]
А где приеры использования?


мудак [2012-01-19]
2Alexon гори в огне, гей, ты испортил мою всихику

По сабжу: это же реализуется цсс3


Alexon [2015-04-12]
мудак ты гомосек


asPrh2ivaw [2016-04-11]
<a href=http://elimitecream.in.net/>buy elimite</a>


anlinauseeg [2017-02-22]
<a href=http://www.sportmall.men/> Free Shipping</a>
<a href=http://www.sportwear.men/>Nike Air Max 1 Schuhe</a>
<a href=http://www.nikecortezqs.men/>Nike Cortez Homme</a>
<a href=http://www.chaussures.men/>Stefan Janoski Skate</a>
<a href=http://www.adidasfluxschuhe.win/>Adidas Schuhe online bei</a>
<a href=http://www.kickonline.men/>Adidas Yeezy Boost 350 V2</a>
<a href=http://www.nicesneaker.men/>Nike Air Max 2016 Sale</a>
<a href=http://www.nikecr7.online/>NIKE MERCURIAL VAPOR CR7</a>
<a href=http://www.adidasyeezy350tan.men/>Adidas Yeezy Boost 350 'Tan'</a>
<a href=http://www.curry2.men/>Men's UA Curry 3 Basketball Shoes</a>


anlinausxhv [2017-03-12]
<a href=http://www.nicekickstore.top/>ADIDAS ULTRA BOOST UNCAGED</a>
<a href=http://www.2017france.top/>Nike Air Max 2016 chaussures</a>
<a href=http://www.pureboostzgskor.info/>ADIDAS PURE BOOST ZG SKOR F脰R SALU</a>
<a href=http://www.ultraboostpascher.men/>Chaussur es Adidas Ultra boost-La Boutique Officielle</a>
<a href=http://www.adidasrunning.info/>Adidas Ultra Boost Uncaged</a>
<a href=http://www.schweizshops.men/>Adidas Pure Boost Raw </a>
<a href=http://www.adidasolympicit.info/>adidas ultra boost Scarpe</a>
<a href=http://www.laufschuhede.men/>Adidas Ultra Boost Laufschuhe</a>
<a href=http://www.adidaswebshop.men/>Adidas Pure Boost ZG Prime</a>
<a href=http://www.nikeairmax2017elado.top/>nike air max 2017 elad贸</a>


 

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

Имя


E-mail


Сообщение