0

Прошу оказать небольшую помощь. Задача стоит в реализации решения с услугами, как на сайте https://www.cobramusicagency.com/ (проскролить до раздела "услуги агентства").

Есть div внутри которого расположены еще 6 элементов. Располагаться они должны друг под другом с небольшим смещением вниз. Когда пользователь долистывает до этого блока он должен зафиксироваться и объекты начиная с первого при скроле, должны смещаться вверх. Дошли до последнего - можем листать далее страницу.

Копал в сторону css stiky, но на данный момент зашел в тупик, как реализовать конкретно эту историю.

Сайт-пример сделана на Тильде.

Что я ищу? Может есть какое-то готовое решение? Или библиотека? Или кто-то может поделиться кодом?

В общем, надеюсь на Вашу помощь. Спасибо!!

<div class="history">
   <div class="history-item" id="historyId1"><h1 class="history-item-title">Content 1</h1></div>
   <div class="history-item" id="historyId2"><h1 class="history-item-title">Content 2</h1></div>
   <div class="history-item" id="historyId3"><h1 class="history-item-title">Content 3</h1></div>
   <div class="history-item" id="historyId4"><h1 class="history-item-title">Content 4</h1></div>
   <div class="history-item" id="historyId5"><h1 class="history-item-title">Content 5</h1></div>
   <div class="history-item" id="historyId6"><h1 class="history-item-title">Content 6</h1></div>
</div>
2

2 ответа 2

6

HTML/CSS

Создаем длинный контейнер

<div class="sticky-container"></div>
.sticky-container {
  height: 800vh;
}

Добавляем в него секцию с position:sticky

она будет привязана к верху экрана пока контейнер не прокручен

<div class="sticky-container">
  <div class="section sticky"></div>
</div>
.section {
  height: 100vh;
}

.sticky {
  position: sticky;
  top: 0;
  overflow: hidden;
}

В эту секцию добавляем слайды

<div class="sticky-container">
  <div class="section sticky">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</div>
.item {
  position: absolute;
  width: 100%;
  height: 100%;  
}

JS

Получаем ссылки на необходимые элементы

const scrollContainer = document.querySelector('.scroll-container')
const stickyContainer = document.querySelector('.sticky-container')
const stickySection = document.querySelector('.sticky')
const items = document.querySelectorAll('.item')

Меняем z-index слайдов

это можно сделать и в CSS

items.forEach((item, i) => {
  item.style.zIndex = items.length - i
})

Добавляем слушателя на событие scroll

scrollContainer.addEventListener('scroll', () => {
...
})

Получаем объекты которые содержат позицию и размер элементов

scrollContainer.addEventListener('scroll', () => {
  const scb = stickyContainer.getBoundingClientRect()
  const ssb = stickySection.getBoundingClientRect()
})

Делаем общие расчеты

scrollContainer.addEventListener('scroll', () => {
  const scb = stickyContainer.getBoundingClientRect()
  const ssb = stickySection.getBoundingClientRect()

  // Длина пути
  const distance = scb.height - ssb.height
  // Сколько пройдено на текущий момент
  const passed = ssb.top - scb.top
  // Длина одного отрезка(слайда)
  const segment = distance / (items.length - 1)
})

Перебираем все слайды и применяем к ним трансформацию

scrollContainer.addEventListener('scroll', () => {
  const scb = stickyContainer.getBoundingClientRect()
  const ssb = stickySection.getBoundingClientRect()

  // Длина пути
  const distance = scb.height - ssb.height
  // Сколько пройдено всего пути на текущий момент
  const passed = ssb.top - scb.top
  // Длина одного отрезка(слайда)
  const segment = distance / (items.length - 1)

  items.forEach((item, i) => {
    // Сколько пройдено этого отрезка на текущий момент
    const ty = clamp(passed - segment * i, 0, segment)
    // Перегоняем полученное число выше в диапазон 0 - 1
    const progress = ty / segment
    // Передвигаем слайд вверх
    item.style.transform = `translateY(${100 * progress * -1}%)`
  })
})

const scrollContainer = document.querySelector('.scroll-container')
const stickyContainer = document.querySelector('.sticky-container')
const stickySection = document.querySelector('.sticky')
const items = document.querySelectorAll('.item')

items.forEach((item, i) => {
  item.style.zIndex = items.length - i
})

scrollContainer.addEventListener('scroll', () => {
  const scb = stickyContainer.getBoundingClientRect()
  const ssb = stickySection.getBoundingClientRect()
  
  const distance = scb.height - ssb.height
  const passed = ssb.top - scb.top
  const segment = distance / (items.length - 1)
  
  items.forEach((item, i) => {
    const ty = clamp(passed - segment * i, 0, segment)
    const progress = ty / segment
    item.style.transform = `translateY(${100 * progress * -1}%)`
  })
})

function clamp(num, min, max) {
  return Math.min(Math.max(num, min), max)
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: sans-serif;
  font-size: 30vmin;
}

.scroll-container {
  width: 100%;
  height: 100%;
  overflow: hidden auto;
}

.section {
  height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;
}

.sticky-container {
  position: relative;
  height: 800vh;
}

.sticky {
  position: sticky;
  top: 0;
  overflow: hidden;
}

.item {
  position: absolute;
  width: 100%;
  height: 100%;  

  display: flex;
  align-items: center;
  justify-content: center;
}

.item:nth-child(1) {
  background-color: lightblue;
}

.item:nth-child(2) {
  background-color: lightpink;
}

.item:nth-child(3) {
  background-color: tomato;
}

.item:nth-child(4) {
  background-color: lightgreen;
}

.item:nth-child(5) {
  background-color: coral;
}
<div class="scroll-container">
  <div class="section">SCROLL</div>
  <div class="sticky-container">
    <div class="section sticky">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
  </div>
  <div class="section">END</div>
</div>

const scrollContainer = document.querySelector('.scroll-container')
const stickyContainer = document.querySelector('.sticky-container')
const stickySection = document.querySelector('.sticky')
const slides = document.querySelectorAll('.slide')

stickySection.style.setProperty('--slides', slides.length)

slides.forEach((slide, i) => {
  slide.style.setProperty('--index', slides.length - 1 - i)
})

addEventListener('resize', resize)
resize()

scrollContainer.addEventListener('scroll', () => {
  const scb = stickyContainer.getBoundingClientRect()
  const ssb = stickySection.getBoundingClientRect()
  
  const d = scb.height - ssb.height
  const p = ssb.top - scb.top
  const s = d / (slides.length - 1)
 
  slides.forEach((slide, i) => {
    const t = clamp(p - s * i, 0, s)
    const progress = t / s
    slide.style.transform = `translateY(${100 * progress * -1}%)`
  })
})

function clamp(num, min, max) {
  return Math.min(Math.max(num, min), max)
}

function resize() {
  document.documentElement.style.setProperty('--lvh', innerHeight + 'px')
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: sans-serif;
  font-size: 15vmin;
  color: white;
  background-color: black;
  text-align: center;
}

.scroll-container {
  width: 100%;
  height: 100%;
  overflow: hidden auto;
}

.section {
  height: var(--lvh, 100vh);

  display: flex;
  align-items: center;
  justify-content: center;
}

.sticky-container {
  position: relative;
  height: calc(var(--lvh, 100vh) * 6);
}

.sticky {
  position: sticky;
  top: 0;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  
  width: 100%;
  height: 100%;
  
  z-index: var(--index);
  
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.slide-content {
  --offset: calc(var(--lvh, 100vh) * 0.3);
  --height: calc(var(--lvh, 100vh) - var(--offset));
  
  width: 95%;
  height: var(--height);
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  border-radius: 4vmin;
  background-color: hsl(262, 74%, calc(30% + var(--index) * 5%));
  transform: translateY(calc(var(--index) * (var(--offset) / (var(--slides) - 1)) * -1));
}

.slide:last-child .slide-content {
  background-color: #b7f507;
}
<div class="scroll-container">
  <div class="section">Что мы делаем<br>с халапеньо?</div>
  <div class="sticky-container">
    <div class="section sticky">
      <div class="slide">
        <div class="slide-content">🤜</div> 
      </div>
      <div class="slide">
        <div class="slide-content">🤛</div> 
      </div>
      <div class="slide">
        <div class="slide-content">👊</div> 
      </div>
      <div class="slide">
        <div class="slide-content">✊</div> 
      </div>
      <div class="slide">
        <div class="slide-content">🔪</div> 
      </div>
      <div class="slide">
        <div class="slide-content">💣</div> 
      </div>
    </div>
  </div>
  <div class="section">🚮</div>
</div>

1
0

Как вариант, чтобы не сильно мучаться, можно воспользоваться библиотекой https://greensock.com и их плагином scrollTrigger.

В противном случае, как выше указали отслеживать событие scroll и изменять позицию элемента в соответствии с pageY

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.