|
Смена фона без перегрузки с анимационными эфектами
|
|
| [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 ;}
Верхняя часть сайта
Сайт тот-же |
|