便利なツールが登場！ハンバーガーをXに変形させるのも簡単、SVGアイコンをアニメーション化できる無料ツールSVGアイコンは美しく軽量で、非常に便利です。Webサイトでもスマホアプリでも、SVGアイコンを使用している人は多いと思います。 SVGアイコンをアニメーションさせるには、どうしていますか？ 例えば、ハンバーガーメニューを閉じるアイコンに変化させるなど、2つのSVGアイコンをアニメーションで変化させるオンラインツールを紹介します。 使い方は超簡単で、2つのSVGアイコンをぽいっとするだけです。
もーふぃんぐ？SVGをうんにょりアニメーションさせるプラグイン「svg-morpheus.js」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ゆたろです。どうもです。 この頃、冬なのに寒かったり暖かかったりで上着を着ていくか毎朝迷ってます。 さてさて、最近サイト上で良く見かけるsvgアニメーションですが、ただ単に動かすだけではなく、変形させることもできます。今回は、svgモーフィングを簡単に実装できるsvg-morpheus.jsの紹介をしていきます。 ▼目次 モーフィングとは？ svg-morpheus.jsを使ってみよう モーフィングさせるsvgを用意する モーフィングを実行する サンプル まとめ モーフィングとは？ そもそも一般的に言うモーフィングとはなんなのでしょうか？ ある物体から別の物体へと自然に変形する映像をみせる。これはオーバーラップを使った映像のすり替えとは異なり、変形していく間の映像をコンピュータによって補完して作成する。変身・変化を意味する単語「メタモルフォルシス（metamorphosis）」の中間部分か
需要が高まっているアニメーションを取り入れたWebサイトのデザインプロセスを大公開！【実例あり】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのまきこです。春っていいですよね……ほんとに。 さて、わたしは先日、「JOYSOUND」のスペシャルサイトのデザインを担当させていただきました。カラオケに関するさまざまなデータをインフォグラフィックにして視覚化し、アニメーションさせて楽しげに伝えるような、そんなサイトです。 今回は、そのインフォグラフィックやアニメーションにフォーカスし、デザイナー目線での制作プロセスをご紹介していきます。 視覚化や動きのあるサイトのデザインの仕方などを、LIGのサイト制作例として参考にしていただけると嬉しいです！ はじめに お客様はこんな会社さま 今回、制作をご依頼いただいたお客様は、株式会社エクシングさま。通信カラオケ「JOYSOUND」の運営などを行い、カラオケのさらなる楽しさを追求・提案している企業さまです。 エクシングさまとのおつきあいは、弊社サイトを通じて制作のお問い合わせ
CSSスプライトとstepsを使ってアニメーション画像を作ろう
2023年7月25日 CSS CSSで動かすアニメーションには、私自身まだまだ使いこなせていないプロパティーがたくさん眠っています。その中のひとつが steps というプロパティーでした。これまでよく使っていた滑らかな動作ではなく、段階ごとに要素を動かすことができます。実際にはどんな場面で使えるんでしょうか？今回はそんな steps プロパティーにフォーカスしてみます。 ↑私が10年以上利用している会計ソフト！ steps の記述方法 steps は animation や keyframes プロパティーとともに利用します。steps() のカッコの中には、いくつの段階を経て動作させるのかを記述。例えば5段階で変化させるなら、steps(5) と記述します。 .element { animation: img-move 5s steps(5); } @keyframes img-move
CSS3のanimation-timing-function: steps(n) が便利 - Qiita
DEMO デモを追加しました (2015-10-16) http://codepen.io/skwbr/pen/bVoJqw 概要 CSS3のanimation-timing-function: steps(n) が便利なのでGifアニメやJSを使用したPNGシーケンスはもう使わないようにしたいな、という話です。 例えば のようにY方向に100pxの間隔で5コマを並べたSprite画像があるとして、 background-positionでコマ送りアニメーションをさせるときは良くJSが使われていますが、 CSS3の animation-timing-function: steps(n); を使うとその代わりができます。 .hoge { ..... animation: parapara 1s steps(5) 0s infinite; } @keyframes parapara { 0%
LazyLine: Best VPN Services
VPN What is VPN and why do you need it?VPN, or Virtual Private Network, is a technology that allows you to create a secure and private connection to the internet. With VPN, you can protect your online activities from prying eyes and access the internet with greater freedom and privacy. Learn more about VPN and why it’s essential in today’s digital world. Get Secure Now: The Honest VPN Rating Site
[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid
レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。 デモのアニメーション minigridの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/minigrid/minigrid.js"></script> </body> Step2 :HTML 各アイテムには「.grid-item」を、ラッパーには「.grid」を付与します。 <div class="grid"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div
![[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid](https://cdn-ak-scissors.b.st-hatena.com/image/square/51d7e65c86ee67bce7000a1d7008655aaff74295/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015080204-01.png)
Canvasアニメーションの要点 - Qiita
はじめに いまさらですがHTML5 Canvasの勉強をはじめました。 Canvas APIを使ったアニメーションの実装は、jQuery animate()やcss3 keyframesといったものとは考え方が異なります。はじめて調べた時には結構戸惑ったので、同じような方のためにメモしたいと思います。 アニメーション = 再描画 Canvasでは便利なアニメーションメソッドはなく、単純に描画自体を繰り返すことでアニメーションを実現させます。イメージとしては、パラパラまんがのように画面自体が次々と差し替わっていくようなものでしょうか。 アニメーションサンプル なお↓ページで実際の動きを確認できます http://nekoneko-wanwan.github.io/demo/canvas/animation/ Canvasアニメーションの手順 ざっくりと以下のような流れになります 要素を削除
[JS]簡単な実装でパネルを天地左右からアニメーションで表示するスクリプト -notifyMe
表示ページの天地左右からアニメーションでスライド表示するパネルを実装するjQueryのプラグインを紹介します。 デモページ デモではボタンのクリックがトリガーになっていますが、画像やテキスト、ホバーなどに変更することも可能です。 notifyMeの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="assets/css/notifyme.css" type="text/css" /> </head> <body> ... <script type="text/javascript" src="assets/js/jquery.js"></script> <script type="text/javascript" src="assets/js/notifyme.js"></scr
![[JS]簡単な実装でパネルを天地左右からアニメーションで表示するスクリプト -notifyMe](https://cdn-ak-scissors.b.st-hatena.com/image/square/976bf32a2053071e29221414b5e97a2310fd7694/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014103101.png)
[JS]極シンプルなマークアップで、コンテンツを横にスライドさせナビゲーションを表示するスクリプト -Slideout.js
ダウンロードファイルのデモ Slideout.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="index.css"> </head> <body> ... <script src="slideout.min.js"></script> </body> Step 2: HTML ナビゲーション（#menu）とコンテンツ（#panel）を実装します。 idは変更可能です。 <nav id="menu"> ナビゲーション </nav> <main id="panel"> コンテンツ </main> Step 3: JavaScript オプションを定義し、スクリプトを実行します。 <script> var slideout = new Slideout({ '
![[JS]極シンプルなマークアップで、コンテンツを横にスライドさせナビゲーションを表示するスクリプト -Slideout.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/1b5913f9bdd8179129a0b710a9473540ea14fc5c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015030902.gif)
進化が止まらない！CSS3アニメーションを簡単に利用できるスクリプトやスタイルシートのまとめ
スクロールをトリガーに要素をアニメーションで表示したり、ページを表示した時にちょっとしたエフェクトを加えたり、ボタンのホバー時に気持ちいいアニメーションを加えたり、CSS3のアニメーションを簡単に加えることができるリソースを紹介します。 Story Box Story Box -GitHub スクロールをトリガーに54種類のアニメーションを簡単に実装できるjQueryのプラグイン。アニメーションは非常に軽快で、デモ：ユニークの派手なアニメーションでも快適です。 ScrollMagic ScrollMagic -GitHub Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、
msto.jp - it転職 リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
jQuery.Deferredでわかりやすく順番にアニメーションする方法 | スターフィールド株式会社
以前の記事(コチラ→jQueryで順番にアニメーションする方法を考える)で、コールバック関数とdelay()を使って、順番にアニメーションする方法をご紹介しましたが、 今回はjQuery Defferdを使って、処理する順番をよりわかりやすくしてアニメーションする方法をご紹介いたします。 jQuery Defferdの使い方については、コチラのサイトを参考にさせていただきました→「爆速でわかるjQuery.Deferred超入門」 前回の方法を使った場合、並べるアニメーションの数が少ない場合は問題ありませんが、 並べるアニメーションの数が増えてきた場合は、 コールバック関数の中にコールバック関数があるという入れ子の状態が多重になり、 とてもプログラムとして見にくいものとなります。 また、順番を入れ替える必要が出てきたときにも、書き換える作業が煩雑になってしまいます。 その問題を解決してくれ
JavaScriptとCSSは不要！SVGの気持ちいいアニメーションで作られた超軽量のかわいいローディング -SVG Loaders
JavaScriptもCSSも画像も使用せず、SVGで実装された軽快で気持ちいいアニメーションで動くローディングのアイコンを紹介します。 ページに実装する時もJavaScript/CSSは必要ありません。簡単なHTMLでOK！ デモページ SVG Loadersの使い方 使い方は、簡単！ Step 1: SVGファイルをダウンロード 下記ページの右サイドの「Downlaod ZIP」から、SVGファイルをダウンロードします。 SVG Loaders -GitHub Step 2: HTML あとは、imgタグで配置するだけです。 <img src="svg-loaders/puff.svg" /> アイコンのカラーを変更したい時は、svg要素のfill属性を変更します。 <svg fill="#fff" width="140" height="64" viewBox="0 0 140 64
jQuery の animate による同時多発アニメーション
同時多発アニメーションは、jQuery の animate( properties, options ) メソッドの2つ目の引数のoptions（オプション）内で、 queue（キュー）に false を指定することで可能。 queue に false を指定すると、複数のアニメーションを、同時に実行する。 queue に true を指定すると、複数のアニメーションを、順番に実行する。 実装例（サンプル） queue: false queue: true 実装例（サンプル）の動作について 「queue: false」ボタンをクリックすると、オレンジ色のブロックが、幅と高さが同時に、50pxから200pxへアニメーション変化する。 「queue: true」ボタンをクリックすると、オレンジ色のブロックの幅が50pxから200pxへアニメーション変化し、次に、高さが50pxから200pxへア
フリーデザイン素材「ローディングのくるくるアニメーションGIFがいっぱい」 (PIXEL LAB)
以前、シンプルな矢印アイコンセットを公開・配布しましたが、 今回はローディングのくるくるのアニメーションGIFです。 最近は、Flashばっかりではなく、HTML＆JSの実装なんかもやっていて、まあ苦労してるんですけど、 Flashの場合は、ローディングの進捗状況を％で表示する プログレスバーがスタンダートですよね。細かい部分のロードにはクルクルみたいな。 HTML＆JSの実装の場合は、コンプリートのコールバックが中心で、 ローディングの進捗状況を、とるのが難しい場合がほとんどだと思うので、 エンドレスなくるくるアイコンの出番はおおいと思います。 でも、毎回つくるのは、面倒なので、えいやっとまとめて作成してみました。 書き出したアニメーションGIFファイルと、 ソースファイルになるFireworks用のPNGファイルを用意したので、 自由にデザインワークで使ってください。 特徴 6種類×複
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
motiontable
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
【デザイントレンドまとめ】効果的なアニメーションを取り入れているサイトまとめ | Web担当者Forum
Ceaser - CSS Easing Animation Tool - Matthew Lein