Показать сообщение отдельно
  #6 (permalink)  
Старый 17.12.2019, 06:51
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

<!DOCTYPE html>
<html>

<head>
  <style>
    * {
      box-sizing: border-box;
    }

    .items {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .small-item,
    .big-item {
      position: sticky;
      top: 0px;
      display: grid;
      align-items: center;
      justify-items: center;
    }

    .small-item {
      height: 400px;
      background-color: lightgray;
      background-image: url(https://3.bp.blogspot.com/-FUOSuBucarc/XEz-XlUQgXI/AAAAAAAAHis/hQjomTjplZ8_NeRU_weB2uFqwohp-HM1wCHMYCw/s1600/free-computer-wallpapers-for-download-in-hd-for-desktops-and-laptops.jpg);
      background-repeat: no-repeat;
      background-size: cover;
    }

    .big-item {
      height: 1200px;
      background-color: darkgray;
      background-image: url(https://3.bp.blogspot.com/-4KGx9OZWtE4/XEz-XV8KQuI/AAAAAAAAHio/rCnsBjlhoYA4ggL-m-3mBj2ZBDWg9_YaACHMYCw/s1600/download-the-all-new-iphone-xr-bubble-wallpapers-here-ultralinx.jpg);
      background-repeat: no-repeat;
      background-size: cover;
    }

    .position-relative {
      position: relative;
    }

    .sepia {
      filter: sepia(1);
    }

    .saturate {
      filter: saturate(64);
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="items">
      <div class="left-items">
        <div class="small-item"></div>
        <div class="small-item"></div>
        <div class="small-item"></div>
        <div class="small-item saturate"></div>
        <div class="big-item"></div>
      </div>
      <div class="right-items">
        <div class="big-item"></div>
        <div class="small-item position-relative sepia"></div>
        <div class="small-item position-relative"></div>
        <div class="small-item position-relative"></div>
        <div class="big-item position-relative"></div>
        <div class="small-item"></div>
        <div class="small-item"></div>
        <div class="small-item"></div>
      </div>
    </div>
  </div>
</body>

<script>

  const bigItems = document.querySelectorAll('.big-item')
  const { scrollHeight } = document.querySelector('body')
  window.addEventListener('scroll', e => {
    const { scrollY, innerHeight } = window
    const sepia = scrollY / (scrollHeight - innerHeight);
    bigItems.forEach(bigItem => bigItem.style.filter = `sepia(${sepia})`)
  })

</script>

</html>

Последний раз редактировалось SuperZen, 17.12.2019 в 07:54.
Ответить с цитированием