[Ликбез]
Форма входа
Логин:
Пароль:
Меню сайта
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать... » Смена фона без перегрузки с анимационными эфектами
Смена фона без перегрузки с анимационными эфектами
[1] Гость [11.02.2012, 03:06]
likbezz
Код не плохой, но его нужно доработать! Думаю он вряд ли кому-то будет полезен без плавленного появления картинок! Весь инет облазил, но так и не смог найти примера, где это было бы реализовано, именно что бы плавно менялся backgroundImage а не img. Может ты доработаешь свой код и покажешь как это делать?
[2] likbezz [11.02.2012, 05:11]
Гость,
Quote (Гость)
Думаю он вряд ли кому-то будет полезен без плавленного появления картинок!

Ошибаетесь.
Quote (Гость)
Весь инет облазил, но так и не смог найти примера, где это было бы реализовано

Плохо вы ищите.
Quote (Гость)
Может ты доработаешь свой код и покажешь как это делать?

Так всё же, “доработать” или показать как сделать? Это разное.
...

Пожалуйста, для “примера” ... )
☑ Автоматическая смена фона + прозрачность (Rand_bg 4 + opacity) ...

☑ rand_bg_3_next (последовательная смена изображений)
...
[3] Гость [12.02.2012, 06:14]
Quote (likbezz)
Гость,
Quote (Гость)
Думаю он вряд ли кому-то будет полезен без плавленного появления картинок!

Ошибаетесь.
Quote (Гость)
Весь инет облазил, но так и не смог найти примера, где это было бы реализовано

Плохо вы ищите.
Quote (Гость)
Может ты доработаешь свой код и покажешь как это делать?

Так всё же, “доработать” или показать как сделать? Это разное.


И опять вы здесь)) И доработать и показать!!!!!!!!!!!! Если это возможно конечно))

Я знаю, backgroundImage не анимируется функцией animate() в jquery поэтому это сделать не так просто. Я нашел один пример и встроил его в свой проект, но там куча всего и ни совсем понятно! А у вас код простой понятный! Вообщем если знаете как сделать, то почему бы не показать))
[4] likbezz [12.02.2012, 06:19]
Гость,
Quote (Гость)
Вообщем если знаете как сделать, то почему бы не показать))

☑ Автоматическая смена фона + прозрачность (Rand_bg 4 + opacity) ...
...
Quote (Гость)
Я нашел один пример и встроил его в свой проект, но там куча всего и ни совсем понятно!

Ссылочку дадите?
[5] Гость [12.02.2012, 06:27]
likbezz,
Не заметил сразу ссылку, спасибо, интересный пример, возьму его себе))
Вот ссылка http://ruseller.com/lessons.php?rub=29&id=574
Но там куча всякого не нужного, много что повырезал, но скрипт все равно большой получился, и какой-то он не такой по моему))
[6] likbezz [12.02.2012, 09:00]
Гость,
Quote (Гость)
likbezz,
Не заметил сразу ссылку, спасибо, интересный пример, возьму его себе))

Вот тебе ещё парочка, с фиксированным фоном:

☑ Автоматическая смена фона (Rand_bg 6 + Opacity + Fixed)
...

И не фиксированным фоном

☑ Автоматическая смена фона (Rand_bg 5 + Opacity + Absolute) ...

И:
☑ Автоматическая смена фона (Rand_bg 5-2 + Opacity + Absolute + без повторения) ...
...
...
[7] Stels [21.02.2012, 13:58]
А не подскажете куда добавлять например background-repeat, background-position, background-attachment
Я, например хочу сделать чтобы картинка не повторялась, была по центру и т.д

В какое место мне дописать background-repeat: no-repeat;background-position: center top; background-attachment:fixed
[8] likbezz [21.02.2012, 17:26]
Stels,
Quote (Stels)
А не подскажете куда добавлять например background-repeat, background-position, background-attachment

Это всё свойства background - туда и писать.
В данном скрипте:
Code
<script type="text/javascript">
function showImg(){
var imgBg=new Array()
imgBg[0]='http://likbezz.ru/_example/rotator/psBg.gif';
imgBg[1]='http://likbezz.ru/_example/rotator/psBg-e.gif';
imgBg[2]='http://likbezz.ru/_example/rotator/psBg-g.gif';
imgBg[3]='http://likbezz.ru/_example/rotator/psBg-r.gif';
imgBg[4]='http://likbezz.ru/_example/rotator/psBg-b.gif';
imgBg[5]='http://likbezz.ru/_example/rotator/psBg-gb.gif';
imgBg[6]='http://likbezz.ru/_example/rotator/psBg-s.gif';
var u=imgBg[Math.floor(Math.random()*imgBg.length)],c=new Image();c.src=u,obj=$('#rand_bg'),obj1=$('#rand_bg').clone().attr('id','rand_bg_1').css('opacity','0');
if(!document.getElementById('rand_box')){obj.wrap('<div id="rand_box" />').after(obj1);}var obj1=$('#rand_bg_1');
var changeBg=function(){
  if(obj.css('opacity')==0){
  obj1.animate({opacity:'0'},1000);
  obj.css('background','url('+u+') repeat 0% 0%').animate({opacity:'1'},1000);
  }else{
  obj.animate({opacity:'0'},1000);
  obj1.css('background','url('+u+') repeat 0% 0%').animate({opacity:'1'},1000);
}};
if(!c.complete){c.onload=function(){changeBg();}
}else{changeBg();}setTimeout('showImg()',5000);
};showImg();
</script>

, вот сюда:
Quote (Code)
obj.css('background','url('+u+') repeat 0% 0%').animate({opacity:'1'},1000);

Вот так:
Quote (Code)
obj.css('background','url('+u+') no-repeat 50% 0%').animate({opacity:'1'},1000);

...
[9] ADMINistrator5946 [21.02.2012, 17:27]
likbezz, сервер восстановили, посмотри пожалуйста
[10] likbezz [18.03.2012, 18:52]
ADMINistrator5946,
Quote (ADMINistrator5946)
сервер восстановили, посмотри пожалуйста

О, нет, вам этот вариант скрипта не подойдёт.
Это же для блока, а не для всей страницы ...
[11] ADMINistrator5946 [18.03.2012, 19:00]
Я поставила старый вариант
Code
<script type="text/javascript">   
function showImg(){   
var imgBg=new Array()   
imgBg[0]='http://wfiles.brothersoft.com/t/transformers-hd_76005-1280x800.jpg';   
imgBg[1]='http://st.kinopoisk.ru/im/wallpaper/5/2/8/kinopoisk.ru-Transformers-528436--w--1280.jpg';   
imgBg[2]='http://img137.imageshack.us/img137/1687/tf3m.jpg';   
imgBg[3]='http://oboi.kards.qip.ru/images/wallpaper/02/b9/112898_1280_800.jpg';   
imgBg[4]='http://wallpapers99.com/images/wallpaper/1024x768/Transformers%20Revenge%20of%20the%20Fallen_7873.jpg';   
imgBg[5]='http://www.prorobot.ru/film/transformers/transformers-07.jpg';   
imgBg[6]='http://www.dream-wallpaper.com/free-wallpaper/game-wallpaper/transformers-wallpaper/1600x1200/free-wallpaper-5.jpg';   
var u=imgBg[Math.floor(Math.random()*imgBg.length)],c=new Image();c.src=u;   
if(!c.complete){c.onload=function(){document.getElementById('rand_bg').style.background='url('+u+') no-repeat top center';setTimeout('showImg()',3000);}}else{document.getElementById('rand_bg').style.background='url('+u+') no-repeat top center';setTimeout('showImg()',3000);}   
};setTimeout('showImg()',3000);   
</script>

А в него нельзя добавить эффект плавленной смены изображений фона

Сообщение отредактировал ADMINistrator5946 - Воскресенье, 18.03.2012, 19:01
[12] likbezz [18.03.2012, 19:03]
ADMINistrator5946,
Quote (ADMINistrator5946)
А в него нельзя добавить эффект плавленной смены изображений фона

Нет, в него нельзя.
Но можно попробовать вариант Автоматическая смена фона (Rand_bg 5 + Opacity + Absolute) ...
Code
<script type="text/javascript">
function getElmHeight(el){var e=el;return (e.scrollHeight>e.offsetHeight)?e.scrollHeight:e.offsetHeight;}
function showImg(){
var imgBg=new Array()
imgBg[0]='http://likbezz.ru/_source/_fon/patterns/patt8_0.jpg';
imgBg[1]='http://likbezz.ru/_source/_fon/patterns/patt8_1.jpg';
imgBg[2]='http://likbezz.ru/_source/_fon/patterns/patt8_2.jpg';
imgBg[3]='http://likbezz.ru/_source/_fon/patterns/patt8_3.jpg';
imgBg[4]='http://likbezz.ru/_source/_fon/patterns/patt8_4.jpg';
imgBg[5]='http://likbezz.ru/_source/_fon/patterns/patt8_5.jpg';
imgBg[6]='http://likbezz.ru/_source/_fon/patterns/patt8_6.jpg';
imgBg[7]='http://likbezz.ru/_source/_fon/patterns/patt8_7.jpg';
imgBg[8]='http://likbezz.ru/_source/_fon/patterns/patt8_8.jpg';
var u=imgBg[Math.floor(Math.random()*imgBg.length)],c=new Image();c.src=u,obj=$('body'),h=getElmHeight(document.getElementById('wrap0'));
if(!document.getElementById('bgImg1')){
obj.append('<img id="bgImg1" style="position:absolute;z-index:-1;height:'+h+'px;" src="/_theme1/_st/img/spacer.gif" alt="" /><img id="bgImg2" style="position:absolute;z-index:-1;height:'+h+'px;" src="/_theme1/_st/img/spacer.gif" alt="" />');
$('#bgImg1').css('background',obj.css('background'));
};
if(obj.css('background')!='transparent'){
obj.css('background','transparent');
};
var img1=$('#bgImg1').css('height',h+'px'),img2=$('#bgImg2').css('height',h+'px');
var changeBg=function(){
    if(img1.css('opacity')==0){
    img2.animate({opacity:'0'},1200);
    img1.css('background','url('+u+') repeat 0% 0%').animate({opacity:'1'},1000);
    }else{
    img1.animate({opacity:'0'},1200);
    img2.css('background','url('+u+') repeat 0% 0%').animate({opacity:'1'},1000);
}};
if(!c.complete){c.onload=function(){changeBg();}
}else{changeBg();}setTimeout('showImg()',5000);
};
$(document).ready(function(){showImg();});

</script>

...
[13] ADMINistrator5946 [18.03.2012, 19:25]
likbezz, что-то вообще не работает фон меняется а мне надо чтоб это было вместо подложки в верху сайта, а в css ни чего не надо прописывать.

Сообщение отредактировал ADMINistrator5946 - Воскресенье, 18.03.2012, 20:17
[14] likbezz [19.03.2012, 08:33]
ADMINistrator5946,
Quote (ADMINistrator5946)
что-то вообще не работает фон меняется

Ну, он и должен меняться... Это же скрипт смены фона.

Quote (ADMINistrator5946)
а в css ни чего не надо прописывать.

Прозрачный цвет для блока, если только.
...
[15] ADMINistrator5946 [19.03.2012, 20:00]
likbezz, добрый вечер, скажите пожалуйста я как то делала подложку фона изображение по ширине экрана где-то записала не могу найти.
Css
Code
#wrap0 {background: #000000 url(http://vkkuno.ucoz.ru/transf.jpg)  no-repeat top center ;}

Верхняя часть сайта
Code
<div id="wrap0">

Сайт тот-же
Полная версия сайта