Эффект параллакса для проблемы с изображениями с фоновым изображением / или тегом img - PullRequest
Новая
       150

Эффект параллакса для проблемы с изображениями с фоновым изображением / или тегом img

0 голосов
/ 02 мая 2020

У меня проблема с настройкой элементов в проекте, у контейнеров должны быть косые стороны. Клип-путь здесь не работает правильно, потому что между контейнерами есть пробелы ... У вас есть идеи ...

Код с тегом img:

HTML

<div class="container">


<div class="parallax-ctn parallax-ctn--first">

   <div class="parallax__leftSide parallax__leftSide--1">
    <img src="http://www.marypieroszkiewicz.com/3n_solution/images/img_1.jpg"  alt="" class="parallax__leftSide-box parallax__leftSide-box--1">
  </div>

  <div class="parallax__rightSide parallax__rightSide--1">
    <div class="parallax__rightSide-content">
      <h3 class="parallax__rightSide-content__title">Kompleksowa dezynfekcja przemysłowa</h3>
      <p class="parallax__rightSide-content__text">Profesjonalnej dezynfekcja to głębokie oczyszczanie pomieszczeń eliminujące zanieczyszczenia oraz mikroorganizmy (taki jak wirusy, grzyby, bakterie). Oferujemy profesjonalne usługi odkażania dedykowane pomieszczeniom produkcyjnym, socjalnym oraz biurowym.</p>
      <button class="parallax__rightSide-content__btn">Więcej</button>
    </div>
  </div>

</div>


<div class="parallax-ctn parallax-ctn--two">

  <div class="parallax__leftSide parallax__leftSide--2">
    <img src="http://www.marypieroszkiewicz.com/3n_solution/images/img_2.jpg" alt="" class="parallax__leftSide-box parallax__leftSide-box--2">
  </div>

  <div class="parallax__rightSide parallax__rightSide--2">
    <div class="parallax__rightSide-content">
      <h3 class="parallax__rightSide-content__title">Kompleksowa dezynfekcja przemysłowa</h3>
      <p class="parallax__rightSide-content__text">Profesjonalnej dezynfekcja to głębokie oczyszczanie pomieszczeń eliminujące zanieczyszczenia oraz mikroorganizmy (taki jak wirusy, grzyby, bakterie). Oferujemy profesjonalne usługi odkażania dedykowane pomieszczeniom produkcyjnym, socjalnym oraz biurowym.</p>
      <button class="parallax__rightSide-content__btn">Więcej</button>
    </div>
  </div>

</div>


<div class="parallax-ctn parallax-ctn--three">

  <div class="parallax__leftSide parallax__leftSide--3">
    <img src="http://www.marypieroszkiewicz.com/3n_solution/images/img_3.jpg" alt="" class="parallax__leftSide-box parallax__leftSide-box--3">
  </div>

  <div class="parallax__rightSide parallax__rightSide--3">
    <div class="parallax__rightSide-content">
      <h3 class="parallax__rightSide-content__title">Kompleksowa dezynfekcja przemysłowa</h3>
      <p class="parallax__rightSide-content__text">Profesjonalnej dezynfekcja to głębokie oczyszczanie pomieszczeń eliminujące zanieczyszczenia oraz mikroorganizmy (taki jak wirusy, grzyby, bakterie). Oferujemy profesjonalne usługi odkażania dedykowane pomieszczeniom produkcyjnym, socjalnym oraz biurowym.</p>
      <button class="parallax__rightSide-content__btn">Więcej</button>
    </div>
  </div>

</div>


<div class="parallax-ctn parallax-ctn--four">
  <div class="parallax__leftSide parallax__leftSide--4">
    <img src="http://www.marypieroszkiewicz.com/3n_solution/images/img_4.jpg" alt="" class="parallax__leftSide-box parallax__leftSide-box--4">
  </div>

  <div class="parallax__rightSide parallax__rightSide--4">
    <div class="parallax__rightSide-content">
      <h3 class="parallax__rightSide-content__title">Kompleksowa dezynfekcja przemysłowa</h3>
      <p class="parallax__rightSide-content__text">Profesjonalnej dezynfekcja to głębokie oczyszczanie pomieszczeń eliminujące zanieczyszczenia oraz mikroorganizmy (taki jak wirusy, grzyby, bakterie). Oferujemy profesjonalne usługi odkażania dedykowane pomieszczeniom produkcyjnym, socjalnym oraz biurowym.</p>
      <button class="parallax__rightSide-content__btn">Więcej</button>
    </div>
  </div>
</div>


<div class="parallax-ctn parallax-ctn--five">
  <div class="parallax__leftSide parallax__leftSide--5">
    <img src="http://www.marypieroszkiewicz.com/3n_solution/images/img_5.jpg" alt="" class="parallax__leftSide-box parallax__leftSide-box--5">
  </div>

        <div class="parallax__rightSide parallax__rightSide--5">
    <div class="parallax__rightSide-content">
      <h3 class="parallax__rightSide-content__title">Kompleksowa dezynfekcja przemysłowa</h3>
      <p class="parallax__rightSide-content__text">Profesjonalnej dezynfekcja to głębokie oczyszczanie pomieszczeń eliminujące zanieczyszczenia oraz mikroorganizmy (taki jak wirusy, grzyby, bakterie). Oferujemy profesjonalne usługi odkażania dedykowane pomieszczeniom produkcyjnym, socjalnym oraz biurowym.</p>
      <button class="parallax__rightSide-content__btn">Więcej</button>
    </div>
  </div>
</div>

CSS 

        * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    *::before,
    *::after {
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      height: 100%;
    }

    body {
      height: 100%;
    }

    img {
      display: block;
      width: 100%;
      height: auto;
    }

    .container {
      margin: auto 0;
      width: 100%;
      max-width: 1920px;
    }

    /*  .parallax {
    display: flex;
       flex-direction: column;
       height: 100vh;
    }
     */

     .parallax {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(5, 600px);
      height: 100vh;
    }

    .parallax-ctn {
      display: flex;
      width: 100%;
      height: 100%;
      flex-wrap: wrap;
    /*   margin-top: -200px; */
    }


    /* .parallax-ctn--two, .parallax-ctn--four {
      flex-direction: row-reverse;
    } */


    .parallax__leftSide, .parallax__rightSide {
      width: 100%;
      display: block;
      position: relative;
      overflow: hidden;
    }

    .parallax__leftSide {
      height: 50vh;
    }

    /* .parallax__leftSide--1 {
      clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0% 100%);
    }
    .parallax__leftSide--2 {
      clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 80%);
    }
    .parallax__leftSide--3 {
      clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
    }
    .parallax__leftSide--4 {
      clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
    }
    .parallax__leftSide--5 {
      clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%);
    } */

    /* .parallax__rightSide--1 {
      clip-path: polygon(0 calc(100% - 406px), 100% 0%, 100% 100%, 0% 100%);
      margin-top: -71px;
    }
     */
    /* .parallax__rightSide--2 {}
    .parallax__rightSide--3 {}
    .parallax__rightSide--4 {}
    .parallax__rightSide--5 {} */

    .parallax__leftSide-box {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: initial;
      height: initial;
    }

    /* .parallax__leftSide-box--1 {
      background-image: url("http://www.marypieroszkiewicz.com/3n_solution/images/img_1.jpg");
    } */

    /* .parallax__leftSide-box--2 {
        background-image: url("http://www.marypieroszkiewicz.com/3n_solution/images/img_2.jpg");
    } */

    /* .parallax__leftSide-box--3 {
        background-image: url("http://www.marypieroszkiewicz.com/3n_solution/images/img_3.jpg");
    }

    .parallax__leftSide-box--4 {
        background-image: url("http://www.marypieroszkiewicz.com/3n_solution/images/img_4.jpg");
    }

    .parallax__leftSide-box--5 {
        background-image: url("http://www.marypieroszkiewicz.com/3n_solution/images/img_5.jpg");
    } */

    .parallax__rightSide {
      background-color: #ecf3f7;
    }

      .parallax__rightSide-content {
      padding: 0 20px;
    /*   position: absolute;
      top: 50%;
      transform: translateY(-50%);  */
      }

    /* .parallax__rightSide-content {
      padding: 142px 20px;
    } */

    @media (min-width: 1280px) {

      .parallax {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(5, 600px);
      height: 100vh;
    }


      .parallax-ctn {
      flex-wrap: nowrap;
    }

      .parallax__leftSide, .parallax__rightSide {
        width: 50%;
      }

      .parallax-ctn--first {
      clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0% 100%);
      }

      .parallax-ctn--two {
      clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
    /*   clip-path: polygon(0 calc(100% - 400px), 100% 0%, 100% 100%, 0% 100%); */
        margin-top: -120px;
    }

    .parallax-ctn--three {
        clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%);
        margin-top: -240px;
    }

    .parallax-ctn--four {
        clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
        margin-top: -360px;
      }

    .parallax-ctn--five{
        clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%);
        margin-top: -480px;
      }

      .parallax-ctn--two, .parallax-ctn--four {
      flex-direction: row-reverse;
      }

      .parallax__rightSide-content {
      padding: 0 50px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%); 
      }

      .parallax__leftSide-box {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: initial;
      height: initial;
    }


     .parallax__leftSide--1, .parallax__leftSide--2, .parallax__leftSide--3, .parallax__leftSide--4, .parallax__leftSide--5 {
      clip-path: none;
    }

    .parallax__rightSide--1, .parallax__rightSide--2, .parallax__rightSide--3, .parallax__rightSide--4, .parallax__rightSide--5 {
      clip-path: none;
      margin-top: 0;

    }

      .parallax__leftSide {
      height: auto;
    }



    }

JS

    const parallaxBox = document.querySelectorAll('.parallax__leftSide-box');

    window.addEventListener("scroll", (e) => {
      const pos = window.scrollY;

      parallaxBox.forEach (bg => {
        bg.style.top = `-${pos*0.3}px`;
        // bg.style.transform = `translateY(-${pos*0.3}px)`
      })

    })

Codepen: https://codepen.io/mary_pieroszkiewicz/pen/NWGaeYY

Код с фоном -изображение

HTML

<div class="container">


<div class="parallax-ctn parallax-ctn--first">

   <div class="parallax__leftSide">
    <figure class="parallax__leftSide-box parallax__leftSide-box--1"></figure>
  </div>

  <div class="parallax__rightSide">
    <div class="parallax__rightSide-content">
      <h3 class="parallax__rightSide-content__title">Kompleksowa dezynfekcja przemysłowa</h3>
      <p class="parallax__rightSide-content__text">Profesjonalnej dezynfekcja to głębokie oczyszczanie pomieszczeń eliminujące zanieczyszczenia oraz mikroorganizmy (taki jak wirusy, grzyby, bakterie). Oferujemy profesjonalne usługi odkażania dedykowane pomieszczeniom produkcyjnym, socjalnym oraz biurowym.</p>
      <button class="parallax__rightSide-content__btn">Więcej</button>
    </div>
  </div>

</div>


<div class="parallax-ctn parallax-ctn--two">

  <div class="parallax__leftSide">
    <figure class="parallax__leftSide-box parallax__leftSide-box--2"></figure>
  </div>

  <div class="parallax__rightSide">
    <div class="parallax__rightSide-content">
      <h3 class="parallax__rightSide-content__title">Kompleksowa dezynfekcja przemysłowa</h3>
      <p class="parallax__rightSide-content__text">Profesjonalnej dezynfekcja to głębokie oczyszczanie pomieszczeń eliminujące zanieczyszczenia oraz mikroorganizmy (taki jak wirusy, grzyby, bakterie). Oferujemy profesjonalne usługi odkażania dedykowane pomieszczeniom produkcyjnym, socjalnym oraz biurowym.</p>
      <button class="parallax__rightSide-content__btn">Więcej</button>
    </div>
  </div>

</div>


<div class="parallax-ctn parallax-ctn--three">

  <div class="parallax__leftSide">
    <figure class="parallax__leftSide-box parallax__leftSide-box--3"></figure>
  </div>

  <div class="parallax__rightSide">
    <div class="parallax__rightSide-content">
      <h3 class="parallax__rightSide-content__title">Kompleksowa dezynfekcja przemysłowa</h3>
      <p class="parallax__rightSide-content__text">Profesjonalnej dezynfekcja to głębokie oczyszczanie pomieszczeń eliminujące zanieczyszczenia oraz mikroorganizmy (taki jak wirusy, grzyby, bakterie). Oferujemy profesjonalne usługi odkażania dedykowane pomieszczeniom produkcyjnym, socjalnym oraz biurowym.</p>
      <button class="parallax__rightSide-content__btn">Więcej</button>
    </div>
  </div>

</div>


<div class="parallax-ctn parallax-ctn--four">
  <div class="parallax__leftSide">
    <figure class="parallax__leftSide-box parallax__leftSide-box--4"></figure>
  </div>

  <div class="parallax__rightSide">
    <div class="parallax__rightSide-content">
      <h3 class="parallax__rightSide-content__title">Kompleksowa dezynfekcja przemysłowa</h3>
      <p class="parallax__rightSide-content__text">Profesjonalnej dezynfekcja to głębokie oczyszczanie pomieszczeń eliminujące zanieczyszczenia oraz mikroorganizmy (taki jak wirusy, grzyby, bakterie). Oferujemy profesjonalne usługi odkażania dedykowane pomieszczeniom produkcyjnym, socjalnym oraz biurowym.</p>
      <button class="parallax__rightSide-content__btn">Więcej</button>
    </div>
  </div>
</div>


<div class="parallax-ctn parallax-ctn--five">
  <div class="parallax__leftSide">
    <figure class="parallax__leftSide-box parallax__leftSide-box--5"></figure>
  </div>

        <div class="parallax__rightSide">
    <div class="parallax__rightSide-content">
      <h3 class="parallax__rightSide-content__title">Kompleksowa dezynfekcja przemysłowa</h3>
      <p class="parallax__rightSide-content__text">Profesjonalnej dezynfekcja to głębokie oczyszczanie pomieszczeń eliminujące zanieczyszczenia oraz mikroorganizmy (taki jak wirusy, grzyby, bakterie). Oferujemy profesjonalne usługi odkażania dedykowane pomieszczeniom produkcyjnym, socjalnym oraz biurowym.</p>
      <button class="parallax__rightSide-content__btn">Więcej</button>
    </div>
  </div>
</div>

CSS

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    *::before,
    *::after {
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      height: 100%;
    }

    body {
      height: 100%;
    }

    img {
      display: block;
      width: 100%;
      height: auto;
    }

    .container {
      margin: 0 auto;
      width: 100%;
      max-width: 1920px;
    }

    .parallax {
      display: flex;
      flex-direction: column;
    }

    .parallax-ctn {
      display: flex;
      width: 100%;
      position: relative;
      height: 100vh;
    }


    .parallax-ctn--two, .parallax-ctn--four {
      flex-direction: row-reverse;
    }

    .parallax-ctn--first {
        clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0% 100%);
    }

    .parallax-ctn--two {
       clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
        margin-top: -120px;
    }

    .parallax-ctn--three {
        clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%);
        margin-top: -240px;
    }

    .parallax-ctn--four {
        clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
    /*   margin-top: -360px; */
    }

    .parallax-ctn--five{
        clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%);
    /*     margin-top: -480px; */
    }

    .parallax__leftSide, .parallax__rightSide {
      width: 50%;
      display: block;
      position: relative;
      overflow: hidden;
    /*     padding-bottom: 56.75%; */
    }

    .parallax__leftSide-box {
      position: absolute;
      background-repeat: no-repeat;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: initial;
      height: initial;
      background-attachment: fixed;
      background-size: cover;
    }

    .parallax__leftSide-box--1 {
      background-image: url("http://www.marypieroszkiewicz.com/3n_solution/images/img_1.jpg");
    }

    .parallax__leftSide-box--2 {
        background-image: url("http://www.marypieroszkiewicz.com/3n_solution/images/img_2.jpg");
    }

    .parallax__leftSide-box--3 {
        background-image: url("http://www.marypieroszkiewicz.com/3n_solution/images/img_3.jpg");
    }

    .parallax__leftSide-box--4 {
        background-image: url("http://www.marypieroszkiewicz.com/3n_solution/images/img_4.jpg");
    }

    .parallax__leftSide-box--5 {
        background-image: url("http://www.marypieroszkiewicz.com/3n_solution/images/img_5.jpg");
    }

    .parallax__rightSide {
      background-color: #ecf3f7;
    }

    .parallax__rightSide-content {
      padding: 0 50px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

JS

const parallaxBox = document.querySelectorAll('.parallax__leftSide-box');


    window.addEventListener("scroll", (e) => {
      const pos = window.scrollY;

      parallaxBox.forEach (bg => {
        bg.style.top = `-${pos*0.3}px`;
        // bg.style.transform = `translateY(-${pos*0.3}px)`
      })

    })

Codepen: https://codepen.io/mary_pieroszkiewicz/pen/MWaEZLR

...