Menu
Coddy logo textTech

方向を交互に変える

Coddyの「流れる雲 - HTML/CSS/JSプロジェクト」コースのレッスン 12/18。

現在、私たちの雲は右にしか動いていません。それはそれでいいのですが、十分ではありません。今度は、右と左を交互に動くようにしてみましょう!

challenge icon

チャレンジ

簡単

JavaScriptファイルで、インターバル内に交互に方向を変えるためのサポートを追加してください。

何が起こるべきですか?

インターバルが最初に実行されるとき、leftスタイルは100%に等しくなる必要があります。

インターバルが2回目に実行されるとき、leftスタイルは-50%に等しくなる必要があります(これより多くても少なくても構いません。テストして最適な値を確認してください)。

インターバルが3回目に実行されるとき、leftスタイルは100%に等しくなる必要があります。

以降、同様に繰り返します...

不明な点がある場合は、ヒントを確認してください。

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

流れる雲 - HTML/CSS/JSプロジェクトのすべてのレッスン