下のサンプルのように、スクロールすると下から要素がふわっと現れるアニメーション、よく見かけますよね。

See the Pen Untitled by toshihide (@toshihide2000) on CodePen.

高級感やモダン感を効果的に演出できるため、Webサイト制作の際にはぜひ取り入れたい動きです。

この記事では、GSAPのScrollTriggerを使ってこのパララックスアニメーションを実現する方法について解説します。

コード概要

まずは全体のコードをお見せします。

.box.parallaxTarget
.box.parallaxTarget
.box.parallaxTarget

.parallaxTarget{ opacity: 0; filter: blur(4px); transform: translateY(50px);
}

//yarnなどでinstallしている場合
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger';
class gsapParallax { constructor(){ // gsap.registerPlugin(ScrollTrigger); gsap.utils.toArray(".parallaxTarget").forEach(parallaxTarget => { gsap.to(parallaxTarget, { scrollTrigger: { trigger: parallaxTarget, start: "top 80%", toggleActions: "play none none reverse" }, opacity: 1, filter: "blur(0px)", duration: 1.5, y:0, ease: "power3.out" }); }); // }
}
export { gsapParallax }
new gsapParallax();

パララックスを付与したい要素にクラスをつけて、そのクラスを持つ要素に対してGSAPで操作を加えています。

コードの詳細解説に移る前に、今回作る「スクロールすると下から要素がふわっと現れるアニメーション」の要件についてもう少し深掘りしてみていきましょう。

つまり、スクロールすると下から要素がふわっと現れるパララックスアニメーションを実現するには、scrollTriggerでビューポートと要素の交差判定をしつつ、translateとopacity、blurを操作できればいいという訳ですね。これを踏まえて、コードの詳細をみていきましょう。

HTML

.box.parallaxTarget
.box.parallaxTarget
.box.parallaxTarget

パララックスを付与したい要素全てに.parallaxTargetを付与するだけです。

動いている感を出すために、セクションの枠組み自体は動かさず、テキストや画像などセクションの中身の要素を動かすと効果的です。

CSS

.parallaxTarget{ opacity: 0; filter: blur(4px); transform: translateY(50px);
}

パララックスさせたい要素にアニメーションの初期スタイルを当てておきます。gsap.set()でも同じことができますが、PCとSPでアニメーションの度合いを変化させたい場合でもメディアクエリを追加するだけでいいことを考えると、アニメーションのスタイルはCSS側に持たせておいた方が便利でしょう。

Tips
opacityだけでなくblurを設定しておくことで、より「ボンヤリからハッキリ」感を演出できます

JS

//yarnなどでinstallしている場合
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger';
class gsapParallax { constructor(){ // gsap.registerPlugin(ScrollTrigger); gsap.utils.toArray(".parallaxTarget").forEach(parallaxTarget => { gsap.to(parallaxTarget, { scrollTrigger: { trigger: parallaxTarget, start: "top 80%", toggleActions: "play none none reverse" }, opacity: 1, filter: "blur(0px)", duration: 1.5, y:0, ease: "power3.out" }); }); // }
}
export { gsapParallax }
new gsapParallax();

yarnなどでGSAPとScrollTriggerをインストールしていることが前提となります。インストール方法についてはこちらをご覧ください。

2024年10月28日 GSAPのベーシックチートシート！基礎とよくある質問を徹底解説！

ScrollTriggerで交差判定をして、スタイルの付与/除去を行うというのがこのコードの基本的な仕組みとなっています。

• gsap.registerPlugin(ScrollTrigger);→ScrollTriggerをアクティベートさせます。
• gsap.utils.toArray(".parallaxTarget").forEach()→.parallaxTargetを持つすべての要素にアニメーションを適用させます。
• start: "top 80%",→要素がビューポートに入って少ししたところでアニメーションを発火させます。ビューポートに入った瞬間アニメーションを発火させると動きが一部見えなくなるため、少し遅らせます。
• toggleActions: "play none none reverse"→行ったり来たりしてもアニメーションが毎回発火するようにします。
• opacity: 1, filter: "blur(0px)", duration: 1.5, y:0,→.parallaxTargetに指定したスタイルを打ち消すように指定します。durationはお好みで調整してください。
• ease: "power3.out"→ease-outのイージングを設定しています。

durationやイージングを除く、アニメーションの動き自体はCSS側で設定し、GSAP側では’元の状態に戻す’指定だけにすることで、動きを調整する際にCSSを変えるだけで良くなり、メンテナンス性が向上します。

パララックスを一度だけ適用したい場合
scrollTriggerにonce:trueとtoggleactions:”play none none none”を指定することで、パララックスの適用を一度だけに限定することができます。

//yarnなどでinstallしている場合
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger';
class gsapParallax { constructor(){ // gsap.registerPlugin(ScrollTrigger); gsap.utils.toArray(".parallaxTarget").forEach(parallaxTarget => { gsap.to(parallaxTarget, { scrollTrigger: { trigger: parallaxTarget, start: "top 80%", //パララックスを一度だけ適用したい場合👇 once:true, toggleActions: "play none none none" }, opacity: 1, filter: "blur(0px)", duration: 1.5, y:0, ease: "power3.out" }); }); // }
}
export { gsapParallax }
new gsapParallax();

まとめ

この記事では、GSAPのScrollTriggerを使ってパララックスアニメーションを実現する方法について解説しました。

高級感のある演出を手軽に実現できますので、ぜひ案件に取り入れてみてください。そのほかにもGSAPの基本的な使い方やScrollTriggerについても解説していますので、よければ参考にしてください！

それでは、ふろんと遠藤でした。

2024年10月28日 GSAPのベーシックチートシート！基礎とよくある質問を徹底解説！

GSAPの基本の使い方

GSAPのインストール方法

gsapを使うには、yarnやnpmでinstallするか、CDNで引っ張ってくる必要があります。

それぞれのインストール方法は以下のページの「Install Helper」を確認してください。

参考

Installation | GSAP | Docs & Learning

あとは、JSファイルでimport { gsap } from 'gsap';するだけです。

まずgsap.to()ってどういう意味?

gsap.to()はGSAPのTween（トゥイーン）の一つであり、「現在の状態からアニメーションする」ことを表しています。

Tweenとは、betweenから来た用語でアニメーションをどの状態からどのように開始させるかを設定します。

• gsap.to()：現在の状態からアニメーション
• gsap.from()：現在の状態に戻るアニメーション
• gsap.fromTo()：指定した初期状態から指定した完了状態にアニメーション
• gsap.set()：初期状態を指定

複数の要素に一括でgsap.set()するには？

複数の要素に同じgsap.set()を適用したい場合、配列で指定することで実現できます。

gsap.set(['.apple', '.orange', '.banana'], { opacity: 0
});

Timelineをマスターする

※後日追加予定

ScrollTriggerを使ってみよう！

ScrollTriggerのインストール方法

ScrollTriggerはGSAPの主要なプラグインで、名前の通りスクロール量をトリガーにいろんなことができます。Intersection Observerの超便利版みたいな感じです。

プラグインなので、GSAP本体とは別にScrollTriggerをインストールする必要があります。

以下のページの「Install Helper」で、ScrollTriggerにチェックを入れるとインストール方法を確認できます。

importした後にgsap.registerPlugin(ScrollTrigger);するのを忘れないようにしましょう。

参考

Installation | GSAP | Docs & Learning

ScrollTriggerが動かない!? あるある原因

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
const _init = () => { //scrolltrigger gsap.registerPlugin(ScrollTrigger); gsap.to('.target',{ x:400, ScrollTrigger:{ trigger:'.target', start:'top top', end:'bottom top', scrub:1, pin:true, markers:true } });
}
onReady(_init)

このコードを見てください。

一見何の問題もないようなこのコード。しかしこのコードではスクロールトリガーが動きません。

なぜだかわかりますか？

インポート順は間違えてないし、registerPluginでScrollTriggerを登録しているし・・・

はい。原因は、ScrollTriggerのSを大文字で書いてしまっているからです。gsap.to()の中のScrollTriggerを見てください。最初のSが大文字になってしまっていますね。これが原因で動いていなかったのです。小文字にしてscrollTriggerと書きましょう。

pinすると余計なpaddingができてしまう！余白を取る方法

結論：pinSpacingもしくはtoggleClass

pinをすると、デフォルトでは、ピン留め要素にpaddingが追加されます。ピン留めが解除されたときに後に続く要素が追いつくように、paddingで下の要素とのスペースを確保しているのです。

ただし、要件によってはこの余白が邪魔な場合があります。この余白をトルためには、pinSpacing:falseを設定します。これにより、ScrollTriggerにpaddingを追加しないようにすることができます。pinSpacing: "margin"と書くことで、paddingの代わりにmarginを使用することもできます。

pinの代わりにtoggleClassでpinを実現する

もっと良い解決方法は、そもそもScrollTriggerのpinを使わないことです。pinは結局のところstartからendまでposition:fixed;しているだけですので、自前で.pinなどのclassを作り、それをScrollTriggerのtoggleClassでつけ外しする方がシンプルで分かりやすいです。

pinは便利ですが、JSで動的にインラインスタイルを付与するため既存のスタイルとの噛み合わせが悪く、意図せぬ挙動をすることがあります。toggleClassを使うことでインラインスタイルを使わずに済むので、スタイルの管理がしやすくなります。

 gsap.to('.target',{ ScrollTrigger:{ trigger:'.trigger', start:'top top', end:'bottom top', toggleClass:'fadeIn', markers:true } });

gsap.matchMedia()でメディアクエリを指定してレスポンシブ対応が可能！

gsapのmatchMediaを指定すると、メディアクエリごとにgsapアニメーションを設定できます。PCとSPで異なるアニメーションを使用したい時やPCだけにアニメーションを使用したい場合に便利です。

 let mm = gsap.matchMedia(); mm.add('(min-width:960px)',() => {})

gsap.matchMedia()が効かない!?

gsap.matchMedia()が効かない場合は、gsapのバージョンが古い場合があります。

matchMediaは「3.11.0」以降に追加された機能のため、gsapのバージョンがこれより古いと機能しません。

バージョンを指定して、再度yarn add gsapしてあげましょう。

 "dependencies": { "gsap": "^3.12.5", },

 yarn add gsap

CSSのホバー用メディアクエリ@media (hover: hover)について解説します。

@media (hover: hover)は、 マウスなどのポインティングデバイスでホバー操作が可能な環境かどうか を判別するためのCSSのメディアクエリです。

従来のレスポンシブ対応では、画面幅によってPC/SPのスタイルを出し分けていました。しかし、画面幅による制御だけでは、PCサイズの画面幅を持つタッチデバイスでホバーアクションが効いてしまうという問題が残ります。例えばタブレットの横向きなどが該当します。

画面幅での制御に加えて、ホバーできるかどうかという制御も加えることで、ホバーアクションの最適化が簡単にできるようになります。

基本的な動作

• @media (hover: hover)は、ユーザーがデバイスを使用して要素にホバー（マウスオーバー）できるかどうかを判定します。
• ホバー操作が可能な環境では、@media (hover: hover)内のCSSが適用されます。
• ホバー操作が不可能な環境（タッチパネルデバイスなど）では、@media (hover: hover)内のCSSは無視されます。

Can I Use

@media (hover: hover)はSafari 9から対応しており、実案件でも懸念なく使用できます。

使用例

/* PCサイズかつホバー操作が可能な環境でのみ適用されるスタイル */
@media screen and (min-width:1024px){ .button{ background-color: #ccc; } @media (hover: hover) { .button:hover { background-color: #f0f0f0; } }
}

上記の例では、マウス操作が可能な環境では、ボタンにマウスオーバーした際に背景色が#f0f0f0に変化します。タッチパネルデバイスなどでは、ホバー操作はできないため、ホバースタイルは適用されません。

PCサイズのメディアクエリの中で、ホバーのスタイルのみにホバーのメディアクエリを指定するのがポイントです。

コードスニペット

vscodeやcursorに以下のスニペットを登録しておくことで、mqHoverとタイプするだけでスムーズにホバーメディアクエリを指定できます。

.code-snippetsファイルに以下を追記

 "mqHover": { "prefix": "mqHover", "body": [ "@media (hover: hover) {", " $0", "}" ], "description": "sass snippet for media query" },

スニペットのテキストはmqHoverとしていますが呼び出しやすいテキストに変更して使ってください。

使用上の注意点

タッチパネルデバイスの中には、マウスも接続して使用できるものがあります。このような環境では、 @media (hover: hover) は true と評価されます。マウス接続下かつユーザーがタッチパネルで操作している場合は、ホバー効果が効いてしまいます。

まとめ

• @media (hover: hover)は、ホバーアクションのスタイルを、ホバー可能な環境にだけ適用できる便利なメディアクエリ。
• PCサイズのメディアクエリの入れ子にして、さらに:hoverスタイルだけに@media (hover: hover){}を適用する。
• Safari 9 から対応なので案件でも心配なく使える。
• タッチパネルデバイスにマウスを接続し、かつタッチパネル操作をしている場合はホバー効果が効いてしまう。

Web制作をしていると、番号付きリストの数字のフォーマットを変えたり、順番を変えたりしたいシチュエーションが少なからずあると思います。また運用の中でそのような依頼をされることもしばしばあります。

そんな時に色々検索してやり方を探してみても、擬似要素やJSでゴチャゴチャするなど面倒くさそうな方法の解説記事ばかりが目立ちます。そこで、<ol>の番号をカスタマイズする比較的シンプルでスマートな方法をまとめてみました。すぐ思い出せるようにブックマーク推奨です！

番号を降順にする方法

リスト番号の順番を降順にする最も簡単な方法は、<ol>タグにreversed属性をつける方法です。これだけで並び順が・・・3,2,1の降順になります。

See the Pen ol reversed by toshihide (@toshihide2000) on CodePen.

カウントの開始番号を変更する方法

カウントの開始番号を変更するには、<ol>タグにstart属性を追加します。

See the Pen ol カウントスタート変更 by toshihide (@toshihide2000) on CodePen.

<li>タグにvalue属性をつけると、途中から番号を変更することもできます。

See the Pen リストのスタート番号を途中から変更 by toshihide (@toshihide2000) on CodePen.

カウント開始番号の変更、途中からの番号の変更、並び順の変更は組み合わせることができます。

See the Pen リストを逆順にしてスタート番号を変更 by toshihide (@toshihide2000) on CodePen.

カウントの倍数を変更する方法

デフォルトでは1ずつ増えていくリスト番号ですが、CSSのみで簡単に増え方を変更することもできます。

See the Pen リスト番号を2の倍数に変更 by toshihide (@toshihide2000) on CodePen.

まず<ol>にcounter-reset:list-counter;を指定することでカウンターを設定します。

次に、子要素の<li>にcounter-increment:list-counter 2;を指定し、カウンターが2ずつ増えるようにしています。

そして、それを::marker擬似要素にcontent: counter(list-counter);を指定して表示させています。

::marker擬似要素
::marker はリスト項目の箇条書き記号ボックス（黒丸や番号が入ったもの）を選択します。
これは<li>要素や<summary>要素などのdisplay:list-itemが設定された要素で利用できます。

リスト番号の前後に文字を挿入

上記の応用で、リスト番号の前後に文字を追加することができます。これにより、（１）や項目1といった柔軟なリスト番号を実現可能です。

See the Pen olの番号をカスタム by toshihide (@toshihide2000) on CodePen.

基本的には上記の「カウントの倍数を変更する方法」と同じです。この例では、::markerの指定を content: "1-"counter(item)". ";としています。

カウンターの前後に文字列を挿入することで、1-1.,1-2.,・・・という表記を実現しています。

リストのマーカーや番号をリストの内側に表示する方法

リストの番号は、デフォルトではリストの外側に表示されます。

list-style-position:inside;をolに指定することで、<li>の幅に::marker擬似要素を含めることができます。

See the Pen list-style-position by toshihide (@toshihide2000) on CodePen.

番号の種類を変える方法

リスト番号は、デフォルトではアラビア数字で表示されます。

このリスト番号は、アルファベットやローマ字などに変更することができます。

数字をアルファベットに変更

type属性で指定する

<ol>のtype属性をtype="A"とすることで、リスト番号をABC順にすることができます。

type 属性は、そのリスト番号について前後の文章で言及する場合にのみ使用することが推奨されます。装飾の都合で記号を変更する場合には type 属性ではなく後述のCSS を使用すべきです。

See the Pen リスト記号をアルファベットに変更（type属性） by toshihide (@toshihide2000) on CodePen.

CSSで指定する

olにlist-style-type: upper-latin;を指定することで、大文字のアルファベット順にすることができます。

list-style-type: lower-latin;を指定することで小文字のアルファベット順にすることができます。

See the Pen リスト記号をアルファベットに変更（CSS） by toshihide (@toshihide2000) on CodePen.

数字をローマ字に変更

type属性で指定する

<ol>のtype属性をtype="I"とすることで、リスト番号をローマ数字にすることができます。

See the Pen Untitled by toshihide (@toshihide2000) on CodePen.

CSSで指定する

olに list-style-type: upper-roman;を指定することで、大文字のローマ数字順にすることができます。

See the Pen リスト記号をローマ数字に変更（CSS） by toshihide (@toshihide2000) on CodePen.

他にも漢数字など様々な記号を使用することができます。詳しく知りたい方はhttps://developer.mozilla.org/ja/docs/Web/CSS/list-style-type

2024年10月29日

【GSAP】スクロールに応じて下からふわっとフェードインするパララックスアニメーションを作ろう！

2024年10月28日

GSAPのベーシックチートシート！基礎とよくある質問を徹底解説！

2024年10月28日

【@media (hover: hover) 】ホバーアクションをPCだけに限定する最もスマートな方法

2024年7月22日

【ブックマーク推奨】番号付きリスト（ol）の番号をカスタマイズする方法大全

2024年7月18日

Expoのeas build –platform ios –profile developmentで.Trashへの権限がなくてつまずく理由と対策

2024年7月17日

github上でデフォルトブランチを変更する方法

エラー内容:Failed to upload the project tarball to EAS Build

Expoでdevelop buildをしようとすると、次のようなエラーが出る。

Failed to upload the project tarball to EAS Build
Reason: EPERM: operation not permitted, scandir '/Users/yourname/.Trash'
Error: build command failed.

.Trashへの読み書き権限がないというエラーだが、根本原因はそこではない。

解決方法

git initしていないことが大元の原因。

gitに接続すればこのエラーは解決する。

$ git init
$ git add .
$ git commit -m "initial commit"

Github上だけでデフォルトブランチを変更する方法

リポジトリにアクセス

settings→General→Default branch

⇄入れ替えアイコンをクリックしてデフォルトにしたいブランチを選択する

「Update」ボタンで保存する

Updateボタンを押すのを忘れないようにしましょう

【おまけ】git上でデフォルトブランチを変更するコマンド

$ git symbolic-ref refs/remotes/origin/HEAD refs/remotes/origin/main 

• git symbolic-ref: シンボリックリファレンスを操作するコマンドです。シンボリックリファレンスは、別のリファレンスを指す参照（エイリアス）です。
• refs/remotes/origin/HEAD: リモートリポジトリoriginのデフォルトブランチを指す参照です。
• refs/remotes/origin/main: デフォルトブランチとして設定するリファレンスです。

サンプルコード

ブラウザ毎に指定方法が異なるので注意が必要です。以下のサンプルコードをそのまま使うと良いでしょう。

See the Pen hide scrollbar by toshihide (@toshihide2000) on CodePen.

Chrome/Safari

.textbox::-webkit-scrollbar { display: none;
}

Firefox

.textbox { scrollbar-width: none;
}

Edge

.textbox { -ms-overflow-style: none;
}

大量の要素を生成して挿入したいとき、毎回DOMにアクセスして一つ一つ挿入していくのはパフォーマンスの観点から良くないとされています。

createDocumentFragmentを使うことで、大量の要素をまとめて一度に追加することができます。

document.createDocumentFragment()

document.createDocumentFragment() は、新しい空の DocumentFragment オブジェクトを作成します。このDocumentFragment は、DOM ツリーの一部ではなくメモリ上に存在する軽量なドキュメントオブジェクトで、複数の要素を一度にDOMツリーに追加したり、置き換えたりするために使われます。

特徴

• DocumentFragment は、DOMツリーの一部ではないため、その中に要素を追加してもページの再描画が引き起こされません。これにより、パフォーマンスを向上させることができます。
• appendChild() や insertBefore() などの DOM 操作を DocumentFragment に対して行うことができ、それらの操作が完了した後で、一度に本来の DOM ツリーに挿入することが可能です。
• DocumentFragment に追加されたノードは、その DocumentFragment をDOMに挿入する際に元のフラグメントから削除され、DOMツリーに移動します。

使用例

document.createDocumentFragment() を使用して、大量の<li>要素を <ul> 要素に効率的に追加する例を考えてみましょう。

// ul要素を作成
var ul = document.createElement('ul');
// 新しい DocumentFragment を作成
var fragment = document.createDocumentFragment();
// リスト項目を作成して DocumentFragment に追加
for (var i = 0; i < 100; i++) { var li = document.createElement('li'); li.appendChild(document.createTextNode('項目 ' + (i + 1))); fragment.appendChild(li);
}
// DocumentFragment を ul要素に追加
// これにより、フラグメント内のすべてのli要素がDOMに挿入される
ul.appendChild(fragment);
// ul要素をDOMに追加
document.body.appendChild(ul);

このコードは、DocumentFragment内に100個の<li>要素を作成し、すべてを一度に <ul> 要素に追加しています。こうすることで、<li>を追加するたびにDOMツリーが更新されるのを避けられ、パフォーマンスが向上します。

えんどう

DOMツリーではないサブの空間に要素を貯めておいて、任意のタイミングで本来のDOMに丸ごと挿入するイメージです。

えんどう

replaceと正規表現を用いて文字列から数字だけを抽出してみます。

次の文字列から、年度だけを抜き出したい場合を考えてみましょう。

var str = 'happy new year 2024';
var num = str.replace(/[^0-9]/g, '');
console.log(num); // 2024

文字列内の、数字以外の全てを空に置換することで数字だけを取り出すことができます。

以上、replaceと正規表現を用いて文字列から数字だけを抽出する方法でした。

テキストの１行目だけスタイルを当てたいとき、どのように実装しますか？

spanで囲って個別にクラスをつけるよりもスマートな方法があるので紹介します。

::first-line

::first-lineは、CSSの疑似要素の一つで、ブロックレベルの要素が表示するテキストの最初の行にスタイルを特別に適用するために使用されます。この疑似要素は、段落の最初の行や、ブロック・コンテナに含まれるテキストの最初の行の見た目を変えたい場合に役立ちます。

基本的な使い方

See the Pen Untitled by toshihide (@toshihide2000) on CodePen.

使用できるプロパティ

::first-line疑似要素は、すべてのCSSプロパティをサポートしているわけではありません。一般的に、フォント、色、背景、ワード/レタースペーシング、テキスト装飾などのプロパティのみが使用できます。marginやpaddingは::first-lineには適用できません。

注意点

えんどう

HTML上の最初の行ではなく、実際に表示される最初の行に対して適用されます