Adobe Flash作品から学ぶクリエイティブコーディングのテクニック - ICS MEDIA
Adobe Flash Playerが2020年末にサポート終了すると公式アナウンスがされ、ブラウザ上でFlash製のサイトや作品が見られなくなります。かつてFlashは多くのクリエイターから支持され、ダイナミックで革新的なアイデアがいくつも生み出されました。 筆者もFlashを生業としていましたが、当時は毎日のように発明される表現や実装アイデアをクリエイター同士で共有し、他人のアイデアを融合しさらに昇華させていく、そのような文化がFlashコミュニティ全体に息づいていました。 そのようにして生まれたアイデアを後世に残すべく、今回は秀逸なFlash作例を集めたギャラリーサイト「Beautifl」から、いくつかの作品の実装アイデアを解説します。Flashで作られたものですが、HTML5やWebGL、Processingなどにも応用できる内容となっています。 具体的なコードには触れませんので、
Photofy | Photo Swap Shuffle Plugin for jQuery
Not Just Any Gallery Plugin Photofy is a completely new take on the over-developed gallery plugin. Photofy doesn't just display images, it randomly shuffles them around in thumbnails, whilst pre-loading the next set of images in the background for a smooth transition. Giving a nicely different effect and keeping page load times snappy and consistent. The long awaited second version of Photofy is n
円や多角形をランダムに配置する背景をSVGで作る
以前に「サークルがランダムに配置される背景をSVGで作る」というものを書きましたが、それを発展させて多角形も混ぜられるようにしてみました。 今回はブラーとかはありません。 多角形の座標算出は、こちらの記事を参考にしました。 HTML5 Canvas で Polygon(多角形)描画 | TM Life 対応しているのは Internet Explorer 9+, Firefox 4+, Chrome, Safari 5.1+, Opera 11.6+です。 Random Geometric Pattern Background with SVG 一応、コメントつきのも載せておきます。 (function () { /** * window がロードされたら実効 */ window.addEventListener('load', function () { geometricPattern
羅列した要素をjQueryで徐々にランダム表示させる - かちびと.net
羅列された要素をフェードイン しながら徐々にランダムで表示 させるエフェクトをjQueryで実装 出来る、というプラグインの ご紹介。割と短いコードで作れる エフェクトなので覚えておきたい ですね。 要素をフェードインさせながらランダム表示させるjQueryのプラグイン・champagne.jsです。 champagne.js とても軽量で、テキストでも画像でもOKです。シンプルなので色々応用が利きそう。 以下動作サンプルです。※再生ボタンで動作します。 コード <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.champagne.m
JavaScriptで連想配列（ハッシュ）から1つずつ値を取り出して配列に入れてランダムで取得する – bl6.jp
タイトルが分かりづらくてあれなんですが、JavaScriptの連想配列（ハッシュ）から1つずつ値を取り出してそれを今度は別の配列に格納していき、最終的にはその中からランダムで値を取得したいっていうことをやりたかったわけです。要するに連想配列からランダムに値を取り出したいってことですね。それと連想配列の中身や数がケースバイケースで変わるっていう状況を想定しているので、それに合わせた1つのやり方です。 [ads_center] やり方 まずは基本から。for…inを使って普通の配列から1つずつ値を取得して加工する場合は以下のような感じでできますね。 var ary = ["aaa", "bbb", "ccc", "ddd"]; for(var i in ary){ document.writeln(i + " : " + ary[i] + "<br>"); } // 実行結果 // 0 : a
ホタルの光をイメージさせるようなエフェクトを実装するjQueryプラグイン・firefly - かちびと.net
ちょっと適切なタイトルが思い浮かばな かったのですが、指定した要素を沢山 配置してアニメーションでランダムで 移動させる、というjQueryプラグイン。 デモでは、よく見かけるパーティクルで 作成したホタルっぽいエフェクトを用意 しています。 タイトルじゃ良く分からないと思いますのでデモをご覧下さい。 itsfireflyで使われているエフェクトのオマージュみたいですね。ホタルっぽいエフェクトです。 Canvasとかじゃなくて、画像を直に指定してランダム表示させてアニメーションで動かすプラグイン、みたいな感じ。cssのpositonとz-indexで背景化しています。画像を変えれば違った表現も出来ますねー。プラグインも軽量です。 コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jque
[JS]あらゆる要素をランダムにフェードアウト・インさせるスクリプト -LivingFade
あらゆるDOM要素をランダムなタイミングでフェードアウト・フェードインさせるjQueryのプラグインを紹介します。 LivingFade jQuery Plugin デモ [ad#ad-2] デモでは複数のdiv要素がボックス状に配置されており、「Fade Out」「Fade In」ボタンをクリックすると、フェードアウト・フェードインのエフェクトがランダムなタイミングで適用されます。 デモ：ベーシック callback機能もあり、エフェクトが終了すると、メッセージが表示されます。 エフェクトの適用範囲を指定することも可能で、下記は右下のdiv要素に異なるclass名を与え、その箇所のみ適用させないデモです。 デモ：適用範囲の指定 LivingFadeの実装 「デモ：ベーシック」を例に実装方法を紹介します。 HTML 対象となる要素を内包するdiv要素に「class="demo1"」を付与し
jQuery - imageCloud
ImageCloud is a jQuery plug-in based on Google's Doodle designed for the Christmas holidays on 2010. "Basically" it was a bunch of frames with images that, when you mouse over, grow to their real size: I saw it and I said to myself "Wow! This is pretty cool"... and it seems that I was not the only thinking that (You can watch a video of it working here). I also thought, it would be great to have s
ブログ記事やコメントなどをランダムに表示する MovableType プラグイン:Randomize - Open MagicVox.net
ブログ記事やコメントなどをランダムに表示する MovableType プラグイン:Randomize Posted by ぴろり Posted at 2011/01/23 17:06 Trackbacks 関連記事 (0) Post Comment コメントできます Category ブログ記事やウェブページ、コメント、アイテムなどの様々なリストから、項目をランダムに選んで表示するための MovableType プラグインを書いてみました。静的生成、静的生成＋PHP、ダイナミック パブリッシングで動作します。同様の機能を持った MT プラグインが他にも存在しますが、ブログ記事やウェブページに限定せず、あらゆるリストの項目をランダムに表示することが可能です。 | | | | 使い方の概要 追加されるテンプレート タグ テンプレートの記述の例 ダウンロード インストール いろいろ 使い方の概要
[JS]パネルをブロック状のフェードで切り替えるコンテンツスライダー -Blockster
画像やテキストを配置したパネルをブロック状に少しずつ変化させて、次のパネルを表示するjQueryのプラグインを紹介します。
回転する円形のサイトメニューが実装できるjQueryプラグイン「jQuery Radmenu」:phpspot開発日誌
jQuery Radmenu Example 回転する円形のサイトメニューが実装できるjQueryプラグイン「jQuery Radmenu」。 UIとしては次のような円形のメニューで、回転させるとなかなか面白い動きをします。 具体的にどう使うか、というのはアイデア次第ということになってきそうですが、アイテムをシャッフルさせたり、動きがなかなか面白いメニューになっています。 デモページ 利用者にちょっとした驚きの効果を与える分には申し分ないですが、使い方には注意が必要かもしれませんね。 HTML的には、次のようなulを使ったリストです。 <div id='radial_container'> <ul class='list'> <li class='item'><div class='my_class'>0</div></li> <li class='item'><div class='my
[JS]豊富なエフェクトで画像を変更するギャラリーのスクリプト -Nivo Slider
シンプルでvalidなマークアップで実装できる、超軽量（約5KB）の画像ギャラリーのスクリプトを紹介します。 Nivo Slider デモ このスクリプトの大きな特長ともいえる画像変更のエフェクトには下記の9種類が揃っています。 スライス（下） スライス（下左） スライス（上） スライス（上左） スライス（上下） スライス（上下左） ホールド フェード ランダム サポートしているブラウザはIE7+, Fx3+, Safari4+, Chrome4+で、主要なブラウザに対応しています。 実装にはｊQueryのプラグインのため、jquery.jsが必要です。 ライセンスはGPL（GPL -Wikipedia）で、商用でも無料で利用が可能です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
promob.jp
IDEA * IDEA