Помогите с паралаксом

171

13 августа 2018, 12:40

Помогите чтоб при скролле до блоков, они выезжали слева/справа и становились на свои места. Но именно чтоб выезжали постепенно во время скролла, а не вылетали анимацией. Надеюсь понимаете о чем я.

https://jsfiddle.net/evhxpawk/7/

<div class="content">Контент...</div>
<div class="block1">Блок паралакса, выдвигать слева направо</div>
<div class="block2">Блок паралакса, выдвигать справа налево</div>

Answer 1

То что Вы хотите сделать, это не параллакс.

Вот здесь можно почитать - https://ru.wikipedia.org/wiki/%D0%9F%D0%B0%D1%80%D0%B0%D0%BB%D0%BB%D0%B0%D0%BA%D1%81

А вот здесь увидеть воочию, творение разработчика - http://matthew.wagerfield.com/parallax/

А вот пример "в лоб" того, что Вы хотите сделать. Если Вам не нужно, при прокрутке вверх, чтобы блоки ехали обратно - уберите из кода конструкцию

 else {
block1Pos-=10;
block2Pos+=10;
blockFlying[0].style=`left:${block1Pos}%`;
blockFlying[1].style=`left:${block2Pos}%`;
}

Пример грубоватый, но суть должен донести.

let wrapContent=document.querySelector('.wrap'), 
    blockFlying=document.getElementsByClassName('block'), 
    block1Pos=-100, 
    block2Pos=100, 
    wheel="wheel"||"mousewheel"||"MozMousePixelScroll"; 
const scrollFly=e=>{ 
  if ((e.deltaY || e.detail || e.wheelDelta)>0&&block1Pos<0&&block2Pos>0) { 
    block1Pos+=10; 
    block2Pos-=10; 
    blockFlying[0].style=`left:${block1Pos}%`; 
    blockFlying[1].style=`left:${block2Pos}%`; 
  } else { 
    block1Pos-=10; 
    block2Pos+=10; 
    blockFlying[0].style=`left:${block1Pos}%`; 
    blockFlying[1].style=`left:${block2Pos}%`; 
  } 
   
}; 
(wrapContent.addEventListener)? 
  wrapContent.addEventListener(wheel, scrollFly): 
wrapContent.attachEvent(wheel, scrollFly); 
window.onunload=()=>wrapContent.removeEventListener(wheel, scrollFly)|| 
  wrapContent.detachEvent(wheel, scrollFly);

html,body.wrap{width:100%} 
body { 
  padding-bottom: 500px; 
} 
.wrap{ 
  overflow:hidden; 
} 
.content { 
  padding-bottom: 1000px; 
} 
.block{ 
  position:relative; 
  transition:.5s; 
} 
.block1 { 
  background: green; 
  left:-100%; 
} 
 
.block2 { 
  background: yellow; 
  left:100%; 
}

<div class="wrap"> 
  <div class="content">Контент...</div> 
  <div class="block block1">Блок, выезжающий слева</div> 
  <div class="block block2">Блок, выезжающий справа</div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Помогите с паралаксом

Как обойти регистр букв для имени папки?

Как узнать позицию активного объекта?

Async не ожидать результата

C# Конверсия индексов Jagged массива содержащего другой Jagged массив. Tilemap