cssのみで作成できるメインビジュアルのフェードインスライドアニメーション

右から左に無限スクロールするアニメーションのデモです。実際のサイトでは、舞台をイメージしたデザインで、カーテンの画像が両端に配置され、生徒さんの舞台での演劇の画像がカーテンからカーテンへと流れるようになっています。

クライアント様から作成してほしいとのご依頼があったスライダーです。PC幅ではモーダルスライダー、スマートフォン幅では通常のスライダーとなっています。

この記事ではHTML知識が不要な方でもカスタム投稿タイプの個別ページにスライダーを設置し、管理画面から画像変更できるようにした実務経験について書いています。