Параллакс: как сохранить изображения с абсолютным позиционированием внутри относительного div? - PullRequest
Новая
       17

Параллакс: как сохранить изображения с абсолютным позиционированием внутри относительного div?

0 голосов
/ 10 апреля 2019

У меня есть этот блок:

screenshot Я хотел бы создать эффект параллакса на фотографиях, сохраняя их в пределах (или, по крайней мере, близко) к родительскому элементу div.

Это в моем коде: 

<div class="head-block">
    <div class="image-block-left">
      = image_tag('home/specialite-1-compressor.jpg', id: 'block-left-specialite1')
      = image_tag('home/specialite-2-compressor.jpg', id: 'block-left-specialite2')
    </div>

    <div class="content-block">
      span.badge.badge-warning.homepage-badge
        | Expertise
      .homepage-title
        h2
          | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      p
        | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mollis feugiat libero quis mollis. Praesent risus purus, pellentesque in risus at, posuere laoreet eros. Ut non congue erat. Pellentesque tincidunt ultrices leo vel porttitor. Fusce a ligula ut libero aliquet feugiat. Nulla facilisi. Curabitur consectetur eu quam vel blandit. In non enim quis justo malesuada volutpat.
    </div>

    <div class="image-block-right">
      = image_tag('home/specialite-3-compressor.jpg', id: 'block-left-specialite3')
      = image_tag('home/specialite-4-compressor.jpg', id: 'block-left-specialite4')
    </div>
</div>

  .head-block {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .image-block-left {
      position: relative;
      width: 17.5%;
      img:nth-child(1) {
        width: 150px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
      }
      img:nth-child(2) {
        height: 180px;
        position: absolute;
        top: 100px;
        right: 0;
        z-index: 1;
      }
    }
    .content-block {
      width: 65%;
      text-align: center;
    }
    .image-block-right {
      position: relative;
      width: 17.5%;
      img:nth-child(1) {
        height: 200px;
        position: absolute;
        top: 0;
        right: 0;
      }
      img:nth-child(2) {
        width: 130px;
        position: absolute;
        top: 155px;
        left: 0;
      }
    }
  }

Я пробовал этот код: 

  function parallaxEffect() {
    let scrolled = $(window).scrollTop();
    $('#block-left-specialite1').css('top', (0 - (scrolled * .5)) + 'px');
    $('#block-left-specialite2').css('top', (100 - (scrolled * .65)) + 'px');
    $('#block-left-specialite3').css('top', (0 - (scrolled * .52)) + 'px');
    $('#block-left-specialite4').css('top', (155 - (scrolled * .67)) + 'px');
  }

, но он не работает, потому что head-block div isn 'т в верхней части страницы.Как я могу сохранить изображения в родительском div?

1 Ответ

0 голосов
/ 10 апреля 2019

Наконец, я достиг этого следующим образом: 

  function parallaxEffect() {
    let windowScrolled      = $(window).scrollTop();
    let sliderBlockScrolled = $('.homepage-sliderblock').offset().top;

    $('.top-block-right').css('top', (0 - (windowScrolled * .25)) + 'px');
    $('#block-left-specialite1, #block-left-specialite3').css('top', (0 - ((windowScrolled - sliderBlockScrolled) * .25)) + 'px');
    $('#block-left-specialite2, #block-left-specialite4').css('top', (100 - ((windowScrolled - sliderBlockScrolled) * .35)) + 'px');
  }

таким образом, когда родительский div видим, элементы находятся на одном уровне с эффектом параллакса.

...