GSAPタイムラインを使用してなめらかなプリローダアニメーションを作成する方法

31657 ワード
html gsap css javascript テキストリンク
これまでに、あなたを描いて、一目であなたの興味をつかんで流動性のあるプレローダーでウェブサイトに遭遇しましたか?それはあなたが何度も何度も繰り返しページをリロードすることを作りました.
先週、インターネットをブラウズしている間、私は出会いましたEnyata's ウェブサイトは、プリローダーを見た後、私はかなり感銘を受けたので、私は考えたそして、それはまさに私がしたことです.
そこで、本稿では、Greensockアニメーションプラットフォーム(GSAP)のタイムライン機能を使用する方法を示します.最後に、このプリローダーを作成することができます.
始めましょう!

必要条件
この記事では、
  • HTMLとCSSの基本理解
  • JavaScriptの基本理解
  • コードエディター
  • Webブラウザ( ChromeまたはFirefox推奨)

    • GSAPとは
    GreenSokアニメーションプラットフォーム(GSAP)は、おそらく、DOM要素、SVGS、ジェネリックオブジェクト、キャンバス、およびその他を含むJavaScriptでアクセスすることができる何かをアニメーション化することができるので、Webのための最高のアニメーションライブラリの一つです.
    GSAPもまた大きな選択肢です.
  • フレキシブル
  • ライト級
  • 速く、本当に速い(jQueryより速い20 xであると見積もられる)ように.
  • フォーラムを介して大規模かつ支援コミュニティがあります.
    • このライブラリについてもっと学ぶことができますhere .

    Tweensとタイムライン
    GSAPでは、Tweenは、アニメーションがどのように機能するかを制御するパラメータを定義できるJavaScriptオブジェクトです.
    Tweensはこのような形式でプロパティを提供します.gsap.method(element, var, duration)タイムラインは、チェーンを一緒に複数のアニメーション(すなわち、tweens、およびネストすることによって、他のタイムライン)は、それが簡単に全体としてアニメーションを制御し、正確にタイミングを設定することができますツールです.典型的なタイムラインはこう書かれている:let tl = gsap.timeline();ツイートを作成するために最も一般的に使われているメソッドを調べます.
  • to ()
  • from ()
  • fromto ()

    • to ()
    これはGSAPで最も一般的な方法です.
    その名が暗示するように、それはあなたのアニメーションがどこに行くかを指定します.

    from ()
    The from() メソッドは後方のtweenのように動作し、値がどこから始まるかを設定し、gsapは要素の現在の値にアニメーション化します.

    fromto ()
    The fromTo() 以下のデモに示すように、アニメーションの開始と終了の両方を定義することができます.
    他にも多くのメソッドがありますdocumentation , しかし、我々はこれらの3つで働いています.
    Tweensとタイムラインの基礎を学んだ今、プリローダを作ろう!

    プレローダーのビルド
    ああ!我々が待っていた時間は、ここにあります.このセクションでは、HTMLとCSSで非常に簡単なランディングページを構築し、プリローダーをビルドし、要素をアニメーション化するためにGSAPタイムラインを使用します.
    このセクションでは、理解しやすくするために別の手順に分かれています.

    ステップ1 : gsapをインストールする
    まず、プロジェクトでgsapを使用するには、インストールする必要があります.幸運にも、そうする別の方法があります.

    CDNの使用
    GSAPをプロジェクトに簡単に設定するには、次のHTMLファイルを追加します.
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>

    パッケージマネージャ経由でのインストール
    //Using npm
npm install gsap

//or with yarn
yarn add gsap
    インストールが完了したらプロジェクトにインポートします
    import { gsap } from "gsap";

    ステップ2:着陸ページの作成
    私たちは2 divでHTMLページを作成することから始めますpreloader そして、他は着陸ページです.
    インサイドpreloader 私たちはクラスでdivを持っていますprl-logo これはプリローダーのロゴで、h1 アニメーションシーケンスで後で定義されるまで、それは隠されます.
    SVG要素はナビゲーションバーのメニューボタンです.
    <body>
    <!-- Intro -->
    <div class="preloader">
      <div class="prl-logo">
        <h1 class="hide"> cruise. &trade; </h1>
      </div>
      <div class="lightCyan-slider"></div>
      <div class="persianGreen-slider"></div>
      <div class="white-slider"></div>
    </div>

    <!--Hero-->
    <section>
      <nav>
        <a class="logo" href="index.html">Cruise.</a>
        <svg
          class="menu-btn"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          width="24"
          height="24"
        >
          <path fill="none" d="M0 0h24v24H0z" />
          <path
            d="M3 4h18v2H3V4zm0 7h12v2H3v-2zm0 7h18v2H3v-2z"
            fill="rgba(255,255,255,1)"
          />
        </svg>
      </nav>
      <div class="hero-content">
        <h2>Lets go on an adventure.</h2>
        <p
          >Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem
          culpa vero quae perferendis molestiae exercitationem nemo atque
          veritatis ratione rem dolore quibusdam quia, a totam quidem nostrum
          iusto! Reiciendis, rem.</p
        >
        <button>Explore</button>
      </div>
    </section>

    <script src="app.js"></script>
  </body>
    今、CSSでは、いくつかの基本的なスタイルを使用して、使用してflex and position 要素のレイアウトと位置を操作する.
    また、得ることができますfonts I used Googleフォントから-それらをインポートすることを確認しますhead HTMLファイルまたはCSSファイルのタグ.
    プリローダーのセクションとスライダーのために、我々はそれらを与えるposition of fixed だから我々は設定することができますtop and left 位置のプロパティ、およびheight and width of 100% , したがって、ビューポートの100 %を占めます.
    ランディングページをモバイルデバイスに対応させるには、いくつかのメディア問い合わせも定義します.
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Montserrat", sans-serif;
  min-height: 100vh;
  max-width: 100%;
  background: url(home1.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 10vh;
  padding: 1rem 5rem;
}

.logo {
  font-family: "Abril Fatface", cursive;
  text-decoration: underline;
  font-size: 1.3rem;
  color: #fff;
  font-weight: lighter;
}

.menu-btn {
  cursor: pointer;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  color: #fff;
  text-align: center;
  z-index: -1;
}
.hero-content h2 {
  font-size: 3rem;
  font-family: "Abril Fatface", cursive;
  font-weight: lighter;
}
.hero-content p {
  font-size: 0.9rem;
  font-family: "Montserrat", sans-serif;
  color: #f0f2f2;
  margin: 1.5rem 0rem;
  line-height: 24px;
}

button {
  border: none;
  outline: none;
  padding: 0.5rem 1.5rem;
  border-radius: 10px;
  color: #025959;
  cursor: pointer;
  margin-top: 1.5rem;
  font-size: 0.9rem;
}

/* Preloader  */
.preloader {
  background: white;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prl-logo {
  font-family: "Abril Fatface", cursive;
  font-size: 1.3rem;
  z-index: 2;
}

/* Sliders  */
.lightCyan-slider,
.persianGreen-slider,
.white-slider {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
}
.lightCyan-slider {
  background: #d5f2ef;
}

.persianGreen-slider {
  background: #03a6a6;
}

.white-slider {
  background: #fff;
}

.hide {
  opacity: 0;
  color: #03a6a6;
  font-weight: lighter;
}

/* Responsive media queries */
@media screen and (max-width: 768px) {
  .logo,
  .prl-logo {
    font-size: 1rem;
  }
  .hero-content h2 {
    font-size: 2rem;
  }
  .hero-content p {
    font-size: 0.8rem;
  }
}

@media screen and (max-width: 425px) {
  nav {
    padding: 1rem 3rem;
  }
}
    結果のレイアウト👇

    素晴らしい、我々の着陸ページが設定されている今、JavaScriptに飛び込んで、アニメーションのタイムラインを構築しましょう.

    ステップ3:gsapタイムラインを実装する
    私たちはタイムラインを作成することから始めますdefaults プロパティ.これにより、そのタイムライン内のすべてのtweensによって継承されるプロパティを設定することができます.
    この場合、我々はease アニメーションpower1.out
    const tl = gsap.timeline({ defaults: { ease: "power1.out" } });
    Tweenを定義するには、次の手順に従います.
  • ターゲット要素の定義
  • varsパラメータを定義する
  • 位置パラメータを定義する
    • tl.to(".lightCyan-slider", {
  x: "-10%",
  duration: 1,
});
    上のコードは、最初に我々がアニメーションしたい要素(ターゲット要素)をとりますlightCyan-slider .
    次に、vars パラメータには、Tweenに必要なプロパティ/値が含まれます.
    この場合、vars パラメータx に等しいキーtransform: translateX() CSSで.
    タイムラインでアニメーションを配置するにはposition パラメータvars パラメータここでは"-=1" , そして、それが正確にどこにアニメーションを挿入するタイムラインを指示するので、それは超便利です.
    この場合、アニメーションは前のアニメーションの終わりの1秒前に実行されます.
    tl.to(
  ".persianGreen-slider",
  {
    x: "-20%",
    duration: 1.5,
  },
  "-=1"
);
    位置パラメータの詳細を調べるにはhere .
    さて、他のツイートを定義できます.
    const tl = gsap.timeline({ defaults: { ease: "power1.out" } });

tl.to(".lightCyan-slider", {
  x: "-10%",
  duration: 1,
});

tl.to(
  ".persianGreen-slider",
  {
    x: "-20%",
    duration: 1.5,
  },
  "-=1"
);

tl.to(
  ".white-slider",
  {
    x: "-30%",
    duration: 1.5,
  },
  "-=1"
);

tl.to(".hide", {
  x: "0%",
  duration: 2,
  opacity: 1,
});

tl.to(".preloader", {
  x: "200%",
  duration: 3,
});

tl.fromTo(
  "nav",
  {
    opacity: 0,
  },
  {
    opacity: 1,
    duration: 1,
  },
  "-=2"
);

tl.fromTo(
  ".hero-content",
  {
    opacity: 0,
    y: -20,
  },
  {
    opacity: 1,
    duration: 1,
    y: 0,
  },
  "-=1.5"
);

    Note : It is important that you write your tweens in the order that you want the timeline to run.


    たとえば、上記のコードでは、次のようになります.
    .lightCyan-slider --> .persianGreen-slider --> .white-slider --> .hide --> .preloader --> nav -->.hero-content
    すごい!我々は首尾よく我々の着陸ページのためにすべてのアニメーションをチェーンしているGSAPを使っているタイムラインを作成しました.

    チェックアウトlive demo とcode repository Githubについて

    結論
    おめでとう!あなたが終わりまでそれを作ったならば、それはあなたがGSAPタイムラインを首尾よく実行して、ものすごいプレローダーを構築したことを意味します.私は、あなたがこの記事から多くの価値を得たことを望みます.
    私はあなたにGSAPを使用する際に多くの可能性があることを知っていて欲しいと思っています.いくつかの最高のgsapアニメーションのウェブサイトをチェックアウトawwwards とGreensock Showcase .
    また、より多くのコンテンツについては、次のようにしてください.私の最初の技術記事としていくつかのフィードバックを残してください.

    資源と更なる読書
  • Greensock Documentation
  • GSAP Cheatsheet
    • MySqlでライブラリTRUNCATEテーブル文を印刷
    remove and re-install mysql 5.6 on centOS 6.4