[JS]物理法則に基づいたさまざまなアニメーションを実装できるスクリプト -Dynamics.js
デモページ 物理法則に基づいたさまざまな動きは、ブルーのプルダウンからいろいろ試すこともできます。 Dynamics.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="dynamics.js"></script> </body> Step 2: JavaScript 適用するエレメントを指定し、アニメーションを設定します。 elは要素、el内のプロパティはアニメーションさせるプロパティと値、typeはアニメーションの種類、frequency, frictionはアニメーションの細かい設定、durationはタイミングです。 var el = document.getElementById("logo") dynamics.animate(el, { translateX: 350,
![[JS]物理法則に基づいたさまざまなアニメーションを実装できるスクリプト -Dynamics.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/5bf61a2d1b7c4461469ad3d2119edd7583b7f517/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015062806.gif)
ページやブロック要素の切り替えがかっこいいプラグイン6選（jQuery・JSなど） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、デザイナーのモモコです。 今回は要素を切り替える際にかっこいいアニメーション表現がつけられるプラグイン、スクリプトを6つご紹介します。 数あるプラグインの中でも実装が難しくない、デザイナーにも優しい仕様のものを選びました。 要素の切り替えがかっこいいプラグイン・スクリプト6選 Animsition http://git.blivesta.com/animsition/ 簡単、シンプルなページ切り替えに動きが付けられるjQueryプラグイン。 フェードアウトや回転、ズームなど58種類のデモが用意されており、それぞれパラメータで細かい調整ができるようになっています。 iconate http://bitshadow.github.io/iconate/ クリックで2つのアイコンフォントをかっこよく切り替えられるJSプラグイン。 全部で19種類のアニメーションがそろっています。
【jQueryアニメーション】イラストの卵を一定間隔でゆらゆら揺らしてクリックでひよこ登場！！｜Tips*Blog｜株式会社コプロシステム
こんにちは、UXデザインの松山です。梅雨入りでジメジメしてキノコが生えそうですね。 ちなみに、キノコの中では「なめこ」が一番好きです。 今回、Tips*Blogの更新2回目となります。1回目は「ストリートビューの道案内」をご紹介しました。今回はjQueryと要素を回転させるプラグインを使用したアニメーションのテクニックをご紹介します。 jQueryのプラグインである「jQueryRotate」を使い卵をゆらゆら揺らすアニメーションを作ってみましたので、そのやり方を解説します。 WEBサイトで卵を揺らすという機会はほとんどないと思いますが、覚えておけば何かの役に立つ時が来るはずです。 現在、WEBで簡単なアニメーションというとCSS3が主流だと思いますが、今回はjQueryでの実装方法をご説明します。 今回作成したサンプルはこちら 今回の内容 一定間隔で複数の卵を別々にアニメーション クリッ
プレゼン用のスライドショーを実装する、わずか1KBなのに多彩なエフェクトを備えタッチデバイスにも対応したスクリプト -Bespoke.js
コンカーブ 凹状に配置したパネルをスライドします。 Bespoke.jsの使い方 スライドショーの実装は簡単で、3ステップです。 Step 1: HTMLと外部ファイル スタイルシートとスクリプトを外部ファイルとして記述し、各パネルはsection要素で実装し、articleで包みます。 スタイルシートはテーマごとに変更します。 <link rel="stylesheet" href="path/to/my/theme.css"> <article> <section>Slide 1</section> <section>Slide 2</section> <section>Slide 3</section> </article> <script src="bespoke.min.js"></script> <script src="path/to/my/script.js"></scri
【jQuery Tips】スクロールで画像がめくれる動きを表現する
こんにちは、生形です。 最近、嬉しいことにアシアルの書籍の売れ行きが軒並み好調です。 6月に入り、弊社岡本が執筆した「イラストでよくわかるPHP」が、Kindleの月替わりセール対象商品になりました。 なんと699円（紙の本の価格の64%OFF！）で購入いただけます。 現在、アマゾンWebプログラミングカテゴリの売れ筋ランキング１位です！ セールは今月いっぱいですので、ぜひこの機会に。 つづいて、私の執筆した「スラスラわかるJavaScript」に増刷がかかりまして、 個人的な目標の1万部まであと少しというところまで来ました！ セミナー等でお会いした方には本を買いましたよと声をかけて頂くこともあり、大変ありがたく思っております。 購入者特典としてjQueryのTips集を翔泳社のスラスラわかるシリーズ公式サイトで配布していますので、 ご存じなかった方はぜひダウンロードしてみて下さい！ さて
【jQuery】CSS3のTransform3DでGPUによる滑らかなアニメーションを実装しよう【CSS3】 | スターフィールド株式会社
スターフィールド株式会社 > Blog > 制作 > css3 > 【jQuery】CSS3のTransform3DでGPUによる滑らかなアニメーションを実装しよう【CSS3】 jQueryを使うと、手軽にアニメーションを実装することができて、とても便利です。 しかし、jQueryによるアニメーションは処理がどうしても重くなります。 特にスマホなどでは、元々アニメーションがネイティブアプリのUIに多く使われているため、 jQueryによるアニメーションがもっさりとした動きに感じることが多いのではないでしょうか。 jQueryのアニメーションは、通常CPU(コンピュータの総合的な演算装置)により処理されています。 CPUは元々画像処理だけに最適化されたものではない上に、アニメーションだけでなくコンピュータ全体の演算を担っているため、 CPUでアニメーション処理を行うとどうしても処理が遅くなっ
[JS]変形アニメーションがかっこいい！アイコンをクリック・タップすると別のアイコンに変えるスクリプト -iconate.js
オフキャンバス メニューなどで最近よく見かける、アイコンをクリック・タップすると、別のアイコンにアニメーションで変形させる単体のスクリプトを紹介します。 実装も非常に簡単で、それぞれのアイコンとアニメーションを指定するだけでOK。 「zoomOut」「rubberBank」のアニメーション例 iconate.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="iconate.min.css"> </head> <body> ... コンテンツ ... <script type="text/javascript" src="iconate.min.js"> </body> Step 2: HTML アイコンを配置します。 デモではFont Awesomeのアイ
![[JS]変形アニメーションがかっこいい！アイコンをクリック・タップすると別のアイコンに変えるスクリプト -iconate.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/3e52b762682773fbeb81c27963f72395fbbf5fea/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015052611.png)
CSSのfilterプロパティを使ったメイン部分がぼけるサイドメニューの作り方
こんにちは、井畑です。 前々から好きでよく見ているデザインギャラリーサイトMUUUUU.ORGでサイドメニューがぬっと出てきてメイン部分の背景がぼやけるのかっこいいなーと思ったので、実装できるか挑戦してみました。 調べたところ、CSSのfilterを使うのがお手軽な感じだったので、それを採用しています。それではどうぞー!! サイドメニューがぬっと出て来てぼやけるサイドメニューの作り方 順を追って説明します。まずは基本的なサイドメニューの作り方です。 まずは、サイドメニューを作る 今回はぼやけるのを確認しやすくするために、背景を写真にして作成しました。ねこねこ。右上の「menu」を押すとサイドメニューが現れます。 See the Pen 普通のメニュー by Tetsuya Ihata (@tihata) on CodePen. サイドメニュー作成時のポイント ポイントはメニューとメインの部
豊富なスライドアニメーションが揃っているjQueryプラグイン「Pogo Slider」 – bl6.jp
Pogo Sliderは豊富なスライドアニメーションが揃っているjQueryプラグインです。スライドダウン、スライドアップ、スピン、3Dフリップ、回転などスライダーに関するたくさんの種類のアニメーションが用意されています。 以下のページからPogo Sliderの実際のデモを確認することができます。 デモ デモではスライド、ブロック、スプリット、zip、expand、fold、フェードなど数多くのスライドトランジション動作を確認することができます。他にもスライドダウン、スライドアップなどのエレメントトランジションもチェックできます。 オプションで設定できる項目もかなりあるので、カスタマイズしたスライダーを実装したい�方にはピッタリですね。 自動再生やレスポンシブのオン／オフなどを指定することができます。 使い方はこんな感じでマークアップしていきます。 <div class="pogoSli
[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js
デモのアニメーションGIF ここでは「Esc」キーを拡大画像から元画像に戻す際に使用していますが、スクロールしてコンテンツに戻る時のアニメーションも非常に軽快です。 Zoom.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 アニメーションのエフェクトはBootstrapのtransition.jsに依存しており、Bootstrapのjsファイルかtransition.jsを記述します。 <head> ... <link rel="stylesheet" type="text/css" href="css/zoom.css"> </head> <body> ... コンテンツ ... <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/j
![[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/d408ea9798d5866f690b92bcfb70e29e4a50a739/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015051309.png)
スクロールイン時のボックス要素の表示アニメーションを設定できる「Box Loader」:phpspot開発日誌
Box Loader スクロールイン時のボックス要素の表示アニメーションを設定できる「Box Loader」 最近流行りのスクロール時のアニメーション効果を簡単実装できて便利そうです 関連エントリ ページスクロールに応じて要素を様々にCSSアニメーションしつつ表示できる「Story Box」 スクロールを上に移動でバー表示ができるjQueryプラグイン「scroll-up-bar」 固定要素をスクロール位置によって切り替えられる「Midnight.js」 ブロック要素の下部をスクロールに応じ曲げてカッコよくするサンプル「Curved Cut」
[JS]一見普通のアンダーライン、ホバーすると弦を弾くようにアニメーションし、音を奏でる美しいスクリプト -underlineJS
アンダーラインのデザインの美しさ、アニメーションの楽しさにこだわったスクリプトを紹介します。 ↓はアニメーションGIFなので音はありませんが、実際のデモでは弦楽器のような音を奏でます。 びよ～んとなるのが、かなり気持ちいいです。
![[JS]一見普通のアンダーライン、ホバーすると弦を弾くようにアニメーションし、音を奏でる美しいスクリプト -underlineJS](https://cdn-ak-scissors.b.st-hatena.com/image/square/4994629c775aed71d12401ca0a2937780f88e550/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015042703.gif)
2015年、Web制作者が押さえておきたいCSSの各種リセット、アニメーション、フレームワーク、アイコンのまとめ
制作時に欠かせないリセット用のCSS、ページのグリッドやレイアウト・コンポーネントが用意されたフレームワーク、クリック・タップやホバーやスクロールを楽しませるアニメーション、モバイルにもフレンドリーなCSSでつくられたアイコンなど、ゼロから用意するのはかなり大変なCSSの便利なフレームワークを紹介します。 リセット用のCSSはこの3種類 レスポンシブ対応の定番フレームワーク Material Designに対応したフレームワーク さまざまなアニメーションが簡単に実装できるCSS かわいいアニメーションを使ったローダー 使いやすいアイコンフォント・Pure CSSのアイコン リセット用のCSSはこの3種類 HTMLの各要素のブラウザごとに異なる差異をなくし、意図した通りに実装できるようスタイルをリセットするスタイルシート。 Reset CSS 2.0 HTMLの各要素のmarginやpadd
[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js
最近のWebページで人気があるのは、ビジュアルの連続性。 パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の要素にアニメーションで表示される超軽量（1.2KB）スクリプトを紹介します。 モーダルウインドウとサイドバーのデモ コマを落としているので分かりにくいですが、ボタンをクリックするとモーダルウインドウやサイドバーに、アニメーションで変形して表示されます。 cta.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="src/cta.js"></script> </body> Step 2: HTML 一つ目のデモ「タイル状コンテンツ」のHTMLは、こんな感じです。 data
![[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/3b796beb0e3307e8d7086ea2aaa29efd7e12d443/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015042101.png)
VideoShader をオープンソース化しました
昨年 iTunes ストアで公開し、オースチンの SXSW でもブースを持ってデモをした VideoShader ですが、このたび一周年を記念して、エンジン部分のソースコードをすべてオープンソース化しました。 https://github.com/snakajima/videoshader Instagram などが行っている写真のフィルター（「Toy Cameraフィルター」や「アニメフィルター」）は、複数のフィルターを組み合わせて実装しますが、カメラから入ってくる映像をリアルタイムで処理する際には、高速に動作するフィルターをパイプライン上に繋げて実行する必要があります。 数年前までは、高性能なパソコンでしか無理でしたが、GPU 性能の向上により、ようやくスマフォでもそんな処理が可能になりました。 VideoShader は、スクリプト言語 VSScript を使ってビデオパイプラインを
伝説のディズニーアニメーターから学ぶ、UXを向上させる5つのアニメーション/ SXSW 2015 UXレポート
先日、テキサス州オースティンで開催されたSXSW(The South by Southwest：サウス・バイ・サウスウエスト) 2015にAppSociallyとしてブース出展してきました。SXSWは、音楽, フィルム, インタラクティブの3部門からなるイベントで、私たちはインタラクティブ部門のTrade showに参加してきました。 SXSWは、先端の企業が出展するTrade showも注目されていますが、それだけでなく、世界中から著名人が集まり同時多発的に開催される1000以上のセッションも注目の的です。 ブース運営の傍ら、私もセッションに参加して、いろいろと面白い話を聞くことが出来たので、その様子を紹介していきたいと思います。 ディズニーアニメーターとR/GAによるUXで効果的なアニメーションの話 http://schedule.sxsw.com/2015/events/event_
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Dynamics.js
Transit - CSS transitions and transformations for jQuery
CSSの実用的なテクニックから素晴らしいアイデアまで！スタイルシートの最新テクニックのまとめ
http://11neko.com/menu-style-inspiration/
