Как можно реализовать подобную анимацию, как в этом макете Figma?

Question

Пока что вообще не имею представления, как это можно реализовать с помощью JS и CSS. Можете дать какие-то наводки или предположения. Вот макет в Figma, где показан пример с функционалом (можно кликать на заголовки)

Answer 1

Конечно чуть чуть через Ж....но как умею

window.addEventListener("load", function() {
  document.querySelectorAll(".links p").forEach(function(item) {
    let img = document.querySelector(".block img");
    let links = document.querySelector(".links");
    item.addEventListener("click", function(e) {
      img.src = item.dataset.src;
      links.style.transform = `translateY(${item.dataset.pos})`;
    });
  });
});

document.querySelector(".links").addEventListener("click", function(e) {
  for (let i = 0; i < document.querySelector(".links").children.length; i++) {
    document.querySelector(".links").children[i].classList.remove("active");
  }
  e.target.classList.add("active");
})

.block {
  display: flex;
  position: relative;
  padding: 60px 0;
  width: 450px;
  margin: auto;
  overflow: hidden;
}

.block:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  width: 450px;
  height: 40px;
  z-index: 21;
  filter: blur(10px);
}

.block:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  background: #fff;
  width: 100%;
  height: 40px;
  z-index: 20;
  filter: blur(20px);
}

.hidden {
  width: 300px;
}

.links {
  width: 300px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  position: absolute;
  left: 0;
  top: 5%;
  text-align: left;
  transition: 0.34s linear;
}

.links p {
  cursor: pointer;
  font-size: 14px;
  font-family: sans-serif;
  height: 30px;
  line-height: 30px;
  transition: 0.34s linear;
}

.links p.active {
  font-size: 22px;
  color: yellow;
  position: relative;
  left: 20px;
}

.block img {
  max-height: 200px;
}

<div class="block">
  <div class="hidden"></div>
  <div class="links">
    <p data-pos="120px" data-src="http://placehold.it/300x200/ccc">Какой то текст</p>
    <p data-pos="60px" data-src="http://placehold.it/300x200/cfc">Опять текст но другой</p>
    <p data-pos="0px" data-src="http://placehold.it/300x200/fcc">Не много другой текст</p>
    <p data-pos="-60px" data-src="http://placehold.it/300x200/c0c">Устал уже писать сюда что то</p>
    <p data-pos="-120px" data-src="http://placehold.it/300x200/00f">Вот опять придумал, пишу всякую шляпу</p>
  </div>
  <img src="http://placehold.it/300x200" alt="">
</div>

БЛОГ НА HUSL

Как можно реализовать подобную анимацию, как в этом макете Figma?

Ответы (1 шт):