HTML5でテキストのシャッフル演出ができるJSライブラリ「ShuffleText.js」 | ClockMaker Blog
Flashでよく見かけるテキストシャッフル演出(文字列がランダムで切り替わる演出、正しい呼び名はわかりませんｗ)をHTML5で作ってみました。HTMLのタグ(pタグとか)に使うバージョンと、HTML5の新要素Canvasを使うバージョンの二種類を用意しました。 【2017年4月26日 追記】 【重要】JSライブラリーはGitHubで更新しています。使用したい方は次のGitHubのリポジトリを御覧ください。 Canvas版はCreateJS 2015年版でも動作するよう更新しました。 デモ demo (HTMLエレメント版) demo (Canvas版) ソースコードはMITライセンスで公開してしますので、個人・商用問わずご自由にお使いください。 ShuffleText.js (HTMLエレメント版) ShuffleEaselText.js (Canvas版) それでは以下で使い方を紹介して
HTML5のcanvasを使ったお絵かきツール詳説
HTML5のcanvasを使ったお絵かきツールを勉強がてら作ってみました。下記の画像リンクをクリックすればサンプルページにジャンプします。 サンプル 以下、サンプルのHTMLとJavaScript（jQuery）を使って、canvasのお絵かきツールについて解説します。 探しきれてないだけと思いますが、お絵かきツールのjQueryでの実装が見つからなかったので、自力で書いてみました。いろいろ間違ってたらすいません。 １．HTML サンプルのHTMLは次のようになっています。 <canvas width="500" height="400">お使いのブラウザはHTML5のCanvas要素に対応していません。</canvas> <ul> <li style="background-color:#000"></li> <li style="background-color:#f00"></li>
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
HTML5技術を大盤振る舞い！「おHTML5」制作秘話 | KAYAC Director's Blog
HTML5 HTML5技術を大盤振る舞い！「おHTML5」制作秘話 新年 あけましておめでとうございます！ クライアントワーク 企画部の村上です。 本年も、カヤックディレクターズブログを どうぞよろしくお願いいたします！ さて、カヤックは毎年年始のご挨拶としてお年賀サイトを公開しております。 今年もコンテンツもりだくさんの、楽しいサイトが出来上がりました。 もうチェックしていただけましたでしょうか？？ まだのかたは、こちらからご覧ください！ カヤックでは、このお年賀サイトに掲載するコンテンツを 全社員まぜこぜにしてチーム編成し 年末に企画制作します。 今回ばびこチームが制作したのは、 昨年から熱い風を吹かせ続けている HTML5技術を使った、ブラウザでお正月気分を味わえるコンテンツ 「おHTML5」です。 お正月コンテンツとして、たくさんのツイートやいいね！を頂きました。 あ
localStorageはいい感じ
今日のネタは、HTML5で規定されているlocalStorage(ローカルストレージ)についてです。 以下、特徴をいくつか挙げてみます。 2011/07/06 イベントについて追記 ローカルにデータを保存します PCやスマートフォンなどの端末にデータを保存します。 別のサイトに行こうが、ブラウザを閉じようが、データが残っています。 localStorageの使い方としては、キャッシュ的な使い方が良さそうです。 「サーバーからデータを取得してlocalStorageに格納しておく。次にアクセスしたときはlocalStorageから取得する。もしなければサーバーに取りに行く。」 って感じで。 サーバーに取りに行かなくて済むなら処理が早くなってハッピーですね。 所詮はローカルのデータなので、データが存在することを前提にしてはいけません。 モダンなブラウザなら大概使えます IE8以上、FireFo
HTML5 & CSS3 ブラウザ別サポート状況
What is an IP Address? An IP (short for “Internet Protocol”) address is a unique number assigned to every machine that connects to the internet. Nowadays, you can have multiple computers behind a router that share a single IP using Network Address Transformation (NAT). If you have ever used a wifi hotspot to access the internet, you’ve shared an IP address with someone. What’s the Difference betwe
html5 Gallery|A showcase of sites using html5 markup
Beginning HTML5 & CSS3 The Web Evolved: A new book on HTML5 & CSS3 by Richard Clark, Oli Studholme, Christopher Murphy and Divya Manian. Buy it now HTML5 DoctorHave a look at our sister site, HTML5 Doctor for news, views and tutorials about HTML5. With articles by Bruce Lawson, Remy Sharp and more. Visit HTML5 Doctor This site is licensed under a Creative Commons Attribution-Non-Commercial 2.0 sha
位置情報をブラウザで活用！ Geolocationを使いこなそう
連載目次 HTML（HyperText Markup Language）は、W3C（World Wide Web Consortium）が仕様を管理するマークアップ言語だ。そして、W3Cが勧告し、現在ほとんどのサイトが使用しているHTMLは、HTML 4.01だ。 HTML 4.01の仕様は当時の環境に起因しているが、主に「文書を扱うこと」を目的として1999年に勧告されている。しかし、Web 2.0の概念やAjaxの登場により「文書を扱う」というよりも「アプリケーションを扱う」ことがWebの主目的となり、HTML 4.01でも高機能なWebアプリケーションが構築されるようになった。 その一方で、ブラウザ・ベンダは、HTML 4.01のみでWebアプリケーションを開発することの限界を感じていた。結果としてApple、Mozilla、Operaの3社は、W3Cとは別にWHATWG（Web H
HTML5＆CSS3でフォームをかっこ良くするチュートリアル集:phpspot開発日誌
Top 15 HTML5 and CSS3 Forms Tutorials | webexpedition18 HTML5＆CSS3でフォームをかっこ良くするチュートリアル集 次のように検索窓をかっこよくしたり入力フォームをクールにしたりするチュートリアル集です。 CSS3の便利さは分かっているつもりでも、いざつくろうとなると頭を抱えてしまう場合もありそうですが、あらかじめこうしたサンプルでパターンを把握しておけばデザインが効率的に行えそうですね。もちろんそのまま利用させてもらうというのもありですが。 ５年後のフォームはどんな物が主流になっているか楽しみですね 関連エントリ HTML5とCSS3を使ったフォームデザインのチュートリアル集３０ HTML5/CSS3に関する便利ツールやチーとシート、リソース２５ HTML5＋CSS3でクールなオーディオプレイヤー「ZEN」 CSS3で描画された
2130703450443574201?keyword=HTML5
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
HTML5 vs ネイティブ。モバイルアプリはどちらで開発するべき？（前編） Google I/O 2011
HTML5 vs ネイティブ。モバイルアプリはどちらで開発するべき？（前編） Google I/O 2011 モバイルアプリケーションを開発する方法として、JavaやC/C++などのプログラミング言語とSDKを用いてネイティブアプリケーションとして開発する方法以外に、HTML5/CSS/JavaScriptを用いて開発する方法が登場してきています。 この2つのアプリケーション開発にはどのような違いや利点があるのでしょうか？ Androidを題材にして解説したセッション「HTML5 versus Android: Apps or Web for Mobile Development?」がイベントGoogle I/O 2011で行われました。 HTML5でモバイル開発を行う利点 Reto Meier氏（左）、Michael Mahemoff氏（右）。
クロスブラウザはもう古い！ HTML5＋CSS3時代のプログレッシブ・エンハンスメント
IE 9が登場！ ユーザーの閲覧環境がますます多様化！ 4月26日、ついに日本でもInternet Explorer（以下、IE） 9が公開されました。また、マイクロソフトは早くもIE 10のプレビュー版を公開しており、CSS3やJavaScript周りが、さらに強化されるなどリッチなWeb表現が加速してきています。 IEのみならず、Firefox、Safari、Google Chrome（以下、Chrome）など他のWebブラウザもすさまじい勢いで進化してきており、スマートフォンやタブレットPCなどのデバイスも続々と開発され、ユーザーの閲覧環境がますます多様化してきています。 そうした流れの中で、必然的に欠かすことができなくなる知識が、この「プログレッシブ・エンハンスメント」という概念です。 プログレッシブ・エンハンスメントって何？ Webブラウザや端末などの閲覧環境が多様化してきていま
HTML5 Shelf
Why scour the web for the latest and cool information on HTML5 and related technologies? Let HTML5 Shelf curate the good stuff for you. Tweet You can scroll the shelf using left and right keys Fluid Squares is a mobile-first, HTML5 fluid grid framework whose units remain square and uses CSS3 Media Queries. 08.11.11 | 11 notes | responsive web design html5 css3 media-queries The Lotus Poetry is a H
Web Frameworks: Pros And Cons Of Using Frameworks
Sometimes you should ask yourself, why you need to do the same thing everyday when there’s a new bridge to shorten the path. Think of web frameworks as bridges that will help you code faster and easier. Did you notice I didn’t include the word “better” in the last sentence? Faster and easier doesn’t always mean better, but we will get to that later. First things first, so what is a framework reall
世界初？のHTML 5でできた電子雑誌「aside」が出るらしい | gaspanik weblog
とりあえずこの数年の間で電子書籍や電子雑誌とよばれる媒体は、HTML 5（CSS 3 + JavaScript）で作ってタブレットやiPhoneなどのブラウザで見るって形に一旦は落ち着くんじゃないか（もちろんePubって選択肢も）、と思ってるこもりです、おはようございます。 いよいよ世界初？のHTML 5でできた「aside」という雑誌が出るようです。 Zinioみたいなオンラインストアを自身でもってデータが半分PDFみたいな形でもなく、BakerとかLakerみたいにフレームワークを使って作って最終的にApp Storeにアプリとして申請するわけでもない、と。 But in our world, magazines are press content, not software. And we don’t want a big company to decide whether our
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Naoki Otsu
htmlshowcase.com
HTML5 Mania
https://www.splashnology.com/article/useful-html5css3-snippets-for-web-developers/847/
実用的なデザインがたくさん揃ってる、HTML5+CSS3ベースのフレームワーク -Perkins