[B! js][JS] kuroaka1871のブックマーク

[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ

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

kuroaka1871 2016/07/16

js

リンク

Web Audio APIを恐ろしく簡単にする「Tone.js」で音楽プログラミングを試してみた！ : うえぶはっく

「Web Audio API」を使うと音声の「再生」だけでなく、音の「生成」や「加工」などもJavaScriptだけで手軽にプログラミングすることが出来るようになります。ただ、ちょっとクセがあるので「扱いにくい…」と感じる人も少なくないでしょう。そこで、誰でも簡単に「Web Audio API」を活用できるJavaScriptライブラリ「Tone.js」について、今回は簡単なサンプルと共にご紹介しようと思います！ファイルを準備しよう！まずは、「Tone.js」を使ったサンプルを作るのに必要な「index.html」と「app.js」を用意しましょう。「Tone.js」自体は、GitHubからダウンロードするか、以下のURLから利用可能です。 https://tonejs.github.io/build/Tone.min.js ひとまず、「index.html」はこんな感じでOKで

kuroaka1871 2016/03/22

js

リンク

[JS]最近のWebサイトで見かける気持ちいいアニメーションや便利な機能が実装できる、使いやすいスクリプトのまとめ

Bubble Layout Bubble Layout -GitHub まずはアニメーションを使った斬新なUI、バブルレイアウト。ベースにはmo.jsが使われており、バブルをクリックしてからの遷移だけでなく、バブル自体も楽しいアニメーションで動かすことができます。デモページで実際の動きに触れてみてください。

kuroaka1871 2016/03/20

js

リンク

背景にひと手間加えたい時に便利なスクリプト 10+ - NxWorld

ウィンドウいっぱいの背景に画像や動画を配置したり、ランダムなパーティクルやラインを表示させるなど、主に背景周りで使えそうものや「この領域に何かもうひと手間加えたい...」というときに便利そうだと思うスクリプトを幾つかまとめてみました。 jQueryプラグインが多めですが単体で動かすことができるものもあり、実装方法などに関しても容易にできるものが多いと思います。背景に画像や動画のスライドショーを実装できる「Vegas」背景にブラウザいっぱいのスライドショーを実装することができるjQueryプラグインで、画像だけでなく動画を埋め込むこともできます。また、オプションを変更することでスライドの動きにアニメーションを付けたり、用意されているパターンをオーバーレイで表示させたりすることもできます。

kuroaka1871 2016/01/15

js

リンク

[JS]ありそうでなかった！スクロールエフェクトのベースになるさまざまな値を取得するシンプルな超軽量スクリプト -roll.js | コリス

縦長ページのスクロールを利用したエフェクトに必要なさまざまな値、スクロール量、ポジション、ページネーションなどを正確に取得することに特化された超軽量（3kb gzip）のスクリプトを紹介します。作者様曰く、これ系のシンプルなライブラリがなかったから作った！とのことです。

kuroaka1871 2015/11/21

js

リンク

[JS]ふわりとした動きが気持ちいい！スクロールするとコンテンツが後から追いかけるように表示されるスクリプト - Flow Up

ページをスクロールすると、垂直に配置されたコンテンツやパネルが後から追いかけるようにふわりと定位置に配置されるシンプルなスクリプトを紹介します。ずっと気にかけてたエフェクトだったのですが、このスクリプトを使うと簡単に実装できます。デモの動きスクロールすると、後から追いかけるようにふわりと定位置に収まります。 Flow Upの使い方 Step 1: 外部ファイル当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="flowup.js"></script> </body> Step 2: HTML 各パネルは、p, div, articleなどで実装します。 <body>

kuroaka1871 2015/10/12

js

リンク

[JS]アニメーションが気持ちいい！サイズ・カラー・形を変えられる紙をメタファにしたボタンを実装できるスクリプト -Quttons

Googleが提唱する「Material Design」は、Webページやアプリなどさまざまなメディアに採用されるようになってきました。そのMaterial Designの中の一つ、サイズやカラーや形を変えることができるデジタルの紙（クァンタムペーパー）をメタファにしたボタンを実装できるスクリプトを紹介します。デモのアニメーション Quttonsの使い方 Step 1: 外部ファイル当スタイルシートとスクリプト、jQueryとVelocityを外部ファイルとして記述します。 <head> ... <link rel = "stylesheet" href = "Path/To/Quttons.css" /> </head> <body> ... コンテンツ ... <script src = "Path/To/jQuery" type = "text/javascript"></scr

kuroaka1871 2015/06/20

js

リンク

cssCharts.js - スタイルシートでグラフを描画 MOONGIFT

HTML5によってWebの表現力は高まっています。特にSVGやCanvasを使えば高度なグラフィックが描けます。ただし使いこなすのはそうそう簡単ではありません。そのため、まだまだスタイルシートの活躍の場はとても多いです。そこで使ってみたいのがcssCharts.jsです。スタイルシートとJavaScriptを使って作られたグラフライブラリで、簡単に使いこなせるのが大きな利点です。 cssCharts.jsの使い方 cssCharts.jsの描けるグラフです。まずは棒グラフ。次はドーナッツグラフ。ドーナッツグラフの2つの値版。さらに中央を塗りつぶしたバージョン。次に折れ線グラフ。塗りつぶしをなくした版。もっとシンプルに。そしてポイントも取り除いた版。最後にパイチャート。オンマウスでタイトルを表示することもできます。例えば棒グラフの場合は次のように指定します。 <!--

kuroaka1871 2015/06/20

グラフ
js

リンク

[JS]縦長ページに実用性とデザイン性を兼ね備えたスクロールメニューを設置するスクリプト -ScrollMenu

デフォルトのスクロールバーも表示ブラウザのデフォルトのスクロールバーを併用することも可能です。 ScrollMenuの使い方 Step 1: 外部ファイル当スタイルシート・スクリプト、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" type="text/css" href="scrollmenu.css"> </head> <body> ... コンテンツ ... <script src="jquery.js"></script> <script src="scrollmenu.js"></script> </body> Step 2: HTML 各コンテンツは、section要素で実装します。 <section class="section" id="section1"> <div class="content"

kuroaka1871 2015/05/30

js

リンク

コンテンツをレンガ状にどんどんスタックして配置していける「stackgrid.adem.js」:phpspot開発日誌

heyadem/stackgrid.adem.js GitHub demo コンテンツをレンガ状にどんどんスタックして配置していける「stackgrid.adem.js」レイアウト後のコンテンツ追加や、コンテンツ幅の変更、アイテム間マージンの変更等もアニメーション付きで出来るすぐれものです。流行りのレイアウトなので実装の際は１つの選択肢に出来そうです関連エントリ CSSドリブンなレンガ状レイアウト作成JSライブラリ「Salvattore」 image, iframeをlazyloadしてロード時の関数を指定可能な「Lazyload Images」

kuroaka1871 2015/05/30

リンク

[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のアイ

kuroaka1871 2015/05/30

js

リンク

[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.google apis.com/ajax/libs/jquery/1.11.0/j

kuroaka1871 2015/05/16

js

リンク

cow2design.com

This domain may be for sale!

kuroaka1871 2015/04/29

js

リンク

Underscore.jsがペライチの開発に欠かせない理由 - ペラログ

こんにちは。ペライチ開発エンジニアの香月(@katsukii)です！ペライチには「お手伝いメンバー」といって平日の夜と週末、開発を一緒にやってくれている方たちがいます。そして、そのエンジニア同士で技術をキャッチアップするために、定期的に開催しているのがペライチの技術勉強会です。 4月12日の勉強会では、ペライチで利用しているJavaScriptライブラリの一つ「Underscore.js」を取り上げました。上記スライドにもあるとおり、Underscore.jsは配列やオブジェクト等のデータ操作をはじめとする、100以上の便利関数が詰まったユーティリティライブラリです。複雑な処理もシンプルに記述できて、可読性が上がるため、JavaScriptを多用するペライチの実装には、なくてはならないものとなっています。今後も継続して開催する予定のペライチ技術勉強会。次回の予定は、5/24(日

kuroaka1871 2015/04/26

js

リンク

メニューが多い場合のMegaメニューのドロップダウン実装「Animated-megadrop」:phpspot開発日誌

Animated-megadrop by djsmithme メニューが多い場合のMegaメニューのドロップダウン実装「Animated-megadrop」選択肢が多くても大丈夫なMegaメニューをピュアCSS or JSアニメーションで表示できるライブラリ。アニメーションも表示方法が独特で下からフェードインしてくる感じが面白い関連エントリスマホ用メニューっぽいスライドするメニューが作れる「jQuery Sliding Menu」モバイル用のメニュー実装の一案「jquery-megakrill」スマホ等用に複数階層のメニューが作れる「navgoco」

kuroaka1871 2015/04/11

リンク

[JS]タッチデバイス対応、ミニマルなデザインながら高機能なスライダーを実装するスクリプト -Iory

デモページ：Custom Easings イージングのエフェクトをカスタマイズしたデモ。 Ioryの使い方 Step 1: HTML HTMLはシンプルで、各パネルをリスト要素で実装し、divで内包します。 <div class="slider js_simple simple"> <div class="frame js_frame"> <ul class="slides js_slides"> <li class="js_slide">1</li> <li class="js_slide">2</li> <li class="js_slide">3</li> <li class="js_slide">4</li> <li class="js_slide">5</li> <li class="js_slide">6</li> </ul> </div> </div> Step 2: CSS

kuroaka1871 2015/04/11

js
slide

リンク

[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: エフェクトの設定まずは、コアとなるフレームを作成します。この中に

kuroaka1871 2015/04/04

js

リンク

[JS]かっこいい！ブラウザや要素いっぱいに背景画像やスライドショーをアニメーションで表示するスクリプト -Vegas 2

画像をブラウザやDOM要素の背景いっぱいに表示し、フル表示の画像にかっこいいエフェクトを加えたり、スライドショーを設置できるjQuery/Zeptoのプラグインを紹介します。アニメーションやオーバーレイが数多く用意されており、画像にスタイリッシュなエフェクトを加えることが簡単にできます。 Vegas 2 Vegas -GitHub Vegas 2は以前紹介した1の単なるバージョンアップではなく、大きく進化しました。 ※1との互換性はありません。 Vegas 2のデモ Vegas 2の使い方 Vegas 2のデモデモでは写真画像をブラウザや要素の背景としてフル表示し、スライドショー機能を伴ったコンテンツを楽しめます。 Doc -Animations 表示方法にも多彩なエフェクトが用意されています。 Vegas 2の使い方 Step 1: 外部ファイル当スクリプト・スタイルシートとjQu

kuroaka1871 2015/04/02

js

リンク

[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({ '

kuroaka1871 2015/03/10

js

リンク

[JS]スマホやタブレットのタッチデバイスでの操作がめちゃ快適な画像ギャラリーのスクリプト -PhotoSwipe

サポートするタッチジェスチャーの一覧 PhotoSwipeの使い方 Step 1: 外部ファイル当スクリプトとスタイルシートを外部ファイルとして記述します。  <link rel="stylesheet" href="path/to/photoswipe.css">  <link rel="stylesheet" href="path/to/default-skin/default-skin.css">  <script src="path/to/photoswipe.min.js"></script>  <script src="path/to/photoswipe-ui-default.min.j

kuroaka1871 2014/12/17

js

リンク

はてなブックマーク

タグ

関連タグで絞り込む (36)

jsとJSに関するkuroaka1871のブックマーク (42)

お知らせ

今週のはてなブックマーク数ランキング（2024年5月第4週）

今週のはてなブックマーク数ランキング（2024年5月第3週）

今週のはてなブックマーク数ランキング（2024年5月第2週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス