Анимированный фон средствами jQuery или «Эй, а ведь круто! Как Flash!»

    jQuery + CSS Sprite
    Занимательные поделки от Джонатана Снука. Данная статья будет интересна скорее новичкам, нежели более умудренным разработчикам, хотя мистер Снук достаточно авторитетен и его методики могут быть полезны всем.

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

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

    Суть метода описанного здесь лежит в изменении позиции фона элементов. Тем не менее, при всей свой универсальности, jQuery с трудом может справиться с перемещением фона в силу того, что это требует изменения двух значений (вертикальной и горизонтальной позиции фонового изображения) одновременно. Джонатан нашел выход из ситуации при помощи плагина Background-Position Animations (его версия должна быть не ниже 1.0.2 — более ранние не поддерживают отрицательные и десятичные значения).

    Что нужно?


    HTML
    Пример предполагает собою создание меню. Разметка предельно проста и понятна.
    <ul>
    	<li><a href="#">Home</a></li>
    	<li><a href="#">About</a></li>
    	<li><a href="#">Contact</a></li>
    </ul>
    

    CSS
    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;
    }
    

    jQuery
    От jQuery нужна собственно сама библиотека, ну и плагин (Background-Position Animations) упомянутый выше. Скрипт же представляет собою следующее:
    $('#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( {backgroundPosition: "0 0"} )
    начинается анимация по событиям mouseover и mouseout.

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

    Спрайт (тот, что bg.jpg)
    image
    В данном случае анимация будет происходить за счет изменения позиции фона слева направо. Выбор картинки лежит сугубо в области фантазии того или иного разработчика. Каждый новый вариант спрайта приводит к новому интересному эффекту.

    Еще пример:
    image
    В этом же случае "перемещение" происходит по вертикали. При этом, чем плавнее переход между цветами изображения, тем менее заметно будет перемещение как таковое. Соответственно будет более мягкий эффект затухания (см. пример «Example C: Fade 1-colour»).

    Ссылки по теме (англоязычные ресурсы)
    Вот и все! Всем спасибо за внимание.
    Поделиться публикацией

    Похожие публикации

    Комментарии 38

      +2
      Разметка прЕдельно проста и понятна.
        +15
        Прошу прощения. Испытал стыд и исправил.
        +3
        Любопытно. Спасибо.
          +1
          Последний пример просто улет!
            +4
            $(this).stop()

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

              Спасибо автору.
                +3
                офигенно
                  +2
                  классно очень…
                    +1
                    Очень круто. Буду использовать обязательно.
                      +1
                      Вах, красиво, спасибо :)
                      Будет интересно применить где-нибудь такие эффекты.
                        +1
                        Очень классно! Мне понравилось.
                          +1
                          То, что я хотел сделать!!! Спасибо!
                            +3
                            Товарищи! Скажите, неужели веб всегда будет заполнен килобайтами и мегабайтами яваскрипта, изъябывающегося изо всех сил выглядеть похоже на нормальный интерфейс?

                            Ну почему во flash/flex я не должен заботиться о том, какое разрешение у экрана пользователя, какой у него браузер, и так далее, а просто могу писать код или рисовать, пользуясь разными constraints и margins? Зачем кому-то все эти трюки с CSS, чтобы заставить браузер делать то, что нужно. Когда уже появится точное попиксельное позиционирование в любом браузере, работающее без костылей и подпорок?

                            Честно говоря, столкнувшись недавно с Flex, понял, что больше никогда не буду писать на javascript или использовать все эти корявые фреймворки.
                              +1
                              Это ваше право :)
                              А, и вопрос: что корявого в jQuery?
                              и замечание: swf весит не меньше чем jQuery.
                                0
                                > swf весит не меньше чем jQuery.
                                ну это смотря как писать
                                подобная штука на flash занимала бы несколько сотен байт, что явно меньше картинок и задействованного JS / CSS кода, не считая размера самой библиотеки

                                против jquery ничего не имею, сам использую – незаменимая вещь для быстрой кроссбраузерной смены картинок, прозрачности, drag’n’drop и пр., но использовать ее для сложной анимации – это уже извращение
                                  +4
                                  Потому что при этом сохраняется семантика, гибкость удобство и простота

                                  Исходный код, которого касается программер остается
                                  <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul>
                                    +1
                                    Не туда ответил :(
                                +5
                                Потому что при этом сохраняется семантика, гибкость удобство и простота

                                Исходный код, которого касается программер остается
                                <ul>
                                	<li><a href="#">Home</a></li>
                                	<li><a href="#">About</a></li>
                                	<li><a href="#">Contact</a></li>
                                </ul>
                                

                                +3
                                Посмотрел — красиво, поставил на сайт — не очень, убрал :)
                                  +2
                                  jquery рулит, да
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                      +1
                                      Спасибо, отличная штука. Поставлю в избранное, точно пригодится.
                                        +1
                                        хм… а ведь намного круче, чем использование jQuery Color Animations
                                          +1
                                          Кто-то с минусометом прошелся по комментам :)
                                            0
                                            А потом с плюсомётом…
                                            +4
                                            Красиво получилось, а главное — при отключенном JS всё равно нормально выглядит.
                                              +3
                                              Все очень элегантно и просто. спасибо!
                                                +1
                                                Все. Это последняя капля. Больше не могу быть отстраненным созерцателем. Буду разбираться в jQuery. Автору — большое спасибо за изящный пример :) Вам — плюс в карму :)
                                                  0
                                                  Очень красиво получаеться! Спасибо!
                                                    0
                                                    Как классно!
                                                      0
                                                      чем то напоминает tablecloth хотя может и ошибаюсь
                                                        0
                                                        Tablecloth чуть более замудренный трюк на мой взгляд. В плане скриптинга. Хотя конечным результатом (простым кодом разметки и достигаемым конечным визуальным эффектом) эти два метода схожи.
                                                        0
                                                        Были уже заметки на хабре по этому поводу. И с бекграундом, который ездит, и даже с ссылками на те же ресурсы.

                                                        З. Ы. Юзайте поиск.
                                                          0
                                                          в ie все время появляется курсор песочных часов, проблема в кэшировании бэкграунда браузерами ie. нужно добавлять
                                                            0
                                                            <--[if IE]>
                                                            <script type=«text/javascript»>
                                                            document.execCommand(«BackgroundImageCache»,false,true);
                                                            </script>
                                                            <--[endif]>
                                                              0
                                                                0
                                                                И, пардон, что?
                                                                  0
                                                                  Все правильно сделал.

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