CSS HTML Javascript

画像をアニメーションする

ボタンをクリックしたら次の画像にスライドするようにイベントを設定していきます。

  • Id取得
  • イベントを追加
  • トランジションプロパティ

Id取得

・前回まででJavaScriptのファイルを作ってきました。

・今回はその内容を書いていきたいと思います。

・具体的にはidの取得とボタンをクリックしたときに次の画像にスライドするようにしていきます。

・まずはボタンのidの取得をしていきます。

・getElementByIdを使ってnextを取得していきましょう。今回は定数にもしていきたいのでconstも指定していきます。

・こんな感じですね 

const next = document.getElementById('next');

イベントを追加

・次にイベントリスナーを追加していきます。定数にした名前が使えるのでその名前で呼び出してaddEventListenerを使ってイベントを追加していきます。

・今回はクリックたら横にずらすようにアニメーションしていきたいのでクリックしたらstyleを追加するとしていきましょう。まずはクリックしたらと言うところまで書いておきましょう。

・次になのでulを取得して行きます。idやセレクタの取得はわかりやすいように上のほうにまとめておくといいでしょう。

・ulも同じように取得できるのですがクエリーセレクタを使って取得していきます。また、constを使って名前をつけておくと便利です。

・こんな感じですね

const ul = document.querySelector('ul');

・ulが取得できたのでクリックしたときの内容を書いていきましょう。今回は進むボタンが押されたら左にスライドさせたいのでtransformプロパティを使っていきましょう。距離は適当に−200pxとしておきます。

・ulに対してstyleのtransformをつけていき、値はtranslateX(-200px)としてあげればおkでしょう。

・こんな感じですね

    next.addEventListener('click', () => {

    ul.style.transform = 'translateX(-200px)';

  });

トランジションプロパティ

・ついでにulに対してトランジションプロパティをつけておけば変化に明かり時間を指定することができます。

・CSSのファイルのulに対して.3秒としてあげるといいですね。こんな感じです。

transition: transform .3s;

-CSS, HTML, Javascript