jQueryでページの最上部に位置固定したフルスクリーンスライドショー（クロスフェード）を設置する方法｜BLACKFLAG
最近のWebサイトでは写真をフルスクリーンでダイナミックに見せる技法や演出が多く見られます。 背景画像のフルスクリーン表示やフルスクリーンのスライドショーなど様々ありますが、jQueryを使って、ページ最上部（ページヘッダー）にフルスクリーンでのスライドショーを設置し、スクロールすると下から通常のコンテンツが表示される、というページ構成を実装するスクリプトを作ってみたので紹介してみます。 少々言葉では説明しずらいのでまず動作サンプルから。 「jQueryでページ上部にフルスクリーンスライドショーを設置する方法」サンプルを別枠で表示 ページの最上部にフルスクリーンサイズにて画像がクロスフェードで切り替わるスライドショーを設置し、ページをスクロールさせるとページ上部にフルスクリーンスライドショーが固定されたまま下からコンテンツ要素が出現します。 スライドショー全体はブラウザサイズを変化させても
ページ内ナビをコンテンツの位置によってカレント表示させる
パララックスをつかったサイトなど、縦長のページが昔に比べれば多くなった感じがしますがその際に、ページ内用のナビを設置する場合があると思います。スクロールした時そのコンテンツのエリアに来たら、ナビをカレント表示させるjsを調べて作ってみました。 参考にしたサイト 作ってみたと言いつつ、大部分が参考サイト通りなので先にご紹介いたします。 jQueryで長いページの区切り（セクション）ごとに背景を変化させる | webOpixel jQueryを使った長い縦スクロールページの現在地による制御 | 2GRAVITY カレント表示でaタグはそのまま とりあえずカレント表示されればOKのタイプ。カレントの箇所もクリックできます。 サンプルページ HTMLの抜粋は以下 <ul id="nav"> <li><a href="#section01">menu<a></li> <li><a href="#se
jQueryで「もっと見る」ボタンで画像を順々に読み込むUIの実験｜BLACKFLAG
TwitterやFacebookなどで使われている コンテンツ要素をある一定の数表示（読み込み）しておいて 続きは「もっと見る」や「MORE」といったリンクやボタンをクリックすることで 要素を順々に読み込んでいくUI。 このUIを実装する際、使いやすいjQueryプラグインがなかなか見当たらなかったりするので、 同様のUIを実装する為の実験的スクリプトを作ってみたので簡単に紹介してみます。 今回の実験では＜a＞リンクを張った＜img＞画像タグを ＜span＞タグで囲った構成のまとまり ———————————————————- ＜span＞＜a＞＜img＞＜/a＞＜/span＞ ———————————————————- 上記のセットを順々に追加していく構成になっています。 併せて、画像を格納するディレクトリ名と画像ファイル名には命名規則を付けます。 ———————————————————-
jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法｜BLACKFLAG
Webサイトのトップページで表示するお知らせ情報など、レイアウトの都合上、長い文字列を特定の文字数でカットしたいことはよくあることかと思います。 そんな際にjQueryを使って文字列を任意の文字数でカットして、末尾に「…」などの追記情報（これも任意の文字列）を追加するやり方をシンプルなスクリプトで実装する方法をご紹介してみます。 【テキストのみ】 jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法 まずは実装するHTMLソースが下記のような構成だったとします。 ◆HTML <ul> <li>このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です
LavaLamp for jQuery lovers! | Ganeshji Marwaha
Click on the above image to land in the Lava Lamp Demo page. Then, hover over it and feel for yourself, the nifty effect that Lava Lamp offers. What you just experienced is nothing but the LavaLamp menu packaged as a plugin for the amazing jQuery javascript library. I personally believe that the effect rivals that of flash – Don’t you? Especially considering the fact that it is extremely light wei
スクロールに応じて要素が動く、パララックスを実装できるjQueryプラグイン「scrolldeck」 | Web活メモ帳
スクロールによるパララックス効果を実装できるjQueryプラグイン「scrolldeck」 スクロールすると、画像やテキスト、その他色々な要素がアニメーションするWebデザインを最近良く見かけます。 パララックス(視差効果)や細かなアニメーションするものまで、様々なものがあると思いますが、 本日紹介する「scrolldeck」を使用するとパララックス効果を簡単に実装できるようになります。 パララックスがどんなものか分からない方のために先にプラグインのデモリンクを貼っておきます。 デモ1 デモ2 デモ3 スクロールで画像がずれて行く感じがたまらないですね。 使い方 プラグインを初期化します。 $(document).ready(function() { var deck = new $.scrolldeck(); }); オプション設定をする場合 $(document).ready(func
jQuery.supportでのブラウザ判別
chromeとsafariを対象とする場合 if(!jQuery.support.checkOn){ alert('あなたがお使いのブラウザはChromeもしくはSafariっぽいです'); } if文の条件式の中で!をつけたので、checkOnがfalseであればこの条件文に該当します。該当するのはwebkitだけなので、これでchormeとsafariのみに振り分けたコードを記述できます。なお、Android標準ブラウザ、iPhone / iPad標準ブラウザといったスマートフォンも同じChromeとSafariなので、この条件に合致します。 FirefoxとOperaを対象とする場合 if(jQuery.support.checkOn && jQuery.support.noCloneEvent){ alert('あなたがお使いのブラウザはFirefoxもしくはOperaっぽいです'
css-lecture.com - css lecture リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
背景にフルスクリーン画像をスライダーで流すjQuery「maxImage Scaling Plugin」
続いてbody部に １．フルスクリーン背景に使用する画像を設定します。 <img src=”images/bg1.jpg” alt=”” /> // 画像のパス１ <img src=”images/bg2.jpg” alt=”” /> // 画像のパス２ <img src=”images/bg3.jpg” alt=”” /> // 以下画像の数だけ設定 ・・・・・・ ２．コンテンツ作成 <div id=”maincontent” >～</div>に囲まれた部分にコンテンツを入れます。 そして、任意の場所（</body>の直前など）にJavaScriptを設定して完了です。 <script type=”text/javascript”> $(function(){ jQuery(‘img.bgmaximage’).maxImage({ isBackground: true, slideSho
jQuery Shadow Plugin
$('.box.sides-vt-1') .shadow({type:'sides', sides:'vt-1'});
jQueryでスクロールすると表示する系いろいろ
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で作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種
ベースとなるhtml 今回はテキストタイプなので文字列をリストで並るだけですね。 一部spanを入れた方が動作が安定することがあったので入れてます。javascriptのコードにspanを指定していなかったら外してください。 html <ul id="nav1"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">LINK</a></li> </ul> 1.マウスオーバーでスライドするボタン 単純に横にスライドするアニメーションは「marginLeft」を変化させます。 テキストの色はcssで変えてます。 このナビゲーションに限ってはliにspanを入れると安定して動作するっぽいです。 html <li><a href="
会社ロゴマーク デザインアーカイブ
Captcha security check laquu.com is for sale Please prove you're not a robot View Price Processing
jQueryAutoHeight.js - 複数のカラムの高さを最大値にそろえるjQueryプラグイン | かたつむりくんのWWW
Movable Type, Craft CMS, Drupal, HTML, CSS, JavaScript, jQuery etc. jQueryAutoHeight.js とは jQueryAutoHeight.js とは、複数のボックスの高さを自動的にそろえるシンプルな jQueryプラグインです。高さのそろえ方は、次の２通りです。 セレクタで指定したすべての要素を、その中の最大値にそろえる セレクタで指定した要素を、オプションで渡した数ごとに、その中の最大値にそろえる（1行ごとにそろえられる） サンプル 複数のボックスの高さを最大値にそろえるjQueryプラグイン ダウンロード Releases · tinybeans/jQueryAutoHeight ※jQuery 1.9 以降で利用する場合は v0.04 以降をお使いください。 使い方 ファイルの読み込み ダウンロードしたファ
少しのjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする - かちびと.net
列全体がクリック可能で、Wikipediaに飛びます。セル内にアンカータグが含まれている場合はそちらが優先されます。Webサービスの料金プランなんかに使えそうでは。 jQuery( function($) { $('tbody tr[data-href]').addClass('clickable').click( function() { window.location = $(this).attr('data-href'); }).find('a').hover( function() { $(this).parents('tr').unbind('click'); }, function() { $(this).parents('tr').click( function() { window.location = $(this).attr('data-href'); }); });
[JS]一つ一つのパネル表示をカスタマイズできるスライドショーのスクリプト -imgPlayer
一つ一つのパネルを異なるサイズで、最適な位置に表示し、異なる背景やアニメーションを設定できるスライドショーのスクリプトを紹介します。 imgPlayer デモページ [ad#ad-2] デモでは10枚のパネルがセットされており、それぞれ異なるサイズ、最適な位置で表示し、さまざまなアニメーションで切り替わります。 2枚目を表示したキャプチャ 静止画ではその楽しさが分からないので、ぜひデモをどうぞ。 デモページ スライドショーの操作は、画像の左右のアロー、下のナビゲーション、キーボードの矢印キーに対応しています。 実装は少し面倒で、個々のパネルごとに座標とサイズなどを指定します。 キャプションも設定できます。 JavaScript パネル（一枚）の設定例です。 [221,30,386,518,{ onStart: function(){ darkStyle(); $('#text').html
jRumble | A jQuery Plugin That Rumbles Elements
Latest Version: 1.3 Latest Release Date: December 3, 2011 Original Release Date: March 30, 2011 Compressed: 1.47kb Uncompressed: 4.84kb View GitHub Repository About The Plugin jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It's great to use as a hover effect or a way to direct attention to an element. 2016-11-04 Update This project is no longer being
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
finefinefine.jp
unwrongest.com
[JS]角丸を簡単な記述で実装するスクリプト -Roundcorners Canvas | コリス