こんなにあった！UIデザイナー向けアニメーションライブラリー最新ベスト9
Webサイトをおしゃれに、かっこよく演出するアニメーション系JavaScriptライブラリー。デザイナーにも使いやすいライブラリーをまとめました。デモを見るだけでもアイデアがひらめくかも？ Webデザインはこの10年間で大きく変わりました。2007年頃は雑誌のように静的なレイアウトが主流でしたが、2017年には数千のパーツが連動して伸縮しながら移動するデザインも可能になりました。 これから、優れたUIデザイナーになるにはWebアニメーション技術に関する知識も必要です。 この記事ではUIデザイン向けの良質なアニメーションライブラリーを9つ紹介します。現時点での最新の情報と、各ライブラリーの強みや弱み、向き不向きをまとめたので、タスクに適したライブラリーを選んでください。 「コーディングプロ級」の開発者ではなくコーディングもこなせるUIデザイナーの視点で各ライブラリーを評価しました。CSSだけ
setTimeoutはダサいぞ。JavaScript Promiseを使って処理を順番に実行しよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
皆さん、JavaScriptで「アニメーションAを3秒かけて実行したあと、アニメーションBを実行」などと、順番に処理を実行したいとき、どのようにしていますか？ 以下のように setTimeout() を使って実現しているでしょうか？ function serialAnim () { // ...アニメーションAの処理 setTimeout(() => { // ...アニメーションBの処理 }, 3000) } うーん、ダサいですね。 それとも以下のようにコールバックを利用しているでしょうか？ animA(animB) function animA (callback) { // ...アニメーションAを実行した後に、callback(この例ではanimB)を実行する処理 } setTimeout() は、保守性に問題があることはもちろん、そもそもが「◯秒以降」に実行されるという関数なので
ページ読み込み時に実行するjavascriptについてのTips | Tips Note
ページ読み込み時に実行するjavascriptは 指定方法がいくつも存在するため、 複雑になりやすく、度々エラーの原因になります。 【指定方法の種類】 ■onloadイベント ページ読み込み時に実行したい処理がある場合、 通常はjavascriptのonloadイベントを使用します。 BODY要素にonload属性を追加したり、 下記のようなjavascriptの指定を追加する方法がよく見られます。 window.onload = function(){ // ページ読み込み時に実行したい処理 } ■jQueryのreadyメソッド ライブラリとしてjQueryを使用している場合は、 readyメソッドを使用して、ページ読み込み時にjavascriptを実行することができます。 $(document).ready( function(){ // ページ読み込み時に実行したい処理 }); 【
ESLintでJavaScriptの構文チェックを始める ｜ Tips Note by TAM
ESLint の考え方は「Everything is pluggable」。 全てのチェック項目は自由にON/OFFの切り替えが可能で、独自のルールを作成して追加することも可能です。 また既存のルールについては比較的ドキュメントが充実しています。 ・eslint/docs/rules at master · eslint/eslint JSCS 構文チェックも可能ですが、エラーが発生した箇所をフォーマットに合わせて自動修正させることが可能です。 2016年4月、JSCSはESLintに統合されることが発表されました。 すぐできるESLintの使用環境 ESLint はカスタマイズの自由度がとても高い構文チェックツールですが、 複雑なカスタマイズをしようとすると、それなりに手間がかかります。 使ったことが無い方は、とりあえず手間を掛けずに一度ツールを使ってチェックしてみたい、 と思われるかも
h2vR.js - 縦書きを実現するJavaScript - tategaki.info
h2vR.js 「より簡単に」 「より柔軟に」 ウェブページで縦書き表示を実現するJavaScript "h2v.js" をリニューアルしてみました。 設置・設定方法や動作を今までより簡素化することにより、 レスポンシブデザインを採用しているページヘの設置が容易に。 WordPress や Movable Type などへの設置がより簡単に。 …という具合になっています。「これから縦書きウェブページを作ってみよう」と思っているならば、ぜひ h2vR.js をお試しください。 使い方は簡単です。 h2vR.js と h2vR.css をドキュメントに読み込んで、 適宜スタイルを指定して、 縦書きにしたいエリアに特別なクラス名を設定する。 …と、それだけです。 h2vR.js では、テキストだけでなく、縦書きエリア内の画像やブロック要素なども適切にレイアウトします。そのため、縦書き表示にあたっ
ローディングをかっこ良くみせるJavaScriptライブラリ「PleaseWait.js」
twitter facebook hatena google pocket ページの読み込みが長いと離脱につながってしまうので、ローディング画像を見せることがあるかと思います。 そのローディング画像をかっこ良く見せられるJavaScriptライブラリPleaseWait | A Loading Page for your SPA by Pathgatherを紹介します。 sponsors 使用方法 PleaseWait | A Loading Page for your SPA by Pathgatherからファイル一式をダウンロード。 body内に下記を記述するだけで完成です。 <link href="please-wait.css" rel="stylesheet"> <script type="text/javascript" src="please-wait.js"></scrip
ローディングアイコンをオシャレに実装することができる「PleaseWait」 – bl6.jp
PleaseWaitはローディングアイコンをオシャレに見せることができるJavaScriptライブラリです。ローディング中、退屈しがちなユーザーにとって少しは気を紛らわせることができそうですね。 以下はPleaseWaitの実際のデモになります。 デモ デモでは縦長の連続したバーが伸縮するようなアニメーション付きのローディングアイコンが表示されます。アニメーションがあることで実際のローディング時間が短縮されるわけではありませんが、ちょっとした退屈しのぎにはよさそうですね。 ライブラリ自体はシンプルなので、手軽に実装できるのがいいと思います。使い方もこんな感じでロゴ画像、背景色、メッセージなんかを指定することができます。 <script type="text/javascript"> window.loading_screen = window.pleaseWait({ logo: "log
一定距離スクロールするとニョキッと出てくるページの先頭に戻るボタン | NAKAZI LAB.（ナカジラボ）
デモページ JavaScript (function($){ $(function() { var intervalValue = 300; var pageTopID = '#returnToTop'; $(function(){ $(window).scroll(function () { var distanceTop = $(document).scrollTop(); if (distanceTop > intervalValue) { $(pageTopID).slideDown('fast'); } if (distanceTop < intervalValue) { $(pageTopID).slideUp('fast'); } }); }); }); })(jQuery); デモページ
jQuery不要！カレンダーをサクッと表示するJavaScript「Rome」
twitter facebook hatena google pocket 日時を入力させる際にカレンダーが表示されると直感的でわかりやすいと思います。 RomeはjQueryに依存することなく、2ファイルのみで動作するJavaScriptのカレンダーライブラリです。 sponsors 使用方法 Romeからファイル一式をダウンロード。 まずは入力エリアを記述。 <input id='dt' class='input'> 次にCSSをhead内に。 <link href='rome.css' rel='stylesheet' type='text/css' /> 最後にjsを入力エリアより下に記述すればあっという間に完成です。 <script type='text/javascript' src='rome.js'></script> <script type="text/javascri
[JS]エレメントやスライドにさまざまなアニメーションを適用できるスクリプト -Pogo Slider
divなどで実装したパネル、複数の画像やエレメントを配置したスライダーなどにさまざまなアニメーションを適用できるjQueryのプラグインを紹介します。 ↓は、エレメントのデモです。 demo: エレメントのエフェクト Pogo Sliderの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="pogo-slider.min.css"> </head> <body> ... <script type="text/javascript" src="jquery-1.11.0.min.js"></script> <script type="text/javascript" src="jquery.pogo-slider.min.js"></scrip
![[JS]エレメントやスライドにさまざまなアニメーションを適用できるスクリプト -Pogo Slider](https://cdn-ak-scissors.b.st-hatena.com/image/square/854418a1d6f45d24d878040e9370f59845bb3b0c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014091702.png)
[JS]jQueryより高速で軽量なVanilla JSを使った画像スライダーのスクリプト -Ideal Image Slider
デモページ：Standard 操作は左右のナビゲーション、矢印キーを使ったキーボード操作にも対応しています。 外観はCSSのテーマファイルで変更することができ、アニメーションの変更、ビュレットのナビゲーション、サムネイルのナビゲーション、フルスクリーンスライダー、video/audioもサポートしています。 デモページ：Using API デモページ：Using Events デモページ：Multiple Sliders ダウンロードファイルに含まれているデモは、Retina用の画像も用意されています。 デモを幅480pxで表示 Ideal Image Sliderの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートを外部ファイルとして記述します。 「default.css」はスライダーの外観を定義したデフォルトのテーマです。 <head> ... <link rel="s
![[JS]jQueryより高速で軽量なVanilla JSを使った画像スライダーのスクリプト -Ideal Image Slider](https://cdn-ak-scissors.b.st-hatena.com/image/square/c553218678c826bd3f32579ee04c4e31354c3815/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014091003.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
シンプルで軽量なプログレスバー実装の為のJSライブラリ・「nanobar」
simplelib with jQuery
http://kobotake.com/fade-toka