JOEE txt

Beranda
Desain

Membuat Fancy Card Animasi

Membuat desain fancy card animasi seperti demo diatas yang bisa Anda implementasikan di website Anda

Kali ini kita akan membuat desain fancy card animasi seperti demo diatas yang bisa Anda implementasikan di website Anda dan Anda juga bisa menyesuaikan dengan kebutuhan Anda dan website Anda. Source code fancy card ini saya bagi menjadi 3 file yaitu html, css dan javascrip. Anda dapat merubah source code ini sesuai kebutuhan Anda masing-masing.

Berikut source code nya:

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Fancy Card Animasi </title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css'>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <section class="min-h-screen text-center py-20 px-8 xl:px-0 flex flex-col justify-center">
    <h1 class="text-white capitalize text-4xl md:text-5xl xl:text-6xl font-semibold">Demo Fancy Card</h1>
    <p class="text-gray-400 text-lg max-w-lg mx-auto mt-6 mb-16">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    <div class="grid-offer text-left grid sm:grid-cols-2 md:grid-cols-3 gap-5 max-w-6xl mx-auto">
      <div class="bg-gray-800 p-8 relative">
        <div class="circle">
        </div>
        <span class="text-gray-400 text-2xl">01</span>
        <h2 class="text-white mt-3 mb-5 text-2xl lg:text-3xl">Lorem <br /> Ipsum</h2>
        <p class="text-gray-400">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <a class="inline-flex items-center uppercase text-white mt-8" href="https://xhref.blogspot.com/">learn more <svg class="ml-3 w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
          </svg></a>
      </div>
      <div class="bg-gray-800 p-8 active relative">
        <div class="circle">
        </div>
        <span class="text-gray-100 text-2xl">02</span>
        <h2 class="text-white mt-3 mb-5 text-2xl lg:text-3xl">Lorem <br />Ipsum</h2>
        <p class="text-gray-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <a class="inline-flex items-center uppercase text-white mt-8" href="https://xhref.blogspot.com/">learn more <svg class="ml-3 w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
          </svg></a>
      </div>
      <div class="bg-gray-800 p-8 relative">
        <div class="circle">
        </div>
        <span class="text-gray-400 text-2xl">03</span>
        <h2 class="text-white mt-3 mb-5 text-2xl lg:text-3xl">Lorem<br /> Ipsum</h2>
        <p class="text-gray-400">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <a class="inline-flex items-center uppercase text-white mt-8" href="https://xhref.blogspot.com/">learn more <svg class="ml-3 w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
          </svg></a>
      </div>
    </div>
  </section>

  <script src="script.js"></script>

</body>

</html>
Mungkin Anda tertarik membaca postingan ini: 
 body{
  background-color: #000000;
}

.active {
  cursor: pointer;
  background-color: #34d399;
}

.active :is(h2, p) {
  position: relative;
  z-index: 2;
}

.active :is(span, p) {
  color: #f3f4f6;
}

.circle {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: 0.5s;
  z-index: 0;
  top: 0;
  right: 0;
}

.grid-offer :is(p, a) {
  opacity: 0;
}

.active :is(p, a) {
  opacity: 1;
  transition: 0.5s 0.1s ease-in-out;
}

.grid-offer .active:nth-child(1) .circle {
  background: url("https://cdn.pixabay.com/photo/2017/08/13/07/47/lighthouse-2636468_960_720.png") no-repeat 50% 50% / cover;
}

.grid-offer .active:nth-child(2) .circle {
  background: url("https://cdn.pixabay.com/photo/2019/10/11/16/21/sea-4542240_960_720.png") no-repeat 50% 50% / cover;
}

.grid-offer .active:nth-child(3) .circle {
  background: url("https://cdn.pixabay.com/photo/2019/10/13/19/45/boat-4547083_960_720.png") no-repeat 50% 50% / cover;
}

.active .circle {
  clip-path: circle(110px at 100% 0%);
}

.active:hover .circle {
  clip-path: circle(150px at 100% 0%);
}

@media screen and (min-width: 1200px) {
  .active {
    transform: scale(1.1);
    transition: 0.2s ease-in-out;
  }
} 
const grid = document.querySelectorAll(".grid-offer div");
grid.forEach((item) => {
  item.addEventListener("mouseover", () => {
    grid.forEach((el) => el.classList.remove("active"));
    item.classList.add("active");
  });
});

Semoga bermanfaat.

No one is too busy, it's just a matter of priority.