Изображение параллакса на класс - PullRequest
Новая
       54

Изображение параллакса на класс

0 голосов
/ 15 октября 2019

Мне нравится, когда изображение прокручивается вниз (слегка сверху) при прокрутке страницы и просто немного расширяется за пределы собственного контейнера. Так, например: начать движение с "-5vw" конца контейнера с "+ 5vw" контейнера.

Я искал и обнаружил, что какой-то код добавил его вместе, но это не дает мне желаемого результата,

Я сделал следующий код JS (см. Пример jsfiddle). Проблема в том, что вычитается только смещение первого .block. Поэтому при прокрутке вниз все элементы img прокручиваются. Мне нравится иметь это за блок. Так что, если я достигну .block, прокрутка img внутри него начнется тогда (или немного раньше). Я понятия не имею, как идти отсюда. 

 $(window).scroll(function() {
   var scrollTop = $(window).scrollTop() - $('.block').offset().top;
   var imgPos = scrollTop / 5 + 'px';
   $('.imagecontainer').find('img').css('transform', 'translateY(' + imgPos + ')');
 });

"/ 5" это просто какое-то значение. Это можно изменить, чтобы получить эффект, который я хочу создать.

https://jsfiddle.net/qzdwrc4n/

Я также пытался использовать решение CSS, но не смог заставить его работать в исходной разметке HTML ниже:(https://medium.com/@dailyfire/pure-css-parallax-simple-tricks-da102d0ffdb9)

<section class="block">
   <div class="st-cnt-wrp">
      <div class="st-cnt">
         <div class="st-titlewrp">
            <span class="st-title">Title</span>
         </div>
         <p>"Content"</p>
         <a class="readmore" href="#">Read more <i class="material-icons">arrow_forward</i></a>
      </div>
      <div class="st-img">
         <img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="background-image: url('images/######.jpg');">
      </div>
    </div>
 </section>

Я хотел бы иметь решение JS или CSS.

...