ogaoga.orgogaoga.org is a domain for ogaoga.
HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO
そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript（jQuery）でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu
LADER
ラダーは台所用品を中心とした日用品のお店です。素材・デザイン・機能性などを重視し、実際に使ってみて良かったものだけを販売しています。道具を組み合わせた時の使い勝手・コーディネートの相性も気をつけて選んでいます。
⑮jQueryをおぼえよう！その１
3. 注意事項 • この資料の中には、2012/05時点での事実が書いてあるつもりです が、時代とともに移り変わる情報もあるので最新情報のチェックも 忘れずに！ • 主観に基づく事柄もあります。そんな場合は、この色でコメントす るようにしています！信じるか信じないかはあなた次第！ • ざっくり説明するために、簡単に説明しています。厳密にいうと ちょっと違う部分もあるかと思います。でもまあ、だいたいあって る（はず）。 • 過去の環境（IE6とかIE7とか、PHP4とか）には採用されていない 話もあるので、その辺をターゲットにする場合は注意（無視してい いと思うけど） • リンクは日本語訳がある場合はそっちにリンクしています。公式情 報ではないので、仕事で使う場合は原文を確認しましょう。 5. HTML5って何？ • HTMLの新バージョン • まだ決まってない←重要 • 草
HTML5+CSS3で作った無料ブログ用テンプレート【SimpleBlack】
自分の知識の確認の意味を込めて、去年の11月にHTML5用の簡単なテンプレートを作成しました(もともとはCSS Animationの確認のために作った物です)。 もし気に入っていただけたらダウンロードして使っていただけたら幸いです。特に変わった仕様も無く、シンプルで単純なものだったので、多少でも見栄えを良くしようと、先日カスタマイズしておきました。 カスタマイズといっても、jQueryやアイコン・画像・少しのコードを追加しただけなので、そんなに期待しないでね！ちなみにブログ用にカスタマイズしてあります。 あとこのテンプレートの名前は【SimpleBlack】です(名前なんてどうでもいいですよね)！ 今回利用したjQueryなど jQuery Slider2 すごくシンプルで、軽量なスライダーです。あまりにシンプルだったので、本当に動くのか心配だったんですが、きちんと動いてくれました！このテ
<meter> polyfill (jQuery プラグイン) - JavaScript ライブラリー - HTML5.JP
使い方 JavaScript/CSS <script src="jquery.min.js"></script> <script src="jquery.html5jpMeterPolyfill.js"></script> <script> $(document).ready(function() { $('meter').html5jpMeterPolyfill(); }); </script> <style> meter { display: inline-block; width: 5em; height: 1em; vertical-align: -0.2em; } </style> HTML <meter value="20" min="0" low="30" high="70" max="100" optimum="100"></meter> <meter value="50"
スマホアプリ開発はHTML5／jQuery Mobileとネイティブどっちがいいの？～第2回テックヒルズまとめレポート（1/2） - ＠IT
スマホアプリ開発は HTML5／jQuery Mobileとネイティブ どっちがいいの？ 第2回テックヒルズまとめレポート 柴田克己 2012/4/27 iPhoneやAndroid端末の急速な普及を受け、多くの開発者が近年関心を寄せているのが「HTML5で実現できるWebアプリと、各プラットフォーム向けに特化したネイティブアプリ。開発するならどちらがトク？」というテーマだ。 2012年4月13日に、このテーマについて実際にスマホやWeb向けのアプリ開発を手掛けている技術者たちが意見を戦わせる「第2回テックヒルズ『ネイティブアプリ』vs『Webアプリ』～これからのアプリ開発のトレンド～」と題したディスカッションイベントが、六本木アカデミーヒルズで開催された。 司会進行を務めたのは、同イベントを企画、運営するインターネットサービス企業「CROOZ」の技術統括本部取締役の小俣泰明氏だ。 小俣氏
HTML5のplaceholder属性をクロスブラウザ対応にするjQueryプラグイン「jQuery-Placeholder」
HTML5のplaceholder属性をクロスブラウザ対応にするjQueryプラグイン「jQuery-Placeholder」jQueryプラグイン「jQuery-Placeholder」を紹介します。 jQuery-Placeholder １．基本 HTML5のplaceholder（プレースホルダー）属性は、フォームのテキストフィールドやテキストエリアに淡い色のテキストを表示する機能です。 HTML <input type="text" placeholder="入力してください" name="foo" value="" /> 実際の表示 HTML5のプレースホルダーをサポートしていないブラウザではplaceholder属性のテキストは表示されませんが、jQuery-Placeholderプラグインを利用すれば表示されるようになります。IE6などでも大丈夫です。 これで、focus()
あなたの作業を音速にするかもしれないWEB屋の作業スピードを上げるチートシート大量紹介 | バンクーバーのうぇぶ屋
このブログがフロントに関する記事が多いもんだから、たまにデザイナーと呼ばれることがあるんですが、僕は業務としてはデザインよか制作ディレクションの方がどちらかと言えばメインなんですよね。 そんなディレクターとしての役割の一つに、周りにいる優れたデザイナーやプログラマー、デベロッパーの業務効率を考えることが挙げられます。 何を取るわけでもなく中途半端な僕ですが、ディレクターとして周りの各プロフェッショナルの役に少しでも立てればと、そして制作する上での効率を向上させるべく色々情報収集をする中で、よくチートシートの存在を目にします。（チートシートってどれだけ普及してるのかわかりませんが、つまりカンニングペーパーのことらしいです。） WEB屋にとってのチートシートって、どれだけ優れた技術力やデザイン力を持っていても、何かしら新しい発見がある物ですよね。以前書かせてもらった時間の価値は人によって違う！
Youtubeの動画を背景に
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
Web制作の為の無料Webサービス・ツール40*ホームページを作る人のネタ帳
web制作で使えるWebサービスや、Webツールなどをご紹介。 小分けして紹介していた分もあわせてまとめています。定番の物からマニアックなものまでお楽しみください。 グラフィック・創作 10,000s Cool FREE Seamless Patterns-パターンファイルジェネレータ Web制作でもよく背景で利用するパターンファイルを作成する素晴らしいジェネレータ。様々な模様があり、色は決めれますので、組み合わせはほぼ無限です。 Pixlr Photo Editor-オンラインフォトエディタ 世界で最も人気とされるオンラインフォトエディタ。OSを選ばない。 photoshopに近いインターフェイスと、ブラウザさえあれば動くという使用が人気。ユーザー登録しなくても利用できる（したほうが便利）。 Vintage Effect-レトロ、ヴィンテージエフェクト 上のPixlr.comが運営するも
jQuery Mobileを使ったスマートフォン向けHTML5フレームワーク·The-M-Project MOONGIFT
The-M-ProjectはiOSやAndroidといったスマートフォン向けに特化したWebアプリケーションフレームワーク。 The-M-ProjectはJavaScript/HTML5製のオープンソース・ソフトウェア。Webアプリケーションが本格的に取り入れられるようになっている。AjaxなどによるWebアプリケーションの操作性向上に加えて、JavaScriptで実現しうる機能が増えていることに要因があるだろう。 サンプルのTodoアプリ そしてもう一つがHTML5の存在だ。PCブラウザ向けにはまだ全面採用は難しいものの、スマートフォンであれば採用できるだろう。そんなスマートフォン向けのWebアプリケーションを開発する際に使えるフレームワークがThe-M-Projectだ。 The-M-ProjectはHTML5を採用したWebアプリケーションフレームワークだ。iOSはもちろん、Andr
「jQuery Mobile」の登場で、モバイルアプリケーション開発は大きく変わる － Publickey
このところHTML5関連のモバイルアプリケーション開発について調べていて、先週の水曜日にはSwapSkills主催のイベント「jQueryモバイルで簡単！ スマートフォンサイト作成」に参加してjQuery Mobileについて勉強してきました。 jQuery Mobileとは、jQueryのプラグインとして利用するモバイルアプリケーション用のライブラリです。そしてその驚異的なまでの簡単さは、これから業務用のモバイルアプリケーションの作り方を一変させてしまう可能性を感じさせます。 jQuery Mobileの大きな特徴は次の3つです。 1）HTMLを書くだけでモバイルアプリケーションができてしまう 2）モバイルのユーザーインターフェイス対応の部品が多く揃っている 3）iOS、Android、WebOS、Windows Moblie、Symbianなどクロスプラットフォーム対応である 具体的な
WanderWall – A jQuery, CSS3 & HTML5 Hover-Based Interface | AddyOsmani.com | Where Web Businesses Grow
Hey guys. Today I’m going to teach you how to create a useful hover-based user interface using jQuery, CSS3, HTML5 and @font-face. Why a hover-based interface? you might ask. Well, with the popularity of touch-based web applications simplifying the way that people can use sites on mobile devices, I think that there’s room for us to look into ways of making it even easier for people to use sites in
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
東京渋谷 “HTML5入門＆jQuery” 勉強会(5/26)の資料を公開します | tonowp
今年(2011年)参考になったWeb制作者向けのスライドのまとめ - かちびと. net
フォームのテキストエリアをより使いやすくするテクニック集