映画館の宣伝のような文字が順番に出てくるやつを作る

7199 ワード
JavaScript HTML promise jQuery CSS HTML テキストリンク

どうも7noteです。映画館で最初に流れる予告編のようなテキストを順番に出す処理を実装してみる


※ちょっと出だし遅いです。気長に待ってください。

javascriptを使いpromiseで順番にjavascriptを処理していくことで表現できています。
テキストをpタグに用意して、それらを順番に表示しています。

それではソースをどうぞ。

※jQueryを使用しています。jQueryてなにそれおいしいの？という方はこちら

ソース

index.html
<p id="text01">あの名作が再び帰ってくる</p>
<p id="text02">全世界を熱狂の渦に巻き込んだ<br>あの感動作が</p>
<p id="text03">劇場版になって再び旋風を巻き起こす</p>
style.css
body {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

p {
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  display: none;
}
script.js
function action() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve()
        }, 3000) //3秒後に実行
    })
}


action()
    .then(function(){
    $("#text01").show(); // テキスト1を表示
    setTimeout(() => {
        $("#text01").fadeOut()
    }, 1500)  //フェードアウトを1.5秒後に実行
    return action() 
})
    .then(function(){
    $("#text02").show(); // テキスト2を表示
    setTimeout(() => {
        $("#text02").fadeOut()
    }, 1500) //フェードアウトを1.5秒後に実行
    return action() 
})
    .then(function(){
    $("#text03").show(); // テキスト3を表示
    setTimeout(() => {
        $("#text03").fadeOut()
    }, 1500) //フェードアウトを1.5秒後に実行
    return action() 
})

解説

正直解説できるほどpromiseについては詳しくないのですが、action()という関数を作って、この関数を通ってから次の命令を動かすみたいな流れになっています。
そのため、action()の中で3秒処理を停止させてから、resolve()を実行して次の命令に以降する許可を出しているみたいな感じだと思います。（※間違っていたらすみません）

下の方でthen()を複数かいていますが、このような書き方をすることで処理をこの順番の通りに実行できます。
最初は1のテキストを表示して1.5秒後にフェードアウト。次は2のテキストを・・・のように順番に処理を書いています。

まとめ

全く非同期処理について知らないときに似たようなことをsetTimeOutでやろうとして挫折したことがあります。
他にも面白いことに使えそうですね。

※思いつきでやってみたのですが、ソースに無駄な部分があるかもしれません。ご指摘改善等コメントお願いします。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ