初心者向けのマイクロインタラクションチュートリアル:CSSとJavaScriptを使用してインタラクティブな「いいね」ボタンを作成する方法

初心者向けのマイクロインタラクションチュートリアル


マイクロインタラクションはクールだと言っても安全だと思います。私たち–ウェブの人々–誰もが彼らを楽しんでいますまた、気づいているかどうかに関係なく、ユーザーエクスペリエンスが大幅に改善されています。あなたのウェブサイトやウェブツールを微妙かつフレンドリーな方法で実現させることで、ユーザーにインタラクション全体をほんの少しだけ楽しんでもらいます.

その精神の中で、私はあなたに簡単なマイクロインタラクションのチュートリアルを与え、そしてクールな "お気に入り" あなたのサイトのボタン。最小限のコードで。ここでそれは動作しています:

イマイチボタンにはかなりエキサイティングですね。それを始めましょう!

でもまず:

そもそもなぜマイクロインタラクションに悩むのか?

ここではあまり説得するつもりはありませんが、いくつかのことを見てみましょう.

マイクロインタラクションはしばらく前からあります。 完全な本 それらについて書かれた。さらに、実際にどれほど有用で効果的であるかを検討する多くの実験と研究がありました.

最も注目に値する研究機関の1つであるニールセンノーマングループは、マイクロ相互作用をさらに詳しく調査しました。 2018年に密接に. 彼らの結論によると、マイクロインタラクションは、とりわけ、エンゲージメントを促進し、ブランドを伝達することでユーザーエクスペリエンスを向上させることが証明されています.

要するに、マイクロインタラクションは、適切に使用すれば、またあまりにも多すぎない場合、本当に有益です。今日は、マイクロインタラクションの実際の簡単な例を1つ紹介します。

マイクロインタラクションのチュートリアル:親指ボタンのマークアップと基本的なCSS

��注;下部には、手動でコードを書くことを含まないいくつかのオプションがあります.

まず第一に、私たちはそれを動かすために古き良きHTMLとCSSの魔法が必要です。構造はかなり簡単です.

Likeアイコン自体にSVGタグを使用します–これは 素晴らしいフォント;あなたはほとんどのアイコンを見つけることができます ここに. SVGタグの幅と高さの属性を調整するために、以下のHTMLを使用します。

CSSについては、基本的なことから始めましょう。ここで実現したいのは、いいねボタンに見栄えをよくし、すべてを画面の中央にうまく配置することです。クリック時にクラス(アクティブクラス)を切り替えることはすでに知っているので、それを考慮する必要があります。アクティブな場合はアイコンを青色で、アクティブでない場合は濃い灰色で塗りつぶします。

体 {
ディスプレイ:フレックス;
align-items:中央;
justify-content:center;
高さ:100vh;
}

.いいねボタン{
ディスプレイ:フレックス;
align-items:center;
justify-content:center;
}

.like-button.active {
-webkit-animation:両方とも0.9秒間ポップ。
アニメーション:両方とも0.9秒ポップ。
}

.like-button svg {
不透明度:1;
}

.like-button svg path {
塗りつぶし:#333;
トランジション:.4sのイーズアウトを入力します。
}

.like-button.active svg path {
塗りつぶし:#2196f3;
}

ここでもう1つ必要なのは、ボタンがアクティブになったときに使用されるポップアニメーションです。そのため、CSSファイルに追加します。

@ -webkit-keyframes pop {
0%{
-webkit-transform:scale3d(1、1、1);
変換:scale3d(1、1、1);
}
30%{
-webkit-transform:scale3d(1.25、0.75、1);
変換:scale3d(1.25、0.75、1);
}
40%{
-webkit-transform:scale3d(0.75、1.25、1);
変換:scale3d(0.75、1.25、1);
}
50%{
-webkit-transform:scale3d(1.15、0.85、1);
変換:scale3d(1.15、0.85、1);
}
65%{
-webkit-transform:scale3d(0.95、1.05、1);
変換:scale3d(0.95、1.05、1);
}
75%{
-webkit-transform:scale3d(1.05、0.95、1);
変換:scale3d(1.05、0.95、1);
}
100%{
-webkit-transform:scale3d(1、1、1);
変換:scale3d(1、1、1);
}
}

@keyframes pop {
0%{
-webkit-transform:scale3d(1、1、1);
変換:scale3d(1、1、1);
}
30%{
-webkit-transform:scale3d(1.25、0.75、1);
変換:scale3d(1.25、0.75、1);
}
40%{
-webkit-transform:scale3d(0.75、1.25、1);
変換:scale3d(0.75、1.25、1);
}
50%{
-webkit-transform:scale3d(1.15、0.85、1);
変換:scale3d(1.15、0.85、1);
}
65%{
-webkit-transform:scale3d(0.95、1.05、1);
変換:scale3d(0.95、1.05、1);
}
75%{
-webkit-transform:scale3d(1.05、0.95、1);
変換:scale3d(1.05、0.95、1);
}
100%{
-webkit-transform:scale3d(1、1、1);
変換:scale3d(1、1、1);
}
}

の "インタラクション" このマイクロ相互作用のチュートリアルの一部

基本的なスタイリングが完了したので、次は実際の対話を処理します。つまり、JavaScriptです。!

まず、特定の間隔(最小と最大)の間にランダムな整数を生成するJavaScript関数が必要です。

function randomInt(min、max){
Math.floor(Math.random()*(max-min + 1)+ min);を返します。
}

次に、ランダムに+1または-1を返す別の関数が必要になるので、ランダムな負または正の値を持つことができます。

function plusOrMinus(){
Math.random()を返します < 0.5? -1:1;
}

次に、実際の対話処理について説明します。それを適切に説明するためにコードを見てみましょう:

  • まず、ボタンを変数に保存し、それにクリックイベントリスナーを追加します。.
  • ボタンがクリックされたら、preventDefault()関数を追加して、不要なことが何も起こらないようにします。.
  • その後、ボタンにアクティブクラスを追加します。これは、以前CSSを介して青色でスタイルを設定したものです。.
  • 次に、generateClones()関数(まだ定義されていません)を実行し、これを介してボタンをパラメーターとして渡します。.

letボタン= document.querySelector(".いいねボタン");

button.addEventListener("クリック", function(e){
e.preventDefault();
this.classList.toggle("活発な");
generateClones(this);
});

次に、generateClones()関数を定義し、それを使用して次の手順を実行します。

  1. まず、ランダムな数のクローンを決定しましょう。アイコンのクローンを2〜4個インスタンス化します。以前に定義したrandomInt()関数を使用します.
  2. 次に、各クローンについて、ボタン内のSVGタグを "モデル" そして、cloneNode(true)JavaScript関数を使用して、それを新しい変数に複製します。また、ランダムな整数生成関数を使用して、クローンのサイズを5〜16に定義します。.
  3. 次に、ボタンにクローンを追加し、その幅と高さを以前に生成された数で設定し、ボタンから独立して移動できるように位置を絶対的にします。.
  4. 私たちが必要とするもう1つのことは、クローンのトランジションです。そのため、クリックしたときに新しい場所に飛び込むだけではありません.
  5. ここで、アイコンを移動する実際の変換を追加するために、少しおかしくなります。クローンをボタンの中心からランダムに外側に移動させます。 randomInt()関数とplusOrMinus()関数の組み合わせを使用して、translate3d CSSプロパティでクローンをXY軸に移動します。また、 "ハック", 私たちの移行はそうでなければ適用されないので。したがって、単純なsetTimeout()関数を追加すると、それを実現するのに役立ちます。同時に、不透明度を0に移動して、クローンを非表示にします.
  6. クローンを削除しています。すべてのジャズが終了したら、DOMをクリアする必要があります。したがって、1秒後にDOMからクローンを削除する別のsetTimeout()関数が必要です。.

generateClones(button){
// 1.クローンを生成し、設定された数を反復する
クローンを作成する= randomInt(2、4);
for(let it = 1; it <=クローン; it ++){
// 2. SVGタグのクローンを変数で取得し、ランダムなサイズを生成します
let clone = button.querySelector("svg").cloneNode(true),
サイズ= randomInt(5、16);
// 3.クローンをボタンに追加し、その幅/高さ/位置を変更します
button.appendChild(clone);
clone.setAttribute("幅", サイズ);
clone.setAttribute("高さ", サイズ);
clone.style.position = "絶対の";
// 4.派手なトランジションを追加します
clone.style.transition =
"0.5s cubic-bezier(0.12、0.74、0.58、0.99)0.3s、不透明度1sイーズアウト.5s";
// 5. CSSに準拠するように、setTimeout関数を使用してアイコンを外側にアニメーション化します.
let animTimeout = setTimeout(function(){
clone.style.transform =
"translate3d(" +
plusOrMinus()* randomInt(10、25) +
"px," +
plusOrMinus()* randomInt(10、25) +
"px、0)";
clone.style.opacity = 0;
clearTimeout(animTimeout);
}、1);
// 6. 0.9秒後にクローンを削除する
letNodeTimeout = setTimeout(function(){
clone.parentNode.removeChild(clone);
clearTimeout(removeNodeTimeout);
}、900);
}
}

それでおしまい!最後までやり遂げました!下にCodePenの例があります。

ペンを見る
いいねボタン
Andrei Băicuș(@abaicus
オン CodePen.

これを通過してくれてありがとう!

WordPressにマイクロインタラクションを追加するその他のオプション

手動でコードを書くことが完全にあなたのことではない場合、実際にはすべてが内部でどのように機能するかを気にする必要なく、サイトにマイクロインタラクションを取得するために使用できる非常に少数のWordPressプラグインがあります.

まず、あなたは アニメート! CSS3を使用してページ上のほとんどの要素をアニメーション化するプラグイン.

たとえば、ボタンまたはテキストの一部を追加し、クリック時に特定の方法でアニメーション化するように設定できます.

プラグインができることの例を次に示します– ビデオ��.


アニメート!

著者: eLEOPARDデザインスタジオ


100%評価


40,000以上のインストール


4.7.0が必要

より詳しい情報

animate-it.2.3.7.zip

現在のバージョン:2.3.7

最終更新日:2020年3月20日


100%評価


40,000以上のインストール


4.7.0が必要

WordPress.orgプラグインページ


アニメート!

別のプラグイン、およびエディターのお気に入りの1つは、 究極のショートコード.

多数のさまざまなショートコードの中には、単純なアニメーション用のものがあります。アニメーションの動作に関するいくつかのプリセットがあり、アニメーション化されるブロック内にほとんど何でも置くことができます.

アニメーションボタンの例を次に示します(注:アニメーションは、最初にビューポートにスクロールしたときにのみ機能します。表示されない場合は、ページを更新してください)。

私をクリック


WordPress Shortcodes Plugin — Shortcodes Ultimate

著者: ウラジミール・アノキン


98%評価


800,000以上のインストール


WP 4.6+が必要

より詳しい情報

shortcodes-ultimate.5.9.0.zip

現在のバージョン:5.9.0

最終更新日:2020年5月24日


98%評価


800,000以上のインストール


WP 4.6+が必要

WordPress.orgプラグインページ


WordPress Shortcodesプラグイン— Shortcodes Ultimate

これらの2つのプラグインは、ページ上の特定の要素をアニメーション化し、ユーザーがそれらを操作しているときにもう少しポップするための十分なオプションを提供します。もちろん、それらを使いすぎたくないのですが、ユーザーが主要な行動を促すフレーズを操作しているときにユーザーに追加のナッジを提供することは、非常に役立ちます。.

マイクロインタラクションについてどう思いますか。このマイクロインタラクションのチュートリアルを有効に活用し、サイトに何かを追加することを検討していますか。コメントで教えてください.

WordPressサイトの高速化に関する速習コースに参加することを忘れないでください。いくつかの簡単な修正により、ロード時間を50〜80%も短縮できます。

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map