С Новым годом! Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
 
Рейтинг 4.69/26: Рейтинг темы: голосов - 26, средняя оценка - 4.69
5 / 5 / 1
Регистрация: 30.07.2011
Сообщений: 257

Анимированный фон

11.09.2012, 11:28. Показов 5570. Ответов 20
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здраствуйте. Я сделал градиентный фон для body от синего к белому. У меня есть рисунок на 200 пх высотой и 2048 длиной. Облака на прозрачном фоне. Я хочу чтобы этот рисунок был наложен на мой градиент и плавно двигался бы, то есть хотел что-то вроде ленточного конвейера с облоками сделать. Помогите реализовать.
HTML5
1
2
3
4
5
6
7
<head>
...
</head>
 
<body>
...
</body>
CSS
1
2
3
4
5
6
7
body {
margin: 0;
    padding: 0;
    min-width: 1024px;
    width: 100%;
    background-image: url(../gradient.php?from=00f&to=fff); 
}
рисунок с облаками 1.png сам сделал на фотошопе, просто облака вырезал, вставил, удалил фон.

Добавлено через 1 минуту
P.S. движение хочу по горизонтали, слева на право
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
11.09.2012, 11:28
Ответы с готовыми решениями:

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

Анимированный раскрывающийся блок
Здравствуйте. Хочу сделать календарь с заметками. Заметки отображаются на самих ячейках, но не все... чтобы показать все, надо раскрыть...

Как сделать анимированный footer (как на lj)?
Добрый день, не получается сделать анимацию ,как на lj, футер приклеен книзу, при нажатии все содержимое должно перекрывать квысоту окна...

20
Develo0per
 Аватар для and_y87
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 98
11.09.2012, 12:34
AvengerAlive, сразу за
HTML5
1
<body>
Ставь
HTML5
1
<div>
задай для дива
CSS
1
2
3
position: absolute; 
height: Npx; 
background: url();
затем через JS или JQ(удобнее) смещайте
CSS
1
background-position: Npx;
положение фона по таймеру...
1
5 / 5 / 1
Регистрация: 30.07.2011
Сообщений: 257
11.09.2012, 12:36  [ТС]
and_y87, я новичок в jquery и мало какие функции там знаю. Можно поподробнее именно о jQuerry как это там делается?
0
Develo0per
 Аватар для and_y87
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 98
11.09.2012, 12:42
AvengerAlive, я задобавлся когда то этим же вопросом...
вот моя тема: Смещение background-image (сделать плавающим)
0
5 / 5 / 1
Регистрация: 30.07.2011
Сообщений: 257
11.09.2012, 12:42  [ТС]
мне надо чтобы рисунок мой на 2048 пикселей в ширину если сдвинулся на 1 пиксель, то чтобы этот один пиксель был смещён с другой стороны концом, т.е. чтобы оно было циклическое

Добавлено через 25 секунд
and_y87, и кто-то ответил?
0
Develo0per
 Аватар для and_y87
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 98
11.09.2012, 12:50
впринципе там есть всё что вам нужно

Добавлено через 30 секунд
Сам догадался... =)

Добавлено через 21 секунду
Я слишком жаждал что бы оно заработало... =)
недождался ответа )

Добавлено через 5 минут
Вот вам логика

переменная_1 = ваше смеение за 1 раз
переменная_2 = ваше текущее смещение
функция смещение_фона(){
if (переменная_2 > длинны вашего изображения) {
переменная_2 = 0
}иначе{
переменная_2 = переменная_2 + переменная_1
}
смещение фона на переменная_2 px
}

таймер запускающий функцию смещение_фона каждые n милисекунд
0
5 / 5 / 1
Регистрация: 30.07.2011
Сообщений: 257
11.09.2012, 12:54  [ТС]
and_y87, я вот плохо знаком с функциями jquery.
смещение фона - как инициализируется эта функция?

+ я использую эту библиотеку http://ajax.googleapis.com/aja... /jquery.js
она пойдёт?
0
Develo0per
 Аватар для and_y87
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 98
11.09.2012, 13:03
AvengerAlive, ваша задумка реализуема и без JQ на самом деле

ну вот что то вроде этого должно получитсья...

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var s = '5px' // step - Величина шага
var p = '' // position - текущая позиция фона
var id = 'id_diva_s_background' // id Вашего элемента DIV содержащего фон
 
function movBG(){
    if( p > 2048 ) {
        p = 10;
    } else {
        p = p + s;
    }
    p = p+'px'; // Делаем строкой иначе не сдвинем...
    document.GetElementByID(id).style.backgroundPositionX = p ;
}
 
    setTimeout(movBG(), 1000); //вызываем функцию каждую секунду....
0
5 / 5 / 1
Регистрация: 30.07.2011
Сообщений: 257
11.09.2012, 13:55  [ТС]
JavaScript
1
2
3
4
5
6
7
var smesheniye = 1;
    var nachalo = 0;
    function dvijeniye(сюда же надо передать Id блока div фон которого смещаю) {
        if ( nachalo > 2048 ) nachalo = 0;
        else nachalo += smesheniye;
        /*obj.style. backgroundPosition =  nachalo;*/ Как сменить и сказать что это для блока DIV???
    }
Добавлено через 45 секунд
а она циклична?

Добавлено через 32 секунды
я не понимаю как функция инициализирует, что именно этот background перемещается

Добавлено через 2 минуты
and_y87, а для вашего кода с js стандартная js пойдёт?

Добавлено через 2 минуты
я имею ввиду библиотека какая-нибудь нужна?

Добавлено через 2 минуты
так не двигается(((

Добавлено через 42 минуты
сделал так, ибо то не работало. тоже не работает.
JavaScript
1
2
3
4
5
6
7
8
9
setInterval(function movBG(){
                if( p > 2048 ) {
                    p = 0;
                } 
                else {
                    p = p + s;
                }
                p = p+'px';                 document.getElementById(id).style.backgroundPositionX = p ;
            }, 1000);
0
Develo0per
 Аватар для and_y87
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 98
11.09.2012, 14:25
AvengerAlive, id у блока задали, в переменную id внесли ?
0
5 / 5 / 1
Регистрация: 30.07.2011
Сообщений: 257
11.09.2012, 14:37  [ТС]
and_y87, внёс. так сделал, тоже не пашет

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var s = 500; 
            var p = 0; 
            var k = '';
            var id = 'image_animate'; 
            function movBG(){
                if( p > 2048 ) {
                    p = 0;
                } 
                else {
                    p = p + s;
                }
                k = p+'px';
                document.getElementById(id).style.backgroundPositionX = k ;
            }
            window.setInterval("movBG()", 1000);
Добавлено через 1 минуту
самое интересное что в firebug функция запускается. а результаты на экране не видны

Добавлено через 2 минуты
на ie пашет!!! а вот на остальных нифига...

Добавлено через 2 минуты
вот, ie, safari, chrome работает. mozila opera java включён. не работает.
0
Develo0per
 Аватар для and_y87
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 98
11.09.2012, 15:40
JavaScript
1
2
document.getElementById(id).style.backgroundPositionX = k ;
$(id).css('background-position', k) /* это уже с подключённым JQ*/
0
5 / 5 / 1
Регистрация: 30.07.2011
Сообщений: 257
11.09.2012, 15:43  [ТС]
and_y87, я попытался сделать тот же финт в обратном направлении. как я понял надо отрицательные числа юзать. не получается с ними, изо стоит.
0
Develo0per
 Аватар для and_y87
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 98
11.09.2012, 15:46
AvengerAlive, отрицательное число:
JavaScript
1
2
var a=50;
var b= '-'+a+'px'
1
5 / 5 / 1
Регистрация: 30.07.2011
Сообщений: 257
11.09.2012, 16:12  [ТС]
and_y87, я брал тот jquery что с сылки выше. не пашет вариант с ним.

Добавлено через 26 минут
and_y87, и всё же почему на Mozila и Opera не пашет javascript? Всё же не разобрался с Jquery, библиотека вроде есть.
JavaScript
1
$(id).css('background-position', k)
а как он понимает это х или y?
0
Develo0per
 Аватар для and_y87
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 98
11.09.2012, 16:15
AvengerAlive, оооооо...
точно.... там первое значение это 'X' а второе это 'Y'

может так надо...
JavaScript
1
var b= '-'+a+'px 0px'
хотя вроде бы автоматом должен Y - 0px делать...

Добавлено через 34 секунды
JavaScript
1
$(id).css('background-position', '-50px 0px')
0
5 / 5 / 1
Регистрация: 30.07.2011
Сообщений: 257
11.09.2012, 16:34  [ТС]
and_y87, ОК, а библиотеку то какую взять? Я уже их штук 10 перекачал, не работают
0
Develo0per
 Аватар для and_y87
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 98
11.09.2012, 16:39
AvengerAlive, обычно достаточно подключить библиотеку последней версии...
в ней содержаться все функции предыдущих версий устраняются глюки баги и дополняют новыми возможностями, редко случается когда вырезается какая либо функция...

эх я лошара забыл.... что на JQ вот так с ID надо работать:
JavaScript
1
$('#'+id).css('background-position',k+' 0px');
ошибка была тут: $(id)
надо было: $('#'+id)

Добавлено через 1 минуту
но можно и зарание там прописать...
JavaScript
1
var id = '#image_animate';
хотя нет.... тогда накроется строка выше...
кстате к слову если будет 2 строки то будет фон 2 раза смещаться.... советую использовать только JQ т.к. он проще...
1
5 / 5 / 1
Регистрация: 30.07.2011
Сообщений: 257
11.09.2012, 16:50  [ТС]
and_y87, СПАСИБООО!!! Наконец заработало))) Целый день угрохал)
0
Develo0per
 Аватар для and_y87
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 98
11.09.2012, 16:54
AvengerAlive, главное что бы серого вещества побольше выделилось и в корке что нибудь отложилось :Р
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
11.09.2012, 16:54
Помогаю со студенческими работами здесь

Анимированный фон в Body
Как мне сделать в body анимированый background. Размер изображения 4к. Размер экрана 1920x1280 к примеру (Может быть вообще любой...

Анимированный фон в BackgroundImage
Добрый вечер господа. Можно ли сделать, подгрузить анимированный фон в элемент управления BackgroundImage? Любая анимация...

Анимированный фон в меню приложения
Добрый день всем! В приложении использую iCarousel, с помощью нее реализовано меню. Там есть событие, которое обрабатывает смену...

Как создать анимированный фон из видео mp4 в 2d игре?
Здравствуйте, ситуация такая: я создал анимированный фон в фотошопе, отрендерил его в mp4, думал изначально, что можно будет просто...

При установке стиля анимированный фон всегда поверх страницы
В общем ставлю вот этот фон http://truequery.ru/f_animated_background_to_site_in_the_style.html не реклама! И в итоге фон по верх всей...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Новые блоги и статьи
сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает?
Neotwalker 09.01.2026
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3
anaschu 06.01.2026
aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR
ФедосеевПавел 06.01.2026
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .
Модель микоризы: классовый агентный подход 2
anaschu 06.01.2026
репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .
Расчёт токов в цепи постоянного тока
igorrr37 05.01.2026
/ * Дана цепь постоянного тока с сопротивлениями и источниками (напряжения, ЭДС и тока). Найти токи и напряжения во всех элементах. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru