【GSAP】wow.js代替案。ScrollTriggerのbatchを使った複数連続スクロールアニメーションの作り方

今回はスクロール時に要素をアニメーションとともに出現させることができるScrollTriggerを使ってデモを作ってみました。

• GSAP-ScrollTrigger概要
• ライブラリ読み込み
• • CDN
  • Download
• ScrollTriggerを使った複数スクロールアニメーション
• サンプルデモ
• まとめ

GSAP-ScrollTrigger概要

ScrollTriggerとはGSAP（GreenSock Animation Platform）というアニメーションライブラリよりリリースされたスクロールアニメーション作成に特化したライブラリです。

公式 Green Sock ScrollTrigger

ScrollTriggerによりスクロール時の複雑なアニメーションが実現可能になりました。今回は複数ある同じ形式に一律したアニメーションつけるときに役立つScrollTrigger.batchについて解説していきます。

ライブラリ読み込み

gsap、ScrollTriggerの２つのjsを読み込みます。

CDN

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

Download

GitHub
Code→Download ZIP内の 「gsap(.min ).js 」「ScrollTrigger(.min ).js」を使用します。

ScrollTriggerを使った複数スクロールアニメーション

複数ある同じ形式（.box）に一律したアニメーション（ 100px下から移動するとともに表示される ）をつけます。

HTML

    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

CSS

.container {
  max-width: 1000px;
  margin: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.box {
  width: 22%;
  height: 100px;
  margin: 1%;
  opacity: 0;
  will-change: transform;
  background: #000;
  overflow: hidden;
}

JS

<script type="text/javascript">
gsap.defaults({ease: "back"});
gsap.set(".box", {y: 100});
ScrollTrigger.batch(".box", {
  onEnter: batch => gsap.to(batch, {opacity: 1, y: 0, stagger: {each: 0.05, grid: [1, 4]}, overwrite: true}),
  onLeave: batch => gsap.set(batch, {opacity: 0, y: -100,overwrite: true}),
  onEnterBack: batch => gsap.to(batch, {opacity: 1, y: 0, stagger: 0.05, overwrite: true}),
  onLeaveBack: batch => gsap.set(batch, {opacity: 0, y: 100, overwrite: true})
});

ScrollTrigger.addEventListener("refreshInit", () => gsap.set(".box", {y: 0}));

</script>

上記のJSを一行ずつ解説していきます。

gsap.defaults({ease: "back"});

以下で「Power0」「Power1」などのEasingを設定できます。
https://greensock.com/docs/v2/Easing

gsap.set(".box", {y: 100});

要素の初期値なので非表示時の数値です。cssでopacity: 0;にしているのでここではｙのみ記述します。

ScrollTrigger.batch()

各.boxに一律にアニメーションを簡単に実行できるようにします。
.batch() は今回のポイントになります。

onEnter: batch => gsap.to(batch, {opacity: 1, y: 0, stagger: {each: 0.05, grid: [1, 4]}, overwrite: true}),

スクロールを上方向に移動しアニメーション可動域に来た場合の処理です。
透明度を100％にし（opacity: 1）、縦位置を元の場所に戻し（y: 0）ます。
またstaggerでグリッドが1行4列ないでアニメーション開始を0.05ずらしています。

onLeave: batch => gsap.set(batch, {opacity: 0, y: -100,overwrite: true}),

スクロール を 下方向に移動しアニメーション可動域から外れた場合の処理です。
再度透明になり（opacity: 0）、縦位置は上に移動し（y: -100）ています。

onEnterBack: batch =>

スクロール を 上方向に移動しアニメーション可動域に来た場合の処理です。
透明度を100％にし（opacity: 1）、縦位置を元の場所に戻し（y: 0）ます。

onLeaveBack: batch =>

スクロール を 上方向に 移動しアニメーション可動域から外れた場合の処理です。
再度透明になり（opacity: 0）、縦位置は下に移動し（y: 100）ています。

サンプルデモ

See the Pen Untitled by uhaha (@uhaha) on CodePen.

まとめ

ScrollTriggerが他のスクロールアニメーションと違うといわれているところはスクロールに同期して今までよりも複雑なアニメーションが可能ということだと思います。今回はbatchから解説するというイレギュラーな形だったのですが基本的には導入の敷居は低いイメージだったので追って別の使用例も作成していけたらです。

wow.jsが有償になり手軽に使えなくなってしまったので一度試してみてはいかがでしょうか。

肝心の動きの感想ですがアニメーションの動き良っっ！てなりました。突っかかることなくヌルヌル動きます！

【CSS Grid】グリッドデザインを使ったかっこいいアニメーションメニューExpanding Grid Menu

今回はグリッドレイアウトで表示されるアニメーションメニューExpanding Grid Menuをご紹介します。

• Expanding Grid Menuとは
• GridMenu-master.zipの基本的な内容
• 今回のカスタム内容
• Expanding Grid Menu デモ
• まとめ

Expanding Grid Menuとは

CSS Grid Layout （グリッドレイアウト） を使用したアニメーション全画面メニューになります。 公式のデモではスマホ時のグリッドレイアウト機能を削除していますがメディアクエリ設定でスマホ対応も可能です。

参考サイト
Expanding Grid Menu

上記のデモでは「INFO」をクリックするとメニューが表示され、「CLOSE」で閉じます。
Download Sourceよりソース（GridMenu-master.zip）をダウンロードします。

GridMenu-master.zipの基本的な内容

GridMenu-masterの内容です。
ローカルで動きを確認できます。

CSS

CSSは以下の2つで変数が定義できるカスタムプロパティを導入しています。

<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/demo1.css" />

JS

JSはdemo.js、anime.min.js、menu.jsの3つを読み込んでいます。

<script src="js/demo.js"></script>
<script src="js/anime.min.js"></script>
<script src="js/menu.js"></script>

今回のカスタム内容

今回はグリッドレイアウトの変更とトップページのデザイン変更をしてなおかつスマホにも対応させています。

特に大きな変更としてはdemo1.cssのグリッドレイアウト部分で、以下のように中央にメインのグリッドが表示されるようにしてみました。

.grim__item:first-child {
    grid-area: 1 / 1 / 2 / 2;
}
.grim__item:nth-child(2) {
    grid-area: 1 / 2 / 2 / 3;
}
.grim__item:nth-child(3) {
    grid-area: 2 / 1 / 3 / 3;
}
.grim__item:nth-child(4) {
    grid-area: 3 / 1 / 5 / 3;
}
.grim__item:nth-child(5) {
    grid-area: 1 / 3 / 7 / 7;
}
.grim__item:nth-child(6) {
    grid-area: 1 / 7 / 3 / 9;
}
.grim__item:nth-child(7) {
    grid-area: 3 / 7 / 5 / 9;
}

上記CSSで設定したレイアウト

Expanding Grid Menu デモ

See the Pen GridMenu-master demo by uhaha (@uhaha) on CodePen.

まとめ

CSSでカスタムプロパティ、グリッドレイアウトを使用していることからIE11では注意が必要です。

今回はグリッドメニューとして紹介していますが、この表現方法はメニュー以外にも使えそうですね。

カスタムプロパティは使いやすいです( ⁰̷̴͈ ꇴ ⁰̷̴͈ );

初心者が陥りやすいWebデザインのブラッシュアップポイントまとめました。

ブラッシュアップポイント

今回はデザインのブラッシュアップについて初心者デザイナーさんが陥りやすいデザインの改善点を記録します。

カフェのピックアップメニュー部分をお題としてみます。
クライアントの要望に沿ったという前提で ザインをブラッシュアップしていきます。

要素は見出しタイトル、メニュー写真、メニュー名のみです。
デザインブラッシュアップ用の架空のメニューになります。

「もうこれ以上動かせない。。何も浮かばない。。発展しない。。」というときに参考になれば幸いです。

※デザインをする上での基本的なこともつづってますが自分特有のやり方などありのまま記録してます。

• ブラッシュアップ前はこうだった
• 配色の見直しをしよう
• フォントはかなり重要
• 写真素材の加工で無限に変われる
• 調節して完成
• 別パターンの作成について
• まとめ

ブラッシュアップ前はこうだった

以下がなんの変哲もない元デザインになります。

まずこのデザインからどんなイメージ をユーザに与えたいのかをゴールとします。
健康的でおいしそう、暑い日に飲みたいなど、、簡単でよいので一度決めてみます。

今回のゴールは「もう少し夏っぽく前向きに」にします。

配色の見直しをしよう

今のところ印象もうすく脳内ですぐ埋もれそうなイメージなのと商品の魅力（おいしいアピール）が伝わってこないので写真やロゴなどのすでに変えられない色を軸として配色を見直します。

よく使っていた配色ツールがこちらです。
配色ツールを使って最終的にはいつも調整しています。
Color Hex - ColorHexa.com

飲食系なので寒色メインにならないようにしつつメニュー写真と合う色を選びました。

フォントはかなり重要

特に見出しはフォントでかなり印象が変わるのでフォントの見直しは必ずしています。
可読性とおしゃれを兼ね備えたもの、サイトの印象にあわせて、などなど考えて探しています。
フォントはやはり手っ取り早くGoogle Fontsで探すのがおすすめです。

写真素材の加工で無限に変われる

マスキング、フィルター、枠などいくらでも伸びしろがあるのでここではマスキングしていきます。

「 商品 」に分類されるものは写真の状態がよければマスキングするのがおすすめです。背景を取り除くことにより見た目の情報がユーザに伝わりやすくなります。

「選択とマスク」と、 「 地道にペンツールでマスクする 」の2つを組み合わせています。
「選択とマスク」 のみだとまだちょっと厳しいときがあるので。

調節して完成

グラスの影を追加したり、前述したアクセントカラーを背景カラーに変更して「Seasonal recommendations」（夏のピックアップメニュー）のイメージに沿った太陽や水の雫型を追加したり調整します。

ようやく夏っぽく前向きでおいしそうに見えてきました。

別パターンの作成について

部分的でもいいので別パターンの作成もおすすめです。

例えばクライアントの要望に忠実なパターンとトレンドを盛り込んだ大胆なパターンなどパターン分けすると交渉材料としてわかりやすく提案がスムーズに進みます。

また提出する予定が無くても自分はほぼ必ず何パターンか作成しています。
数パターン作成することで見出し一つとってもよりよい見せ方や修正点がはっきりしてきますし複数パターンからいいとこどりもでるからです。

まとめ

webサイトのデザイン時には必ずユーザーがページを閲覧すること、クライアントにプレゼンすること（ 自分でプレゼンしなくても ）などを想定して作成しています。

WEBデザインに限らず商品を手に取った人たちがなんらかのリアクションしているところを想像しながらつくるのは楽しいですよね。

次回は上のデザインにthree.jsを使用したオンマウスアニメーションを組み込んで作っていきます。

一番重要なペルソナはクライアントのユーザー層なんですが自分の場合デザインを決定する担当者さんの好みも考えています。（てかまずここ抑えるw）

【jQuery】multiScroll.jsを使って簡単にコスメの商品ページを作ってみた（全解説）

multiScroll.jsというスクロール系jsプラグインの使ってコスメの商品ページ風のデモを作ってみました。デザイン性の高いプラグインなので少しの工夫でおしゃれなスクロールが作れます。今回は使い方とともにデザイン部分も含めてデモサイトの解説をしていきます。

• multiScroll.jsとは
• 読み込み
• • ダウンロード
  • CDN
• 基本設定
• デザインを作りこんでみる
• サンプルデモ
• multiScroll.jsの主なオプション
• まとめ

multiScroll.jsとは

左右に分かれたエリアがそれぞれ上下からスクロールして表示されるjQueryのプラグインです。 シングルページ作成などに向いています。

multiScroll.js公式サイト

読み込み

以下のようにjquery.multiscroll.min.css、jquery-3.5.1.min.js、jquery.easing.min.js、jquery.multiscroll.min.jsの4つを読み込みます。

<link href="https://cdnjs.cloudflare.com/ajax/libs/multiscroll.js/0.2.2/jquery.multiscroll.min.css" rel="stylesheet" type="text/css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiscroll.js/0.2.2/jquery.multiscroll.min.js">

ダウンロード

GitHub（CodeボタンのDownload Zip）

CDN

以下からコピーできます。
jquery
jquery-easing
multiscroll.js

基本設定

HTML

ms-left、ms-rightのように左右のエリアごとに内容を記述します。
<div id="multiscroll"></div>内が効果対象となります。

<div id="multiscroll">
    <div class="ms-left">
        <div class="ms-section section1">Some section1</div>
        <div class="ms-section section2">Some section2</div>
        <div class="ms-section section3">Some section3</div>
    </div><!-- ms-left -->
    <div class="ms-right">
        <div class="ms-section section1">Some section1</div>
        <div class="ms-section section2">Some section2</div>
        <div class="ms-section section3">Some section3</div>
    </div><!-- ms-right -->
</div>

js

上記で使用しているID（ #multiscroll ）を以下のようにjsで設定します。

<script>
$(document).ready(function() {
    $('#multiscroll').multiscroll({
    navigation:true
    });
});
</script>

See the Pen multiScroll.js demo1 by uhaha (@uhaha) on CodePen.

デザインを作りこんでみる

デザイン作成になります。

※一般的にはデザイン作成→コーディング、使用プラグイン決定、みないな流れですが今回はmultiScroll.jsを使うという想定でデザインに落とし込んでいきます。

デザイン前がこんな感じなので文字の抑揚と背景を整えてデザイン画像を作っていきます。

左側には右側の写真に基づいたグラデーションカラーを設定します。

この段階で以下のように頭の中でコーディングすることを想定しながらデザインすると自然と理に叶ったものができあがります。

cssのグラデーションジェネレーターやGoogleフォントを活用すれば時短できます。

サンプルデモ

コーディングしたものがこちらになります。

See the Pen multiScroll.js demo by uhaha (@uhaha) on CodePen.

multiScroll.jsの主なオプション

引数	概要
verticalCentered	垂直方向の中央揃えを設定します。
scrollingSpeed	スクロールのスピードを設定します。
sectionsColor	セクションごとの背景色を設定します。 ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000']
anchors	各セクションの URL に表示されるアンカーリンクを定義します。
easing	アニメーション効果を定義します。 jquery.easings.min.js または jQuery UI が必要です。
loopTop	最初のセクションで上にスクロールするときに、最後のセクションが表示されるかどうかを定義します。
loopBottom	最後のセクションで下にスクロールするときに、最初のセクションが表示されるかどうかを定義します。
normalScrollElements	クラスやIDを指定するとmultiScroll.jsのスクロールから除外されます。
scrollOverflow	内容のサイズが大きい場合に、セクションのスクロールバーを作成するかどうかを定義します。
touchSensitivity	次のセクションに移動するための長さを定義します 。
menu	メニューを作成する際にtrueにします。aタグにdata-menuanchorを追加して、セクション内で設定されているアンカー リンクを紐づけて使用します。
navigation	true に設定すると、ナビゲーション バーが表示されます。
navigationPosition	ナビゲーションバーが表示される位置を定義します。左右どちらかに設定できます。
navigationTooltips	ナビゲーションバーが表示れている場合に、表示するツールチップを定義します。
responsiveWidth	ブラウザの幅が設定した値になると通常のサイトのようにスクロールします。
responsiveHeight	ブラウザの高さが設定した値になると通常のサイトのようにスクロールします。

記述例と初期値は以下のようになります。

$(document).ready(function() {
    $('#multiscroll').multiscroll({
        verticalCentered : true,
        scrollingSpeed: 700,
        easing: 'easeInQuart',
        easingcss3: 'ease-out',
        menu: false,
        sectionsColor: ["#000,#ccc,#ff0000],
        navigation: false,
        navigationPosition: 'right',
        navigationColor: '#000',
        navigationTooltips: [],
        loopBottom: false,
        loopTop: false,
        css3: false,
        paddingTop: 0,
        paddingBottom: 0,
        normalScrollElements: null,
        scrollOverflow: false,
        scrollOverflowOptions: null,
        keyboardScrolling: true,
        touchSensitivity: 5,

        //responsive
        responsiveWidth: 0,
        responsiveHeight: 0,
        responsiveExpand: false,

        // Custom selectors
        sectionSelector: '.ms-section',
        leftSelector: '.ms-left',
        rightSelector: '.ms-right',

        //events
        onLeave: function(index, nextIndex, direction){},
        afterLoad: function(anchorLink, index){},
        afterRender: function(){},
        afterResize: function(){},
    });
});

まとめ

最初からjquery.easing.min.jsの読み込む必要があることを把握していれば設定はとても簡単だと思います。

最新のmultiScroll.jsでもIEも対応しているのでライセンスキーを取得すれば商用利用も可能なので現場でとても使えそうです。

ネタ探しのときプラグインあさってたらヒントを得てデザインが降りてくるパターンもあります。
口紅ぬらんけどオペラのサイトはすきです。
https://www.opera-net.jp/

【three.js】3DWebデザインの参考になるコードスぺニット集

WEBサイトで3Dを取り入れてれば他のデザインパターンと差つけれるし、とにかくTOPページで印象づけに最適です。今回はそんなとき役立つコードスぺニットでthree.jsを駆使したものをcodepenからご紹介します。

• 実装の準備として
• GLSL Glitch
• three.js round 1
• Curl Noise
• [3D] Synth Canyon Run
• three.js Instancing & SkyBox
• The wriggle sphere
• Distortion Slidere
• まとめ

実装の準備として

codepenで公開されているソースはMITライセンスです。 詳しくは以下をご確認ください。

CodePenのライセンス表記の仕方：著作権表示は必要？

今回紹介するのはWebGL3Dライブラリthree.jsのスぺニットです。
以下を読み込んでおきましょう。

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

GLSL Glitch

webgl-noiseを使用して元画像にノイズを加えてます。
RGBのずれで何の変哲もない写真が超かっこよくなります。

See the Pen GLSL Glitch by yoichi kobayashi (@ykob) on CodePen.

three.js round 1

テキストの邪魔にならず存在感をだすワンポイントシンボルです。

See the Pen three.js round 1 by alex baldwin (@cubeghost) on CodePen.

Curl Noise

カラフルな立方体が立体的に流れる3Dです。

See the Pen Curl Noise by Misaki Nakano (@mnmxmx) on CodePen.

[3D] Synth Canyon Run

イベントサイトどかで使えそうな目を引く派手なエフェクトです。

See the Pen [3D] Synth Canyon Run by Chris Johnson (@jhnsnc) on CodePen.

three.js Instancing & SkyBox

立方体が立体的に回転していてRPGゲームとかの背景に似合いそうなエフェクトです。

See the Pen three.js Instancing & SkyBox by yoichi kobayashi (@ykob) on CodePen.

The wriggle sphere

ロック系アイドルのCDジャケットとかに似合いそうです。

See the Pen The wriggle sphere by yoichi kobayashi (@ykob) on CodePen.

Distortion Slidere

three.jsのスライダーです。
こちらで実装デモ&解説しています。

https://uhaha.net/webgl-slider/

See the Pen WebGL Distortion Slider by Ash Thornton (@ashthornton) on CodePen.

まとめ

今回は実装のデモなしでズラっと紹介のみでしたが、three.jsをとりいれるとりいれないは別としてデザイン作成上3Dなども定期的にチェックしておくとネタとしてどこかで役立つことがあると思いました。

仕事のあいまの息抜きにこういうの見てインプットするのもいいですよー

【WebGL】threejsでモヤっと動く霧のスぺニットを紹介します

【WebGL】threejs

今回はcodepenで発見したおしゃれな霧のデザインのソースを解説していきます。
※スクリプトゴリゴリいけないけどthree.jsは取り入れたいデザイナーさん&体験してみたいさん向けの記事になります。

• WebGL Fog
• カスタマイズしてみる
• canvasを背景透過して画像を入れてみる
• threejsのBlending Mode
• 霧の画像を調整してみる
• まとめ

WebGL Fog

作者：https://ykob.github.io/sketch-threejs/

See the Pen WebGL Fog by yoichi kobayashi (@ykob) on CodePen.

霧のエフェクトが流れていくとてもクールなスぺニットです。

カスタマイズしてみる

codepenで公開されているソースはMITライセンスなので以下を確認後カスタマイズしてみてください。

CodePenのライセンス表記の仕方：著作権表示は必要？

three.jsを使用しているのでcdnで先にthree.min.jsを読み込んでから上記codepenのソースを使用してください。

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

canvasを背景透過して画像を入れてみる

上記のソースで背景を入れられるようにカスタマイズしみます。
setClearColorを設定している箇所を以下のようにrenderer.setClearColor(0x111111, 0.0,0.0, 0.0);とします。

renderer.setClearColor(0x111111, 0.0,0.0, 0.0);//背景透過

これだけでcanvasの背景が透過されるのであとはcssで背景画像を設定します。

HTML

<canvas class="p-canvas-webgl" id="canvas-webgl"></canvas>
<div id="wrapper"></div><!-- wrapper -->

css

#wrapper{
    background:url(img/prairie-woman-at-sunset.jpg) center center no-repeat;
    background-size:cover;
    height: 100vh;
}

three.jsのBlending Mode

霧の部分をblendingでCSS3のブレンドモードのような効果に設定しています。

blending: THREE.AdditiveBlending,

他のブレンドモードは以下になります。

THREE.NoBlending
THREE.NormalBlending
THREE.AdditiveBlending
THREE.SubtractiveBlending
THREE.MultiplyBlending
THREE.CustomBlending

霧の画像を調整してみる

以下のように霧の画像をpngで読み込んでいるので画像の変更が可能となっています。

const texsSrc = {  fog: 'img/fog.png'};

まとめ

threejsの基本を学んでもここまでのソースを作成するクリエイターさんって現段階では一握りだと思います。

制作者の方のサイトで他にもかっこいい作品がみれます。

こちらもぜひ参考にしてみてください。

codepenは世界中のすばらしいコードが見れます。なにこれかっこいいとおもったコードが日本の人だとちょっとうれしい。

【Vanilla Javascript】アクセシビリティ対応の軽量モーダルライブラリMicromodal.jsの使い方

今回はモーダル系ライブラリのMicromodal.jsをサンプルデモ付きで解説していきます。アクセシビリティ対応を謳っているので今後モーダルライブラリの主戦力になる可能性も十分考えられます。

• Micromodal.jsとは
• Micromodal.jsのインストール
• Micromodal.jsの基本的な設定
• 複数のモーダルを表示する場合
• まとめ

Micromodal.jsとは

特徴としてはVanilla Javascriptで記述されたアクセシビリティ対応の軽量ライブラリです。

W3Cの一部であるWebアクセシビリティを向上することを目的としている団体・組織で公開されている仕様書（WAI-ARIAガイドライン）に準じていますので使いやすさが保証されています。

Micromodal.js公式サイト

Micromodal.jsのインストール

GitHub

GitHubからダウンロードする場合はこちら

CDNで読み込む場合

<script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>

npmもしくはyarnでインストールする場合

npm install micromodal --save // via npm
yarn add micromodal --save // via yarn

micromodal.css

.modal {
  display: none;
}
.modal.is-open {
  display: block;
}

つづいてCSSの設定になります。上記を対応してからmicromodal.cssを読み込みます。こちらから参照できます。
GitHub：ghosh/micromodal.css

Micromodal.jsの基本的な設定

ファイルの読み込み

以下のようにmicromodal.cssとmicromodal.min.jsを読み込みます。

<link href="css/micromodal.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>

HTML

以下のようにボタンエリアにdata-micromodal-trigger="modal-1"を、
モーダル部分にid="modal-1"とclass="micromodal-slide modal"を記述します。

<!-- ボタンエリアです。 -->
<button class="modal__btn" data-micromodal-trigger="modal-1" role="button">micromodal</button>
<!-- ここからモーダルエリアです。 -->
<div id="modal-1" aria-hidden="true" class="micromodal-slide modal">
    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
      <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title" >
        <header class="modal__header">
          <h2 id="modal-1-title" class="modal__title">ヘッダータイトル</h2>
          <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
        </header>
        <div id="modal-1-content" class="modal__content">
            内容テキスト
        </div>
        <footer class="modal__footer"></footer>
      </div>
    </div>
  </div>

JS

<script>
    MicroModal.init();
</script>

See the Pen Micromodal demo by uhaha (@uhaha) on CodePen.

複数のモーダルを表示する場合

複数のモーダルを表示する場合はボタン部分のdata-micromodal-triggerとモーダル部分のidをそれぞれをmodal-1、modal-2とします。
ボタンエリアとモーダルエリアに分けてそれぞれ記述しておけば重なりの不具合も防げます。

<!-- ボタン1 -->
<button class="modal__btn" data-micromodal-trigger="modal-1" role="button">micromodal</button>
<!-- ボタン2 -->
<button class="modal__btn" data-micromodal-trigger="modal-2" role="button">micromodal</button>

<!-- モーダル1 -->
<div id="modal-1" aria-hidden="true" class="micromodal-slide modal">
…
</div>
<!-- モーダル2 -->
<div id="modal-2" aria-hidden="true" class="micromodal-slide modal">
…
</div>

See the Pen Micromodal multiple by uhaha (@uhaha) on CodePen.

まとめ

モーダルウィンドウが表示されるような動きに関してアクセシビリティ対応が保証されているのはありがたいでね。

今後このようなガイドラインに準じたライブラリが増えていくと制作側としては クライアントへの提案に説得力が増します。

アクセシビリティ対応のモーダルライブラリでどのようなユーザでも快適に閲覧できるモーダルウィンドウを作成しましょう。

まえまではIE対応が必要だったようです。