デモ

makeshopのテンプレートタグとcssを使用して作成したサイドメニューを記事で紹介しています。親をカテゴリーをホバーすると子カテゴリーが開くような階層構造を持ったサイドメニューになっています。

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

カスタム投稿タイプでカテゴリーの一覧を出力するソースコードを当記事で紹介しています。

実務経験で作成したタブ切り替えのデモです。HTML/CSS/JavaScriptを使用しています。

実務経験で実装したスクロールフェードインアニメーションのデモです。

実際の案件で使用したローディングアニメーションのデモです。アクセスすると、ロゴのマークとロゴが表示され、ロゴのマークが2回転するアニメーションが発動します。その後、黒背景が剥がれるアニメーションが発動し、本文が表示されます。

モーダルスライダーのデモページです。jQueryとslick.jsを使用して作成しました。

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

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

大学のオープンキャンパスの資料請求のLPのファーストビューに使用される、時間差フェードで切り替わる写真のアニメーションデモです。CSSアニメーションを活用し、鮮やかなフェード効果と切り替わりを実現しています。