色彩トピックス

” 暮らしを愉しくする色のあれこれ ”

 

☆色が湧き出るアニメーション☆気分転換にどうぞ

  • 作成日:2023/04/12

  • WEBデザイン業界にお勤めの方、WEBデザインやコーディングに関心のある方には特に興味を持っていただける色を使ったアニメーションです。

    css-doodleというjsライブラリを使用して実現しているブラウザで動くアニメーションになります。

    中心から湧き出てくる色のついた四角形とハートがこちらに近づいてくるアニメーションで、yuanchuanさんのFloating heartという作品をベースにしています。
    中心から色が湧き出てくるアニメーション
    css-doodleはhtml,cssを使った簡単なプログラムで様々な色彩表現が可能です。

    今回は中明度中~高彩度の色で落ち着いた雰囲気をベースにハートの明るい雰囲気をあいまって、疲れたときに穏やかにポジティブな気持ちを作ってくれるようなアニメーションになっています。

    リロードをすると色の数や回転が変化しますので試してみてください。
    ※パソコン等でアニメーションがフリーズする場合はブラウザサイズを小さくしてみてください。

     

    Happy color life for you, your family and your neighbers.
    ライター・編集者

    カラーオン Mitsuru

    カラーコーディネーター

    自転車店勤務時代にウェブデザイン・チラシデザインの制作、オリジナルデザイン自転車(TVドラマでも使用)の企画を担当したことから色彩の世界へ。 「色彩が社会を元気にする!」をモットーに、多くの人が色・コーディネート・デザインを楽しめるようにコンテンツをご提供しています。
    配色パターン探索
    「●」から連想する言葉は?