を使用して歪み効果を作成する

15080 ワード
coreanimation javascript テキストリンク
Web上のDOM要素をアニメーション化することは、多数の解決策で多くの話題の一つでした.我々は、HTMLとCSSの古典的なデザインシステムの上昇を見てきたし、それに応じてキーフレームアニメーションを構築する方法.それから、我々はjQueryのようなJavaScriptライブラリを使って移行しました.

導入


GSAP(Greensockアニメーションプラットフォーム)は、取得ガイドを示すように、“スクリプトアニメーションのツールのスイートです”.基本的には、DOM上で文字通り何かをアニメーション化するために使用できる、既製の関数と方法の一つの大きな生態系だということです.GSAPはとても素晴らしいものですが、複雑なアニメーションを構築するときでも、それは完全にパフォーマンスとスケーリングのために最適化されています.これはjQueryの強靭な構文とは対照的に、JQuery上で切り札を作ります.

何を建てるのですか。


この記事では、どのようにホバーでトリガされる歪み効果を使用してクールな探しのWebページを構築する方法を学びますGSAP and hover-effect 図書館.この例では、GSAPで学習曲線を短縮するのに役立ちます.Credits go to:UIデザイナーMaxim Nilov | Dribbbleギタブcodicts/Fashion-Landing-Page (github.com)

必要条件

GSAP DOMをレンダリングするためのスイートは、はるかに簡単です.これは、DOM操作に関連するいくつかのキー概念を使用して可能です.そのためには、次のようになります.
  • HTML、CSSとJavaScript
  • 基本反応

    • どのように、gsapは働きますか？

    GSAP これらのアニメーションを作成するのに役立つ組み込みコンポーネントを持っています、そして、彼らは私たちがアニメーション化したいプロパティをセットするのを手伝う方法で来ます.この例では、これらのコンポーネントの1つだけが必要ですTweenMax . チェックアウトdocs: ).

    トゥエンマックス


    TweenとTweenMaxのコンポーネントは、複雑なキーフレームを記述せずに簡単なトランジションを行うことを容易にするために、より広く使われているものの1つです.The tween キーワードは「間」から派生します.これは基本的に「ある値から別の値までの間のこのプロパティを変更する」ことを意味します.
    GSAP内にあるいくつかのメソッドを見てみましょう.
  • GSAP .to ()
  • GSAP .from ()
  • GSAP .staggerfrom ()

    • GSAP .to ()


    さあ、gsap 指定した値のプロパティを別の値に変更するには、この場合、アニメーションの開始値を示します.
    以下に例を示します:
    gsap.from("#logo", {duration: 1, x: 100});

    GSAP .staggerfrom ()


    現在staggerFrom 少し違った動作をするgsap.to() and gsap.from() . によって、私たちは、私たちがアニメーション化したい単一のHTML要素に対処します、しかし、要素のグループ、特に親要素の子供をアニメーション化したいならば、どうですか?With staggerFrom() , 我々は、子供の要素のグループのために効果を取るためにアニメーションを設定することができますも、間隔を設定したり、“間のスタール”は、このシーケンシャルな感じを与えるようにアニメーションを取得します.
    以下に例を示します:
        TweenMax.staggerFrom(".media ul li", 1.5, { //TweenMax used in place of gsap
      delay: 1.5,
      opacity: 0,
      x: "-60",
      ease: Expo.easeInOut
    }, 0.08);
    まず、我々はgsap ライブラリ( TweenMax )を使用して、HTMLを対象とした「staggerfrom ()」メソッドを使用できます<li/> アンダー・エレメントmedia クラス.値1.5 は、各子のアニメーションの開始時間の間に影響を受けるのを示すために使われる.このスタッガーは、それらの間のシーケンシャルな感じを持っているアニメーションを助けるものです.
    次に、各要素に必要なプロパティを入れます.注意ease あなたがそれらのドキュメンテーションの詳細について学ぶことができるプロパティ.

    GSAPから始める


    では、歪み効果ページの構築を始めましょう.
    フォルダを作成し、その新しいフォルダにHTMLとCSSファイルを作成します.
    次に、HTMLファイルで、あなたの基本的なHTMLマークアップを設定します.
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>
Next, our imports:
  <!-- google fonts -->
  <link href="https://fonts.googleapis.com/css?family=Poppins:500,600,700,900&display=swap" rel="stylesheet">
  <!-- css -->
  <link rel="stylesheet" href="style.css">
Then our scripts as well, for GSAP and hover-effect (these go on the bottom of the html page)
 <!-- icons -->
  <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
  <!-- gsap -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"
    integrity="sha256-lPE3wjN2a7ABWHbGz7+MKBJaykyzqCbU96BJWjio86U=" crossorigin="anonymous"></script>
  <!-- three js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.min.js"
    integrity="sha256-3mBEX8I0uMLF7+AUjJeTCelosuorzYpqwBMBPDTyQqY=" crossorigin="anonymous"></script>
    現在、我々は我々のウェブページから始めるためにセットされます.
    あなたの便宜には、ビューを設定することができますが、このチュートリアルでは、まず、メインのWebページを設定します.
      <!-- NAVBAR
    =============================== -->
    <nav class="navbar">
      <div class="menu">
        <ion-icon name="ios-menu"></ion-icon>
      </div>
      <div class="lang">eng</div>
      <div class="search">
        <ion-icon name="ios-search"></ion-icon>
      </div>
    </nav>


    <!-- SOCIAL MEDIA
    =============================== -->
    <div class="media">
      <ul>
        <li>facebook</li>
        <li>instagram</li>
        <li>twitter</li>
      </ul>
    </div>


    <!-- TEXT
    =============================== -->
    <div class="text">
      <h1>
        <span class="hidetext">toni&guy</span>
      </h1>
      <h2>duality</h2>
      <h3>
        <span class="hidetext">collection 2017 <br> duality</span>
      </h3>
      <p>
        <span class="hidetext">
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quis, delectus facere
          neque sunt commodi quae
          culpa dolores doloribus magnam?
        </span>
      </p>
    </div>


    <!-- SPONSOR
    =============================== -->
    <div class="sponsor">
      <img src="./images/sponsor-logo.png" alt="">
      <p>official sponsor</p>
    </div>
    次に、基本的なWebページ用のcss
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins';
  background: #D8DBE2;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

ul {
  list-style: none;
}

/* NAVBAR
=========================== */
.navbar {
  display: flex;
  justify-content: space-between;
  height: 80px;
  align-items: center;
}

.navbar > div {
  padding: 0 30px;
  font-size: 20px;
}

.navbar .menu {
  margin-right: auto;
}

.navbar .lang {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}


/* SOCIAL MEDIA
=========================== */
.media ul {
  position: absolute;
  bottom: 250px;
  left: -140px;
  transform: rotate(-90deg);
}

.media ul li {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  display: inline-block;
  padding: 0 30px;
}


/* TEXT
=========================== */
.text {
  position: absolute;
  top: 200px;
  left: 100px;
  transform: rotate(-90deg);
}

.text h1 {
  font-size: 120px;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: -10px;
  margin-bottom: 20px;

  position: relative;
  overflow: hidden;
  height: 150px;
  width: 600px;
}
.text h1 .hidetext {
  position: absolute;
}

.text h2 {
  position: absolute;
  top: 40px;
  left: -80px;
  color: #EFDE74;
  z-index: -1;
  font-size: 150px;
  font-weight: 600;
  letter-spacing: 8px;
  text-transform: uppercase;
}

.text h3 {
  font-size: 40px;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1;

  position: relative;
  overflow: hidden;
  height: 80px;
}
.text h3 .hidetext {
  position: absolute;
}

.text p {
  width: 200px;
  font-size: 12px;
  margin-top: 30px;
  font-weight: 500;

  position: relative;
  overflow: hidden;
  height: 110px;
}
.text p .hidetext {
  position: absolute;
}


/* SPONSOR
=========================== */
.sponsor {
  position: absolute;
  right: 100px;
  bottom: 100px;
  text-align: center;
}
.sponsor img {
  width: 200px;
  transform: rotate(-90deg);
}
.sponsor p {
  margin-top: 20px;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 900;
  transform: rotate(180deg);
}
    我々のウェブページを調べましょう:
    以下にいくつかのことがあります.
    3正方形は、Webページを明らかにする上から下にアニメーション化.ここで、我々は彼らが3つのdivであるということをすでに知っています、絶対的な位置を持っていてください、そして、次に、私たちはそれらの間でアニメーション化するために「to」メソッドを使用します.
    上のNavbarは、変更された不透明度で、上から下にアニメーション化します.
    側のテキストは0から1に変化し、高さが増加する.
    3つの正方形のために、我々はそれらを表すために3 divを作成します.
        <div class="overlay first"></div>
    <div class="overlay second"></div>
    <div class="overlay third"></div>
    次にスタイルに応じてスタイル.CSS
    /*===========================  OVERLAY =========================== */
.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  z-index: 99;
}
.first {
  background: #efde74;
}
.second {
  background: #efde74;
  left: 33.3%;
}
.third {
  background: #efde74;
  left: 66.6%;
}
    今私たちのアニメーションを設定することができますGSAP :
     TweenMax.to(".first", 1.5, {
      delay: .5,
      top: "-100%",
      ease: Expo.easeInOut
    });

    TweenMax.to(".second", 1.5, {
      delay: .7,
      top: "-100%",
      ease: Expo.easeInOut
    });

    TweenMax.to(".third", 1.5, {
      delay: .9,
      top: "-100%",
      ease: Expo.easeInOut
    });
    遅延が2 . 2によって変更されたことに注意してください.また、staggerFrom() 方法は、子供たちの間に変化し、どのように効果が異なる参照してください.
    次に、我々はNavbarと様々なテキストをアニメーション化します.
    以下にいくつかのことがあります.
    3正方形は、Webページを明らかにする上から下にアニメーション化.ここで、我々は彼らが3つのdivであるということをすでに知っています、絶対的な位置を持っていてください、そして、次に、私たちはそれらの間でアニメーション化するために「to」メソッドを使用します.
    上のNavbarは、変更された不透明度で、上から下にアニメーション化します.
    側のテキストは0から1に変化し、高さが増加する.
    3つの正方形のために、我々はそれらを表すために3 divを作成します.
    次にスタイルに応じてスタイル.CSS
    /*標準的なオーバーレイ
    オーバレイ{ }
    位置:絶対;
    幅:100 %;
    高さ:100 %;
    トップ:0 %
    Z指数:99;
    ｝
    第一
    背景:
    ｝
    二番目
    背景:
    左:33.3 %
    ｝
    三番目
    背景:
    左側:66.6 %
    ｝
    GSAPでアニメーションを設定できます.
    Tweenmax(最初に)
    遅れ: 5
    トップ:"- 100 %"
    エキサイト.用心深い
    ));
    TweenMax.to(".second", 1.5, {
  delay: .7,
  top: "-100%",
  ease: Expo.easeInOut
});

TweenMax.to(".third", 1.5, {
  delay: .9,
  top: "-100%",
  ease: Expo.easeInOut
});
    遅延が2 . 2によって変更されたことに注意してください.staggerfrom ()メソッドを使用して、子プロセスの違いを調べ、どのように効果が変わるかを確認することもできます.
    次に、我々はNavbarと様々なテキストをアニメーション化します.
    //navbar
    Tweenmax"Navbar div ", 1.5 , {
      delay: 1.5,
  opacity: 0,
  y: "20",
  ease: Expo.easeInOut
}, 0.08);

// MEDIA
TweenMax.staggerFrom(".media ul li", 1.5, {
  delay: 1.5,
  opacity: 0,
  x: "-60",
  ease: Expo.easeInOut
}, 0.08);

// TEXT
TweenMax.from(".text h1 .hidetext", 1.5, {
  delay: 1,
  y: "100%",
  ease: Expo.easeInOut
});

TweenMax.from(".text h3 .hidetext", 1.5, {
  delay: 1.2,
  y: "100%",
  ease: Expo.easeInOut
});

TweenMax.from(".text p .hidetext", 1.5, {
  delay: 1.3,
  y: "100%",
  ease: Expo.easeInOut
});

TweenMax.from(".text h2", 1.5, {
  delay: 1.5,
  opacity: 0,
  x: "-10000",
  ease: Expo.easeInOut
});

// SPONSOR
TweenMax.from(".sponsor img", 1.5, {
  delay: 1.5,
  opacity: 0,
  y: "20",
  ease: Expo.easeInOut
});

TweenMax.from(".sponsor p", 1.5, {
  delay: 1.6,
  opacity: 0,
  y: "20",
  ease: Expo.easeInOut
});
    最後に、歪み効果のために、ホバー効果ライブラリを使用します.
    ホバーエフェクトライブラリをここで取得し、コードをコピーし、ホバー効果と呼ばれる新しいファイルを作成します.UMDjsとペーストコード.
    それから新しく作成したスクリプトをインポートします.
    <--ホバー・エフェクト
    現在、我々の歪曲効果が働く方法は、ライブラリが現在のイメージのぼかしをつくって、次に、私たちが提供する必要がある変位イメージに移行して、次に、最後に移行される第2のイメージのぼやけたバージョンに遷移して、それからぼやけた状態から規則的な状態までイメージをセットするということです.
    まず最初に、私たちは、歪んだイメージコンテナを表すDIVをつくります.
    <--ディストーション
    それで、我々は変位イメージを提供しなければなりません(便宜のためにぼかし効果のように見えなければなりません).
    新しいホブ効果
    親:ドキュメント.queryselector (' .歪曲')
    強度:0.2、
    イメージ1 :'/イメージ/01 .PNG
    image 2 :'/イメージ/02 .PNG
    ディスプレースメント:イメージ/diss.PNG
    imagesratio : 340/300
    ))>
    そして、それは一緒にいくつかのアニメーションで歪み効果を置きます.
    読書ありがとう.
       // NAVBAR
    TweenMax.staggerFrom(".navbar div", 1.5, {

      delay: 1.5,
      opacity: 0,
      y: "20",
      ease: Expo.easeInOut
    }, 0.08);

    // MEDIA
    TweenMax.staggerFrom(".media ul li", 1.5, {
      delay: 1.5,
      opacity: 0,
      x: "-60",
      ease: Expo.easeInOut
    }, 0.08);

    // TEXT
    TweenMax.from(".text h1 .hidetext", 1.5, {
      delay: 1,
      y: "100%",
      ease: Expo.easeInOut
    });

    TweenMax.from(".text h3 .hidetext", 1.5, {
      delay: 1.2,
      y: "100%",
      ease: Expo.easeInOut
    });

    TweenMax.from(".text p .hidetext", 1.5, {
      delay: 1.3,
      y: "100%",
      ease: Expo.easeInOut
    });

    TweenMax.from(".text h2", 1.5, {
      delay: 1.5,
      opacity: 0,
      x: "-10000",
      ease: Expo.easeInOut
    });

    // SPONSOR
    TweenMax.from(".sponsor img", 1.5, {
      delay: 1.5,
      opacity: 0,
      y: "20",
      ease: Expo.easeInOut
    });

    TweenMax.from(".sponsor p", 1.5, {
      delay: 1.6,
      opacity: 0,
      y: "20",
      ease: Expo.easeInOut
    });
    最後に、歪み効果のために、ホバー効果ライブラリを使用します.
    ホバーエフェクトライブラリをここで取得し、コードをコピーし、ホバー効果と呼ばれる新しいファイルを作成します.UMDjsとペーストコード.
    それから新しく作成したスクリプトをインポートします.
      <!-- hover-effect js -->
  <script src="./hover-effect.umd.js"></script>
    現在、我々の歪曲効果が働く方法は、ライブラリが現在のイメージのぼかしをつくって、次に、私たちが提供する必要がある変位イメージに移行して、次に、最後に移行される第2のイメージのぼやけたバージョンに遷移して、それからぼやけた状態から規則的な状態までイメージをセットするということです.
    まず最初に、私たちは歪んだイメージコンテナを表すDIVをつくります.
      <!-- DISTORTION =============================== -->
    <div class="distortion"></div>
    それで、我々は変位イメージを提供しなければなりません(便宜のためにぼかし効果のように見えなければなりません).
        new hoverEffect({
      parent: document.querySelector('.distortion'),
      intensity: 0.2,
      image1: './images/01.png',
      image2: './images/02.png',
      displacementImage: './images/diss.png',
      imagesRatio: 340 / 300   
    })
    そして、それは一緒にいくつかのアニメーションで歪み効果を置きます.
    読書ありがとう.
    もともと書かれたKing Somto for JavaScript Works
    羽毛動作、MySQL CI実施ホットスポット
    js json文字列をjson現金化に変換