studio03-01

STUDIO

背景動画、スクロールアニメーション、CMSの導入をテーマにページを作成しました。

『STUDIO』でホームページの制作

今回(サンプルサイト03)は、
 ①メインイメージに背景動画
 ②ページスクロールに合わせたアニメーション
 ③CMSの導入
以上3点をテーマにページを作成しました。
※作成ページは、トップページとCMSによる動的ページです。

■メインイメージに背景動画

YouTubeにアップした動画を背景に読み込ませています。
PCのブラウザ上では、動作確認出来ましたが、
タブレットとスマホでは、上手く動作確認出来ませんでした。
vimeoにアップした動画も同様のことが出来るようです。

■ページスクロールに合わせたアニメーション

スクロールに合わせて下からせり上がるアニメーションを設定しました。
アニメーションの種類はその他にもありますので、
別途、試していこうと思います。

■CMSの導入

NEWS/TOPICSの箇所は、CMSを導入しています。
CMSは、一覧ページ、投稿ページ、キーワードによる一覧ページの3つで構成されています。
投稿ページの右側に広告バナーとキーワードによって、ソートさせた記事一覧を加えました。
CMSの機能の把握については今後も行おうと思います。

サンプルサイト03はこちらから

studio03-02

studio02-01あらかじめサイズを規定してサンプルページを作成前のページ

WordPressを使わずにSTUDIOでニュースサイトを構築する次のページstudio04-01

関連記事

  1. studio10-03

    STUDIO

    サンプルサイト09/テーマ:コーヒー豆専門店

    STUDIOで歯科医院をテーマにしたサンプルサイトを制作しました。…

  2. studio05-01

    STUDIO

    STUDIOにない機能をiframeで読み込んでサンプルページを作成しました

    スライドショーとサムネールからイメージを拡大表示させるコンテンツを…

  3. studio02-01

    STUDIO

    あらかじめサイズを規定してサンプルページを作成

    ブラウザの画面が9種類。▶1920px-Full HD▶1…

  4. studio13-01

    STUDIO

    マウスオーバーによるボタンアクション集を制作(STUDIO)

    STUDIOの機能を利用して、マウスオーバー時に起こせるアクション…

  5. studio14-01

    STUDIO

    4×4=16マスで画面全体を構成するトップページのレイアウトサンプル

    4×4=16マスで画面全体を構成するトップページのレイアウトを制作しま…

  6. studio12-01

    STUDIO

    写真を表示させる歳のアニメーションを制作

    STUDIOの機能を利用して、写真を表示する際のアニメーションを1…

  1. eyecatch-200501

    After Effects

    調整レイヤーにエフェクトを設定したアニメーション(After Effects)
  2. bubble-background01

    Adobe Muse CCを使ったホームページ制作

    画面背景にバブルアニメーション(Adobe Muse CC)
  3. Chocolate-Pack

    Photoshop

    チョコレートバーのパッケージモックアップ画像をPhotoshopで作成しました。…
  4. youtube-20201207

    Premiere Pro

    スタッターの動きをMotion ArrayのPremiere Proプラグインで…
  5. box01-01

    Cut Machine

    花のように閉じるボックスを商品化しました。(silhouette CAMEO3)…
PAGE TOP