После этого,

Анимированные изображения фона jQuery Поскольку Google принимающей версия, что вы можете использовать его, определенно нет необходимости загружать готовые copy.Getting

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

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

Давайте делать это

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

2. После этого, давайте создадим А. файл index.html. Для того, чтобы начать работу с базовой HTML-структуру, вставьте следующий код в файле:

<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN "
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <META HTTP-EQUIV = "Content-Type" Content = "Текст / HTML; CHARSET = UTF-8 "/> <title> анимированное изображение фона </ тitle> </ head> <body> </ body> </ html>

3. Теперь, давайте определим наши структуры документа. Как мы хотим, чтобы сделать простой макет, мы будем только необходимо создать заголовок и содержание. Вставьте следующий рамках <body> и &LT; / BODY> следующие строки:

<div id="container"> <div id="header"> <h1> Анимированные изображения фона </ h1> </ div ><!-- # Заголовок -> <div id="content"> <! -- - Ваше содержание будет идти здесь -> </ div> <! --- # Содержимого -> </ div ><!-- # контейнер ->

4. Молодцы! У нас уже есть XHTML. Итак, что мы должны делать это, очевидно, для использования некоторых CSS, а также даны стиля нашего документа.
Для этого скопируйте код и вставьте его в<head> и <head> тегов файла index.html.

5. На данный момент, вы можете сохранить вашу работу и посмотреть на странице index.html с помощью веб-браузера. Если все ОК, индекс. HTML-страница должна выглядит как на скриншоте выше, с фиксированным облака, конечно.

6. Теперь настало время, чтобы дать жизнь макет, используя силу Jquery. Как вы наверное догадались, что мы должны сделать прямо сейчас, конечно, включить в Library. Поскольку Google принимающей версия, что вы можете использовать его, определенно нет необходимости загружать копию. Просто воспользуйтесь одним из Google.

Чтобы сделать это, вставьте следующие строки кода в файл index.html, который после закрытия </ body> тег:

& LT; сценария SRC = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"
Type = "Текст / JavaScript" CHARSET = "UTF-8"> </ script>

7. Теперь, когда Jquery были загружены, мы можем Код функции для анимации фона. Копироватьниже код и вставьте его в ваш файл index.html, который сразу после строки, в которой вы импортировали JQuery в файл.

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

Демо & Скачать

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

Получите 20% скидку на MyHomePro Premium WordPress тема, используя этот эксклюзивный код: wpcats20.

Анимированные изображения фона остроумияч Jquery

WordPress

Меню