ボタンで開閉するハンバーガーメニューを作成します キーワード:DOM, イベント(click), WebAnimationsAPI 作成例(完成イメージ) 【準備】フォルダ:javascript_navigation ① […]
javascript
WebAPIを使った地図
Web API(application programming interface)とは、web上でデータをやりとりする仕組みのことで、異なるソフトウェアやプログラムを連携することができます。 オープンソースの地図データ […]
スクロールアニメーション(JavaScript)
JavaScriptのIntersection Observer APIと、Web Animations APIを組み合わせて、スクロールによって反応するアニメーション効果を加えます。 キーワード:Intersectio […]
ギャラリー + アニメーション(JavaScript)
Web Animations APIと、for文を使った繰り返し処理で、画像ギャラリーの表示にアニメーション効果を加えます。 キーワード:配列、繰り返し(for)、Web Animations API 作成例(完成イメー […]
テキスト + アニメーション(JavaScript)
JavaScriptのWeb Animations APIという機能を使い、テキストの表示にアニメーション効果を加えます。 キーワード:Web Animations API 作成例(完成イメージ) 【準備】フォルダ:ja […]
ギャラリー(JavaScript)
繰り返しの処理を使って、クリック(タップ)やマウスオーバーで画像を切り替える、ギャラリーを作成します。 キーワード:配列、繰り返し(forEach) 作成例(完成イメージ) 下記の順番で進めます。 【準備】フォルダ:ja […]
ローディングアニメーション(JavaScript)
「イベント」の機能を使って、「load(全ての要素が読み込まれる)」までにアニメーションを表示させる効果を作ります。 キーワード:イベント(load) 作成例(完成イメージ) 【準備】フォルダ:javascript_lo […]
カラーピッカー2(JavaScript)
カラーピッカー1で作成したプログラムに追記をして、条件分岐を加えます。また、これまでの制作の中で出てきた文法事項についても補足説明をしています。 キーワード:条件分岐(if/else) 作成例(完成イメージ) 【準備】カ […]