Как правильно сделать движущийся background

@sweelemk · Регистрация: 16.09.2013

Студворк — интернет-сервис помощи студентам

Всем привет! Ребята, объясните мне как правильно сделать движущийся background. Задумка такова: хочу сделать header, backgrouтв которого при загрузке страницы начинает двигаться. Но двигаться должен не только от координаты x, y к координате x1, y1 , а по схеме x,y - x1,y1 - x2,y2 - x,y. Возможно ли такое выполнить? Видел кучу примеров, но там только движение от одной точки к другой. Заранее, спасибо!
И можно ли применить scale?

Если не сложно, объясните как реализовать на jQuery. Спасибо-спасибо!!!!!!
и да, еще важно, чтобы все это повторялось.

elnorbert · 17.07.2014, 16:57

Сделал, но не совсем то что вы хотели. http://sunumbrella.tk/thread12... ample.html

Код

HTML5
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<html>
    <head>
        <script type="text/javascript" src="javascript/jquery-1.11.1.min.js"></script>
        <title>Animated Background beta</title>
    </head>
    <body>
        <div class="animated_background"></div>
        <style type="text/css">
            .animated_background {
                z-index: 0;
                position: absolute;
                width: 100%;
                height: 100%;
                background: url(background.gif);
                left: 0px;
                top: 0px;
            }
        </style>
        <script type="text/javascript">
            
            /* Блок данных
            ** Первый параметр смещение по оси X.
            ** Второй параметр смещение по оси Y.
            ** Третий параметр время движения в мсек.
            */ 
            var Coordinates = [
                ['50', '150', '500'],
                ['100', '100', '500'],
                ['150', '150', '500'],
                ['100', '200', '500'],
            ];
            
            /* Функция реализующая эффект
            ** анимации фона.
            */
            function BckAnim(Coordinates) {
                
                $.each(Coordinates, function(k, v) {
                    
                    $('.animated_background').animate({
                        left: v[0]+'px',
                         top: v[1]+'px',
                    }, v[2], 'linear');
                });
                
                /* Закоментировать эту строку
                ** если не нужна циклическая 
                ** анимация фона.
                */
                BckAnim(Coordinates);
            }
            
            // Вызов ф-и.
            BckAnim(Coordinates);
        </script>
    </body>
</html>

Все из-за background-position-x

Свойство background-position-x является нестандартным и не входит в спецификацию CSS.

Т.е. можно было создать то что вы хотели, но в Огнелисе и Опере эффект бы не работал. Может это можно обойти.

@sweelemk · 18.07.2014, 12:26 **[ТС]**

tolimadokara, оу, спасибо большое! Пригодиться! Попробую модернизировать его и добавить scale

Добавлено через 17 часов 57 минут
tolimadokara, а какие свойства должен иметь блок с картинкой?

elnorbert · 18.07.2014, 19:27

Сообщение от sweelemk

tolimadokara, а какие свойства должен иметь блок с картинкой?

Можно задать фоновую картинку повторяющуюся в BODY, а можно в DIV. Смещение фоновой картинки реализуется через CSS свойство background-position, background-position-x, background-postition-y. Крайние два не работают в Огнелисе и Опере.

Я реализовал вам выше в виде DIV который позиционируется абсолютно и лежит в нулевом слое. Расятнут по ширине, высоте на 100%.

Лучше в BODY задавать фоновое изображение.

@sweelemk · 18.07.2014, 22:45 **[ТС]**

tolimadokara, спасибо большое!

Новые блоги и статьи Все статьи Все блоги /
Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .
Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при изменении наименования справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере изменения наименования типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .

@sweelemk 0 / 0 / 1 Регистрация: 16.09.2013 Сообщений: 127

	Как правильно сделать движущийся background 17.07.2014, 09:33. Показов 2865. Ответов 4 Метки нет (Все метки) Всем привет! Ребята, объясните мне как правильно сделать движущийся background. Задумка такова: хочу сделать header, backgrouтв которого при загрузке страницы начинает двигаться. Но двигаться должен не только от координаты x, y к координате x1, y1 , а по схеме x,y - x1,y1 - x2,y2 - x,y. Возможно ли такое выполнить? Видел кучу примеров, но там только движение от одной точки к другой. Заранее, спасибо! И можно ли применить scale? Если не сложно, объясните как реализовать на jQuery. Спасибо-спасибо!!!!!! и да, еще важно, чтобы все это повторялось. 0

@sweelemk 0 / 0 / 1 Регистрация: 16.09.2013 Сообщений: 127
	18.07.2014, 12:26 [ТС]
	tolimadokara, оу, спасибо большое! Пригодиться! Попробую модернизировать его и добавить scale Добавлено через 17 часов 57 минут tolimadokara, а какие свойства должен иметь блок с картинкой? 0

@sweelemk 0 / 0 / 1 Регистрация: 16.09.2013 Сообщений: 127
	18.07.2014, 22:45 [ТС]
	tolimadokara, спасибо большое! 0