alessandroferrini.itこのドメインについて問い合わせる alessandroferrini.it 2024 著作権. 不許複製 プライバシーポリシー
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();
Top 30 Fabulous jQuery Sliders for Free
If you are looking for ways to spice up your website design, then jQuery objects are definitely a must to include. These simple scripts not only improve the design of your site’s pages, but they also offer a more unique functionality. Sliders are some of the most versatile of these jQuery objects and here are some of them that will surely look great on your web site. Free jQuery Slider Let’s have
Glide.js
シンプル・軽量で、レスポンシブ対応、タッチデバイス対応、スワイプもキーボード操作にも対応したカスタマイズにも優れたOOCSSベースでマークアップされたスライダーを実装するjQueryのプラグインを紹介します。 Glide.js Glide.js -GitHub Glide.jsのデモ Glide.jsの使い方 Glide.jsのデモ デモはスマフォ・タブレットをはじめ、最新のモダンブラウザでご覧ください。 スライドのエフェクトにCSS3を使用していますが、IE8などの古いブラウザでも代替のエフェクトで動作します。 デモページ Glide.jsの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></
Owl Carousel
How To Use 1. Load jQuery and include Owl Carousel plugin files To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included. <!-- Important Owl stylesheet --> <link rel="stylesheet" href="owl-carousel/owl.carousel.css"> <!-- Default Theme --> <link rel="stylesheet" href="owl-carousel/owl.theme.css"> <!-- jQuery 1.7+ --> <script src="jquery-1.9.1.min.js"
A Collection of Page Transitions | Codrops
A showcase collection of various page transition effects using CSS animations. Today we’d like to share a collection of creative page transitions with you. We’ve put together a couple of animations that could be applied to “pages” for creating interesting navigation effects when revealing a new page. While some effects are very simplistic, i.e. a simple slide movement, others make use of perspecti
レスポンシブデザイン対応のlightbox系プラグイン＋コンテンツスライダー系プラグイン | バニデザノート
・シンプルイメージlightbox ・ギャラリーlightbox ・videoやmapのポップアップ ・Ajaxポップアップ など、使い勝手がよい基本機能が揃っています。 →Unslider 関連記事 きっと初心者でもわかる、HTMLの書き方の考え方。 2014/12/14 読んでもらえる、ファンになってもらえる、ブログの書き方とデザイン。 2014/11/20 web制作で気疲れしないようにする方法を考えてみました。 2014/10/17 最近気になったウェブ制作に関するキーワードを振り返ってみる 2013/06/30 レスポンシブデザイン対応のlightbox系プラグイン＋コンテンツスライダー系プラグイン 2013/05/31 自分でできる！Facebookページの活用方法 2013/04/11 Webで発信するすべてのWEBビギナーさんへ。突然犯罪や裁判に巻き込まれないようにするため
Jquery-flip
jQuery Flip Plugin jQuery/jQuery mobile plugin to give Flipboard app like effect. Flip effect uses css 3d transform. Flip effect currently works on WebKit browsers (e.g. Chrome, Safari, including iOS mobile safari) or Firefox 11. It still works with other browsers but the "slide" effect will be selected forecely. Compatibility Current version is compatible with jQuery 1.6.4, 1.7.0, 1.7.1 and jQuer
[CSS]コピペで簡単に使える、パネルの表と裏をくるっと水平・垂直にひっくり返すスタイルシート -CSS Flip Boards
パネルをホバーすると、表と裏がくるっとアニメーションで変わるスタイルシートを紹介します。 くるっとなるのは水平だけでなく、垂直にも対応しています。 上：垂直くるっ、下：水平くるっ CSS Flip Boardsの実装 くるっとなるのはスタイルシートのエフェクトで、スクリプトは使用されていません。 Step 1: HTML 表・裏のパネル2枚をそれぞれdiv要素にし、それらを2つのdivで内包します。 垂直にはtop、水平にはleftを指定します。 垂直にくるっ <div class="flip-boards"> <div class="board top"> <div class="front"><h2>パネル：表</h2></div> <div class="flipped"><h2>パネル：裏</h2></div> </div> </div> 水平にくるっ <div class="fl
Gallery CSS
Include gallery.css & gallery.theme.css <link rel="stylesheet" href="css/gallery.theme.css"> <link rel="stylesheet" href="css/gallery.min.css"> Mark up your gallery <div class="gallery items-3"> <div id="item-1" class="control-operator"></div> <div id="item-2" class="control-operator"></div> <div id="item-3" class="control-operator"></div> <figure class="item"> <h1>1</h1> </figure> <figure class="
[JS]スマフォアプリのように左右にスライドしてコンテンツを表示するスクリプト -mmenu
mmenuの使い方 スクリプトの使い方は下記ページにステップごとの解説があります。 tutorial Step 1: 外部ファイル head内に「jquery.js」と当スクリプト・スタイルシートを記述します。 <head> <script type="text/javascript" language="javascript" src="jquery.js"></script> <script type="text/javascript" language="javascript" src="jquery.mmenu.js"></script> <link type="text/css" media="all" rel="stylesheet" href="jquery.mmenu.css" /> </head> Step 2: HTML コンテンツの基本構造は、下記のようになります。
[JS]操作感が楽しい！左右にドラッグ・フリックしてコンテンツを表示するスクリプト -Snap.js
表示されているページを左右にドラッグ（フリック）して、アニメーションで左右にコンテンツをスライド表示するデスクトップにもスマフォにも対応したスクリプトを紹介します。 jQueryなどの他のライブラリには依存しません。 Snap.js -GitHub Snap.jsの特徴 Snap.jsのデモ Snap.jsの使い方 Snap.jsの特徴 jQueryなどの他のライブラリへの依存は無し CSS3を使った強力なアニメーション スライドは右・左に対応 ドラッグ操作のサポート ドラッグ操作禁止要素も定義可能 スマフォのフリック操作のサポート フックイベントのサポート イベントの有効・無効の設定 カスタマイズが簡単 対応ブラウザ IE10を含む全てのモダンブラウザに対応しています。 IE7/8/9はCSS3での一部の機能が制限されます。 Firefox 10+ Chrome, SafariなどのWe
Unslider | Laptop Reviews & Buying Guides
Gaming Laptop 4 Best Mini-LED Laptops in 2023 Regardless of whether you’re gaming or just need an excellent display, our recommendation for the best Mini-LED laptops in 2023 that you can buy should help. Read More 2-in-1 Laptops 4 Best 2-In-1 Gaming Laptops 2-in-1 gaming laptops do exist. Certain 2-in-1 laptops have beefy specs that make them viable for modern gaming. Read More Buying Guides 5 Bes
FractionSlider: jQuery parallax Slider Plugin | jacksbox.design
You want to give me general feedback, report a bug or have any questions about the implementaion? Just send me an eMail or leave a comment! jQuery parallax slider plugin FractionSlider 1.0 FractionSlider is a jQuery plugin for image/text-sliders. It allows you to animate multiple elements per slide. You can set different animation methods like fade or transitions from a certain direction. Also the
jQuery UIのtoggle()でjQueryのslideToggle()よりカッコよくスライドさせる方法
jQuery UIのtoggle()を使って、jQueryのslideToggle()よりカッコよくスライドさせる方法について紹介します。 ある要素をスライドさせながら表示・非表示を行うには、jQueryのslideToggle()（またはslideUp()とslideDown()）がよく知られていると思います。 が、slideToggle()ではコンテンツの動き方に個人的に不満があり、調べたところ、jQuery UIのtoggle()で期待する動作になることが分かりました。 jQuery UIのtoggle()については、公式ドキュメントのAPIで公開されているのですが、本エントリーで紹介するような詳細な指定方法が書かれていないので、備忘録で本エントリーに残しておきます。 １．jQueryのslideToggle()でスライドさせる まず、jQueryのslideToggle()と使った
プレゼン用のスライドショーを実装する、わずか1KBなのに多彩なエフェクトを備えタッチデバイスにも対応したスクリプト -Bespoke.js
コンカーブ 凹状に配置したパネルをスライドします。 Bespoke.jsの使い方 スライドショーの実装は簡単で、3ステップです。 Step 1: HTMLと外部ファイル スタイルシートとスクリプトを外部ファイルとして記述し、各パネルはsection要素で実装し、articleで包みます。 スタイルシートはテーマごとに変更します。 <link rel="stylesheet" href="path/to/my/theme.css"> <article> <section>Slide 1</section> <section>Slide 2</section> <section>Slide 3</section> </article> <script src="bespoke.min.js"></script> <script src="path/to/my/script.js"></scri
[JS]シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のスクリプト -Unslider
シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のjQueryのプラグインを紹介します。 デスクトップのキーボード操作やスマフォ・タブレットのスワイプ操作にも対応！ Unslider Unslider -GitHub Unsliderの特徴 Unsliderのデモ Unsliderの使い方 Unsliderの特徴 超軽量のオープンソース スクリプトは3KBと超軽量のオープンソースです。 実装は簡単でクリーン HTMLは非常にシンプルで、カスタマイズも容易です。 高さの調整 サイズに合わせて、スライダーの高さを自動調整します。 レスポンシブ対応 デスクトップ・タブレット・スマフォなど、さまざまなデバイスに対応。 キーボード操作の対応 キーボード（矢印キー）での操作をサポートします。 スワイプ操作の対応 jQuery.event.swipeをサポートしているので、スワイプ操作に
[JS]画像ホバーで、さまざまな要素を配置した半透明のパネルをアニメーションで表示するスクリプト -HCaptions
画像をホバーすると、スライドやフェードのアニメーションで表示する半透明のパネルを実装するjQueryのプラグインを紹介します。 パネルは実装もカスタマイズも簡単です。 HCaptions -GitHub HCaptionsの準備 HCaptionsのデモと実装 HCaptionsの設定 HCaptionsの準備 まずは、スクリプトを使う準備から。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="js/jquery.js"></script> <script src="js/jquery.hcaptions.js"></script> Step 2: スクリプトの準備 キャプションを表示に付与するclassを定義します。 $(window).load(function(){ $('.hcaption').hcapt
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Hashslider is dead, long live the Hashslider
http://dan-silver.github.io/ElementTransitions.js/