Блог

Главная - Вопросы по программированию - Как заставить чистый CSS-параллакс-код работать со сложным сайтом?

Как заставить чистый CSS-параллакс-код работать со сложным сайтом?

#html #css #background #styles #parallax

Вопрос:

Я пытаюсь применить сложный эффект параллакса к своему сайту. Фоновое изображение должно находиться позади общего содержимого и перемещаться медленнее, чем основное содержимое. Я пробовал много подходов к этой функциональности, но ни один из них не работает.

Итак, в соответствии с тем, что я понимаю, мне сначала нужно создать оболочку параллакса.

     .parallax-wrapper {
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        perspective: 10px;
    }

Эта оболочка имеет перспективу, она скрывает переполнение x и задает высоту общего содержимого. Он будет установлен сразу после метки тела.
Затем у меня есть раздел, который должен иметь фон, являющийся прямым потомком parallax-оболочки:

     .latest_news_section {
        display: flex;
        flex-direction: column;
        height: 390px;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
    }

Этот раздел просто форматирует содержимое и придает ему форму.
Затем я применяю сдвиг плоскости Z, чтобы убедиться, что содержимое отстает и прокручивается медленнее:

     .latest_news_section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        transform-origin: center;
        background-image: url("../img/top-back.jpeg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        transform: translateZ(-5px) scale(2);
    }

Однако параллакс начинает работать только тогда, когда я отключаюсь overflow: hidden; от раздела. И я не знаю, почему. Однако мой коллега протестировал тот же код, и он сработал.

Пожалуйста, проверьте мою версию ниже:

HTML:

 .parallax-wrapper {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  perspective: 10px;
  transform-style: preserve-3d;
}

.latest_news_section {
  display: flex;
  flex-direction: column;
  height: 390px;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}

.latest_news_section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  transform-origin: center;
  background-image: url("https://www.freecodecamp.org/news/content/images/size/w2000/2021/06/w-qjCHPZbeXCQ-unsplash.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: 1s;
  transform: translateZ(-5px) scale(2);
  transform-style: inherit;
}
.latest_news_section_header {
  font-family: AdobeInvisFont, OpenSans, Courier;
  font-size: 27px;
  color: rgba(255, 255, 255, 255);
  text-align: center;
  margin-bottom: 55px;
}

button {
  border: none;
  font-family: AdobeInvisFont, Courier, OpenSans-Semibold;
  font-size: 18px;
  color: rgba(255, 255, 255, 255);
  text-align: center;
  height: 55px;
  width: 170px;
  border-radius: 5px;
  cursor: pointer;
}

.green {
  background-color: #89ca62;
  margin-right: 20px;
}

.blue {
  background-color: #14b9d5;
}

.some-content-to-fill {
  height: 1000px;
  z-index: 2;
} 
 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./css/style.css" />
  <title>Document</title>
</head>

<body>
  <div class="parallax-wrapper">
    <div class="latest_news_section">
      <h1 class=".latest_news_section_header">
        THE LATEST NEWS ON DESIGN amp; ARCHITECTURE
      </h1>
      <div class="heading-buttons container">
        <button class="green">Subscribe Now</button>
        <button class="blue">Best Articles</button>
      </div>
    </div>

    <p class="some-content-to-fill">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi temporibus debitis deleniti velit suscipit est aliquid voluptates voluptatem, consequatur ratione, minima autem ex inventore reiciendis commodi, harum repellendus nam! Cupiditate,
      amet expedita! Est beatae ut illum voluptatum quod nesciunt, similique minus labore consequuntur, nostrum ad ducimus libero eveniet aperiam recusandae, dignissimos totam quas ipsum explicabo! Dolore cupiditate expedita quisquam quis doloribus dolorum
      laborum ad excepturi odit cumque praesentium, quasi neque quia totam ea officia quibusdam nostrum, libero, eaque atque!
    </p>
  </div>
</body>

</html>

Спасибо. Я пытаюсь получить это слишком долго, и у меня нет ни малейшего представления, почему это не работает без overflow: hidden отключения. Спасибо.

Ответ №1:

Прокрутка отключена при использовании overflow: hidden;
Вам нужно сделать:

 .parallax-wrapper::-webkit-scrollbar {
display: none;
}
Метки: