刀でズバッと斬るようなアニメーションをHTML・CSS・JS（jQuery）で実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近とある案件で「刀でズバッと切る感じのアニメーションを入れる」ってことになって、実装してみました。ゲームなどでよくある表現ですね。 やってみると、ポイントを押さえれば意外とシンプルに実装できたので、その方法をご紹介したいと思います。 はじめに 今回はこちらの画像を使いたいと思います。 我らが広報ヨシキさんです。 垂直か水平にズバッと斬るアニメーションなら比較的簡単なんですが、このような表現においてよく使うのは�斜めにズバッと斬るアニメーションだと思うので、そっちにしてみます。 素材となる画像を用意する まずはPhotshopで画像をつくります。 ズバッと斬るアニメーションを実装するには、元の画像から3つの画像をつくる必要があります。 上半分の画像 まずは上半分の画像をつくります。 では早速やってみまし
[JS]最近よく見かける縦長ページ用のさまざまなアニメーションが簡単に実装できるスクリプト -ScrollReveal
デモページ フッタはダイナミックに3Dで表示されます。 ScrollRevealの使い方 Step 1: 外部ファイル 当スクリプトとAni.jsを</body>の上、アニメーション用のスタイルシート「animate.css」をhead内に記述します。 <head> ... <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"> </head> <body> ... <script src="anijs-min.js"></script> <script src="helpers/scrollreveal/anijs-helper-scrollreveal-min.js"></script> </body> Step 2: HTML 各要素のアニメーションの設定は、HTMLに記述
[JS]画像を用意しなくていいから簡単！クリッカブルに対応した日本の都道府県の地図を表示するスクリプト -Japan Map
デモページ 2 Japan Mapの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="https://code.jquery.com/jquery-2.1.1.js"></script> <script src="jquery.japan-map.min.js"></script> </head> Step 2: HTML 日本地図を配置するdivをセットします。 <body> ... <div id="map-container"></div> ... </body> Step 3: JavaScript jQueryのセレクタで配置する場所を指定し、スクリプトを実行します。 <script> $(function(){ $("#map-container").japanMap({ on
覚えておきたいDevToolsのコマンドラインAPIまとめ - Qiita
DevTools、使ってますか？ もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや
[CSS]デモが楽しい！要素にclassを与えるだけでさまざまなCSS3アニメーションを適用するスタイルシート -Magic
Slide, Math, Tin, Bomb Magicの使い方 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="yourpath/magic.css"> </head> Step 2: 要素にアニメーションを指定 アニメーションはmagic.css単体で動作しますが、jQueryと組み合わせることでユーザーのさまざまなアクションをトリガーにすることができます。 まずはjQueryのセレクタで要素を指定し、例えばホバー時にアニメーションさせる時はこんな感じに。 $('.yourdiv').hover(function () { $(this).addClass('magictime puffIn'); }); 特定の時間、ループでアニメーションさせる時はこんな感じ。 setInt
[JS]ユーザーがどのようにスクロールしてページを見ているかGoogle Analyticsで解析できるスクリプト -Scroll Depth
ユーザーがページを見た際に、どのくらいスクロールされているのか、また指定した要素がスクロールされて表示されるまでにどのくらいかかるのか、といったデータをGoogle Analytics上で解析できるようにするjQueryのプラグインを紹介します。 実装は簡単、ほんの数行ページに加えるだけです。 Scroll Depth Scroll Depth -GitHub Scroll Depthのデモ Scroll Depthの使い方 Scroll Depthのデモ Scroll Depthは、Universal Analytics, Classic Google Analyticsに対応しており、Google Tag Managerもサポートしています。 対応ブラウザは、Chrome, Safari, Firefox, Opera, IE7-10で、スマフォもiOS, Mobile Opera,
jQuery：チェックされたら or 入力されたら送信可能にするボタンを実装する方法 - NxWorld
割と頻繁に使うので備忘録。 jQueryを使用して「チェックボックスにチェックされたら送信可能にするボタン」と「文字が入力されたら送信可能にするボタン」をそれぞれ実装する方法です。 特にチェックボックスの方は利用規約などに同意してもらったかの部分で用いたりと使う場面が多いのではないかと思います。 チェックボックスにチェックされたら送信可能にするボタン ページが表示された際はイメージ左のようにボタンにはdisabledが指定されて送信できない状態になっています。 それを「利用規約に同意します」というテキスト横にあるチェックボックスにチェックが入ったら、ボタンに指定してあるdisabledを解除して送信可能にするというものです。 実装にはjQueryを使用するので予め読み込ませおき、それぞれ下記のように記述をします。 <input type="checkbox" id="check" /><l
[JS]Appleのプロダクトページのように、スクロール時に各要素をさまざまなアニメーションで表示させるスクリプト -scrollReveal.js
スクロールすると商品写真がアニメーションでスライド表示するAppleのプロダクトページのように、スクロールした時、ロードした時など、ページ内の要素がビューポートに表示した時に、各要素それぞれをさまざまなアニメーションで表示させることができる単体のスクリプトを紹介します。 デモのアニメーション scrollReveal.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして</body>の上あたりに記述します。 jQueryなど他のスクリプトは必要ありません。 <body> ... ... <script src="js/scrollReveal.js"></script> </body> Step 2: HTML スクリプトをセットしたら、あとはアニメーションで表示させる要素に「data-scrollreveal」を追加するだけです。 <h1 data-scrollr
[JS]ヘッダをスクロールに合わせて表示・非表示する1ランク便利なスクリプト -Headroom.js
スクロールベースのページを実装する時にぴったり！ ヘッダをユーザーのスクロール操作に合わせて表示・非表示するスクリプトを紹介します。スクロールのダウン・アップでclassを付与するので、ヘッダに限らず他にもいろいろと使えそうです。 スクリプトは単体で動作しますが、jQuery/ZeptoやAngularJSのプラグインとしても動作します。 Headroom.js 下にスクロールすると、ヘッダが上部に吸い込まれます。 一旦消えたヘッダは、上にスクロールするとどのポジションからでも表示されます。 この「どのポジションからでも」というのがこのスクリプトの便利なところです。 スクリプトにはさまざまなオプションが用意されており、デモページで楽しめます。 デザインは似ていますが、こちらは「Playroom」です。 デモページ ヘッダの非表示・表示のタイミングが細かく設定でき、アニメーションのエフェクト
ドラッグ＆ドロップで再編成できるPinterest風レイアウト作成プラグイン「jQuery.Shapeshift」:phpspot開発日誌
jQuery.Shapeshift ドラッグ＆ドロップで再編成できるPinterest風レイアウト作成プラグイン「jQuery.Shapeshift」。 最初に一度出して終わりなレイアウトではなくて、ユーザがドラッグ＆ドロップでレイアウトを変えられるプラグインです。 ドラッグ中もアニメーションして動きがなかなか面白いです。 関連エントリ Pinterest風のWordPressテーマ集 Twitter,Facebook,YouTube,PinterestのRSSフィードURLまとめ PinterestのPinIt機能実装jQueryプラグイン FacebookやTwitterの内容をまとめてPinterest風に表示できるPHPアプリ「Infinite-social-wall」
[JS]lightboxの進化形、レスポンシブ対応で画像を拡大表示するスクリプト -SuperBox
lightboxよりJavaScriptと画像ロードの依存を少なくした、レスポンシブ対応で画像を拡大表示するjQueryのプラグインを紹介します。 デモページ：幅780pxで表示 SuperBoxの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="css/style.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/superbox.js"></script> Step 2: HTML まずは、基本構造です。 HTML5のdata属性で拡大する画像を指定し、classに「superbox-im
[JS]アニメーションが気持ちいい！複数のパネルをiOS風のエフェクトで切り替える -Kontext
CSSの3Dアニメーションを使った、iPhone, iPadアプリで見かけるパネル切替のエフェクトをウェブページに実装するスクリプトを紹介します、 Kontext -GitHub Kontextのデモ Kontextの使い方 Kontextのデモ デモでは3枚のパネルをダイナミックなアニメーションで切り替えます。 操作は、下部のナビゲーションとキーボードの矢印キーに対応しています。 Kontext -デモページ Kontextの使い方 スクリプトは単体で動作するので、jQueryなどは必要はありません。 Step 1: 外部ファイル 当スタイルシートをhead内に、スクリプトを<body>の上に外部ファイルとして記述します。 <head> <link rel="stylesheet" href="css/kontext.css"> <link rel="stylesheet" href="
[JS]最近リリースしたjQueryのプラグインのまとめ -2013年1・2月
紹介済みから未紹介のものまで、最近リリースしたjQueryのプラグインをまとめました。 去年までは33+1選としてましたが、今年から新たなフォーマットで。
jQueryの可能性は無限大！？プラグインまとめ番外編 - Webデザイン初心者向けのあれこれ
どうもこんばんは、僕です。 今まで何度かjQueryプラグインを紹介してきましたが、今日は番外編？と言った感じです。 一応今までのプラグインまとめ記事はこちらです。 ・ひと工夫でこんなことも！ユニークなjQueryプラグイン5つ集めてみました ・すっごい動くよ！テキストをアニメーションさせるjQueryプラグイン集めてみた ・今更ながらみんな大好き（？）「lightbox」プラグインを集めてみました ・jQueryを使ったスライド・ギャラリーのライブラリを7個集めてみた ・jquery-tubular http://code.google.com/p/jquery-tubular/ ページの背景にYouTubeの動画を指定することができます。 背景を考える幅が広がるのではないでしょうか。 ・jquery.snipe http://rayfranco.github.com/jquery.sn
なんとWordPressプラグインまである。多彩なエフェクトでレスポンシブなフリーのjQueryスライドショー『Camera』 / Maka-Veli .com
なんだか話題になってるみたいですね？『Camera』というスライドショー。 特徴としては レスポンシブ 多機能、ハイクオリティ 多彩なエフェクト スキンも多数用意 WordPressで管理できる という感じなのですが、WordPressプラグインは本当にびっくりしました。 ウィンドウリサイズするとちゃんとレスポンシブ WordPressプラグイン。管理画面もしっかり用意されている 管理画面上でエフェクト等が細かく設定可能 他にも多数機能あり フリーなんですが、サポート（寄付）してね、というスタンスなのでもしよければ寄付して使ってみてはいかがでしょうか Camera http://www.pixedelic.com/plugins/camera/ WordPressはこちらから http://wordpress.org/extend/plugins/camera-sli
[JS]便利で簡単！スクリプトやスタイルシートをブラウザ・OSごとに分岐して利用できる超軽量高速のスクリプト -Conditionizr
IE6/7/8/9/10, Firefox, Chrome, Safari, Operaなどのブラウザだけでなく、Win, Mac LinuxなどのOS、iPadやiPhoneのRetinaディスプレイ用に条件分岐して、外部スクリプトやスタイルシートをロードさせたり、classを付与してHTMLで利用できたりする超軽量高速の単体で動作するスクリプトを紹介します。 Conditionizr Conditionizrの特徴 Conditionizrの使い方 Conditionizrの特徴 ConditionizrはjQueryより50%高速に動作し、条件付きのJavaScriptとCSSをサポートする3KBの超軽量スクリプトです。 条件付きのHTMLタグ 条件付きの外部スクリプトやスタイルシートのロード カスタマイズされたスクリプトにも対応 IE, Firefox, Chrome, Safar
HTML5 × CSS3 × jQueryを真面目に勉強 – #12 Pinterest風グリッドレイアウトを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPinterest(ぴんたれすと)。従来のグリッド式レイアウトのように高さが均一のグリッドが整然と並べられているのと違い、異なる高さのグリッドが画面いっぱいに敷き詰められているレイアウトが特徴的でオサレです。（※こういったレイアウトはピンボード風と呼べば良いのでしょうか…？） Pinterest とはピンボード風の写真共有のソーシャル・ネットワーキング・サービス。特に女性に人気がある。ウェブサイトとアプリはテーマに基づいて写真のコレクションを作ることが出来る。サイトのミッションステートメントは「面白いと感じるものを通じて世界全員をつなぐ」。アメリカ Palo Alto にある Cold Brew Labs によって運営されている。 Wikipediaより引用(http://ja.wikipedia.org/wiki/Pinterest) そんな女子力の
[JS]簡単で便利でしかもかっこいい！ソーシャルメディアのボタンを複数パターン同時に設置できるスクリプト -#50C1AL
ページ上のボタンやテキストなどにclassを追加するだけで、簡単にソーシャルメディアのボタンをかっこよく設置できるjQueryのプラグインを紹介します。 #50C1AL #50C1AL -GitHub #50C1ALの特徴 #50C1ALのデモ #50C1ALの使い方 #50C1ALの特徴 主要なソーシャルディアを簡単にウェブページに設置できます。 46種類のかっこよくデザインされたアイコンを用意。 ページへの設置は、classを書くだけ！ 同じページに複数の設定を設置可能。 アニメーションやブラーなど多彩なオプション。 #50C1ALのデモ デモでは、ページ内に2つの設定を配置しています。 まずは、ボタンの方から。 テキスト選択で表示 #50C1ALの使い方 Step 1:外部ファイル まずは、head内に外部スタイルシートを配置します。 <link rel="stylesheet" h
普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」:phpspot開発日誌
ParamQuery jQuery Grid Plugin 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」 ありきたりなカッコいい、とはいえないような以下のテーブルがあったとします プラグインで初期化すれば、ソータブル、エディタブル、なクールなテーブルに早がわり これは5,6年前でいえば魔法だと思う方は少なくないでしょう。 関連エントリ レスポンシブなテーブルを作るjQueryプラグイン「MediaTable」 テーブルをグラフに変換してくれるjQueryプラグイン レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」 テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイン「jQuery Table So
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]チェックしておきたいjQueryのプラグインのまとめ -2013年3・4月