JavaScript에서 Instagram 효과를 좋아하려면 더블 클릭 ❤️

오늘은 유명한 인스타그램 더블 탭 좋아요 효과를 재현해 보겠습니다!

놀랍게도 12줄의 JavaScript만 필요합니다!

이 효과를 위해 하트 애니메이션과 게시물 아래의 카운터를 표시하는 이미지에 더블 클릭 핸들러를 바인딩합니다.

다음과 같이 표시됩니다.

HTML 구조

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="icon-heart" viewBox="0 0 32 32">
      <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
    </symbol>
  </defs>
</svg>

<div class="post">
  <svg class="icon icon-heart">
    <use xlink:href="#icon-heart"></use>
  </svg>
  <img src="https://instagram.fcpt4-1.fna.fbcdn.net/v/t51.2885-15/sh0.08/e35/s640x640/105986995_880679399008682_4786248831928918923_n.jpg?_nc_ht=instagram.fcpt4-1.fna.fbcdn.net&_nc_cat=102&_nc_ohc=ZI2jfIEB-tUAX8MMD58&oh=4cc88009309dbc5b223b8334408ac213&oe=5F78F3A2" />
  <p><span>0</span> likes</p>
</div>

우리의 HTML은 SVG sprites .
그런 다음 난로 SVG가 포함된 게시물 div를 만듭니다.
그 아래에 실제 인스타그램 게시물을 렌더링합니다.
마지막으로 좋아요 수가 있습니다.

보시다시피 가수 요소를 사용하고 있으므로 이 예제에서는 클래스를 추가하지 않았습니다.

CSS 구조

.post {
  margin: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.post img {
  width: 400px;
  cursor: pointer;
}
.post .icon {
  position: absolute;
  display: inline-block;
  width: 128px;
  opacity: 0;
  fill: red;
}
.post .icon.like {
  animation: 2s like-heart-animation ease-in-out forwards;
}
.post p {
  align-self: baseline;
  margin-top: 10px;
}

우리는 게시물Flex to center을 사용합니다.
다음으로 아이콘(하트)을 절대적으로 만들고 불투명도를 0으로 지정하여 로드 시 표시되지 않도록 합니다.

그런 다음 이 아이콘에도 클래스like가 있으면 애니메이션like-heart-animation을 추가합니다.

이 애니메이션은 이렇게 생겼고 인스타그램이 하는 것과 정확히 같은 애니메이션입니다.
크기를 늘리고 마지막에는 바운스 효과를 주기 위해 약간 줄입니다.

@keyframes like-heart-animation {
  0%,
  to {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  15% {
    opacity: 0.9;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  30% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  45%,
  80% {
    opacity: 0.9;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

자바스크립트 인스타그램 좋아요

실제 효과를 추가하려면 아이콘 svg에 like 클래스를 추가해야 합니다.

const img = document.querySelector("img");
const icon = document.querySelector(".icon");
const countEl = document.querySelector("span");
let count = 0;
img.addEventListener("dblclick", () => {
  count++;
  icon.classList.add("like");
  countEl.innerHTML = count;
  setTimeout(() => {
    icon.classList.remove("like");
  }, 1200);
});

dblclick라는 이벤트 리스너를 추가합니다(더블 클릭).
그런 일이 발생하면 카운터에 1씩 증가하라고 지시합니다.
그런 다음 좋아요 클래스를 아이콘에 추가하고 좋아요 수를 업데이트합니다.
1200밀리초 후에 like 클래스를 다시 제거합니다.

그게 다야! 이제 Codepen에 다음과 같은 Instagram 효과가 있습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나