alessandroferrini.itこのドメインについて問い合わせる alessandroferrini.it 2024 著作権. 不許複製 プライバシーポリシー
[JS]Appleのプロダクトページのような1ページのスクロールコンテンツを作成するスクリプト -One Page Scroll
デモページ：3番目のパネルを表示 各パネルへの直リンクやURL表示にも対応しています。 One Page Scrollの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.onepage-scroll.js"></script> <link href='onepage-scroll.css' rel='stylesheet' type='text/css'> </head> Step 2: HTML mainはコンテナで、各パネルはse
ScrollIt.js
Tweet About ScrollIt.js(scroll•it•dot•js) makes it easy to make scrolling pages like this one or add scrolling functionality to existing pages. Here's a brief blog post explaining it. This is why it rocks: Easy to implement: One JS call, just put data- attributes on the DOM Lightweight: ~1kb minified Active Class: Your navigation is updated automatically Configurable: Set the animation easing, dur
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
[JS]複数のコンテンツをドラッグ・スワイプでスライド表示するスクリプト -Minimit Gallery
1ページで構成された複数のコンテンツをデスクトップのドラッグ、スマフォ・タブレットのスワイプ操作でスライドして表示する単体で動作するスクリプトを紹介します。 Minimit Gallery Minimit Gallery -GitHub Minimit Galleryのデモ Minimit Galleryの使い方 Minimit Galleryのデモ Minimit Galleryは一つのHTMLファイル内に配置した複数のコンテンツをスライドで次々に表示するスクリプトで、各コンテンツはハッシュリンクでの表示にも対応しています。 デモはIE7+, Firefox 3.5+, Safari 3+, Opera 9+, Chrome, iPhone, iPad, Android, Windows Phoneなどでご覧ください。 デスクトップでデモを表示してみます。 次コンテンツへスライド中 上部
flippant.js
Flippant.js A mini js+css library for flipping things over. Try it out on the buttons below Get the code at github.com/mintchaos/flippant.js Heading Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Modal » Card » Head
[JS]スクロールした際に見出しや画像やエリアなどが見切れるのを自動補正するスクリプト -Scrollsnap
ユーザーがページをスクロールした時、見出しや画像が見切れてしまう、ストライプの背景で違うカラーが少し見えてしまうなど、ちょっとだけスクロール位置がうまくない時に自動で補正するjQueryのプラグインを紹介します。 Scrollsnap Scrollsnapの特徴 Scrollsnapのデモ Scrollsnapの使い方 Scrollsnapの特徴 Srollsnapはスクロールでのユーザエクスペリエンスを強化するjQueryのプラグインで、ページ内の指定したポイントの上下でスクロール移動が止まってしまったら、自動的にちょうどいい位置にスナップさせます。 スナップ時のポイントはclassで設定可なので、テキスト・見出し・画像をはじめ、div要素やarticle要素などにも設定できます。 対応ブラウザ デスクトップ用の最新のブラウザをはじめ、IE9、スマフォ用のSafariにも対応しています。
jQuery.fullContent
複数のコンテンツをそれぞれブラウザの枠いっぱいに表示し、それらを水平・垂直のマトリックス状に配置し、ダイナミックなアニメーションで切り替えるjQueryのプラグインを紹介します。 jQuery.fullContent jQuery.fullContent -GitHub jQuery.fullContentの特徴 jQuery.fullContentのデモ jQuery.fullContentの使い方 jQuery.fullContentの特徴 ウインドウのサイズいっぱいのコンテンツを水平・垂直のアニメーションで切り替えます。 各コンテンツは、碁盤のように水平・垂直に配置可能。 コンテンツ間の移動はアニメーション。 ハッシュリンクでの直接アクセス対応。 ハッシュリンクでの履歴にも対応。 IE8+をサポート。 jQuery.fullContentのデモ デモはモダンブラウザ、IE8+でご覧く
[CSS]背景を固定させて、カーテンのようにスクロールさせるテクニック | コリス
去年くらいからよく見かけるようになったスクロールすると、カーテンを持ち上げるように次々にコンテンツが表示されるテクニックをスタイルシートのみ版とスクリプト併用パワーアップ版の二つを紹介します。 まずは、スタイルシートのみ版から。 Fixed image backgrounds スクロールするとヘッダは固定表示で、画像を配置した背景がカーテンを持ち上げるように次のコンテンツが表示されます。 背景は写真も面白いですが、ソリッドなカラーでも面白い効果が得られますね。 Fixed image backgroundsをスクロール 実装はシンプルです、ポートフォリオなどでよく見かけるテクニックです。 Demo 1のHTML HTMLの基本構造は、header要素があり、各スライドはsection要素です。section内には見出しやテキストや画像などを自由に配置できます。 <header> <a hr
[JS]実装は簡単で高性能、ロード無しでページを次々に表示するスクリプト -Navi.js
複数のページをブラウザのロード無しで、アニメーションで次々に表示するjQueryのプラグインを紹介します。 これ系のスクリプトはいくつか紹介してきましたが、ページタイトルの設定やネスト、戻る・次へボタンの対応など、使い勝手もなかなかです。 Navi.js Navi.js -GitHub Navi.jsの特徴 Navi.jsのデモ Navi.jsの使い方 Navi.jsの特徴 Navi.jsの仕組みは一つのファイルに複数のページのコンテンツを配置し、それをページごとに遷移するように表示します。 タブ、ナビゲーション、カルーセル、ページネーション、パンくずをサポート コンテンツにあったページタイトルを表示 戻る・次へボタンのサポート コンテンツのネストをサポート スライドアップ、スライドレフト、スライドアップ・レフト、フェードのエフェクトを用意 AJAXサポート Google Analytic
Facebookページの投稿を表示するボックスを実装するjQueryプラグイン・Facio
Facebookページの投稿を任意のWebサイトに表示するjQueryのプラグイン・Facioのご紹介です。公式のが嫌、という方はこちらをご利用になってみては如何でしょうか。 Facebookページの投稿を羅列させる事が出来る、というもの。以下が動作デモです。 動作サンプルもう投稿しなくなりましたけど・・当ブログのFBページを表示させてみました。少し表示に時間かかります。 ※input要素が必要と言うわけではありません。貴方のFBページのURLを入力すれば表示テストが可能です。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script>jQueryのプラグインなのでコアを読み込みます。 <div id="facio"></d
Fullscreen Pageflip Layout | Codrops
A tutorial on how to create a fullscreen pageflip layout using BookBlock. The idea is to flip the content like book pages and access the pages via a sidebar menu that will slide out from the left. We have received a couple of requests on how to use the BookBlock plugin in fullscreen. So, we decided to create a fullscreen layout, apply BookBlock to it and add a sidebar menu. We’ll show you how to c
ボックスを綺麗に並べてくれるMasonryライクなjQueryプラグイン・Freetile.js - かちびと.net
サイズの異なるボックスを綺麗 に配置してくれるスクリプト、 MasonryっぽいjQueryプラグイン、 Freetile.jsです。似たような スクリプトは結構ありますので 参考までに。 よく見かける、異なるボックスを綺麗に並べるスクリプトです。Masonryっぽいやつ。 こういうやつです。ウィンドウサイズが変わってもボックスを再配置してくれます。 $('#foo').freetile(); 本体とプラグインを読み込んでセレクタ指定します。アニメーションオプション等もありました。 ライセンスはBSDです。手抜きな記事ですけどちょい忙しいので今日はこれにて。 Freetile.js
[JS]ページ全体やコンテンツ（画像や動画）をフルスクリーンで表示するだけのシンプルなスクリプト -BigScreen
指定したエレメントをクリックすると、ページ全体をフルスクリーンで表示したり、画像や動画をフルスクリーンで表示するシンプルで超軽量（1KB）のスクリプトを紹介します。 BigScreen BigScreenの特徴 BigScreenのデモ BigScreenの使い方 BigScreenの特徴 BigScreenはページ全体やコンテンツをフルスクリーンで表示するシンプルで軽量（minified:1KB）のスクリプトです。 対応ブラウザ Chrome 15+ Firefox 10+ Safari 5.1+ 動画コンテンツの表示は下記もサポートします。 Safari 5.0 iOS 4.2+ BigScreenのデモ デモはサイトのタイトル（BigScreen）のテキストをはじめ、画像や動画などをクリックすると、フルスクリーンで表示します。 BigScreenのデモ：動画 動画は右下のボタンをクリ
Flippy : flip effect jQuery Plugin | Guilhem Marty
Flippy is a cross-browser flip effect plugin for jQuery and allows you to flip whatever html element you want.What is Flippy ? Flippy is a cross-browser flip effect plugin for jQuery which allows you to flip whatever html element you want. Download flippy v1.0.1 Options color_target : The targeted background color. (ex.: ‘aliceblue’ or ‘#f0f8ff’ | default: ‘white’) content : The content to show af
[JS]スライダーやタブやページネーションなど便利な機能を少ないコードで実装する超軽量（8kb）のスクリプト -vanity
スライダー、タブ、ページネーション、ツールチップなど、ウェブページでよく使用するコンテンツをシンプルにより少ないコードで実装できるよう開発されたjQueryのプラグインを紹介します。 vanity jquery toolset [ad#ad-2] vanityは7種類のツールがあり、それぞれ8kbと超軽量のスクリプトとなっています。 機能はシンプルで、より少ないコードで簡単に実装できるように設計されています。 以下、7つのツールとそのコードを紹介します。 ※外部ファイル・スタイルシートは省略 スライダーのデモページ div要素やリスト要素で実装するスライダーです、スライドのエフェクトやスピードも調整できます。 HTML <!-- the slider content holder --> <div class="slider"> <!-- the elements inside the s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]1ページで構成されたサイトに豊富なコンテンツをスライドで表示するスクリプト -Slideme
Redirecting...
Slider Pagination Concept - with jQuery UI Slider
Blog - Diamond Casino Online