タグ

2020年3月17日のブックマーク (3件)

  • スライムから泡まで!液体をシュミレートしたリキッドモーション8選 - Workship MAGAZINE(ワークシップマガジン)

    Webデザインと特殊効果は、切っても切れない関係にあります。これまで多種多様な特殊効果が制作されてきましたが、高度な技術を使うことができるいま、ぜひ取り入れたいのが「液体を再現したデザイン(リキッドモーション)」です。 一口に液体といっても、スライムのようなものから泡のようなものまで、さまざまなデザインが可能です。 今回は多様なデザインの中から8つの例をご紹介します。 1. 輝く液体を動かそう WebGLで作られた、発光する不思議な液体のかたまりが空間に浮かんでいます。 ぜひカーソルで動かしてみてください。 See the Pen Blob study by Liam Egan (@shubniggurath) on CodePen. 2. 暗闇に浮かぶ液体のかたまり 最初にご紹介した例と比べると、こちらはより形がはっきりしています。まるで目の前に浮かんでいるかのような、リアルな液体作品で

    スライムから泡まで!液体をシュミレートしたリキッドモーション8選 - Workship MAGAZINE(ワークシップマガジン)
    nakagawax
    nakagawax 2020/03/17
    リキッドモーションのスクリプト8選。
  • 【JavaScript】パーティクルの背景アニメーションを実装できる「bubbly-bg」の使い方 | misoblog

    とても簡単に背景にパーティクルのアニメーションが実装できるJavaScript「bubbly-bg」の使い方をご紹介します。 bubbly-bgの実装方法GitHub – tipsy/bubbly-bg: Beautiful bubbly backgrounds in less than 1kB (750 bytes gzipped) 上記リンクのサイトで「Clone or download」を選択し、「Download ZIP」をクリックすれば、ファイル一式をダウンロードできます。 ダウンロードしたZIPファイルを解凍し、その中にある「bubbly-bg.js」というJavaScriptファイルを使用します。 下記のようにHTML内に記述して、実装完了です。とても簡単。 <script src="js/bubbly-bg.js"></script> <script>bubbly();</

    【JavaScript】パーティクルの背景アニメーションを実装できる「bubbly-bg」の使い方 | misoblog
    nakagawax
    nakagawax 2020/03/17
    泡がフワフワ浮かぶスクリプト。
  • とっても幻想的な泡のスクリプト!実装方法やサンプルを紹介 - Design Color

    はじめに 「あくちー(@actywav)さん」といえばとってもポップなデザインのサイト「actyway」の中の人です。あの有名なブックマークレット「ソーシャルてんこもり」など、便利系から面白系まで幅広いプログラム情報などが満載のブログです! 今回は、そんなあくちーさんの良記事のひとつ「まるでサイダーみたい!炭酸飲料みたいに気泡が上がってくスクリプトでシュワワのアワワ! : actyway」に沿ってお伝えします! カスタマイズ方法 泡の動き(Javascript) 泡スクリプトのベースは先日Web系ブロガーさんの間でブームを巻き起こした「雪スクリプト」をベースにしているそうなので、そちらを参考に変更しました。 クリスマスに使いたい!雪のパーティクルをチラチラ降らすスクリプトを作ってみよー : actyway そして泡のソースコードはこちら。自分好みにカスタマイズするなら、主に下記のハイライト

    とっても幻想的な泡のスクリプト!実装方法やサンプルを紹介 - Design Color
    nakagawax
    nakagawax 2020/03/17
    泡のスクリプト。