jQueryで長いページの区切り（セクション）ごとに背景を変化させる
Posted: 2011.11.07 / Category: javascript / Tag: jQuery, アニメーション 最近は一ページに内容を詰め込んだ縦長のページが増えてきましたね。 そこでスクロールすると区切り（セクション）ごとに背景が変化したら、面白いのではないのかと思いましたのでやってみました。 html sectionはhtml5ではなくdivにclassでマークアップした昔ながらの形式にしました。 html <div class="section"> <h2>Section0</h2> <p> ここは0番目のコンテンツです。 </p> </div> <div class="section"> <h2>Section1</h2> <p> ここは1番目のコンテンツです。 </p> </div> <div class="section"> <h2>Section2</h2>
jQueryプラグイン「Easy Slider」でスライダーを簡単導入
twitter facebook hatena google pocket スライダーを導入したい。 でも導入は難しそうだからと、見送っていませんか。 jQueryプラグイン「Easy Slider」なら、あなたのサイトでもすぐに使用できます。 sponsors 使用方法 Easy Sliderからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.3.js"></script> <script type="text/javascript" src="easySlider.packed.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider(); }); </script>
デザインどや！？｜海外カジノ オンラインのWEB作成
Webページレイアウト、ナビゲーションプラグイン、フォーム、スライダー＆カルーセルプラグイン、チャート＆グラフプラグイン、イメージエフェクトプラグイン、ビデオプラグインなど。チェックしておきたいです。海外カジノ オンラインサイトの制作はワードプレスのプラグインを利用して様々な機能を付け加えて完成させることができます。2012年のjQueryプラグインまとめでは、デザインの一新や個別のカスタムにも対応した国際的で魅力的なサイト作成に役立つ情報を紹介しています。
ソースがシンプルなJSによるロールオーバー｜CSS HappyLife
Webは略語じゃないのに「WEB」って書く人が多いのが気になって仕方ない今日この頃。（あ、音声ブラウザを配慮したらという場合です） さて、本題に。 CSSのみでロールオーバーするテクニックは有名でございますが、ココ最近JSでいいじゃん。と思うようになってます。 ってことで、こんなサイト名ですけどJavaScriptでやるロールオーバーの方法のひとつでも。 jsファイルのご用意 何はともあれ、下記のjsファイルをご用意します。 function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src")
JavaScript Slideshow - HTML Buttons, Sliding Transition - Agile Development
Slideshow: Flavor 3 Vertical "Content Buttons" Sliding Transition Code Sample <link rel="stylesheet" href="agile_carousel/agile_carousel.css" type='text/css'> <div class="slideshow" id="flavor_3"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script> <script src="agile_carousel/agile_carousel.a1.1.js"></script> <script> $.getJSON("agile_carousel_data.json", fun
Agile Carousel - Javascript Slideshow - Image Carousel
Usage Add a div to your page in the location where you would like to add your slideshow. Invoke the plugin as shown below. Provide data in JSON format as shown below. See the "Settings" section at the bottom of the page for available settings. See the "Single Page Examples" (above) for more implementation examples. Invoke the Plugin <link rel="stylesheet" href="agile_carousel.css"> <script src="ht
写真アルバム・フォトギャラリー作成･サンプル集 JavaScript･Ajax･jQuery･css【マイ アイランド】
ここで公開されているフォト ギャラリー テンプレートを、ホームページを作成するときに利用すると より魅力的なWebサイトになります。ぜひ、ホームページ作成時に役立ててください。 ※ご利用になる際は、必ず利用規約をお読み下さい。 テンプレート利用規約 Tweet
IE6対応！jQueryで透過PNGのロールオーバーを作る (2/3)
IE6で透過PNGを表示する さて、ここからが今回の本題です。サンプル01をIE6でも正しく表示できるようにします。IE6ではCSSの独自拡張（filterプロパティ）を使って透過PNG画像を背景として表示できます（関連記事）。jQueryのスクリプトを書く前に、IE6で単純に透過PNGを表示するHTMLとCSSを作成します。 ナビゲーションメニューのHTMLはサンプル01と同様にul/li要素で記述します。IE6では透過PNGをimg要素に直接指定しても表示できませんので、代わりにダミー画像（1px×1pxの透過GIF画像＝「transparent.gif」）を用意してsrc属性に指定します。img要素にはCSSを設定するため、「jquery」「javascript」などのメニューの項目名に対応したclass属性を付けておきます。 ▼サンプル02（HTML部分） <ul> <li><a
ロールオーバーを簡単に実装する-Image Rollover Code-
ロールオーバーを簡単に実装する-Image Rollover Code- Image Rollover Codeはロールーオーバーを簡単に実装する為のjsライブラリです。 設置方法 配布元のDaniel Nolanのサイトよりrollover.jsを取得し、head要素内などで読み込みます。 <script src="rollover.js" type="text/javascript"></script> ロールオーバーを実装したいimg要素のclass名に『imgover』を指定します。 <img src="sample.jpg" alt="Some Image" class="imgover" /> すでに、他のclass名がつけられている場合は、半角スペース区切りで指定することにより複数のclass名を指定する事が可能です。 <img src="sample.jpg" alt="S
JavaScriptで文字サイズを変更２ - Good Sleep｜Webデザイナーの日々のスキマ
カレント表示対応版｜styleswitcher.js 以前、｢JavaScriptで文字サイズを変更｣という記事を書きましたが、カレント表示（現在どのサイズで表示されているか）でつまずき、結局画像を使ったボタンにして、どのサイズで表示されているか？というコトが分からないサンプルを紹介しました。 実際に文字サイズを変更するような案件が出てきたコトもあり、何か対策がないものかと考えていると、灯台もと暗しというか何というか…、非常に簡単であるコトに気づきました。 styleswitcher.jsで読み込むalternate stylesheetにそれぞれのボタンの状態を記述すれば良いだけだったんですね。 …という訳でサンプルです。 ↑このサンプルはこちらからダウンロードできます。 今回、｢小 中 大｣の文字も画像にしてしまったため、ソース上のテキストはdisplayプロパティで消してしまってます
prototype.jsを用いたフォントサイズ変更スクリプト
Posted by: Hirotaka Ogawa @ January 11, 2007 02:57 PM | Movable Typeを触っている時間がとれないのですが、新年に入ってからちょっとばかしテンプレートとスタイルシートを変更して、ほぼ一カラム、ほぼfont-size: 100%で表示されるようにしました。要はレイアウトとか考えるのを最小限に留めようと思ったわけです。不得手なデザインをこれ以上考える必要がないという私個人の精神衛生上の利点に加え、読者の目にも優しくなりました。 結論: でかフォントは人を健康にします。 それだけだとなんなので、prototype.js (Prototype JavaScript Framework: Class-style OO, Ajax, and more)を使ってフォントサイズ変更スクリプト(クッキー保存機能付き)を実現してみました。これまで
テキストサイズを変更する、TextSizeController.js。 | Blog - trustworks [トラストワークス]
2008.01.07 javascript テキストサイズ（フォントサイズ）を変更するJavaScriptです。 アクセシビリティの向上に、多少なりとも役に立つかと思います。 Cookieを利用して、前回訪問時の設定も保存可能です。 また、全てのHTMLファイルに、このJSを読込ませれば、 ページ遷移をした時でも、設定を引き継げます。 はじめまして。ちょうどこのようなライブラリがないか探していたので使用してみたのですが、どうも同じページで使用している別のライブラリとバッティング？しているようなのですが、原因はお解りになるでしょうか？ 使用しているライブラリはスムーズスクロール用のライブラリでここから持ってきました。 http://www.dezinerfolio.com/2007/08/08/df-javascript-smooth-scroll/ もし時間があって、解るようでしたら教えて
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery custom scrollbar
jQueryで作る軽快なスライドナビゲーション – creamu
Michael Leigeber
JavaScript + Ajax 実践サンプル集 - jQueryのgallerifficプラグインでイメージギャラリーを組み込む