Параллакс с прокруткой - PullRequest
Новая
       11

Параллакс с прокруткой

0 голосов
/ 30 апреля 2018

Я использую Angular с idangerous swiper (http://idangero.us/swiper/). Моя цель - добиться следующего поведения: https://www.w3schools.com/howto/howto_css_parallax.asp

Я пытался использовать его, как в статье: 

<div class="container">
  <swiper [config]="config">
    <div class="image" style="background-image: url('../../assets/images/item1.jpg')"></div>
    <div class="image" style="background-image: url('../../assets/images/item2.jpg')"></div>
    <div class="image" style="background-image: url('../../assets/images/item3.jpg')"></div>
  </swiper>
</div>

CSS-файл: 

.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.image {
  width: 100vw;
  height: 100vh;

  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Конфигурация swiper: 

config: Object = {
    autoplay: {
      delay: 10000,
      disableOnInteraction: false,
    },
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
    },
    effect: "fade",
    speed: 2000,
    parallax: true,
  };

К сожалению, добавление background-attachment: исправлено; Кажется, разрушает поведение swiper - он всегда показывает только первое изображение, даже после нажатия на пагинацию. Запрещено использовать этот атрибут в swiper? Существуют ли другие варианты прокрутки параллакса, которые будут работать в этом примере?

...