<h2 style="text-align: start" id="h2ca9e30231"><strong>発端：スクロールに合わせて出てくるやつ、一から書いてたけど面倒臭いな、、、</strong></h2><p style="text-align: start">・まずは検索！！<br>→調べてみると色々あるらしいけど、軽いライブラリで探すとAOSを見つけたので使ってみました</p><h2 style="text-align: start" id="h567f5b6bf2"><strong>1.CDNを調べて張り付けよう</strong></h2><p style="text-align: start">headタグの中にCSSの記述、bodyタグの一番下などにscriptタグを挿入しましょう</p><p style="text-align: start">下記をコピペしていただければ大丈夫かとは思いますが念のため公式のページは<a href="https://cdnjs.com/libraries/aos" target="_blank" rel="noopener noreferrer nofollow">こちら</a>です。</p><p style="text-align: start"></p><pre><code>&lt;head&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;</code></pre><h2 style="text-align: start" id="h8baf0e73be"><strong>2.JavaScriptでAOSを初期化する</strong></h2><p style="text-align: start">下記のように先ほど挿入したscriptタグの直下に書いても良いですし、別途JSファイルを作成してタグの中身だけを記載してもどちらでも構いません。</p><pre><code>&lt;body&gt;
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
    AOS.init();
  &lt;/script&gt;
&lt;/body&gt;</code></pre><h2 style="text-align: start" id="h4390fcf4be"><strong>3.要素にアニメーションを指定する属性を追加する</strong></h2><pre><code>&lt;div data-aos=&quot;fade-up&quot;&gt;...&lt;/div&gt;</code></pre><p style="text-align: start">上記のように指定します。<br>data-aosの値によってアニメーションが変わります。</p><h2 style="text-align: start" id="h6afa9432a2"><strong>4.他のパラメーター一覧</strong></h2><h4 style="text-align: start" id="h5e114996d7"><strong>data-aos(アニメーションの種類)</strong></h4><p style="text-align: start">&lt;値&gt;</p><ul><li>fade-up : 上方向にフェードイン</li><li>fade-down : 下方向にフェードイン</li><li>fade-left : 左方向にフェードイン</li><li>fade-right : 右方向にフェードイン</li><li>zoom-in : ズームイン</li><li>zoom-out : ズームアウト</li><li>flip-up : 上方向にフリップイン</li><li>flip-down : 下方向にフリップイン</li><li>flip-left : 左方向にフリップイン</li><li>flip-right : 右方向にフリップイン</li></ul><h4 style="text-align: start" id="hf09f87f149"><strong>data-aos-duration(アニメーションの時間)</strong></h4><p style="text-align: start">&lt;例&gt;</p><pre><code>&lt;div data-aos=&quot;fade-up&quot; data-aos-duration=&quot;1000&quot;&gt;...&lt;/div&gt;
</code></pre><p style="text-align: start">単位はmsになりますので上記の例になりますと1秒かけて上方向にフェードインするという意味になります。</p><h4 style="text-align: start" id="hfdeacd5913"><strong>data-aos-delay(アニメーションの遅延)</strong></h4><p style="text-align: start">&lt;例&gt;</p><pre><code>&lt;div data-aos=&quot;fade-up&quot; data-aos-duration=&quot;1000&quot; data-aos-delay=&quot;500&quot;&gt;...&lt;/div&gt;
</code></pre><p style="text-align: start">data-aos-durationと同じく単位はmsになりますので上記の例になりますと<br>0.5秒遅れて始まり1秒かけて上方向にフェードインするという意味になります。</p><h2 style="text-align: start" id="hfa914913ae"><strong>5.一応当てはめて完成したもの</strong></h2><p style="text-align: start">上記のように実際に使ってみましたが、本当にこれで動くんだな、、、ライブラリすげーと思わされました。</p><h2 style="text-align: start" id="hfb422d9594"><strong>6.JQueryを入れていても使うことができます</strong></h2><p style="text-align: start">JQueryなどとの互換性がないプラグインも多々ありますが、AOSは併用が可能です。</p><p style="text-align: start">ですがその際には、下記のように書いてください</p><pre><code>&lt;script&gt;
    $(document).ready(function() {
      AOS.init();
    });
 &lt;/script&gt;
</code></pre><p style="text-align: start">jQueryを使用する場合は、必ず$(document).ready内で初期化するようにしてください。</p><h2 style="text-align: start" id="h682c1513dd"><strong>7.使用してみた感想</strong></h2><p style="text-align: start">正直今まで一から書いてきたのが馬鹿らしく思えるほど簡単で、素早く実装できました。<br>スクロールの量を取得する必要もなく、アニメーションをつけたい要素のページにおける位置を取得する必要もないというのは非常に楽でありがたかったです。<br>過去にユーザーのアクションによってページの高さが変わってしまう（MOREのボタンなど）デザインの時に高さの取得がうまくいかないというようなこともあったのですが、このようにライブラリを用いれば、その辺も考える必要があまりないのかなと感じました。</p>

スクロールでふわっと表示を簡単に！！ JavaScriptのライブラリAOSの簡単な使い方

<h2 style="text-align: start" id="hc3ad6d4ee2"><strong>発端：複数要素にaddEventListenerを指定しても動かない!</strong></h2><p style="text-align: start">・getElementsByClassNameで複数個のボタンに同じイベントを指定しようとした</p><p style="text-align: start"></p><pre><code>document.getElementsByTagName(&quot;h1&quot;)[0].style.fontSize = &quot;2vw&quot;;

// ボタンが一つの場合
let oneBtn = document.getElementById(&quot;one_btn&quot;);

oneBtn.addEventListener(&quot;click&quot;,()=&gt;{
  alert(&quot;clickされました&quot;);
})

// ===================================
// ボタンが三つの場合(エラーはいて動かなくるのでコメントアウトです)
// let threeBtn = document.getElementsByClassName(&quot;three_btn&quot;);
// threeBtn.addEventListener(&quot;click&quot;,()=&gt;{
//   alert(&quot;clickされました&quot;);
// })
// ===================================

// ボタンが五つの場合
let fifthBtn = document.getElementsByClassName(&quot;fifth_btn&quot;);

for(let i = 0; i &lt; fifthBtn.length; i++) {
    fifthBtn[i].addEventListener(&quot;click&quot;,()=&gt;{
    alert(&quot;clickされました&quot;);
  })
}</code></pre><h2 style="text-align: start" id="h5b9438b60b"><strong>原因：addEventListenerは一つづつのノードにしか指定できなかった</strong></h2><p style="text-align: start">1.addEventListenerを正しく理解できていなかった</p><p style="text-align: start">2.複数の要素を取得してくる際の形式が配列であることを知らなかった</p><p style="text-align: start"></p><div style="left: 0; width: 100%; height: 300px; position: relative;"><iframe src="https://codepen.io/o_jaga_o/embed/preview/oNPJbvO?default-tabs=html%2Cresult&amp;height=300&amp;host=https%3A%2F%2Fcodepen.io&amp;slug-hash=oNPJbvO" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen></iframe></div><h2 style="text-align: start" id="hbf7d448136"><strong>解決策：一つづつ取り出して指定すれば良い</strong></h2><p style="text-align: start">・そもそも、配列で取得していることがわかれば様々な文法が思い浮かぶことと思います。</p><p style="text-align: start">・上記のコードではfor文を用いていますが、結局どの文法でも良いので、原因であった<br>　ーaddEventListenerは一つのノードにしかしか設定できない<br>　ー複数の要素を取得してきたときは配列である<br>の二点を解決するように動けば、おのずと解決されるように思います。</p><h2 style="text-align: start" id="h2e6b708fc4"><strong>感想：インプットとアウトプットのバランスの重要性</strong></h2><p style="text-align: start">今回なぜこのような事でつまづいたのかというと、そもそも上記二点の原因に関する知識不足でした。<br>当然どの分野でも言える事ですが基礎的な部分の最低限のインプットは必要で、<br>アウトプットの中で問題にぶつかり、その内容をインプットするという学習法を取っていましたが、それだけでは学ぶことができない部分が出てきたり、トレンドへのアンテナが鈍っていくような気がするのでとりあえずインプットの時間を少し増やそうと思いました。</p>

スクロールでふわっと表示を簡単に！！ JavaScriptのライブラリAOSの簡単な使い方

複数要素にaddEventListenerでイベントを設定する方法