Разделяне на снимка на две при клик?

backstage

Registered
Колеги, как да направя следното:

имам за интро страница една картинка изобразяваща предмет
искам при клик картинката да се разделя на две и да се друпват двете половини на страни и да се отваря заглаваната страница

Как мога да направя това?
 
Трудно.
Не можеш за разцепиш картинка може да пробваш нещо такова:

[js]
$(function(){
$('.img').click(function(){
$(this).find('.left').animate({'left' : '-400px', 'opacity' : '0'},300);
$(this).find('.right').animate({'right' : '-400px', 'opacity' : '0'}, 300, function (){
window.location = "http://abv.bg";
});
});
});
[/js]
[css]
.img {
width: 400px;
height: 200px;
margin: 0 auto;
position: relative;
}

.img .left {
width: 200px;
height: 200px;
left: 0;
overflow: hidden;
position: absolute;
}

.img .right {
width: 200px;
right: 0;
height: 200px;
overflow: hidden;
position: absolute;
}

.img .right img {
position: absolute;
right: 0;
}

.img .left img {
position: absolute;
left: 0;
}
[/css]
HTML:
<div class="img">
	<div class="left">
		<img src="http://dummyimage.com/400x200" alt="" />
	</div>
	<div class="right">
		<img src="http://dummyimage.com/400x200" alt="" />
	</div>
</div>
 

Back
Горе