[B! JavaScript][animation] koda3のブックマーク

koda3 id:koda3

JavaScriptとanimationに関するkoda3のブックマーク (11)

Barba.js - ページ遷移をアニメーションで実行 MOONGIFT
Webページは一般的にリンクをクリックするとURLが変わってページ全体が再読み込みされます。ページのローディングも時間がかかりますし、ユーザビリティとしてイケてるとは言いがたいでしょう。そこで使ってみたいのがBarba.jsです。URLをクリックした時のページ遷移をアニメーションをまじえつつ行ってくれます。 Barba.jsの使い方デモです。クリックすると写真が拡大されます。これはすべて別なHTMLです。こちらはスライド的なページ遷移です。スマートフォンアプリの画面遷移に近いかも知れません。さらにアイコンにしたパターン。ページを遷移する際には一旦ページの一番上にスクロールしてからコンテンツが表示されます。 Barba.jsはSPA（シングルページアプリケーション）を構築する際に使えそうなソフトウェアです。一つのHTMLで管理しているとメンテナンスが大変になりますのでBarba.js
koda3 2016/09/01
animation

javascript
リンク
[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ
縦長ページのスクロールエフェクトで再スクロールや上にスクロールする時にも適用したい、高さ指定のない画像を読み込む時にスクロールバーががっくんがっくんするのを避けたい、美しいレイアウトを簡単に実装したい、そんな便利でちょっとずるいスクリプトを紹介します。 ScrollTrigger ScrollTriggerの使い方 Scrollbear Scrollbearの使い方 Barba.js Barba.jsの使い方 Isometric Grids Isometric Gridsの使い方 Multiple.js Multiple.jsの使い方 anime.js anime.jsの使い方 ScrollTrigger ユーザーがスクロールすると、要素にアニメーションが適用されるスクリプトはいくつかありますが、その多くは一度アニメーションが適用されると再び適用されません。下にスクロールしてアニメーショ
koda3 2016/07/15
javascript

animation
リンク
Anime.js | JavaScript Animation Engine
All-in-one animation engine. A fast and versatile JavaScript library to animate the web.
koda3 2016/06/28
animation

javascript
リンク
Googleも推奨！アニメーションライブラリTweenMaxの使い方　入門編 — un-Tech
ごきげんよう。フーミンです。「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer
koda3 2015/11/26
javascript

animation
リンク
[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ
縦長のランディングページなどで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。プロダクトやサービスを魅せるスクリプト、さりげないけど気持ちいいアニメーション、縦長ページならではのナビゲーション、レイアウト補助など、全コンテンツを1ページにおさめ、スクロールを前提にしたページならではの面白くて役立つスクリプトが満載です。
koda3 2015/11/25
試してみたい

javascript

design

animation
リンク
CSSアニメーションの終了イベントを取得してくれるJavaScript「Detecting CSS Animation and Transition End with JavaScript」｜BLACKFLAG
jQueryなどでアニメーションを実装した際にはアニメーション終了時に処理を実行させるのは比較的簡単なのですが CSSアニメーション制御の場合は少々面倒だったりします。そんなCSSアニメーションの終了イベントを取得してくれるJavaScript 「Detecting CSS Animation and Transition End with JavaScript」がとても便利そうだったのでご紹介。 Detecting CSS Animation and Transition End with JavaScript – Osvaldas Valutis Detecting CSS Animation and Transition End with JavaScript – Osvaldas Valutis デモページはこちらスクリプトはjQueryで使用するパターンと jQueryに
koda3 2015/09/29
javascript

animation
リンク
CSSアニメーションの終了をJSで検知してコールバックを実行できるJS:phpspot開発日誌
Detecting CSS Animation and Transition End with JavaScript ? Osvaldas Valutis CSSアニメーションの終了をJSで検知してコールバックを実行できるJS CSSアニメーションの終了と共にJSを発火できるので便利そうです。関連エントリ CSSアニメーションで音楽に視覚効果を与えられる「css-visualizer」ページスクロールに応じて要素を様々にCSSアニメーションしつつ表示できる「Story Box」 CSSアニメーションによるクリックアニメーション実装チュートリアル CSSでアニメーションを交えながらコンテンツをカッコよくフィルタリングするデモ WEB上でCSS3アニメーションを組み立てられる「Bounce.js」
koda3 2015/07/03
animation

javascript

CSS
リンク
[JS]一見普通のアンダーライン、ホバーすると弦を弾くようにアニメーションし、音を奏でる美しいスクリプト -underlineJS
アンダーラインのデザインの美しさ、アニメーションの楽しさにこだわったスクリプトを紹介します。 ↓はアニメーションGIFなので音はありませんが、実際のデモでは弦楽器のような音を奏でます。びよ～んとなるのが、かなり気持ちいいです。
koda3 2015/04/27
javascript

animation
リンク
Home
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
koda3 2015/04/13
animation

javascript
リンク
[JS]気持ちいいアニメーションを伴ったさまざまなスクロールエフェクトが簡単に実装できてしまうスクリプト -Space.js
スクロールすると、ページに配置されているあらゆる要素が3D空間にあるみたいに気持ちよくアニメーションするjQueryのプラグインを紹介します。さまざまなエフェクトが驚くほど簡単に実装できるので、お試しあれ！ Demo 2: Out of Space Space.jsの使い方 Step 1: 外部ファイル当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="[jquery]"></script> </head> <body> ... コンテンツ ... <script type="text/javascript" src="space.min.js"></script> </body> Step 2: エフェクトの設定まずは、コアとなるフレームを作成します。この中に
koda3 2015/04/03
jquery

animation

javascript

design
リンク
アニメーションを高速化する「Velocity.js」を使ってみた。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、CTOのづやです。今更ですが、jQueryのプラグインでアニメーションを高速化してくれる「Velocity.js」を使ってみました。今回は、簡単な使い方をまとめたのでご紹介したいと思います。まずは準備から http://julian.com/research/velocity/ 上記の公式ページにjQueryやtransitとのアニメーションの比較をできるデモがありますが、他よりかなり軽快に動くようです。モバイル対応もいい感じらしいですよ。使うときは、ソースをとってくるか、用意されているCDNなどからVelocity.jsを読み込みます。  <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>  <script s
koda3 2015/03/06
試してみよう

animation

javascript

design
リンク
1