[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)
[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 Transitionを使ったスムーズにスクロールしてトップに戻る機能
前に作ったスクロールした時に位置固定のロゴをトップに戻る機能にすり替えるものを少し手直しして再導入した。今回はスムーズにスクロールさせようかと色々考えていたが、やはりJavaScriptでscrollTo()を制御するのはコストが高い。CSSならどうだと試行錯誤したところ、どうやらbody要素への負のマージンをCSS Transitionで滑らかに変化させれば良いようだ。 Demo: Scroll Smoothly with CSS Transition デモのページにはダミーテキストの各セクションの最後にそれぞれ⇑ Back to Topというリンクがある。それをクリックすると1秒かけてスムーズにスクロールしながらトップに戻る。トリガーとスクロール自体はJavaScriptで行っているが、スクロールのアニメーション自体はCSS Transitionで行っている。具体的には以下のような処理
[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)
[JS]フォームのさまざまなエレメントを異なるブラウザ・スクリーンで同じように美しく表示させるスクリプト -Formplate
デモ：Safari/OS Xで表示 フォームの見た目はどのブラウザでも美しく表示されていました。スクリーンサイズを変更しても同様に美しく表示されます。 Formplateの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsとModernizrを外部ファイルとして記述します。 <head> // Required javascript <script src="js/min/jquery-v1.10.2.min.js"></script> <script src="js/min/modernizr-custom-v2.7.1.min.js"></script> // Formplate <script src="js/min/formplate.min.js"></script> <link href="css/formplate.css" rel="st
![[JS]フォームのさまざまなエレメントを異なるブラウザ・スクリーンで同じように美しく表示させるスクリプト -Formplate](https://cdn-ak-scissors.b.st-hatena.com/image/square/9ed9261b41e9377fcfcb1f225aa1aa691a91afdd/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014112605.png)
簡単で便利！Webページのパフォーマンスをヒートマップで視覚化するブックマークレット -Perfmap
1クリックで、Webページのパフォーマンスが最適化がどうかヒートマップを使って視覚的に分かりやすく表示してくれるブックマークレットを紹介します。 表示されている時間は二つあり、一つ目はユーザーが画像を見るために要する時間、二つ目はブラウザがロードするのに要した時間です。 ヒートマップはグリーンに近いほど早く、レッドに近いほど遅いということです。 下部のバーはページ全体のパフォーマンスで、「First Paint」はページの表示が始まった時間、「Fully Loaded」はページ全てのローディングを終えた時間です。 Bookmarklet PerfMapの使い方は簡単で、下記をChromeのブックマークに加えます。 ※対応ブラウザは現在、Chromeのみです。 javascript:(function(){var el=document.createElement('script');el.
クリップボードにコピーの実装は難しい？「zClip」が一発解決 - Noise of Web Programming
ブラウザからクリップボードに文字列をコピーする機能を実装したく調べた結果、便利なJSライブラリがあったので書いておく。 zClip 最初はブラウザからクリップボードにコピーする機能はJSで簡単に実装できるもんだと思っていたが、実はそうではなかった。そのような機能を提供しているのはIEだけであり、他のブラウザではJSのみではコピーすることが出来ないようだ（Chromeでクリップボードにコピーする実装方法という記事をいくつか読んだが、提供しているデモがそもそも動いていなかった...僕の環境のせいかもしれないが）。 そんな意外に難しいクリップボードコピーを簡単に実現してくれるのが「zClip」である。 Flashを使うことでコピー機能を実現しているようだ。このライブラリのみでIE、Firefox、Chromeなどクロスブラウザ対応している。すばらしい。 zClip.jsの使い方 使い方は色々ある
アニメーションつき円グラフを簡単実装！Circliful
「Circliful」は、の円グラフをアニメーションつきで表示できる jQuery プラグインです。カスタムデータ属性に値を渡すだけでグラフを簡単に描画でき、豊富なオプションでデザインをカスタマイズできます。ランディングページで製品のシェアを訴える際などにいいでしょう。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、CirclifulをGitHubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。 利用するWebページの body の閉じタグ直前で、jQuery本体と「Circliful のminifyファイル」、「jquery.circliful.min.js」を読み込みます。 //(中略) <script src
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
