Person cards

Cards
CSS | JavaScript

+ ANIMATION :

+ Description :

This animation is displaying a card slider that can be used as a basis to show team member or  customer review as exemples.

In order to achieve it you will find below the various codes to be used. Despite using Bricks builder, I tried to list up all the necessary steps to complete the animation to be the most universal as much as possible. Therefore I am close to what you will find in any IDE. For Bricks builder, please follow the HTML/CSS structure so you can add-up divs and give them CSS (be careful with the buttons and icons) instead of putting it into the code element in order to avoid FOUC as the code block is loaded lastly within the page priority list.

For CSS, please note that I am considering that you are using a builder hence: no margin/padding reset has been applied and the font is not defined.

The JavaScript is also containing some lines to avoid having the animation (background gradient) running when it is not in viewport.

 

HTML:

<section class="person-section">
  <div class="person-ctn">
    <div class="img-ctn">
      <img
        src="/SUPERBOX/Persons Cards/Pictures/agence-kokoro-R0006144.jpeg"
        alt=""
        class="person-img"
      />
    </div>
    <h3 class="person-name">TAKA</h3>
    <p class="person-job">Marketing</p>
    <div class="button-ctn">
      <button class="prev-btn">
        <i class="fa-solid fa-backward"></i>
      </button>
      <button class="next-btn">
        <i class="fa-solid fa-forward"></i>
      </button>
    </div>
  </div>
</section>

 

CSS:

.person-section {
  display: flex;
  flex-direction: row;
  height: 100vh;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-color: #202020;
}
.person-ctn {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 500px;
  height: 400px;
  align-items: center;
  justify-content: center;
  box-shadow: 20px 20px 70px rgba(0, 0, 0, 0.25),
    10px 10px 70px rgba(0, 0, 0, 0.25), inset 5px 5px 10px rgba(0, 0, 0, 0.5),
    inset 5px 5px 20px rgba(255, 255, 255, 0.2),
    inset -5px -5px 15px rgba(0, 0, 0, 0.75);
  border-radius: 20px;
}
.img-ctn {
  padding: 0.5rem;
  margin-top: 1.5rem;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  box-shadow: 7px 7px 14px #121212, -7px -7px 14px #2e2e2e;
  background: linear-gradient(
    -45deg,
    #9b6bf7,
    #ee7752,
    #e73c7e,
    #9b6bf7,
    #23a6d5,
    #23d5ab,
    #9b6bf7
  );
  background-size: 400% 400%;
}
.person-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.person-name {
  font-size: 1.5rem;
  color: white;
  margin: 2rem 1rem 0;
}

.person-job {
  font-size: 1.3rem;
  color: white;
  margin: 1rem 0;
  padding: 1rem 0;
  border-top: 6px solid #9b6bf7;
}
button {
  display: flex;
  padding: 1rem;
  border-radius: 50px;
  color: white;
  font-size: 1.8rem;
  position: absolute;
  top: 50%;
  aspect-ratio: 1;
  background: transparent;
  border-color: transparent;
  box-shadow: 7px 7px 14px #121212, -7px -7px 14px #2e2e2e;
  cursor: pointer;
  transition: all 0.2s linear;
}
button:hover {
  color: #9b6bf7;
}
.prev-btn {
  left: 3rem;
}
.next-btn {
  right: 3rem;
}
.transition-neutral {
  animation: gradient 12s ease both infinite;
}
.transition-left {
  animation: slide-left 0.2s linear, gradient 12s ease both infinite;
}
.transition-right {
  animation: slide-right 0.2s linear, gradient 12s ease both infinite;
}
@keyframes slide-left {
  0% {
    transform: translateX(-200px);
    opacity: 0;
    scale: 0.3;
  }
  50% {
    opacity: 25%;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
    scale: 1;
  }
}
@keyframes slide-right {
  0% {
    transform: translateX(200px);
    opacity: 0;
    scale: 0.3;
  }
  50% {
    opacity: 25%;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
    scale: 1;
  }
}
@media screen and (max-width: 767px) {
  .person-ctn {
    width: 400px;
  }
}
@media screen and (max-width: 479px) {
  .person-ctn {
    width: 300px;
  }
  .prev-btn {
    left: 1.3rem;
  }
  .next-btn {
    right: 1.3rem;
  }
  .img-ctn {
    width: 150px;
    height: 150px;
  }
  button {
    font-size: 1.3rem;
  }
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

 

JavaScript :

const people = [
  {
    id: 1,
    name: "TAKA",
    job: "Marketing",
    img: "/wp-content/uploads/2022/11/agence-kokoro-R0006144.jpeg",
  },
  {
    id: 2,
    name: "ICHIRO",
    job: "Design",
    img: "/wp-content/uploads/2022/11/agence-kokoro-R0004362.jpeg",
  },
  {
    id: 3,
    name: "KEI",
    job: "Webmaster",
    img: "/wp-content/uploads/2022/11/agence-kokoro-67.jpeg",
  },
];

const img_ctn = document.querySelector(".img-ctn");
const person_img = document.querySelector(".person-img");
const person_name = document.querySelector(".person-name");
const person_job = document.querySelector(".person-job");

const prevBtn = document.querySelector(".prev-btn");
const nextBtn = document.querySelector(".next-btn");

let currentItem = 0;

window.addEventListener("DOMContentLoaded", function () {
  showPerson();
});

function showPerson() {
  const item = people[currentItem];
  person_img.src = item.img; 	
  person_img.srcset = item.img;	  
  person_name.textContent = item.name;
  person_job.textContent = item.job;
}

function remove(transDirection) {
  img_ctn.classList.remove(
    "transition-left",
    "transition-right",
    "transition-neutral"
  );
  void img_ctn.offsetWidth;
  img_ctn.classList.add(transDirection);
}

nextBtn.addEventListener("click", function () {
  currentItem++;
  if (currentItem > people.length - 1) {
    currentItem = 0;
  }
  showPerson();
  remove("transition-left");
});

prevBtn.addEventListener("click", function () {
  currentItem--;
  if (currentItem < 0) {
    currentItem = people.length - 1;
  }
  showPerson();
  remove("transition-right");
});

// Animate Gradient only in viewport

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    entry.target.classList.remove("transition-left", entry.isIntersecting);
    entry.target.classList.remove("transition-right", entry.isIntersecting);
    entry.target.classList.toggle("transition-neutral", entry.isIntersecting);
  });
});
observer.observe(img_ctn);

 

Contact
I can adapt and install this animation on your website, contact me and let's talk about it!