Форум Сайтостроение Веб-строительство

аналогичный эффект на js

RO
На сайте с 13.07.2009
Offline
88
RedOK
838

как на сайте http://www.joannakustra.com/ подскажите что-то подобное но на js (jquery желательно)

интересует вот этот эффект, когда наводишь курсор на пункт из меню и плавно меняется фоновая картинка на всей странице, может есть слайдер какой-то подобный или что-то вроде этого :popcorn:

DiAksID
На сайте с 02.08.2008
Offline
218
DiAksID
#1

по аналогии с этим:


$('.thumbnail > a').bind({
	mouseenter:function(){
		return $(this).parent().addClass('light');
	},
	mouseleave:function(){
		return $(this).parent().removeClass('light');
	}
});

+ css transition при смене фона

для полной кросброузерности придётся свою функцию писать для анимации, несложно вообщем...

---

UPD transition конечно не прокатит. придётся делать стопку прозрачных слоёв с фонами. но всё совсем не сложно...

show must go on !!!...
C
На сайте с 04.02.2005
Offline
277
Chukcha
#2

плавно менять фон может и не получится, но попробовать можно.

но такого эффекта добиться можно, воспользовавшись

$('active').animate({opacity: 0});

$('next').animate({opacity: 1});

на нагруженных компах, могут возникать артефакты с задержками

---------- Добавлено 16.04.2013 в 16:35 ----------

там еще и эффект сдвига, тогда

$('next').animate({'opacity': 1, 'backround-position':'-20px -20px'});

RO
На сайте с 13.07.2009
Offline
88
RedOK
#3

да, таки настало время начать учить js, а то привык всё готовое качать :D

---------- Добавлено 16.04.2013 в 17:34 ----------

есть мысль менять фон на странице лишь через наложение картинки на картинку, а затем делать прозрачной ту что выше слоем. но такое прокатит лишь с двумя картинками.. а мне штук 6 нужно. для каждого пункта меню.

C
На сайте с 04.02.2005
Offline
277
Chukcha
#4

посмотри в сторону siblings (соседей).

Тебе нужно получить текущую, и следующую, но все зависит от реализаци твоих блоков.

Сначала создай список блоков с картинками

затем пункты меню

затем события hover

с анализом текущей и следующей картинки(блока)

Дольше описывать, чем делать :)

RO
На сайте с 13.07.2009
Offline
88
RedOK
#5
Chukcha:
посмотри в сторону siblings (соседей).
Тебе нужно получить текущую, и следующую, но все зависит от реализаци твоих блоков.
Сначала создай список блоков с картинками
затем пункты меню
затем события hover
с анализом текущей и следующей картинки(блока)
Дольше описывать, чем делать :)

наговнокодил вот что 🤪 

var main={

		init:function(){

			main.menu.init();

		},

		menu:{

			setBodyBg:function(url){

				$(document.body).animate({'opacity':1},500,function(){ // пока не работает как я задумавал 

					$(this).css('background-image','url("'+url+'")');

				});

			},

			init:function(){

				var links=$('menu li');

				$.each(links,function(key,value){

					

					$(value).on('mouseenter',function(){

						$(this).animate({'margin-left':'+=3px'},100);

						main.menu.setBodyBg($(this).attr('bg'));

					});

				})

			}

		}

}

$(document).ready(function(){

	main.init();

})



---

html

<body>

	<menu>

		<li bg="http://www.joannakustra.com/content/photos/html/0004.jpg"><a href="#">1</a></li>

		<li bg="http://www.joannakustra.com/content/photos/html/0003.jpg"><a href="#">2</a></li>

		<li bg="http://www.joannakustra.com/content/photos/html/0013.jpg"><a href="#">3</a></li>

		<li bg="http://www.joannakustra.com/content/photos/html/0017.jpg"><a href="#">4</a></li>

		<li bg="http://www.joannakustra.com/content/photos/html/0009.jpg"><a href="#">5</a></li>

	</menu>

</body>

при наведении на пункт меню, фоновая картинка меняется. вот только не могу понять как сделать чтобы она менялась плавно.. как это сделать через .animate ? или тут что-то другое нужно?

C
На сайте с 04.02.2005
Offline
277
Chukcha
#6

в том-то и дело, что нужно два слоя, один тухнет, другой гаснет :)

а ты пытаешься управлять одним слоем.

к анимате ты прописал колбек, потому и не работает

в свойствах анимате, нужно говорить до какого свойства анимировать, но у тебя опасити для боди уже в 1

Спробуй ще ::)

RO
На сайте с 13.07.2009
Offline
88
RedOK
#7
Chukcha:
в том-то и дело, что нужно два слоя, один тухнет, другой гаснет :)

а ты пытаешься управлять одним слоем.

к анимате ты прописал колбек, потому и не работает
в свойствах анимате, нужно говорить до какого свойства анимировать, но у тебя опасити для боди уже в 1
Спробуй ще ::)

так, я немного сдвинулся с места 🍿

#bg1,#bg2,#bg3,#bg4,#bg5{
	position:absolute;
	width:100%;
	z-index:-1;
	height:100%;
}
#bg1{
	background-image: url('http://www.joannakustra.com/content/photos/html/0004.jpg');
}
#bg2{
	background-image: url('http://www.joannakustra.com/content/photos/html/0003.jpg');
}
#bg3{
	background-image: url('http://www.joannakustra.com/content/photos/html/0017.jpg');
}
#bg4{
	background-image: url('http://www.joannakustra.com/content/photos/html/0019.jpg');
}
#bg5{
	background-image: url('http://www.joannakustra.com/content/photos/html/0009.jpg');
}
---
затем слои
<body>
	<div id="bg1"></div>
	<div id="bg2"></div>
	<div id="bg3"></div>
	<div id="bg4"></div>
	<div id="bg5"></div>
	<menu>
		<li bg="1"><a href="#">1</a></li>
		<li bg="2"><a href="#">2</a></li>
		<li bg="3"><a href="#">3</a></li>
		<li bg="4"><a href="#">4</a></li>
		<li bg="5"><a href="#">5</a></li>
	</menu>
</body>


ну и сам js
---
var main={
		init:function(){
			main.menu.init();
		},
		menu:{
			setBodyBg:function(id){
				$('#bg'+id).fadeOut(1000);
				main.menu.last=id;
			},
			last:null,
			removeBodyBg:function(){
				if(main.menu.last!=null){
					$('#bg'+main.menu.last).fadeIn(1000);
				}
			},
			init:function(){
				var links=$('menu li');
				$.each(links,function(key,value){
					$(value).on('mouseenter',function(){
						main.menu.removeBodyBg();
						main.menu.setBodyBg($(this).attr('bg'));
					});
					
				})
			}
		}
}
$(document).ready(function(){
	main.init(); 
})

фон меняется плавно. но как-то безвозвратно он меняется. тоесть если слой уже скрылся, то не показывается больше. как-то не так я со стеком слоёв работаю :(

вообще как-то рандомно слои меняются, если мышкой водить по меню

---------- Добавлено 16.04.2013 в 19:34 ----------

var main={
		init:function(){
			main.menu.init();
		},
		menu:{
			setBodyBg:function(id){
				$('#bg'+id).fadeIn(300);
				main.menu.last=id;
			},
			last:null,
			removeBodyBg:function(){
				if(main.menu.last!=null){
					$('#bg'+main.menu.last+' ~ div').fadeOut(300);
				}
				console.log(main.menu.last);
			},
			init:function(){
				var links=$('menu li');
				$.each(links,function(key,value){
					$(value).on('mouseenter',function(){
						main.menu.setBodyBg($(this).attr('bg'));
						main.menu.removeBodyBg();
					});
				})
			}
		}
}
$(document).ready(function(){
	main.init(); 
})

это победа! спасибо за моральную поддержку 🤪

если кто-то случайно пропадёт на эту тему из поиска, поясню - $('#bg'+main.menu.last+' ~ div').fadeOut(300); вот она магия, нужно было всех соседей выше скрывать а не только одного соседа.

C
На сайте с 04.02.2005
Offline
277
Chukcha
#8

fadeout должен быть у текущего, а fadein у наведенного

т.е.

сначала запоминаешь last.id

ему fadeout

затем при наведении -fadein, а в callback сохраняешь его id в last.id

---------- Добавлено 16.04.2013 в 19:55 ----------

ты очень "хитро" используешь цикл

$('menu li').each(function(index){

$(this).on('mouseenter',function(){

main.menu.setBodyBg($(this).attr('bg'));

main.menu.removeBodyBg();

});

})

}

причем атрибут bg не совсем валиден, может быть воспользоваться id или index

---------- Добавлено 16.04.2013 в 19:55 ----------

ты очень "хитро" используешь цикл

$('menu li').each(function(index){

$(this).on('mouseenter',function(){

main.menu.setBodyBg($(this).attr('bg'));

main.menu.removeBodyBg();

});

})

}

причем атрибут bg не совсем валиден, может быть воспользоваться id или index

RO
На сайте с 13.07.2009
Offline
88
RedOK
#9

а что с циклом не так? вроде нормально..

---------- Добавлено 16.04.2013 в 20:13 ----------

вот бы ещё сделать такой мелкий эффект, как на сайте в примере. там когда изображение появляется, то он как бы во время самого появления немного движется влево и вверх. думаю нужно перед появлением её сдвинуть немного вниз и вправо, а затем через animate вернуть на место. верно?

---------- Добавлено 16.04.2013 в 20:18 ----------

нет, не получается. fadeIn сначала показывает картинку, а затем она «едет» :( opacity в animate вообще скрывает её, не важно что я передаю 0 или 1

C
На сайте с 04.02.2005
Offline
277
Chukcha
#10

#bg1,#bg2,#bg3,#bg4,#bg5{

position:absolute;

width:100%;

z-index:-1;

height:100%;

background-positon:0 0

}

setBodyBg:function(id){

$('#bg'+id).animate({opacity:1,'background-position': -5px -5px},500,function(){main.menu.last=id});

},

может быть, еще stop сделать на всех $('#bg'+id).stop()

---------- Добавлено 16.04.2013 в 22:17 ----------

м... даже так

'background-position-x': '-5px',

'background-position-y': '-5px'

смещения подобрать для реалистичности.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий