2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【JavaScript】スクロールのアニメーションの実装

Posted at

#はじめに
この記事は、JavaScriptを勉強中の方向けに書いています。また私自身のアウトプットとして書いています。
内容は以下の通りです。

  • scrollTo()メソッドを使ったページのスクロール実装
  • setInterval()メソッドでアニメーション化

#scrollToメソッドとは
scrollToメソッドは指定ページまでスクロールさせるメソッドです。引数を渡してどこまでスクロールするか指定できます。

.js
window.scroll(0,1000);  //第1引数は水平方向、第2引数は垂直方向を渡す

#setIntervalメソッドとは
setIntervalメソッドは渡された引数ミリ秒後に関数を実行するメソッドです。第1引数にコールバック関数、第2引数に何秒間隔で実行するかを指定します。(単位はミリ秒)

.js
setInterval(()=>{
  //処理
},1000);

#準備
あるボタンをクリックしたら下方向にスクロールするというものを実装したいと思います。
事前にhtmlとスタイルシートを準備しました。
100vhごとに赤色、青色、黄色背景にするようにしています。スクロールボタンも設置しています。

test.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/test.css">
    <title>Test</title>
</head>
<body>
    <div class='red'>
        <a href="#" class="arrow"></a>
    </div>
    <div class='blue'>
        <a href="#" class="arrow"></a>
    </div>
    <div class='yellow'>
    </div>
</body>
</html>
test.css
.arrow{
    position: center bottom;
    display: block;
    width: 80px;
    height: 80px;
    border-top: 10px solid #b0b0b0;
    border-right: 10px solid #b0b0b0;
    transform: rotate(135deg);
    margin-top: 80vh;
}
.red{
    background-color: red;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

}
.blue{
    background-color: blue;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.yellow{
    background-color: yellow;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#実装
arrowクラスをつけているaタグをクリックした時に、スクロールの関数を実行するようにします。
またスクロールの移動にアニメーション要素を入れたいので、数十ミリ秒間隔で関数を呼ぶようにします。

.scroll.js
const scrollDown = (position)=>{
    let count = position
    setInterval( ()=>{
        count += 50
        if(count<position + 1000){
            window.scrollTo(0, count)
        }
    },10)
}

次に、ボタンをクリックした時にこの関数を呼び出したいので、onclick属性を追加します。
また、jsファイルの読み込みも追加します。

test.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/test.css">
    <script src='scroll.js' defer></script>
    <title>Test</title>
</head>
<body>
    <div class='red'>
        <a href="#" class="arrow" onclick='scrollDown(0)'></a>
    </div>
    <div class='blue'>
        <a href="#" class="arrow" onclick='scrollDown(1000)'></a>
    </div>
    <div class='yellow'>
    </div>
</body>
</html>

これで矢印をクリックすると
赤色→青色→黄色
というようにスクロールされるはずです。

#参考
CSSで作るシンプルな矢印アイコン29個

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?