2023/12/10

GSAPのアニメーション効果を試してみた!(準備)


Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

GSAP(GreenSock Animation Platform)は、JavaScriptで制御できる要素に対して、最小限のコードで素晴らしいアニメーションを実現するための強力なライブラリです。滑らかなパフォーマンスと優れたサポートを提供し、開発者が創造的な側面に焦点を当てられるようになります。
本ブログでは、私が試したGSAPの実際のサンプルコードを複数記事に分けて紹介しようと思っています。基本初心者、中級者向けです。是非今後の開発にお役に立てれば幸いです。

公式サイト

GSAPの公式サイトを訪れると、UIのアニメーション、SVG、没入感のあるWebGL体験など、さまざまな領域での活用例が豊富に紹介されています。このサイトを見ればGSAPできることのすべてがわかるおですが、英語であることと、情報が多すぎて見る気にならないというのが正直なところです。

gsap公式サイト(https://gsap.com/)

GSAPのインストール

GSAPのインストール
GSAPの導入は非常に簡単です。いくつか方法はありますが、今回はCDNでの導入方法が一番簡単なのでその方法を紹介します。

CDNの場合は、公式サイトをで最新のバージョンを調べることができます。

gsap公式サイトインストール情報(https://gsap.com/docs/v3/Installation/)

以下のコードをHTMLに貼り付けてください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/gsap.min.js"></script>

図形を回転させる

図形を回転させるコードです。公式ページのサンプルをそのまま載せても芸がないので、ちょっと替えて星にしてみました。

gsap公式サイト(https://gsap.com/core/)

<style>
#gsap-star-css {
width: 150px;
height: 150px;
background: #f0ec20;
clip-path: polygon(50% 5%, 61% 40%, 98% 40%, 68% 62%, 79% 96%, 50% 75%, 21% 96%, 32% 62%, 2% 40%, 39% 40%);
}
</style>

<div id="gsap-star-css"></div>

<script>
gsap.to("#gsap-star-css", {
duration: 2,
ease: "none",
repeat: -1,
rotation: 360,
});
</script>

図形をフェードインさせる

スクロールさせると、画像がふわっとフェードインするサイトよく見かけますよね。gsapでも当然できます。
スクロールしてからアニメーションを開始させるので、ScrollTriggerというプラグインを使います。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/ScrollTrigger.min.js"></script>

gsap公式サイト(https://gsap.com/docs/v3/Plugins/ScrollTrigger/)

<style>
#gsap-box-css {
width: 150px;
height: 150px;
background: #f0ec20;
}
</style>

<div id="gsap-box-css"></div>

<script>
gsap.fromTo(
"#gsap-box-css", // アニメーションさせる要素
{
autoAlpha: 0, // アニメーション開始前は透明する
},
{
autoAlpha: 1, // アニメーション後は非透過にする(透過率0)
scrollTrigger: {
trigger: "#gsap-box-css", // アニメーションが始まるトリガーとなる要素
start: "top center", // アニメーションの開始位置
scrub: true, // スクロールに追従させる
}
}
);
</script>

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 86

プロフィール

管理者 HONDA

福島県出身

ITで商売を効率化したいが、ITが苦手、分からない方是非ご相談ください。50過ぎの「おっさん」です。そのほうが話しやすい方はお勧めします。

カテゴリ

ファッション

美容

お酒


西暦和暦干支年齢対応表


設定

時計表示

都道府県

ブックマーク1

ブックマーク2

ブックマーク3

プライバシーポリシー

はじめに

HONDA WORK SHOPでは、ご利用のユーザ様個人情報の取り扱いに細心の注意を払っております。

また当サイトではアフィリエイトプログラムを利用しております。

第三者配信事業者(Amazonアソシエイト、楽天アフィリエイト、A8.net)がCookie を使用して、サイト利用者が当サイトや他のサイトに過去にアクセスした際の情報に基づいて広告を配信します。

Google が広告 Cookie を使用することにより、サイト利用者が当サイトや他のサイトにアクセスした際の情報に基づいて、Google やそのパートナーは適切な広告をサイト利用者に対して表示します。

広告設定でパーソナライズ広告を無効にすることができます。

Cookieの利用について

Cookieは、当サイトや他サイトへのアクセスに関する情報が含まれており、多くのサイトで利用者に有益な機能を提供する目的で使用されています。

Cookieには、サイト利用者の個人情報(氏名、住所、メールアドレス、電話番号)は一切含まれません。

アクセス解析ツールについて

当サイトでは、アクセス解析ツール「Google Analytics」を利用しています。

「Google Analytics」はトラフィックデータの収集のためにCookieを使用しています。

このトラフィックデータは匿名で収集されており、個人を特定するものではありません。

この機能はCookieを無効にすることで収集を拒否することができますので、ご利用のブラウザ設定をご確認のうえ、拒否設定を行ってください。

本ポリシーの変更

当サイトは、個人情報に関して適用される日本の法令を遵守するとともに、本ポリシーの内容を適宜見直しその改善に努めます。

修正された最新のプライバシーポリシーは常に本ページにて開示されます。