をダブルクリックします❤️

今日、我々は有名なInstagramのダブルタップを効果的に再現しようとしている!
そして、驚きは、我々だけのJavaScriptの12行が必要です!
この効果のために、我々はダブルクリックハンドラーを我々のイメージにバインドします.そして、ポストの下の心臓アニメーションプラスカウンターを示します.
これがどのように見えるかです.

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をつくります.
その下で、実際のInstagram Postをレンダリングします.
そして最後に私たちの好きな数があります.
ご覧のように、私たちは歌手の要素を使用しているので、私はこの例のためのクラスを追加する気にしませんでした.

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);
  }
}

JavaScriptのInstagramのような

場所を追加する私たちの実際の効果のために、我々はlike クラスSVGにクラスを追加しました.

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ミリ秒後、同じクラスを再び削除します.
それだ!今ではcodepenで以下のようなinstagram効果があります.

読んでいただきありがとうございます、接続しましょう！

私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or