西 葵のポートフォリオサイト

aoi.work

【架空Webサイト】
水族館(PCのみ)

作品について

概要

※この作品は現在PC版のみの公開となっております。恐れ入りますが、パソコンからの閲覧をお願いいたします。

Twitterのフォロワーさんが、ブログで配布をされていたワイヤーフレームを基にコーディングを行ないました。

YouTubeにてCSSやJavaScriptでのアニメーション学習を行なったので、それらのアニメーションを使ってサイトを作るという挑戦をしました。

マウスホバーでのアニメーションや、ページ上に泡が浮かぶエフェクトなど、動きを多くしています。

本ページに掲載をいたしました2021/7/18現在は、まだPCデザインしかコーディングが完了していなかったり、メインビジュアルの動画が簡素なものになっていたりと不完全な状態ではありますが、アニメーションの学習成果となるため取り急ぎ掲載している状況です。

レスポンシブについては現在対応中で、完成次第更新いたします。

WF配布元・学習に使用させていただいた動画

WF配布元:
【ポートフォリオ掲載OK】デザイン練習に使えるワイヤーフレーム配布します - mogaBlog

学習に使用させていただいたYouTubeチャンネル:
Online Tutorials

作品イメージ(抜粋)

PC版

水族館の架空サイト PC版 1
水族館の架空サイト PC版 2
水族館の架空サイト PC版 3