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