particles.js - A lightweight JavaScript library for creating particles
particles.js is a lightweight JavaScript library for creating particles.
[JS]ページの背景に、美しい幾何学状のアニメーションを簡単に実装できる超軽量スクリプト -particles.js | コリス
最近見かけるようになった背景にCanvasで描いた粒子でできたような幾何学状のアニメーションを簡単に実装できる超軽量スクリプトを紹介します。 ↓は静止キャプチャですが、優美なアニメーションで動きます。 Demo: Elegant particles.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://vincentgarreau.com/particles.js/particles.js"></script> </body> Step 2: HTML コンテンツの一番下あたりに、粒子の元となる空divを用意します。 <body> ... コンテンツ ... <div id="particles-js"></div> <script src="http://vincentg
![[JS]ページの背景に、美しい幾何学状のアニメーションを簡単に実装できる超軽量スクリプト -particles.js | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/536b7712a8d2693d6955f661188f1c95a9ecbbf6/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014111405.png)
誰でもAndroid 5.0のMaterial DesginをWebに持ち込めるPolymer
誰でもAndroid 5.0のMaterial DesginをWebに持ち込めるPolymer：HTML5アプリ作ろうぜ！（13）（1/4 ページ） Material DesginでWeb ComponentsでオープンソースでレスポンシブなJavaScriptフレームワーク「Polymer」をWeb上で活用するためのチュートリアル記事です。Bootstrapライクなレイアウトを実現するサンプルを交えてインストール方法や使い方を紹介します。
[JS]スマホやタブレット向けの操作を楽しくするさまざまなアニメーションを実装できるスクリプト -Impulse
Bouncy Scrolling ※アニメーションGIFにしたらサイズがすごかったので静止画像です。 デモページには他にもたくさんのデモがあります。 Impulseの使い方 実装は各デモによってHTMLやJavaScriptが異なるので、「Pulldown Menu」で実装方法を紹介します。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 ここは全デモ共通です。 <head> ... <script src="/scripts/impulse.js"></script> </head> Step 2: HTML ヘッダ、メニュー、コンテンツをそれぞれdiv要素で実装します。 <body> <div class="nav-header"> <div class="hamburger-menu-handle"></div> </div> <div class="pu
![[JS]スマホやタブレット向けの操作を楽しくするさまざまなアニメーションを実装できるスクリプト -Impulse](https://cdn-ak-scissors.b.st-hatena.com/image/square/cfc273da7083351f2e3a3d8e3f8464224156ee14/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014090106.png)
Treesaver.js
Treesaver® is a JavaScript framework for creating magazine-style layouts using standards-compliant HTML and CSS. Download Download the latest stable beta version, 0.9.2: treesaver-0.9.2.js (21kb minified & gzipped) For uncompressed or debug versions, see the downloads section of the Treesaver.js GitHub repository. Demos Some examples of the Treesaver framework in use: Nomad Editions’ Real Eats Sam
tableをスマホ用に変形
デスクトップ用にtableで実装された表組みをスマフォでも最適に見えるよう変更するjQueryのプラグインを紹介します。 既存のテーブルにも簡単に対応でき、しかも1KBと超軽量です。 デモページ：幅480pxで表示 左：ヘッダ有り、右：ヘッダ無し 一つのアイテムに対して、それぞれ対応する項目が配置されるようになっています。 ReStableの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="jquery.restable.min.js"></script> <link rel="
Javascriptを使ってここまでできる！凄い動きのサイト10選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。マラガの海の贈り物SEKOです。 フラッシュを使えばサイトはダイナミックな動きを実現しますが、今回はフラッシュでなくてもJavascriptで凄い動きのサイトを集めてみました。 是非参考にしてください。 Javascriptを使った、凄い動きのサイト10選！ MoMA MoMA 円が時系列で表現されております。クリックするとグリンっとまわる動きは気持ちがいいです。ただサイト自体がけっこう重いですね。。 DUB FIRE DUB FIRE マウスを右や左に動かすとサイト全体が動きます。広がりがあり、操っている感もあり、こちらも操作が気持ちいいサイトです。 Volkswogen Volkswogen メインスライドの動きが綺麗です。スクロールで車を操作する年表ページやフォトギャラリーにも楽しい動きが沢山含まれています。 Secret Study Secret Study DUB F
[JS]多彩なアニメーションを備えたスライドショーがスクリプトを一行も書かずに実装できるスクリプト -Cycle.js
スクリプトもスタイルシートも書かずに、多彩なアニメーションで画像がスライドするスライドショーを実装できるスクリプトを紹介します。 こういう実装方法がこれから増えてくるかもしれませんね。 Cycle.js Cycle.js -GitHub 対応ブラウザは下記の通り。 IE8+ Chrome Firefox Safari Opera TODOとして、ARIAのサポート、キーボード操作、IE7対応、エフェクトの追加を予定しているそうです。 いつもは、デモ、使い方、の順番で紹介していますが今回はデモと使い方を併せてご紹介。 Cycle.jsのセットアップ Cycle.jsのバリエーション Cycle.jsのセットアップ ベースとなるHTMLは非常にシンプルです。 スタイルシートをhead内に、スクリプトを</body>の上に外部ファイルとして記述します。 <title>Cycle.js</titl
[JS]Appleのプロダクトページのような1ページのスクロールコンテンツを作成するスクリプト -One Page Scroll
デモページ：3番目のパネルを表示 各パネルへの直リンクやURL表示にも対応しています。 One Page Scrollの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.onepage-scroll.js"></script> <link href='onepage-scroll.css' rel='stylesheet' type='text/css'> </head> Step 2: HTML mainはコンテナで、各パネルはse
長～いページもスッキリ！jQueryでタブ表示 (1/2)
1つのWebページに多くの情報を載せようとすると、縦に長くなって見づらくなってしまいます。そのようなWebページを整理するには、ページをいくつかのタブに分けるのが1つの方法です。今回は、jQuery UIの「Tabs」というウィジェットを使って、ページをタブに分ける方法を紹介します。 Tabsをダウンロードしてみよう jQueryには、ユーザーインターフェース関連の基本的なライブラリを集めた「UI」（User Interface）があります。その中の1つに「Tabs」というウィジェットがあります。Tabsは、Webページを複数のタブに分割して、切り替えられるようにするものです。 jQuery UI Tabsを使うには、まずこのJavaScriptファイルをダウンロードします。ダウンロードページに接続すると、ダウンロードするモジュールを選ぶページが表示されますので、「UI Core」と「Ta
[JS]jQueryのプラグイン33+1選 -2010年1・2月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Notify Bar メッセージやエラーやアラートなどをブラウザ上部からスライド表示。 Slide box パネルをブラウザの上や下
ScaleOut | Supership
日々の出来事、メンバーの働く様子や声、未来への想いなど、Supershipの“BE SUPER”なストーリーをシェアしています。
[JS]画像ホバーで、さまざまな要素を配置した半透明のパネルをアニメーションで表示するスクリプト -HCaptions
画像をホバーすると、スライドやフェードのアニメーションで表示する半透明のパネルを実装するjQueryのプラグインを紹介します。 パネルは実装もカスタマイズも簡単です。 HCaptions -GitHub HCaptionsの準備 HCaptionsのデモと実装 HCaptionsの設定 HCaptionsの準備 まずは、スクリプトを使う準備から。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="js/jquery.js"></script> <script src="js/jquery.hcaptions.js"></script> Step 2: スクリプトの準備 キャプションを表示に付与するclassを定義します。 $(window).load(function(){ $('.hcaption').hcapt
[JS]ずっーとホバーしていたい、階段状に浮き上がるアニメーションがかなり気持ちいいナビゲーション -Stairway Navigation
ホバーすると、アニメーションで階段状に次々にアイテムが浮き上がるナビゲーションを実装するjQueryのプラグインを紹介します。 一応プラグインですが、エフェクトの要はCSS3です。 階段の反応する数が三つと四つ 実装 HTML HTMLはシンプルで、a要素でアイテムを実装しnav要素で内包します。 <div> <h2>One Step</h2> <nav id="example-one"> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Na
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
![ブロックレベル要素の高さを揃えるheightLine.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a01a0c31d440f29a491fdd71f76aedb1d5a3f40b/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
[JS]文字を楽しく見せる、カーブ状に簡単に配置できるスクリプト -Arctext.js
Demo 4: Set/animate 「Animate me」でアニメーション。 Arctext.jsの使い方 Arctext.jsは「Lettering.js」をベースに文字をパスに沿わせて正しく回転させ配置します。 Lettering.jsについては、下記を参考ください。 HTMLファイルを汚さずに細かい設定でspanを挿入できるスクリプト -Lettering.JS では、Arctext.jsの使い方を。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="js
JavaScriptで作られた、見たことないUIデザインのWebサイト
株式会社サイゾー（Cyzo inc.） / Raffael Stüken / La Moulade - Creative St...他...全11件
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.reindel.com/accessible_news_slider/
[JS]表示サイズに合わせて、さまざまな要素のサイズやレイアウトをアニメーションで変更するスクリプト -JResponsive