タグ Demo
人気順 5 users 10 users 50 users 500 users 1000 usersThree.jsで新宿駅構内図を3Dで可視化してみる - Qiita
2023/12/25
217 users
Qiita
SvelteKit
three.js
操作
コチラ
これは MIERUNE AdventCalendar 2023 24日目の記事です! 昨日は@northprintさんによるSvelteKitでURLクエリパラメーターの操作をするでした。 はじめに この記事では新宿駅の屋内地図データを使用して、Three.jsで3Dによる可視化をします。 DEMOはコチラ 使用するデータ 今回は、G空間情報センターで公開されている「新... 続きを読む
わずか4KBで書かれたコードが織りなす驚愕のデモ・ムービー「Final Stage by 0x4015(Revision 2017)」 - GIGAZINE
2017/04/22
121 users
GIGAZINE
YouTube
境地
てき
驚愕
音楽を伴った美しいCGアニメーションをリアルタイムに表示させるプログラムの「Demo(デモ)」は、小さなサイズでどれだけ美しい絵を描けるかの腕が競われる技術であり芸術です。わずか4KBで書かれたプログラム「 Final Stage by 0x4015(Revision 2017) 」のムービーがYouTubeで公開されており、4KBイントロが到達した境地を見せつける圧巻のデキとなっています。 fi... 続きを読む
Amazon ECS と Amazon ECR 超概要＋時間があったら Demo // Speaker Deck
2016/04/23
138 users
Speaker Deck
Amazon ECR
All slide content and descriptions are owned by their creators. 続きを読む
着実に進化している！無料で利用できるWordPressのテーマのまとめ | コリス
2015/06/24
265 users
コリス
ブッダ
ヘッダ
フォトグラファー
ポートフォリオ
ブログやポートフォリオ、フォトグラファーのギャラリー、プロダクトやアプリのランディングページなど、最近のデザインのトレンドをうまく取り入れたWordPressのテーマファイルを紹介します。 テーマは全部無料で利用でき、カスタマイズ性にも優れたものばかりです。 Themify Flow (demo) 個人・商用利用、無料。 モジュール式のレイアウトで、ヘッダ・フッタ・サイドバー・コンテンツなどをドラ... 続きを読む
【レスポンシブコーディング】要素の横幅と高さの比率を保つ | 集の一期一会
2015/01/04
209 users
レスポンシブコーディング
横幅
一期一会
比率
要素
レスポンシブコーディングについて、前々から技術的なブログを書こうと思ってはいたのですが、なかなか更新する時間がなくできていませんでした。で、今回が初記事。 まず、デモから。 DEMO なんのデモなのかわからないと思うので、説明をします。 まず、緑のエリアは、丸っと画像です。 あ、ブレイクポイントは640pxです。 画面サイズを640px以下にして見てください。 で、 緑のエリアは、丸っと画像なので... 続きを読む
[JS]ページの背景に、美しい幾何学状のアニメーションを簡単に実装できる超軽量スクリプト -particles.js | コリス
2014/11/14
121 users
コリス
canvas
Step
Body
アニメーション
最近見かけるようになった背景にCanvasで描いた粒子でできたような幾何学状のアニメーションを簡単に実装できる超軽量スクリプトを紹介します。 ↓は静止キャプチャですが、優美なアニメーションで動きます。 Demo: Elegant particles.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script s... 続きを読む
複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」:phpspot開発日誌
2014/01/31
104 users
jQuery
クロスドメイン
jQueryプラグイン
時系列
複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」 2014年01月31日- Demo ? jQuery Feeds 複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」 クロスドメインのRSSもサポートしていて、サーバサイドスクリプトは一切不要。 複数のRSSを時系列にサクッ... 続きを読む
横に水平線のあるテキスト · terkel.jp
2014/01/08
141 users
terkel
span
CSS
見出し
水平線
おもに見出しなどで見かける、テキストの左右 (またはそのどちらか) に水平線を配置したスタイル。これを CSS で実現する方法について考えてみました。 Demo: 横に水平線のあるテキスト 重ねて隠すパターン まず最初は、1 本の水平線を幅いっぱいに配置した上で、テキストに重なる部分を隠す、という方法です。 <h2><span>Latest Posts</span></h2> マークアップはこのよ... 続きを読む
無料でしかも高品質！1ページで構成されたサイトを作るためのWordPressのテーマファイルのまとめ | コリス
2013/10/21
478 users
コリス
scrollorama
エフェクト
ポートフォリオ
キャンペーン、ギャラリー、ポートフォリオ、アプリ紹介、ランディングページ、個人ブログなど、1ページで構成されたウェブサイトを作成するWordPressのテーマファイルを紹介します。 全て無料で、レスポンシブ対応です。 Minimable Bootstrapをベースにしたテーマファイルで、Scrolloramaを使ったスクロールのエフェクトを楽しむことができます。 Demo -Minimable P... 続きを読む
固定ヘッダーを簡単に実装可能なJavaScript！On Scroll Header Effects | 株式会社LIG
2013/10/10
148 users
実装
株式会社LIG
JavaScript
jQuery
デモ
こんにちは、デザイナーのモモコです。 新オフィスに引っ越してから、いろいろな人のお手製ご飯が食べられて嬉しい今日この頃です。 今回はセクションごとにスタイリッシュな切り替えが出来る固定ヘッダーを簡単に設置できるJavaScript。「On Scroll Header Effects」をご紹介します。 DEMO まずは、デモを御覧ください。 デモページはこちら 実装手順 使用するのはJqueryとw... 続きを読む
HTML5でパーティクル表現！ CreateJS用のパーティクルエンジンParticleEmitterJS | ClockMaker Blog
2013/04/08
115 users
パーティクル表現
ClockMaker Blog
HTML
HTML5でパーティクル表現！ CreateJS用のパーティクルエンジンParticleEmitterJS にゃあプロジェクトさんに教えてもらったのですが、HTML5用のパーティクルエンジン「ParticleEmitterJS」が面白そうだったので試してみました。次のような表現がHTML5で簡単に作ることができます。 Demo (Require the browser supported HTML... 続きを読む
HTML5でテキストのシャッフル演出ができるJSライブラリ「ShuffleText.js」 | ClockMaker Blog
2012/02/07
122 users
JSライブラリ
テキスト
ClockMaker Blog
Flashでよく見かけるテキストシュッフル演出(文字列がランダムで切り替わる演出、正しい呼び名はわかりませんｗ)をHTML5で作ってみました。HTMLのタグ(pタグとか)に使うバージョンとHTML5の新要素Canvasを使うバージョンの二種類です。 demo (HTMLエレメント版) demo (Canvas版) Canvas版のほうはHTML5対応ブラウザ(ChromeやSafari)でなければ... 続きを読む
画像を使わずに見出しを水平線で挟むCSS小技 - かちびと. net
2011/11/05
195 users
見出し
水平線
net
クロスブラウザ
画像
ちょっと素敵だったので備忘録。CSS で見出しを水平線で囲むテクニック です。本とかでよくある表現方法です が、これを画像を使わず実装しよう、 というもの。クロスブラウザで動作 しますので汎用性もありますね。 これはいいですな・・・IE6でも7でも実装出来て、背景カラーや画像にも依存しません。 demo こんな感じ。よく見かけますが、これをCSSのみで実装するTipsです。 CSS h1 { bo... 続きを読む
[CSS]overflowを使ってfloatの問題を解決するスタイルシートのテクニック | コリス
2011/03/10
712 users
overflow
コリス
float
フロート
ラッパー
下記は各ポイントを意訳してものです。はじめにDemo 1: overflow:auto;Demo 2: overflow:hidden;overflowを使って生じる問題点と解決方法はじめにフロートベースのレイアウトをする際、ラッパーとなるコンテナがフロートしている子要素に対して高さを拡張しないことは、普通によくある問題です。デモ：１ フロートをクリアする要素を配置して解消した例しかし、この問題を... 続きを読む
[JS]ダイナミックなアニメーションでレイアウトを変更するスクリプト -Isotope | コリス
2011/02/09
129 users
Isotope
コリス
jQuery
セレクタ
エレメント
Demo: images IsotopeにはimagesLoadedプラグインも含まれており、画像のロードにコールバック関数を利用できます。Isotopeの特徴レイアウト モード：CSSだけではできない、インテリジェントでダイナミックなレイアウトを実現します。フィルタリング：jQueryのセレクタを使用して、簡単にエレメントのフィルタリングが行えます。ソート：あらゆるデータからソートが行えます。各... 続きを読む
今日からCSS3アニメーションを使えるようになるチュートリアル | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話
2010/09/26
351 users
カヤック
KAYAC DESIGNER
チュートリアル
CSS3のアニメーションってスゴい！ 先日のぽんたくんの記事でも紹介されたように、CSS3ではアニメーションも制御できるようになりました。 ということで、ぼくもCSS3のアニメーションを使ってdemoをいくつか作ってみました。 SafariやChromeなどwebkitブラウザで表示してみてください。 コピペで使えるCSS3アニメーション - jsdo.it ※PLAYボタンをクリックすると表示さ... 続きを読む
CSS のみで吹き出し - terkel.jp
2009/12/06
485 users
terkel
div
Weblog
Body
CSS
hail2u.net – Weblog – Pure CSS な吹き出し に触発されて、画像や JavaScript を使わずに CSS だけを使って「吹き出し」を作る方法を僕も考えてみた。 Demo: CSS のみで吹き出し マークアップは 2 重の要素があれば OK。ここではそれぞれ bubble と body というクラスを付与した div と p を例に説明する: <div class="... 続きを読む
デザインの参考にもなるWordPressのテーマ30選 -2009年2月 | コリス
2009/02/03
327 users
コリス
グリッドデザイン
細部
ナビゲーション
パネル
最近リリースされたものを中心とした、細部までしっかりとデザインされたWordPressのテーマ30選＋αです。 The Stars (demo) しっかりしたグリッドデザインを採用、打ち出しやパネルやナビゲーションがセ [...] 続きを読む