Кто-то знает, как этот эффект даже называется и как это делается?Как архивировать вертикальный слайдер, как в примере?
уже пробовал что-то вроде этого - но он глючит и не работает должным образом, как я этого хочу. также не очень хорошо в полноэкранном режиме. Первые два изображения логотипа и навигации
<div style="position:relative;height:720px;">
<img src="http://placehold.it/95x85" width="95" height="85" style="position:absolute;left:14px;top:27px;z-index:1000;" />
<img src="http://placehold.it/120x465" width="120" height="465" style="position:absolute;left:0;top:145px;z-index:1001;" />
<div id="img1" style="width:1920px;height:1080px;background-image:url('https://unsplash.it/g/1920/1080?image=0');position:absolute;left:0px;"></div>
<div id="img2" style="width:1920px;height:1080px;background-image:url('https://unsplash.it/1920/1080?image=0');position:absolute;left:0px;"></div>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/273339-200.png" width="200" height="200" style="position:absolute;background-color: rgba(255, 255, 255, 0.25); top: 50%;" id="border" />
</div>
JS:
var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');
var border = document.getElementById('border');
img1.onmousemove = redraw;
img2.onmousemove = redraw;
border.onmousemove = redraw;
function redraw(e){
posx = e.pageX - findPosX(img1);
if (posx!=null&&posx>0&&posx<1600){
img1.style.width=posx+"px";
img2.style.backgroundPosition=(-posx)+"px";
img2.style.left=posx+"px";
img2.style.width=(1600-posx)+"px";
border.style.left=(posx-100)+"px";
}
}
function findPosX(obj){
var curleft = 0;
if(obj.offsetParent)
while(1){
curleft += obj.offsetLeft;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.x)
curleft += obj.x;
return curleft;
}
https://jsfiddle.net/y7nfzw6z/
эффект можно найти здесь: http://www.e2save.com/if-only-it-was-4k/
Я добавлю скриншот сайта поэтому вы можете видеть, какой эффект я имею в виду.
Yeh Yeh .. отредактирован, возобновлять пожалуйста. – Dustin