クリックすると隠れたページがスライドされて現れるjQueryプラグイン「PageSlide」
ボタンやリンクをクリックすると、隠れていたページが横から現れるページを実装できるjQueryプラグインです。 サンプルページを作ってみましたのでご覧下さい。 → 「PageSlide」サンプルページ セカンドコンテンツには追加情報などの他にも、フォームやメニューを加えたりと利用価値は高そうです。 jQueryプラグイン「PageSlide」の設置方法は続きをどうぞ。 まずは、「PageSlide」のページからjQuery Pluginを一式ダウンロードします。 <head>部分にcssを指定します。 <head> <link rel=”stylesheet” type=”text/css” href=”css/jquery.pageslide.css” /> </head> そして、任意の場所（</body>の直前など）にJavaScriptを設定します。 <script src=”js/
文字色や背景色をじんわり変える「Jquery Color Plugin」｜LabPad （ラボパッド）
demo hoverで背景色を#FFCC00にじんわり変えます。 で、マウスを外せば背景色を#FFFFFFにじんわり戻します。 hoverで文字色を#333333にさっと変えます。 で、マウスを外せば文字色を#2C95D7にじんわり戻します。 memo 作業内容 文字色や背景色などを指定した色にじんわりとアニメーションで変更させるJquery Color Pluginを試してみます。今回はhoverで発動、stop()でアニメーション中のhoverはノーカウントにしてます。 --- javascript --- <script type="text/javascript" src="../common/js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/101120/jquery.color.js
Masonry
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
Modern Slide In - Sequence.js Theme
Release Date August 9th 2015Latest Update August 9th 2015Theme Version2.0.0 Sequence.js Version What is the purpose of the Recommended Sequence.js Version?The recommended Sequence.js version this theme is packaged with. Other versions may work but may not have been fully tested.2.0.0 License GPLv3RepoGitHub Tags grayhorizontallightminimalproductsslider FeaturesOn mobile devices, the product image
iView Slider (jQuery) | Free PSDs & Resources for Web Designers by Hemn Chawroka
What is iView? iView is easy to use jQuery image slider with animated captions, responsive layout and HTML Elements like (Video, iFrame) slider. Easily add unlimited number of slides and captions. Use it as image slider, image gallery, banner rotator, banner ads, or even presentation. This jQuery plugin uses unobstrusive javascript to transform a block of simple HTML markup into a georgous elegant
7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座
HOME>jQuery>7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座 約半年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。 結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。 そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。 とは言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。（っていうかそんな偉そうなこと言える程修めてない
PFold: Paper-Like Unfolding Effect | Codrops
A highly experimental jQuery plugin that let’s you unfold elements to reveal more content just like on a piece of paper. Unfolding directions and number of steps can be specified. PFold is a very experimental jQuery plugin that makes it possible to open elements in a paper-like unfolding effect. An element can be unfolded in 3D in order to reveal some other content. The idea is to have several lev
スライド間をいい感じにスクロールするjavascript「jQuery.LocalScroll」
スライドさせるjavascriptは多くありますが、1章1節・・・3章5節というふうに階層が深くなるものには対応していないのがほとんどです。 jQuery.LocalScrollは、多階層に渡るスライド間をいい感じにスクロールします。 sponsors 使用方法 jQuery.LocalScrollからjquery.scrollTo-min.jsとjquery.localscroll-min.jsを、jQueryからjquery.js（v1.2.1）をダウンロードします。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdomain/jquery.scrollTo-min.js" type="text/javascript"></script
jQuery Parallax Plugin Demo
(Almost) Static Background This section has a background that moves slightly slower than the user scrolls. This is achieved by changing the top position of the background for every pixel the page is scrolled. Multiple Backgrounds The multiple backgrounds applied to this section are moved in a similar way to the first section -- every time the user scrolls down the page by a pixel, the positions of
Create Your Own Trendy Parallax Website Layout
Introduction Apart form the pinterest dynamic fluid layout and big background image layout, parallax layout is still one of the trend in web design simply because it's a great technique to showcase product/service through an automated presentation by using scrolling. Take Minicooper Japan as an example, when user scrolls down the website, each slide introduces the car features with seamless, perfe
ColorBox - ポップアップ内を自由に設定できる活かしたjQuery
View Demos 1 2 3 4 5 Released under the MIT License, source on Github (changelog) Download Install via NPM npm install jquery-colorbox Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+ Supports photos, grouping, slideshow, ajax, inline, and iframed content. Lightweight: 10KB of JavaScript (less than 5KBs gzipped). Appearance is controlled through CSS so it can
Sliding Horizontal Parallax Theme | Sequence - The Responsive Slider with Advanced CSS3 Transitions
Sliding Horizontal Parallax moves multiple elements at the same time but at different speeds to create a parallax effect — the appearance of 3D movement. Touch SupportTouch swiping and tapping supported to allow for navigation between frames. Cross BrowserWorks across all modern browsers, with a fallback theme in Internet Explorer 7, 8 and 9. Easily ModifiedAll Sequence themes can be easily modifi
9 Applicable And Awesome CSS3 And Javascript Effects from DemoStudio
9 Applicable And Awesome CSS3 And Javascript Effects from DemoStudio Introduction I discovered this website from Mozilla Developer network called DemoStudio which gathered a bunch of cool CSS3 and Javascript effect. It reminded me of Chrome Experiment but this is Firefox version. Browsing around I found a few pretty impressive effects and you could probably use it in your website! Friendly reminde
[JS]さまざまな動きが楽しくてかわいい、サークル状のナビゲーションを実装するスクリプト -Circle Menu
デモページ: Timing, Reversed 上のデモでの逆順です。 Circle Menuの使い方 HTML 各アイテムはリスト要素です。 <ul> <li><a href="#">+</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jQuery.circl
Photo Zoom Out Effect with jQuery | Codrops
Today we will show you how to create a simple image zoom out effect with jQuery. The idea is show some images which are zoomed in initially and when hovering […] Today we will show you how to create a simple image zoom out effect with jQuery. The idea is show some images which are zoomed in initially and when hovering over an image it gets zoomed out. This effect could be used in photography websi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SUPERSCROLLORAMA
3D Thumbnail Hover Effects
スクロールに応じてパララックス効果を出せるjQueryプラグイン・scrolloramaを使ったプレゼンテーションサンプル - かちびと.net
http://boedesign.com/blog/2009/10/22/jsquares-for-jquery/
theta.ne.jp