Блог

Главная - Вопросы по программированию - Эффект укладки карт с использованием html,css,js

Эффект укладки карт с использованием html,css,js

#javascript #html #css #frontend

Вопрос:

Желаемый эффект — https://www.youtube.com/watch?v=1ABF8vrG_9M Я хочу реализовать этот эффект укладки карты, и я сделал это с помощью css, но я также хочу преобразовать предыдущие свойства карты, как в видео, я хочу, чтобы эффект уменьшения масштаба и исчезновения, и я застрял в его части js. Кто-нибудь может помочь?. Вот мой прогресс до сих пор Codepen

 // let cards = document.querySelectorAll(".card");
// cards[0].addEventListener("click", (e)=> {
//     console.log(e)
// })
let cardContainer = document.querySelector(".card-container");
cardContainer.addEventListener("scroll", (e) => {
  // console.log(e.target.scrollHeight);
  let scrolled = e.target.scrollTop;
  let clientHeight = e.target.clientHeight;
  // console.log(scrolled);
  // console.log(clientHeight);
  let extra = 70;
  let percent = (scrolled / clientHeight);
  let cards = document.querySelectorAll(".card");
  percent = (percent / Math.ceil(percent)).toFixed(2)
  // console.log(percent)
  cards.forEach((card, index) => {
    console.log(index   " "   card.offsetTop)
    if (card.offsetTop == ((card.offsetTop) * index)) {
      console.log(`Card ${index} found`)
    }
    // let blur = percent*2;
    // card.style.filter = `blur(${blur}px) opacity(${150 - percent*100}%)`;    
  })
  // card1.style.filter = `blur(${blur}px) opacity(${150 - percent*100}%)`;
  // console.log(card1.clientWidth)
  // card1.clientWidth -= (percent * 2);
  // console.log(card1.clientWidth)
  // card1.style.transform = `translateY(-${percent*10}px)`
  // console.log(percent.toFixed(2))
}) 
 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.card-container {
  background-color: rgb(245, 242, 242);
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: scroll;
}

.card {
  background-color: white;
  height: 80vh;
  width: 60vw;
  border-radius: 16px;
  box-shadow: 0px 5px 10px 1px rgba(0, 0, 0, 0.1);
  font-size: 10rem;
  font-weight: bold;
  font-family: sans-serif;
  display: grid;
  place-items: center;
  margin: 10vh 0;
  position: sticky;
  top: 10vh;
  will-change: auto;
} 
 <section class="card-container">
  <div class="card-1 card">One</div>
  <div class="card-2 card">Two</div>
  <div class="card-3 card">Three</div>
  <div class="card-4 card">Four</div>
  <div class="card-5 card">Five</div>
</section>
Метки: , ,