この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 画面いっぱいに広がったグリッドレイアウト のイメージギャラリーをドラッグで動かす 事ができるコンテンツをjQueryで実装する 為のチュートリアルです。かなり良く出来 てます。iPhoneでも一応可能でしたので 工夫すればスマートフォンにも使えるかも。 Codropsのチュートリアルが相変わらず素敵なのでメモがてら。画面全体に広がったグリッドレイアウトのイメージギャラリーを丸ごとドラッグで動かせるようにする、というチュートリアル。 Draggable Image Boxes Grid 画面全体にギャラリーが広がり、全体をドラッグで動かせます。これは、Stephen HamiltonのWebサイトをオマージュしたもの。Stephen HamiltonはFlashですが
jQueryの設置参照サイト：jQuery fadeInを使ってAppleサイトのようなふわっと表示 jQuery本体 よくわかんねって人はとりあえず以下をテンプレートのhead-/head内にコピペ。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> フェード実行 head内に設置します。 <script type="text/javascript"> var i = 0; var int = 0; $(window).bind("load", function() { $('#wrap').fadeIn(100); // フェードインの実行 var int=setInterval("sFade(i)",100); // ミリ秒ごとにフェードインの処理の実行 })
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの 文法とかは調べればわかるのでふれません 一人で勉強してもわからなそうな概念などを重点的に説明します ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと アジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識 ライブコーディング part1 jQueryの基礎知識 ライブコーディング part2
filamentgroup/SocialCount GitHub シンプルデザインが使いやすそうなソーシャルカウンター「SocialCount」 Facebook, Twitter, Google に対応していて次のようなデザインでのソーシャルカウンタが実装できます CSSベースなのでお好きにデザインをカスタマイズすることも出来そうですね。 最近では必須ともいえるこうしたボタンも、自由にデザインしたい場合に覚えておくと使えそう 関連エントリ 5KBの読込でソーシャルボタンの実装が簡単にできる「Socialite.js」 ソーシャルサイトへのシェアボタンのデザインを統一させられるjQueryプラグイン「Koottam」 Facebook,Twitter,Google＋の独自デザインのソーシャルボタン作成用jQueryプラグイン「Sharrre」 円形に広がるソーシャルシェアボタン実装jQue
展開と共に、移動のアニメーションが加わります。 PFoldの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" type="text/css" href="css/pfold.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.pfold.js"></script> Step 2: HTML コンテンツの初期状態と最終状態をそれぞれdiv要素で実装し、div要素で内包します。 <div id="uc-
Loodsmedia ディスプレイ内のコンテンツもパララックスします。 Jarallaxの使い方 「Demo 3」を例に、実装方法を簡単に紹介します。 外部ファイル 「jquery.js」と当スクリプトをhead内に外部スクリプトとして記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jarallax-0.2.3b.js"></script> HTML HTML自体は通常通りに実装し、アニメーションのエフェクトを適用するエレメントには参照できるようid, classなどを付けます。 <h1 class="logo">Jarallax</h1> <div class="container" id="slide1"> <h2>見出し：slide
エレメントの高さ（height）、幅（width）だけでなく、outerHeight, innerHeight, outerWidth, innerWidthのサイズを揃えるjQueryのプラグインを紹介します。 デモ：幅 equalize.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="js/equalize.js" type="text/javascript"></script> Step 2: HTML HTMLは適用する要素を内包するラッパーを用意します。 下記はデモの高さを揃える方のHTMLです。 <div id="heigh
Responsive 3D Panel Layout | Codrops これは新しい!パネルレイアウトが美しいスライドショー実装デモ。 複数の文字や写真をアニメーション付きで美しく切り替えていくデモです。 Flashはなしで、レスポンシブに動くよう設計されています。とにかくカッコいいので一見の価値があります。 Flashを使わないでも実用的で有用な物がどんどん増えていきますね。 Flashに比べてカスタマイズが容易という点も特筆すべきポイントですね。 関連エントリ フルスクリーン背景がスライドショーになるCSS3サンプル PC・スマホ・タブレットで動くクールなHTML5スライドショー実装ができる「Juicebox」 ページ全体に広がるスライドショーを実装できるjQueryプラグイン「jQSlider」 レスポンシブな背景画像スライドショーを実現するjQueryプラグイン「bgStretc
2011年04月30日 03:45 引き続きv1.7.2を検証していた際、IE6～IE8でメモリがうまく開放されないケースがあったため、 対策版としてv1.7.3をリリースしました。 ご迷惑をおかけしますが、最新版へのアップデートをお願いします。 2011年04月30日 00:15 jQuery.socialbuttonのXSS脆弱性につきまして、対応版のv1.7.2をリリースしました。 v1.7.2以前のバージョンでは、urlオプションを指定せずに以下のボタンを呼び出した際、無害化されていない document.URLを参照することが原因で、XSS脆弱性が発生します。 mixi いいね facebook いいね GREE いいね 新はてなブックマーク 旧はてなブックマーク ご迷惑をおかけしますが、最新版へのアップデートをお願いします。 2011年04月29日 02:40 現在、jQuer
最近よく目にする、ページをスクロールしていくと出てくる「トップへ戻るボタン」をjQueryプラグイン化したので公開します。 ダウンロード GitHubで公開しています。 inc2734/jquery.scrollButton.js 使い方 プラグイン読み込み 下記のコードを記述してjQueryとプラグインを読み込みます。head要素の中とかが良いと思います。 <link rel="stylesheet" type="text/css" href="/PATH/TO/jquery.scrollButton/jquery.scrollButton.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <scri
fadeMoverプラグインの解説ページを別途作成しましたので、下記ページをご覧ください。 jquery.fadeMover – Fadein and Fadeout for jQuery ——- 以下 [ 2012-02-06 ] 以前の内容です —- [ 2012-02-06 追記 ] 最近このページのアクセスがかなり増えているので、記事を見直していたら、制作途中のものを記事にしてしまっていました。もしご利用をお考えになられていても「動かない…wtf…」となっていた方がおられたと思います。。。申し訳ありません。 作成途中で「ページ内リンクの動作禁止にしないと使えないよね、これ。。。」と気がつき、機能を付け足していたんですが、公開していたものが動作確認中の途中のスクリプトでした。それが原因でアンカーにclassを指定していたらまったく動作しないようになっていました。もし古いものをご利用さ
スライドを単に次々と見せるだけでなく、切り替わる時に3Dのダイナミックでかっこいいエフェクトを与えたスライドショーを実装するチュートリアルを紹介します。 Slideshow with jmpress.js [ad#ad-2] デモ 実装 デモ まずは、そのダイナミックな3Dのアニメーションをご覧ください。 スライドは5枚あり、それぞれアニメーションが異なります。 デモページ：別レイアウト 実装 実装に使用しているスクリプトは先日当サイトで紹介した「jmpress.js」です。 紹介記事はこちら。 広大なカンバスを使って次々にコンテンツをスライドさせるスクリプト -jmpress.js HTML jmpress.jsのイメージは一枚の広大なカンバスにパネルを設置し、それをアニメーションでスライドする感じです。 実装は一枚の広大なカンバスとなるルート（section要素）に、各パネル（div要
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
jQueryで、ぬるっとスクロールしながらページのトップに戻る機能を実装する。 公開：2009年11月 4日 21:06, 更新：2009年11月 5日 08:01 トラックバック(0) コメント(0) 最近の流行を抑えたサイトを見ていて気になる機能がありました。ページをスクロールして下へ移動すると、右下にスーッと出現する上向きのボタン。ポチっと押すと、ぬるっとスクロールしながらページのトップに戻ってくれる優れものです。 ホイールやスクロールバーを使って戻るのは、縦に長いページほど手間がかかるので、このプラグインがデザインの邪魔にならないのであれば是非実装してみましょう。場合によっては劇的にユーザビリティが向上します。 必要ファイルの準備 まずはjQueryのライブラリファイルを用意します。jQuery公式サイトに「Production (19KB, Minified and Gzi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
