—»     —»   Анимированный фон, реализованный при помощи MooTools
  Раздел: Анимация   Комментариев: 5  

Анимированный фон, реализованный при помощи MooTools



Анимация – это как раз тот отличный эффект, создание которого сильно упрощается за счет таких javascript-платформ как MooTools и jQuery. Сегодня мы хотим предложить вам отличное jQuery-руководство, в котором рассказывается о разработке анимированного фонового изображения на странице. Воспользуйтесь отрывком кода MooTools, который также продемонстрирует вам процесс интеграции данного эффекта в любую веб-страницу.

Анимированный фон, реализованный при помощи MooTools

CSS-код

#animate-area  { 
background-image: url(clouds.png);
background-position: 0px 0px;
background-repeat: repeat-x;
}

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

javascript-код MooTools

window.addEvent("domready",function() {
//settings
var duration = 40000;
var length = 2000;
var count = 0;

var tweener;

// Executes the standard tween on the background position
var run = function() {
tweener.tween("background-position", "-" + (++count * length) + "px 0px");
};

// Defines the tween
tweener = $("animate-area").setStyle("background-position", "0px 0px").set("tween", {
duration: duration,
transition: Fx.Transitions.linear,
onComplete: run,
link: "cancel"
});

// Starts the initial run of the transition
run();
});

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

Посмотреть демо

Убедитесь, что скорость анимации очень низкая, и что она протекает плавно – большая скорость фона может свести с ума ваших пользователей. С другой стороны, если творчески подойти к этому, то ваш сайт будет уникальным!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: Mootools, jQuery, parallax
Опубликовал Design FactoRy   Прочитано (раз): 10091   |   Оставлено комментариев: 5
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 26 мая 2012 @ 13:14
Написал: fortune — группа: Читатели  
На сайте с: 19.11.2009   |   Публикаций: 0   |   Комментариев: 59
ICQ: 190783170
интересный скриптец. я использую в своих работах скрипт спрайтли на jquery от spritely.net


--------------------
я дизайнер - http://imdesigner.ru
Комментарий #2: 26 мая 2012 @ 13:22
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
fortune, да, spritely - это jQuery, а этот - MooTools.
Комментарий #3: 27 мая 2012 @ 04:23
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
Оригинально =)
Design FactoRy, смотрю сменили дизайн сайта winked - Шикарно. fellow


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Комментарий #4: 27 мая 2012 @ 11:07
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
ITS, да, решили сменить дизайн. Сделали в стиле минимал-модерн smile . Кроме того, теперь сайт адаптивный. Можно удобно смотреть с любых современных девайсов и на любых разрешениях домашних ПК. Огромный "респект и уважуха" студии dletemplates.com за то, что воплотили в жизнь все наши требования по оформлению сайта. Надеемся, что многим понравится, и, посещать сайт станет гораздо удобнее и приятнее smile
Комментарий #5: 31 мая 2012 @ 14:39
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
Design FactoRy, да постарались они на славу ))) на планшетнике хорошо выглядит =))


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930