iOS7のかっこいいエフェクトを使ってコンテンツとナビゲーションを切り替えるスクリプト -iOS7 Zoom
iOS7のさまざまなシーンで利用されているズームを使って、コンテンツからナビゲーションを切り替えるjQuery+CSS3のかっこいいエフェクトを紹介します。 デモのアニメーション コンテンツから左上のボタンをタップ・クリックすると、ズームを使ってコンテンツを縮小し、ナビゲーションをダイナミックに表示します。 デモはデスクトップだけでなく、スマフォのブラウザでも動作します。 実際の動作は、下記ページで試してください。 iOS7 Zoom - out Side Nav Reveal スクリプトはjQueryを使って、下記のスクリプトを記述します。 (function($) { jQuery(document).ready(function() { $('.toggleMenu').click(function() { var windowHeight = $(window).height();
[JS]レスポンシブ対応の非常に美しい画像ギャラリーを実装する設置が簡単なスクリプト -least.js
least.js -デモ：画像の拡大時 least.jsの使い方 実装は非常にシンプルで、簡単です。 Step 1: 外部ファイル head内に「jquery.js」と当スクリプト・スタイルシートを記述します。画像の遅延読み込みには「lazyload.js」を使用します。 <!-- least.js CSS-file --> <link href="css/least.min.css" rel="stylesheet" /> <!-- jQuery libary --> <script src="http://code.jquery.com/jquery-latest.js" defer="defer"></script> <!-- least.js JS-file --> <script src="js/least.min.js" defer="defer"></script> <!--
[JS]このアニメーションはかなりカワイイ！折り畳んだ紙をパタパタ広げるスクリプト -PFold
展開と共に、移動のアニメーションが加わります。 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-
HugeDomains.com
Captcha security check isenne.com is for sale Please prove you're not a robot View Price Processing
[JS]複数の商品写真を見せるのに適したコンテンツスライダー -FancyMoves
複数の商品写真を見せるのに適した、画像拡大にも対応したコンテンツスライダーのスクリプトを紹介します。。 画像を拡大表示したキャプチャ FancyMovesの特徴 滑らかなアニメーションで画像がスライド表示。 画像はスライドすると拡大・縮小表示。 スライダーの送りは、矢印・画像のクリック。 キーボード（矢印）操作にも対応。 画像は拡大表示が可能（FancyBox使用）。 FancyMovesのオプション スクリプトのオプションでは、下記の設定が可能です。 パネルのサイズ パネルで使用する画像のサイズ 見出し・本文の文字サイズ 移動距離 また、FancyBoxを使用しているので、そちらのオプションも変更できます。 FancyMovesでは下記のオプションを調整しています。 ズームイン・アウト時のスピード 不透明度 オーバーレイのカラー
DivGrow jQuery Plugin – Easily make your DIV containers expandable & collapsable (with animation)
DivGrow jQuery Plugin – Easily make your DIV containers expandable & collapsable (with animation) I had the need for a number of divs on a page that would show a certain amount of content, then grow (animate) with a ‘show more’ button, and shrink back with a ‘show less’ button. There were solutions out there, but the ones I found were based on the number of characters in the text and had issues wi
jCoverflip | Home Page
Easy to Use. Drag or click to to showcase featured content. Easy Installation. Simply download, configure and push content to the jCoverflip widget.
Demo | jQuery.popeye 2.0 | an inline lightbox alternative
x Note: To see the full potential of CSS3 styling (shadows, gradients, rounded corners, alpha transparency), please view this page in a modern webkit or mozilla browser (Firefox 3.5+, Safari 4, Opera 10.50, Chrome 4). Other browsers will degrade gracefully. Except for IE6, though, which I didn't bother to include. Feel free to come up with your own solution ;-) Eyes of a Holcocephala fusca Robber
[JS]タイル状のパネルをダイナミックに伸縮させるスクリプト -InfoGrid
グリッドに沿って配置されたパネルをダイナミックなアニメーションで伸縮させるスクリプトをCSS-Tricksから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="info-col"> <h2>Batman</h2> <a class="image batman" href="http://jprart.deviantart.com/">View Image</a> <dl> <dt>Super Power</dt> <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exe
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
