parallax.js
WOW, that's deep man! parallax.js reacts to the orientation of your smart device, offsetting layers depending on their depth within a scene... Oh, you don't have a smart device? No worries, if no gyroscope or motion detection hardware is available, parallax.js uses the position of your cursor instead. Radical. This project is a collaboration between Matthew Wagerfield & Claudio Guglieri.
【保存版】IEのバージョンを判別し、バージョンごとにスタイルを適用する3つの方法 | DX.univ
エンジニアの菊池です。 今回、初めてブログを投稿させていただ[...]エンジニアの菊池です。 今回、初めてブログを投稿させていただくことになりました。 業務では主にフロントエンドの実装とマークアップ等を担当しています。 さて、Windows XPのサポート終了まで残り約8ヶ月となりました。 ようやく長くにわたり苦しめられてきたIE6から解放されることになりますが、でも実はIE7、8、9もIE6ほどではないまでもバグや独自解釈が多かったりします。 そんな時にはCSSハック等の手法やJavascriptを利用してIEだけ特別な処理やスタイルを適用したりします。 ということで今回かなり今更感はありますが、自分用の備考録も兼ねてIE6〜10のバージョン別CSSハックと条件付きコメント分岐、jQueryによるIEバージョン判別の3つの方法についてまとめてみました。 1.CSSハック /* I
[JS]ビフォーアフターの2枚の画像を分かりやすく比較できるようにするスクリプト -TwentyTwenty
2つの画像を重ねて、中央のバーをスライドしてビフォーアフターを切り替えて表示することで、簡単に比較できるようにするjQueryのプラグインを紹介します。 ↓はただのキャプチャ画像なので動作しません。 TwentyTwenty TwentyTwenty -GitHub TwentyTwentyのデモ TwentyTwentyの使い方 TwentyTwentyのデモ デモはスクリプトのページに大きく掲載されています。 モダンブラウザをはじめ、スマフォ・タブレットでご覧ください。IEは8+で。 オプションでオーバーレイのパネルを設定しています。 TwentyTwentyの使い方 Step 1: 外部ファイル 「jquery.js」とプラグイン「event.move.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <script type="text/javascript"
jQueryでコーディングをする際気をつけたいポイント | 1000ch.net
2012/12/02 少しだけわかる人向け Webの開発において欠かすことのできないJavaScript。 html/cssしか触った事のない人でも理解のしやすいモデルを提供するjQuery。 非常に便利なjQueryですが、DOM操作のコスト自体が低くなる訳ではありませんので、 実装方法によってはブラウザに大きな負荷をかける場合があります。 特にモバイルブラウザにとってはシビアな所だと思います。 モバイル端末の性能も飛躍的に向上してきてるとはいえ、 最適化された実装を目指さない理由はないでしょう。 この辺りを気をつけると良いっていうポイントを挙げてみます。 jQueryと銘打ってますがそれに限らず、Zeptoでも生jsでも同じです。 ループ文の書き方 よく書かれがちなループ文。 var array = ["data1", "data2", "data3", "data4", "data5
[JS]1.9から仕様が大きく変わったjQueryの複数のバージョンでのテストを簡単にできるスクリプト -version.js
jQueryは1.9から大きく仕様がかわり、プラグイン開発者やウェブ制作者は今まで以上に各バージョンの互換性に苦労するようになりました。 たった一行加えるだけで、jQueryの複数のバージョンでのプラグインやウェブサイトの動作テストを簡単にできるスクリプトを紹介します。 ※jQuery以外のスクリプトにも対応しています。 デモページ version.jsの使い方 使い方は簡単！ テストページに一行加えるだけです。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="version.js" data-url="google" data-lib="jquery" data-ver="1.5.0"></script> Step 2: スクリプトの実行 あとはjQueryのバージョンをパラメータに付与し、ページをロードするだけです。 http://
JavaScriptで画像をプリロード | ゆるぶ | ページ 340
2012.01.09追記 読み込み後にエフェクト入れたものはこちら JavaScriptで動的にタグを書きだしたりすると、その部分の画像が表示されてから読み込まれるのであらかじめ読み込んでおこうというよくある話。 とりあえず画像を配列とかに指定、パスは /images 配下に固定で。 (function(){…})() に記述するのは、他のJavaScriptとか読み込む時に変数名とか重複しないよう念の為。 (function(){ var preloadImages = [ 'ooo.jpg', 'xxx.jpg', '***.jpg' ]; for (var i = 0; i < preloadImages.length; i++) { (new Image()).src = '/images/' + preloadImages[i]; } })();
iPhone / iPadなどでposition: fixedが利用できる「iScroll」
配布元：iScroll ライセンス:MIT-License iPhone / iPad、Androidなどに搭載されているmobile WebKitではCSSのposition: fixedが利用できませんが、iScrollを利用することでこれらのプロパティを利用したようにヘッダーやフッターの固定が可能になります。 利用方法 まずは、head要素内などで配布サイトよりダウンロードしたライブラリ本体を読み込みます。 <script src="iscroll.js"></script> HTMLでは次のようにコンテンツ部分をwrapperとscrollerというidをつけたdiv要素で包んでおきます。 <body> <header id="header">ヘッダー部分</header> <div id="wrapper"> <div id="scroller"> コンテンツ部分 </div>
すっごい動くよ！テキストをアニメーションさせるjQueryプラグイン集めてみた - Webデザイン初心者向けのあれこれ
どうもこんばんは、僕です。 関東では雪が降った所もあったようですが、こちらはよく晴れたいい天気です。 降ったら降ったで大変ですが、全く降らないというのも何か物足りない…なんて気もしますね。 さて今日は、「テキストをアニメーションさせるjQueryプラグイン」を紹介していきたいと思います。 以前はFlashを使用したアニメーションが主流でしたが、最近はFlashに代わってjQueryを使ったアニメーションがが多く用いられています。 jQueryってすごいなぁ（小学生並みの感想） …おっと、話が脱線してしまいました。 1.Textualizer http://kiro.me/projects/textualizer.html 2.dynamo.js http://jordanscales.com/dynamo/ 3.TextBlur https://github.com/ottonascare
jQueryで「jquery.cookie.js」を使ってページの初回アクセスのみ処理を変える方法｜BLACKFLAG
このところ立て続けに、 Webページ上に初回アクセスのみ動画を表示させたい、 Webページ上に初回アクセスのみモーダルウィンドウを表示させたい、 など、初回アクセス時に処理・制限を変える要望があり、 「jquery.cookie.js」を使ってのクッキー処理にて それらを制御するサンプルを作ってみたので、 メモ書き程度に紹介してみます。 今回のサンプルでは、 初回アクセス時のみページ上に「初回アクセスです。」の メッセージテキストを表示するサンプルです。 jQuery Cookie First Access Control まずは動作サンプルから。 下記のリンクをクリックして表示されるページは、 初回アクセス時のみ、ページ上に「初回アクセスです。」のテキストが表示されます。 ※リロードしてアクセスが2回目以降となるとテキストは非表示になります。 ≫jQuery Cookie First A
ホームページを格安でスタートできるサブスクプランを紹介します 福岡市東区のホームページ製作 タクミデザイン
初期費用がかからないから、気軽にホームページが作れる。立ち上げ当初などの初期投資を抑えたい方や簡易的なホームページでよい方におすすめです。 ※初期事務手数料2万円（税別） 運営上で気になる更新の作業や、サーバー等の保守管理も行いますので、煩わしい作業がありません。 ※スタンダードプラン 月5回 ※ライトスタンダード 月3回 ※スモールプラン 月1回 の更新が付いています。 毎月定額なので、かかる予算も明確になります。 煩わしい更新や保守に関しても、気にすることが なくなりますので、ご安心してサイト運営が可能。
fleXcroll | Webサイト制作支援 | ShanaBrian Website
fleXcrollの使用方法をご紹介します。 fleXcrollはスクロールバーのデザインを独自にカスタマイズ可能にするオリジナルスクロールバーを付けるためのJavaScriptライブラリです。 公式サイト 目次 デモ ダウンロードと設置 JavaScriptの読み込み 適用方法 CSS その他のCSS スクロールバーの更新 text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text t
canvas要素 + Javascriptで作る、動的コンテンツ
HTML 5 + Javascriptで作る動的なコンテンツ 前回の授業では、HTML 5について、その成り立ちや特徴を解説した上で、新しい構造化のための要素について解説しました。また、あわせてCSS3によって格段に進歩した表現力について実際にサンプルページを作りながら解説しました。 今までは、Webページで動的に図や画像やアニメーションを描画するにはFlashが代表的な選択肢でした。しかし、ここ数年でその状況が大きく動きつつあります。Flashに代表されるような動的なコンテンツが、専用のプラグイン無しに、HTMLの要素とそれと連携するスクリプトだけで実現できるようになりつつあるのです。こうした技術は、今後のWebの動向を大きく変える可能性を秘めた技術として脚光を浴びています。 HTML 5で動的に画像やアニメーションを生成するためには、canvas要素という新規に導入された要素と、can
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Illustratorのデータをcanvasに変換する・「Ai to Canvas」 - かちびと.net
Conditionizr – 条件分岐機能がついた JS Loader
IEをHTML5やCSS3に対応させるJSライブラリーまとめ | A!@attrip