Home | Shuffle.jsResponsive designShuffle was built to make responsive design easy. Quickly update items in the grid by adding a class.
スタイリッシュなアニメーションで要素を絞り込み・ソートする「Shuffle.js」 | NAKAZI LAB.（ナカジラボ）
デモページ JavaScript (function($){ $(function() { $('#sort li').on('click', function() { var $this = $(this), $grid = $('#itemList'); $('#sort .active').removeClass('active'); $this.addClass('active'); $grid.shuffle($this.data('group')); }); $('#itemList').shuffle({ group: 'all', speed: 400, easing: 'ease-in-out' }); }); })(jQuery); HTML <div id="sortArea"> <div id="sort"> <ul> <li data-group="all" cl
[JS]タイル状に配置した画像やテキストをランダムな順番でふわりと表示するスクリプト -champagne.js
グリッドに沿ってタイル状に配置した画像やテキストなどのエレメントをランダムな順番でふわりと表示するjQueryのプラグインを紹介します。 champagne.jsを実際に使用しているサイト「Perkstreet」 [ad#ad-2] champagne.jsの使い方 champagne.jsは、3ステップで簡単に実装できます。 画像やテキストをタイル状にCSSで実装。 jQueryと当スクリプトをインクルード。 親エレメントをjQueryのセレクタで指定し、スクリプトを実行。 下記に、デモページを例に実装方法を紹介します。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery
画像などコンテンツ要素をランダムでフェードインさせることができるjQueryプラグイン「champagne.js」｜BLACKFLAG
画像の一覧など画面上にコンテンツ要素をたくさん並べられたWebページでは ページのロード時に順々に要素を読み込んでアニメーション表示したり 見せ方を変えることで様々な印象を与えているWebサイトをよく見かけます。 そういったコンテンツ要素が一覧で並べられたページで 要素を簡単にランダムでフェードアニメーション表示させることができる jQueryプラグイン「champagne.js」がとても便利そうだったのでご紹介。 champagne.js | fresh tilled soil champagne.js | fresh tilled soil 使い方もとても簡単で、 まずHTML側ではベースとなるコンテンツ要素に 任意のクラス（「.champagne」とします）をつけて、 ランダムで表示させたい各要素を並べます。 <ul class="champagne"> <li><img src="
HTML5 × CSS3 × jQuery – #20 文字をランダムでカシャカシャ動かしながらテキストを表示させるプラグインを作る | DevelopersIO
リリィ・シュシュのすべて という映画をご存知でしょうか？2001年に公開された岩井俊二監督の作品で、当時は結構好きで何度も観返したものでした。 劇中にて文字がカシャカシャとランダムに動きながら文章が表示されていくエフェクトがあるのですが、これを JavaScript で作ってみました。Flash 全盛のころから Web コンテンツにはよく取り入れられてるエフェクトではありますが、使い所さえ間違えなければ今でも充分に通用するカッコよさを持っています。 今回は jQuery を使わずに素のJavaScript (Vanilla JavaScript) だけでプラグインを作りました。このシリーズの趣旨から大きく外れてますが、そこは仕方ないね。 LetterTicker - 文字をランダムでカシャカシャ動かしながらテキストを表示させる Step.1 | とりあえず動くものを作ってみる まずは動くも
jQuery：画像や要素をランダム出力する方法の備忘録 - NxWorld
jQueryを使って画像や要素などをランダムに並べ替えたり表示させたりする方法の備忘録です。 ただ、jQueryと言っても乱数を作るのに必要なわけではなく全体的にJavaScriptだけでできる感はありますが、やっぱり何かと楽に実装できるのでここではjQueryを使っていきます。 画像をランダム表示する img要素のsrcを書き換えることで画像をランダム表示させる方法です。 HTMLとjQueryはそれぞれ下記のように記述し、スクリプトの記述にあるvar imagesのところでランダムで表示させたい画像のパスを記述します。 あとは、.attr()を使ってランダムで選ばれたものを指定した要素のsrcを書き換えるよう記述してあげれば、ページを表示する度にランダムで選ばれた画像が表示されるようになります。
jQueryでランダムに画像などコンテンツ要素をフェードインさせる方法｜BLACKFLAG
以前の記事で「jQueryで画像などコンテンツ要素を順番にフェードインさせる方法」と題して、 一覧となって並べられた画像をjQueryを使って順々にフェードインさせる方法を紹介しましたが、 同様のパターンで、フェードインさせる順番をランダムにするパターンを できるだけシンプルな構成で作ってみたので紹介してみます。 まずは動作のサンプルから。 下記画面の「リロード」を押してみてください。 サンプルを別枠で表示する ページの読み込みが終わると 一覧画像がランダムによって順々にフェードインして表示されます。 この全体構成について、 まずはHTMLから。 ◆HTML <div id="thumblist"> <ul> <li><a href="#"><img src="img/photo1.jpg" alt="" /></a></li> <li><a href="#"><img src="img/
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Delay Show List - JSFiddle - Code Playground