タグ

JSに関するegakuのブックマーク (2)

  • もーふぃんぐ?SVGをうんにょりアニメーションさせるプラグイン「svg-morpheus.js」 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    ゆたろです。どうもです。 この頃、冬なのに寒かったり暖かかったりで上着を着ていくか毎朝迷ってます。 さてさて、最近サイト上で良く見かけるsvgアニメーションですが、ただ単に動かすだけではなく、変形させることもできます。今回は、svgモーフィングを簡単に実装できるsvg-morpheus.jsの紹介をしていきます。 ▼目次 モーフィングとは? svg-morpheus.jsを使ってみよう モーフィングさせるsvgを用意する モーフィングを実行する サンプル まとめ モーフィングとは? そもそも一般的に言うモーフィングとはなんなのでしょうか? ある物体から別の物体へと自然に変形する映像をみせる。これはオーバーラップを使った映像のすり替えとは異なり、変形していく間の映像をコンピュータによって補完して作成する。変身・変化を意味する単語「メタモルフォルシス(metamorphosis)」の中間部分か

    もーふぃんぐ?SVGをうんにょりアニメーションさせるプラグイン「svg-morpheus.js」 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 季刊とらいろ ツイッターとかのソーシャルボタンをオリジナル画像で設置してみる

    各種ソーシャルボタンを自分で用意した画像を使って設置する方法について書きます。 あれね、あのクリックしたらいい感じにツイートやらシェアしてくれちゃう便利ボタン。 ちなみにオリジナル画像でない通常のボタン設置方法は殆どジェネレータ使ってソースコピペするだけですので、 それぞれのURLを紹介しておきます。 facebook/twitter/はてなブックマーク/Yahoo!ブックマーク/Google+1 この5つのソーシャルボタンの設置方法を紹介します。 以下、実際に設置するやり方です。 初めに、それぞれオリジナル画像で設置する場合のHTMLの書き方を紹介します。 次に、各記事ごとに設置する場合に使うURLとタイトル用のテンプレート変数を紹介します。 (fc2ブログ用) 最後に、fc2ブログ以外のサイト、変数の無いブログ(あるのかな?)等で設置する際に 手打ちが面倒なケースで使うコードを紹介しま

  • 1