03:33 Анимированный фон, реализованный при помощи MooTools | |
| Анимация – это как раз тот отличный эффект, создание которого сильно упрощается за счет таких javascript-платформ как MooTools и jQuery. Сегодня мы хотим предложить вам отличное jQuery-руководство, в котором рассказывается о разработке анимированного фонового изображения на странице. Воспользуйтесь отрывком кода MooTools, который также продемонстрирует вам процесс интеграции данного эффекта в любую веб-страницу. [img]/uploads/posts/2012-05/1337936751_bg-clouds.jpg[/img] CSS-код #animate-area { background-image: url(clouds.png);background-position: 0px 0px;background-repeat: repeat-x;} Первый этап заключается в установке изображения в качестве фона нашего конкретного контейнера. Не забудьте сделать так, чтобы фон повторялся в горизонтальном направлении! javascript-код MooTools window.addEvent("domready",function() {//settingsvar duration = 40000;var length = 2000;var count = 0;var tweener;// Executes the standard tween on the background positionvar run = function() {tweener.tween("background-position", "-" + (++count * length) + "px 0px");};// Defines the tweentweener = $("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 transitionrun(); }); Первый этап, как всегда, заключается в приготовлении настроек для отображения. Следующий заключается в настройке функции анимации. Мы увеличиваем отрицательный параметр left для фона, чтобы наше шоу продолжалось. Последний этап заключается в, как вы уже догадались, в запуске всего представления! Посмотреть демо Убедитесь, что скорость анимации очень низкая, и что она протекает плавно – большая скорость фона может свести с ума ваших пользователей. С другой стороны, если творчески подойти к этому, то ваш сайт будет уникальным! | |
|
| |
| Всего комментариев: 0 | |
