[70-4] JavaScriptライブラリで作るSVGモーフィングアニメーション
[70-4] JavaScriptライブラリで作るSVGモーフィングアニメーション 最終更新日：2017年11月16日 （初回投稿日：2017年04月22日） SVGアニメーションの続きです。 前回は CSSだけで作るドローイングアニメーションをやりましたが、今回は JavaScriptのライブラリを使って初歩的な SVGのモーフィングアニメーションを作ってみました。 本日のINDEX Snap.svg でモーフィングアニメーション クリックでモーフィングするサンプル 連続ループでモーフィングするサンプル モーフィングの応用（他サイト様をメモ） その他 SVGアニメーションのための JavaScriptライブラリ Snap.svg でモーフィングアニメーション Snap.svg は Adobe社が提供しているライブラリです。 これを利用すれば、モーフィングだけでなく、かなり複雑なアニメーシ
![[70-4] JavaScriptライブラリで作るSVGモーフィングアニメーション](https://cdn-ak-scissors.b.st-hatena.com/image/square/c45e8f5f3f125fcbd6360ee956d828c6ae8dd2d4/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-121.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2F170320-3.gif)
SVG奮闘記 ー SVG要素をぐにょぐにょ動かす実装を完了させるまでに右往左往した話 - Qiita
こんにちは。せいと（@seito2014）です。 LIGアドベントカレンダー13日目です。 はじめに 最近とあるサイト制作でSVGアニメーションを利用したのですが、そこでつまづきまくったことをつらつらと書いていきたいと思います。 とあるサイトというのはこちらで、見ていただくとわかるのですが、メインビジュアルがぐにょんぐにょん動いてます。 他にもいたるところでSVGやらCanvasやら使ってるサイトなのですが、今回はメインビジュアルのアニメーションに言及して書いていこうと思います。 ・イメージ図 ※キャプチャ画像はちょっとグレーなので別途画像を用意しました。 当時、デザイナーさんから静止画のPSDをもらって「この部分をこう、ぐにょぐにょ動かしてほしい」と言われて、やるならCanvasかSVGのどちらかだろうなあと思いました。 ただ、Canvasでやる場合は恐らく計算式が大変なことになるんじゃ
Bootstrap を拡張パワーアップ！参考にしたい50個の無料プラグイン、コンポーネントまとめ
Webデザイン制作で人気の Bootstrap フレームワークには、役立つツールやコンポーネントがあらかじめパッケージされており、すぐにサイトやアプリの制作をはじめることができます。しかし、ときには必要な機能が十分に揃っていないケースがあるのも事実です。 この記事では、Bootstrap の機能を最大限に拡張できる、50種類のプラグインやアドオン、コンポーネントをまとめてアルファベット順にご紹介します。 ここでは、ボタンやパンくずリスト、カレンダー、ツリーメニュー、ビデオプレイヤー、WYSIWYGエディターなどウェブ制作に必要な機能をすべてまとめています。今後のプロジェクトに活用してみてはいかがでしょう。 制作に活用したいBootstrap 用プラグイン、アドオン、コンポーネント（アルファベット順） アクセシビリティ （英: Accessibility） Accessibility Plu
Chrome拡張「Scraper」でWEBページ情報を手軽にスクレイピングしてデータ化する方法
Scraperとは Scraperは、WEBページ上の規則性のあるデータを手軽に取得することができるChrome拡張です。 例えば、テーブルデータや、Aリンクデータ、のような特定のHTML要素に入っている情報を、片っ端から取得してテーブルデータ化することができます。 また、その取得したデータをワンクリックでGoogleスプレッドシートに保存することができます。 テーブルデータのスクレイピングは以下の動画を見た方が分かりやすいかも。 以下では、その使い道などをいくつか考えてみました。 テーブルデータの取得 最もオーソドックスな使い方と言えば、動画にも出てきたテーブルデータの取得です。 例えば、信長の野望の以下のような武将データテーブルがあったとします。 これを、以下のように選択して、Chromeの右クリックメニューから「Scrape similar（似たものをスクレイプ）」を選択します。 す
レスポンシブWebデザインに対応したモーダルウィンドウを実装するjQueryプラグイン・Remodal
RWD対応のモーダルウィンドウを実装するスクリプト、Remodalのご紹介です。jQueryに依存しています。 RWDなWebサイトで使えるモーダルウィンドウ実装スクリプトです。 デバイスのモニタサイズに応じて適切なレイアウトを維持するモーダルウィンドウです。 スマフォの場合は全画面に表示されるのでフィンガーフレンドリーを考慮した設計と言えそうです。 <script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.remodal.min.js"></script>本体とスクリプトを読み込みます。 <div class="remodal" data-remodal-id="modal" data-remodal-options='{ "
[JS]Lightboxの進化形！クリックでもタップでも快適動作の画像を拡大表示させる超軽量スクリプト -Intense Images
サムネイル真ん中の風景写真は縦長 Intense Imagesの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 ※jQueryなど他のスクリプトは必要ありません。 <head> ... <script src='../intense.js'></script> </head> Step 2: HTML 画像は2種類の配置方法があります。 img要素はサムネイルと拡大時の画像を兼用し、data-image属性は拡大時に高解像度の画像を利用することができます。 <img src="./img/awesome-source.jpg" /> <!-- OR --> <div class="anything" data-image="./img/awesome-source.jpg" /> data-imageを使用する時は、サムネイルはCSSで背景画像として指定
デザイナー・ノンプログラマにおすすめしたいThree.jsのカンタン3D体験 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアののびすけです。最近毎日ハムスターになる夢を見ます。 前回の記事「圧倒的な3D表現にWebの未来を感じるWebGLを使ったサイト・デモ20選」にまとめましたが、WebGLを使ったサイトが最近話題になっていますね。 従来の平面で考えるWebの時代から次の時代への移り変わりを感じる今日この頃です。 今回は実際にWebGLを使った3D表現にチャレンジしてみます。 JavaScriptで記述しますが、初心者向けにまとめたのでノンプログラマやデザイナーの方にもチャレンジしてほしいです！実際にコード書くところは5分（早い人なら1分）でできると思います。 そもそもWebGLとは PC上で3Dを描画するための技術にOpenGLというものがあります。OpenGLは3DグラフィックスAPIとも呼ばれていて、様々なプラットフォームに対応しており、広く普及しています。 このOpenGLをWe
PS Auto Sitemap （サイトマップ自動表示プラグイン） の導入方法と使い方
WordPressで作成したサイトのサイトマップを自動生成できるプラグイン、「PS Auto Sitemap」の使い方を紹介します。初期設定やデザインの変更も簡単、便利なプラグインです。 2022年11月2日 追記 「PS Auto Sitemap」プラグインは一時的に公開停止となっており、利用することができない状態です。再公開されましたら、またお知らせします PS Auto Sitemap プラグインでサイトマップを自動生成 サイトマップとは PS Auto Sitemapで自動生成できる「サイトマップ」とは、サイト内の投稿や固定ページ等を一覧表示させる、「もくじ」の役割を果たすもの(HTMLサイトマップ)です。下記ページで紹介したような、検索エンジン向け(XMLサイトマップ)ではありません。 Google (XML) Sitemaps Generator の導入方法 ブログの投稿は、通
SPOILER ALERT!
Don't spoil it! Hide anything with a bit of blur. Hint on mouseover. Reveal on click. Works with copy: Sharon shoots Adama. It's really tragic. There's so much blood. Haha. Classic Sharon! Turns out Jesus dies, but is brought back to life. A twist worthy of M Night Shamamanalayan! On the Itchy & Scratchy CD-ROM, is there a way to get out of the dungeon without using the wizard key? You have to fin
[JS]スマートフォンのタッチイベントを取得する各スクリプトのまとめ（仕様比較）
タッチイベントを取得する各スクリプトの対応イベント、スタンドアローンなのかjQueryが必要なのか、ファイルの容量など、仕様の比較をまじえて紹介します。 QUOjs イベント タッチ、タップ、ダブルタップ、ホールド、フィンガー、スワイプ、スワイプアップ、スワイプライト、スワイプダウン、スワイプレフト、ドラッグ 補足 jQueryとのコンフリクトを避けるため、「$$」を使用。 対応予定（2フィンガータップ、ロウテイト、ピンチアウト、ピンチ） 仕様 スタンドアローン ファイルサイズ Minified: 13KB Hammer.js イベント タップ、ダブルタップ、ホールド、ドラッグ、ピンチ 補足 タッチジェスチャだけにフォーカスしたスクリプト。 仕様 スタンドアローン jQueryのプラグインも有り ファイルサイズ Minified: 2KB [ad#ad-2] jGestures イベント
入れておくと快適な10のChrome Extension : 葬られたる笹身
(各アイコンをクリックするとウェブストアに飛びます) 1. Thin Scroll Bar スクロールバーを細くしてくれるエクステンション。極限まで表示する領域を広げたいけど、スクロールボタンは消したくない人におすすめ。 2.SmoothScroll スクロールがぬるっとするエクステンション。カクカクなスクロールに我慢ならない人におすすめ。 3.Scroll To Top ページの下部からワンクリックで上部に移動できるエクステンション。オプションでいろいろいじれる。デザインも豊富。 4.Pinterest ホームページ上に表示されている画像をPinterestにリピンできるエクステンション。とても捗る。しかしIT Mediaの記事ではなぜか失敗する。なぜなのか。 5.New Tab Redirect! Chromeの「新しいタブ」を自由に設定できるエクステンション。 6.Turn
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVGで滑らかなモーフィング（変形）を！SVG Morpheus の使い方 | ARAKAZE NOTE
Picnic for Sketch
AwwwardsやDribbble、Behanceなどの投稿をざっと見れるインスピレーション向上の為のChromeエクステンション・「Muzli」
記事を複製できるWordPressプラグイン「Duplicate Post」 – ワードプレステーマTCD
株式会社LIGが使っているWordpressプラグイン
Flipsblog.jp
http://sanride.com/blog/webdesign/wordpress.php
Nyle Engineering Blog
selectボックスをiPhoneのOn/OffスイッチっぽくできるjQueryプラグイン「switchy」:phpspot開発日誌