iOSの方がきれい Menyは3Dトランスフォームをサポートするブラウザで動作し、iPhoneのMobile Safariにも対応しています。 動作に必要なCSS, JavaScriptファイルは、下記からダウンロードできます。 Meny -GitHub
小さい画面で多くの情報を表示する、パネルをダイナミックに3Dでスライドさせるエフェクト -Meny
iOSの方がきれい Menyは3Dトランスフォームをサポートするブラウザで動作し、iPhoneのMobile Safariにも対応しています。 動作に必要なCSS, JavaScriptファイルは、下記からダウンロードできます。 Meny -GitHub
[JS]このアニメーションはかなりカワイイ！折り畳んだ紙をパタパタ広げるスクリプト -PFold
展開と共に、移動のアニメーションが加わります。 PFoldの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" type="text/css" href="css/pfold.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.pfold.js"></script> Step 2: HTML コンテンツの初期状態と最終状態をそれぞれdiv要素で実装し、div要素で内包します。 <div id="uc-
[CSS]数行のスタイルシートで、スター・ウォーズのオープニング風アニメーションを簡単実装
JavaScriptや画像は一切無しで、テキストが3Dで流れるスター・ウォーズのオープニングを作成するスタイルシートを紹介します。 Star Wars 3D Scrolling Text in CSS3 デモ 実装 デモ デモは最新のFirefox, Chromeでご覧ください。 IEは3Dの変形アニメーションにまだ対応していないため、IE10を待ってください。 実装 Step 1: HTML HTMLは簡単で、テキストのp要素をdiv要素二つで内包します。 titlesが外側で、titlecontentがスクロールするセクションです。 <div id="titles"><div id="titlecontent"> <p>テキストテキストテキストテキスト</p> ... ... </div></div> Step 2: CSS まずは見た目のスタイルです。 :after擬似要素でフェード
[CSS]ソーシャルボタンのリストが蛇腹状に折り畳まれるスタイルシート
ソーシャルサービスのボタンを配置したリストがアニメーションで蛇腹状に折り畳まれるスタイルシートを紹介します。 デモページ：開いた状態 実装 外部ファイル jQueryとModernizrを</body>の上に外部ファイルとして記述します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script> HTML 一番上のグレーはh2要素で、各ソーシャルボタンを配置するパネルはリスト要素で実装します。 <h2 class="connect">Connect with me:</h2> <ul class
熱意に期待。将来Web上で初音ミクが踊る日がくるかも？·mmd.js MOONGIFT
mmd.jsはMikuMikuDanceのファイルをJavaScriptでWeb上に描画するライブラリです。 初音ミクを踊らせることができるソフトウェア、MikuMikuDanceをWebブラウザ上で再現しようと試みるソフトウェアがmmd.jsです。まだまだ開発途上のようですが今後が楽しみです。 現状はこんな感じです。 理想的な形（公式サイトより）。 MMDのファイルは仕様が公開されていないらしく、実際のファイルから意味を読み取って実装しているというかなりマニアックなソフトウェアになります。初音ミクへの愛情がなければ、決してここまでできないでしょう。まだ特徴点を読み取るレベルですが、近い将来Webブラウザ上でも初音ミクが踊っているかも知れません。 mmd.jsはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFTはこ
[JS]レイヤーに要素を配置し、分離して3Dにぐるぐる回転させるスクリプト -CSSMatrix
jQueryのプラグイン「CSSMatrix」を使って、不連続のレイヤーに要素を配置し、それぞれを分離して3Dにぐるぐる回転して表示するデモを紹介します。
CoffeeScript 入門! 怒濤の 100 サンプル!! | TM Life
今まで CoffeeScript についてのエントリーを連投してきましたが とりあえずこのエントリーで一区切りつけようと思います. ちなみに今までに書いた CoffeeScript についてのエントリーはこんな感じです. node.js 不要! Windows でも簡単に CoffeeScript を使う方法 jsdo.it で CoffeeScript を使う方法 CoffeeScript 入門 基礎編 – CoffeeScript と JavaScript を 10個のサンプルで比較してみた CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪ 今回は enchant.js で怒濤ったとき同様 CoffeeScript についても怒濤ってみました. プログラミングは本を読むだけでは学んだとは言えません. 作ってナンボの世
jQueryプラグインのベストトレンド総まとめ2010*ホームページを作る人のネタ帳
もはやこの業界ではかなり浸透しつつあるjQuery。 今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。 １）3D表示プラグイン サンプルデモ 今年のトレンドと言えば3D。 というわけでこちら。まずはサンプルデモを確認。 触ってわかる通りですが、2枚の画像が3D表示されます。 呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門（１／３）～
HTML5とWebGL 初めにHTML5の位置づけについて簡単に触れます。HTML5とはこれまでのWebページ作成言語で主流だったHTML4やXHTMLの後継言語のことで、 2008年に草案がまとめられ、2014年までにウェブブラウザ各社への正式勧告を目指して策定が進められています。 HTML5は 2012年1月でもまだ「草案」段階で、仕様も流動的な準備段階であるが、開発側からもユーザ側からも非常に注目が集められています。 その大きな理由の一つに挙げられているのが、iPhoneやAndroidなどのスマートフォンの台頭による情報端末の多様化への対応のためです。つまり、様々なWEBコンテンツのクロスプラットフォーム化への重要な貢献が期待されているからです。 というのもスマートフォンの登場までは、Adobe社が提供する FLASH が動画やオーディオなどが組み合わされたマルチメディアコンテンツ
10分で作るWebGL対応の3Dシューティングwith enchant.js
gl.enchant.jsの開発者、高橋諒が10分プログラミングに挑戦! プログラミング:高橋諒(UEI/ARCアルバイト) 実況:shi3z 解説:近藤誠(UEI新卒一年生)
JavaScript 3DレンダリングエンジンのThree.jsを試す
こんにちは。 KRAYアルバイトの浅海です。 今回は、最近ちまたで噂のThree.jsで遊んでみようとおもいます。 http://github.com/mrdoob/three.js webgl対応のブラウザで見ている方は、右上に3Dのボックスが表示されていると思います。 Three.jsを使えば、このようなことを簡単にJavascriptで実現できるのです。 半信半疑で使ってみたところ、たしかにThree.jsでは、3D特有の行列計算や数学的思考をせずとも、3Dを表示、操作することができました。 「ちょっとのプログラムで3Dができる。」 この面白さを皆さんに届けたいです。 目次 立方体を表示する 光をあてる テスクチャを貼り付ける マウスで回転させる マウスで移動させる クリック判定する Three.js web上には、HTML5のcanvasを利用した様々なサンプルページやアプリケーシ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]画像をかっこよく表示し、操作が気持ちいいインタラクションを楽しめる -Fluid twisting image 3D
Responsive Cat
WebGL and Three.js
stroll.js - CSS3 Scroll Effects
CSS3D Clouds
CSSで高度な3D表現ができると話題の「Sprite3D.js」で作った凄いデモ
Site Under Maintenance
Site Under Maintenance
