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

どうもです。秋らしい涼しさがきて嬉しいです。 今週も良きウェブまとめです。 今週の一押しは擬似デスクトップとwebglが美しいサイトです。

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

岡山の樹上完熟ぶどう 小幸農園

https://koyuki-farm.jp/

ちゃんと写真がバラバラと動いてる風なスライドショー。動きも可愛らしい。

#animate.css #slick #かわいい系 #スクロールアニメーション #ホバーアニメーション #背景アニメーション

えがく未来。つなぐ価値。 ｜ 株式会社ネオキャリア新卒採用

http://www.neo-career.co.jp/newgrad/

SVGでもにょ〜と変化するキービのタイトルに目が惹かれます。全ページ共通して存在するラインもポイント

#TweenMax #インライン再生動画 #スタイリッシュ #スクロールアニメーション #SVGアニメーション

株式会社ジュニ | Junni Co., Ltd.

https://junni.co.jp/

ところ度ごろに現れるバクがかわいい。背景ホバーで箱がホップします。

#Three.js #カラフル #背景アニメーション #スクロールアニメーション #ホバーアニメーション #テキストアニメーション #ロゴアニメーション

Ginco - 安心・安全の仮想通貨ウォレット

https://ginco.io/

animate.cssはフラットデザインの動きとして相性がいい感じですね。ちなみにHugoも使ってる模様。

#animate.css #カラフル #スタイリッシュ #slick #スクロールアニメーション #フラットデザイン #シングルページ

+graph Cloud & Agent | プラスグラフ クラウド&エージェント

https://plusgraph-ca.jp/

シンプルなデザインですがそれを感じさせない動きのつけ方がいい感じ。

#シンプル #スタイリッシュ #縦書きメニュー #スクロールアニメーション #テキストアニメーション

Humbert & Poyet

https://www.humbertpoyet.com/

テキストのゆらめきとスクロールの速度との相性がいい感じ。上下スクロールするスライダー。

#コンポーネント設計 #スタイリッシュ #テキストアニメーション #スクロールアニメーション #ホバーアニメーション #シームレス遷移 #上下スクロールスライダー

Implement Consulting Group

https://implementconsultinggroup.com/

四角形をベースにして組まれているデザイン。

#CSSanimation #カラフル #スタイリッシュ #スクロールアニメーション #ホバーアニメーション #テキストアニメーション

Olaian - Maillots été 2018

http://lookbook-olaian.fr/#

webglで作られた表現水面のモーションがとても綺麗。。。

#TweenMax #スタイリッシュ #curtains.js #スクロールアニメーション #ホバーアニメーション #下層スクロール遷移 #水面モーション

Newhattan | ニューハッタン日本公式サイト

https://newhattan.jp/

ローディング中は背景カラーが変化し続ける作り。トランジションもいい感じ。

#TweenMax #自動再生スライダー #スタイリッシュ #スプレッドスクリーンレイアウト #スクロールアニメーション #ホバーアニメーション #インライン再生動画

The Preposterous Official Website of Erik Bernacchi

http://eeerik.com/

ブラウザの中にもう一つのデスクトップが現れたみたいだ。。。ちょっと変形タイプのポートフォリオ。ダブルクリックしないとコンテンツが開きません。

#カラフル #擬似デスクトップ

Oeuflab - ウフラボ | 宮崎のグラフィックデザイン事務所

https://oeuflab.com/

slickをうまく使ってアニメーションを使ってるのは参考になります。デザインがかわいい。。。！

#slick #カラフル #かわいい系 #グリッドレイアウト #自動再生スライダー