Горизонтальный параллакс эффект

Question

Есть блок с горизонтальной прокруткой. Каким образом к нему можно добавить эффект параллакс фона, то есть, задний план должен прокручиваться вправо-влево медленнее, чем основное содержимое. Для примера добавлю простейший код.

.parallax {
  width: 600px;
  height: 200px;
  overflow-y: scroll;
  background-size: cover;
  background-image: url('https://get.wallhere.com/photo/2700x1045-px-architecture-bridge-building-cityscape-clouds-evening-landscape-lights-Manhattan-modern-New-York-City-panoramas-reflection-sea-skyscraper-urban-water-1104024.jpg');
}

.inner {
  width: 900px;
  height: 200px;
  color: #fff;
}

<div class="parallax">
  <div class="inner">.........F......F...........................F...........................F.......................F................................................F.................</div>
</div>

Answer 1

А вы пробовали сделать то, что хотите? То есть сделать пару блоков с прокруткой, и чтобы один из блоков прокручивался вместе со вторым.

<div id="a" style="width: 300px; overflow: hidden">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAKCAYAAADo3z3CAAAAAXNSR0IArs4c6QAAAGhJREFUSIljjD/75D8DEmA5J83wx+gpBp/lnDTDj8uPGFjimZGVM1ycPI9BPzcJp36YGm2+eAy9uOzFZQbMnj8L/2KYhexOmF50dSznpBmYcLpgmIJRDw93MOrh4Q5GPTzcwaiHhzsAADNGLBBYK+UPAAAAAElFTkSuQmCC" width="600" style="image-rendering: pixelated">
</div>
<div id="b" style="width: 300px; overflow: auto">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAKCAYAAADo3z3CAAAAAXNSR0IArs4c6QAAAGFJREFUSIljYBgFo2BYAUZaGGpvX/IfXezgwR6a2EUqYBloB9AC4AtwJvo7Z2ABRgxjCx1sAD2JEqsPH8BlBjWzAwu5DoXpI8cx1AgccsGQyMPEFILEBuKQ8DA+QKxHYeoAwXojviQDoRQAAAAASUVORK5CYII=" width="600" style="image-rendering: pixelated">
</div>

Вот пара блоков. Чтобы реагировать на прокрутку надо повесить обработчик scroll-события (хороший источник знаний о js -- документация MDN). Это просто.

var $a = document.querySelector('#a');
var $b = document.querySelector('#b');
$b.addEventListener('scroll', function(e) {
    window.requestAnimationFrame(function() {
        $a.scrollLeft = $b.scrollLeft * 0.3;
    });
});

Осталось разместить один блок над другим и готово.

var $a = document.querySelector('#a');
var $b = document.querySelector('#b');
$b.addEventListener('scroll', function(e) {
    window.requestAnimationFrame(function() {
        $a.scrollLeft = $b.scrollLeft * 0.3;
    });
});

<div id="a" style="width: 300px; overflow: hidden">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAKCAYAAADo3z3CAAAAAXNSR0IArs4c6QAAAGhJREFUSIljjD/75D8DEmA5J83wx+gpBp/lnDTDj8uPGFjimZGVM1ycPI9BPzcJp36YGm2+eAy9uOzFZQbMnj8L/2KYhexOmF50dSznpBmYcLpgmIJRDw93MOrh4Q5GPTzcwaiHhzsAADNGLBBYK+UPAAAAAElFTkSuQmCC" width="600" style="image-rendering: pixelated">
</div>
<div id="b" style="width: 300px; overflow: auto; margin-top: -100px">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAKCAYAAADo3z3CAAAAAXNSR0IArs4c6QAAAGFJREFUSIljYBgFo2BYAUZaGGpvX/IfXezgwR6a2EUqYBloB9AC4AtwJvo7Z2ABRgxjCx1sAD2JEqsPH8BlBjWzAwu5DoXpI8cx1AgccsGQyMPEFILEBuKQ8DA+QKxHYeoAwXojviQDoRQAAAAASUVORK5CYII=" width="600" style="image-rendering: pixelated">
</div>

Не бойтесь пробовать сделать то, что хотите. В процессе реализации вы обязательно узнаете что-то новое, уточните задачу и через несколько итераций решите её, получив ценный опыт.

БЛОГ НА HUSL

Горизонтальный параллакс эффект

Ответы (1 шт):