【Webデザイン】今週の「良きウェブ」(8月11日〜8月17日)

どうもです。秋の匂いがして嬉しいですが毎日雨なのはいただけないです。

今週も良きウェブまとめです。

この週の一押しは宮崎あおいさんのサイトとMarie Morelleさんのポートフォリオサイトです。

ところで最近解析して見たらこれCSS Filter使ってるじゃん〜というサイトをちょこちょこと見かけます。

それでは以下からどうぞ。

AOI MIYAZAKI official website - 宮﨑あおい

http://www.aoimiyazaki.jp/#!/home/

美しきスライダーページ遷移。コンテンツの移り変わりも丁寧な見せ方をしています。

#TweenMax #スタイリッシュ #全画面スクロール #縦向きスライダー #インライン再生動画 #エンドレススクロール #PushState #シームレス遷移

Squarespace Circle

https://circle.squarespace.com/

社員紹介の円形スライダーが素敵。たまにこのタイプのスライダーを見ますが、インライン再生動画と合わせるとより雰囲気が出ますね。

#全画面スクロール #スタイリッシュ #サークル型スライダー #シームレス遷移 #テキストアニメーション #インライン再生動画 #ホバーアニメーション

株式会社フォトシンス Photosynth Inc.

https://photosynth.co.jp/

全体的に斜めの動きを基調としているサイト。滑らかです。

#Three.js #CSSAnimation #スタイリッシュ #グリッドレイアウト #スクロールアニメーション #ホバーアニメーション #CSS Filter #インライン再生動画 #斜めスライドイン #シームレス遷移

FUWA - 岐阜県不破郡から生まれたカトラリーブランド

https://www.fuwa.jp/

ファーストビューのロゴの見せ方が素晴らしい。

#CSS Animation #スタイリッシュ #animate.css #スクロールアニメーション #slick #CSS Filter

カラクリ株式会社 | 今までにないカラクリで世の中を豊かに

https://www.karakuri.ai/

テキストアニメーションとスプライトアニメーションの参考例

#Canvasアニメーション#カラフル #スタイリッシュ #テキストアニメーション #スクロールアニメーション #ホバーアニメーション #インライン再生動画 #CSS Animation #スプライトアニメーション

Marie Morelle - Illustratrice

https://www.marie-morelle.com/

スライダーがまるで本のページをめくるみたいな仕掛けでとてもこだわってる。。。！ 全体的に演出が素敵なので、フロントエンド的にも解析してみると面白いかも。

#Barba.js #イラスト #スタイリッシュ #シームレス遷移 #スクロールアニメーション #TweenMax #Canvasアニメーション

Web Design Dubai - Web Development Company Dubai - Planet Green UAE

https://www.pgsuae.com/

こんな動きをするサイトも珍しい。常に枠に寄り添うメニューとポインター検知で動く枠。

#TweenMax #カラフル #スタイリッシュ #Hammer.js #FancyBox #ホバーアニメーション #変形デザインフォーム #フリップアニメーション

キッズコレッチオ 〜子どもの想い出を、宝物として残すサービス。〜

https://kids.colleccio.jp/

デザインの可愛らしさとサイトの動きの可愛らしさが調和したサイト。可愛い。

#animate.css #カラフル #slick #Lightbox #イラスト #可愛い系 #ホバーアニメーション #gifアニメーション