ChatGPTに教わるScrollytellingコンテンツの作り方

ChatGPTに教えてくれくれとお願いし、素直に言いつけを守っていると、画面のスクロールでテキストや画像などを楽しめる、いわゆるScrollytellingのコンテンツが（簡単なものなら）すぐに作れてしまいます。以下にそのやりとりが記してあります。

https://chat.openai.com/share/9eab3013-2e06-4cdd-9637-2b75f702bc80

チャッピーせんせいとのやりとり

ページはHTMLとCSSとJavaScript(JS)という三つの言語を用いたコードで構成されています。HTMLはテキストとか画像とかリンクとかの、つまりコンテンツを記述したものです。CSSはページの「スタイリング＝見てくれ」を表現したもので、JavaScriptはアニメーションなどの動的な効果を加えるときに使われます。

今回は基本的なところを勉強するのが目的なので、HTMLとCSSだけをいじりました。結果、こんなコンテンツができます。

Scrollytelling Example

改変途中のバージョンを含めたコードが以下からダウンロードできます。

土曜記者ゼミ　ChatGPTによるscrollytelling作成.zip

8.47 MB

ファイルダウンロードについて

ダウンロード

さらにいろいろな改変を加えれば、画像の上をテキストが流れるようにしたりとか、動画を組み込んだりとかもできます。

走れメロス

もっとがんばってJavaScriptに手を入れたりすると、動画をぐりぐり動かしたりもできます。

Scroll-Controlled Video Animation

ただし、iPhoneのブラウザではうまく表示できなかったりする課題もあります。私もまだまだ勉強中です。

日本記者クラブの土曜記者ゼミIT講座、5月11日のコマで以上のことをお話しする予定です（3月に米ボルチモアであったNICARの土産話ということになっております）。