Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 4.58/19: Рейтинг темы: голосов - 19, средняя оценка - 4.58
AvengerAlive
5 / 5 / 1
Регистрация: 30.07.2011
Сообщений: 257
1

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

11.09.2012, 11:28. Просмотров 3486. Ответов 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
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
11.09.2012, 11:28
Ответы с готовыми решениями:

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

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

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

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

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

20
and_y87
Web-Разработчик
409 / 357 / 71
Регистрация: 27.02.2012
Сообщений: 1,316
Записей в блоге: 84
11.09.2012, 12:34 2
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
AvengerAlive
5 / 5 / 1
Регистрация: 30.07.2011
Сообщений: 257
11.09.2012, 12:36  [ТС] 3
and_y87, я новичок в jquery и мало какие функции там знаю. Можно поподробнее именно о jQuerry как это там делается?
0
and_y87
Web-Разработчик
409 / 357 / 71
Регистрация: 27.02.2012
Сообщений: 1,316
Записей в блоге: 84
11.09.2012, 12:42 4
AvengerAlive, я задобавлся когда то этим же вопросом...
вот моя тема: Смещение background-image (сделать плавающим)
0
AvengerAlive
5 / 5 / 1
Регистрация: 30.07.2011
Сообщений: 257
11.09.2012, 12:42  [ТС] 5
мне надо чтобы рисунок мой на 2048 пикселей в ширину если сдвинулся на 1 пиксель, то чтобы этот один пиксель был смещён с другой стороны концом, т.е. чтобы оно было циклическое

Добавлено через 25 секунд
and_y87, и кто-то ответил?
0
and_y87
Web-Разработчик
409 / 357 / 71
Регистрация: 27.02.2012
Сообщений: 1,316
Записей в блоге: 84
11.09.2012, 12:50 6
впринципе там есть всё что вам нужно

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

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

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

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

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

+ я использую эту библиотеку http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js
она пойдёт?
0
and_y87
Web-Разработчик
409 / 357 / 71
Регистрация: 27.02.2012
Сообщений: 1,316
Записей в блоге: 84
11.09.2012, 13:03 8
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
AvengerAlive
5 / 5 / 1
Регистрация: 30.07.2011
Сообщений: 257
11.09.2012, 13:55  [ТС] 9
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
and_y87
Web-Разработчик
409 / 357 / 71
Регистрация: 27.02.2012
Сообщений: 1,316
Записей в блоге: 84
11.09.2012, 14:25 10
AvengerAlive, id у блока задали, в переменную id внесли ?
0
AvengerAlive
5 / 5 / 1
Регистрация: 30.07.2011
Сообщений: 257
11.09.2012, 14:37  [ТС] 11
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
and_y87
Web-Разработчик
409 / 357 / 71
Регистрация: 27.02.2012
Сообщений: 1,316
Записей в блоге: 84
11.09.2012, 15:40 12
Javascript
1
2
document.getElementById(id).style.backgroundPositionX = k ;
$(id).css('background-position', k) /* это уже с подключённым JQ*/
0
AvengerAlive
5 / 5 / 1
Регистрация: 30.07.2011
Сообщений: 257
11.09.2012, 15:43  [ТС] 13
and_y87, я попытался сделать тот же финт в обратном направлении. как я понял надо отрицательные числа юзать. не получается с ними, изо стоит.
0
and_y87
Web-Разработчик
409 / 357 / 71
Регистрация: 27.02.2012
Сообщений: 1,316
Записей в блоге: 84
11.09.2012, 15:46 14
AvengerAlive, отрицательное число:
Javascript
1
2
var a=50;
var b= '-'+a+'px'
1
AvengerAlive
5 / 5 / 1
Регистрация: 30.07.2011
Сообщений: 257
11.09.2012, 16:12  [ТС] 15
and_y87, я брал тот jquery что с сылки выше. не пашет вариант с ним.

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

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

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

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

Добавлено через 1 минуту
но можно и зарание там прописать...
Javascript
1
var id = '#image_animate';
хотя нет.... тогда накроется строка выше...
кстате к слову если будет 2 строки то будет фон 2 раза смещаться.... советую использовать только JQ т.к. он проще...
1
AvengerAlive
5 / 5 / 1
Регистрация: 30.07.2011
Сообщений: 257
11.09.2012, 16:50  [ТС] 19
and_y87, СПАСИБООО!!! Наконец заработало))) Целый день угрохал)
0
and_y87
Web-Разработчик
409 / 357 / 71
Регистрация: 27.02.2012
Сообщений: 1,316
Записей в блоге: 84
11.09.2012, 16:54 20
AvengerAlive, главное что бы серого вещества побольше выделилось и в корке что нибудь отложилось :Р
0
11.09.2012, 16:54
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
11.09.2012, 16:54

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

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

Фон позади кнопки должен быть, как фон блока
Фон позади кнопки должен быть, как фон блока Это сложно объяснить словами, скину скрины макета ...


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

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru