[B! jquery] home0のブックマーク

[JS]要素の一つひとつを異なるタイミングでスライドさせる、パララックス対応のコンテンツスライダー

jQueryとCSS3アニメーションを使った、パララックス対応のコンテンツスライダーを実装するチュートリアルを紹介します。 Parallax Content Slider with CSS3 and jQuery [ad#ad-2] デモ実装デモ一枚のスライドには、h2要素、パラグラフ、リンク、画像が配置されており、それぞれが異なるタイミングでスライドします。分かりにくいかもしれませんが、背景もアニメーションで動いています。 Kendo UI こちらも当然パララックス対応のコンテンツスライダーです。こっちの方が背景がはっきりしてるので、その動作を楽しめると思います。実装実装は各ポイントとなる箇所を説明します。 HTML スライダーは複数のスライドを含んでおり、それぞれのスライドにh2要素、パラグラフ、リンク、画像を含んでいます。 <div id="da-slider" cla

home0 2012/03/16

リンク

FredHQ - Roundabout for jQuery by Fred LeBlanc

Move Elements with Style Quickly convert simple, semantic HTML structures into a sexy interactive turntables! Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. (And now, not just turntables, but many shapes!) In its simplest configuration, Roundabout works with ordered- and unordered-lists, however after som

home0 2012/03/15

リンク

最近公開された表現力を高めるjQueryプラグインいろいろ

Adipoli jQuery Image Hov... / Sweet Tooltip a jQuery &... / FredHQ - Roundabout for ...他...全7件

home0 2012/03/09

jquery

リンク

[JS]画像をホバー時にさまざまなアニメーションで目立たせるスクリプト -Adipoli

シンプルなものからちょっと面白いものまで、20種類以上のアニメーションのエフェクトを備えた画像を目立たせるjQueryのプラグインを紹介します。デモ用意されているエフェクトは20種類以上で、ホバー時のエフェクトは下記のものが揃っています。 normal popout sliceDown sliceDownLeft sliceUp sliceUpLeft sliceUpRandom sliceUpDown sliceUpDownLeft fold foldLeft boxRandom boxRain boxRainReverse boxRainGrow boxRainGrowReverse 画像のデフォルト時のエフェクト（オーバーレイ・半透明）も用意されており、組み合わせて利用できます。 [ad#ad-2] 以下、デモページのエフェクトを紹介します。

home0 2012/03/08

リンク

20 of the Best jQuery Slideshow Plugins - Vandelay Design

jQuery sliders, slideshows, and galleries are extremely common on a variety of different types of websites. Portfolio sites, blogs, e-commerce sites, and just about any type of site can make use of a jQuery slideshow. Fortunately, there are a number of great plugins already coded that make it easy to add a slideshow in a matter of minutes. Each one offers different features and has its own style.

home0 2012/01/31

リンク

[JS]jQueryのプラグイン33+1選 -2012年1月

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 jQuery Transit CSS3アニメーションをjQueryで簡単にコントロール。 cssAnimate CSS3とjQuer

home0 2012/01/30

リンク

jQuery plugin: Tablesorter 2.0

home0 2012/01/24

jquery
table

リンク

新しいことをしたいならチェックしておきたい、最近のJavaScriptライブラリ

「crocro.jscam」JavaScript... / 3D野郎は寄ってたかれ!WebGLでグリグリ遊べ... / jmpress.js | a jQuery pl...他...全6件

home0 2012/01/22

リンク

http://www.99lime.com/

home0 2012/01/22

リンク

jQuery ContentHover Plugin - Backslash

A jQuery plugin that shows hidden content on top of an element when the mouse hovers over it. Download Download source (6KB) or the minified version (3KB) Documentation A complete options reference is available on the blog post, along with comments and updates. Demos All demos use pretty much the same html markup, and css: HTML <img id="d1" src="photos/1.jpg" width="300" height="240" /> <div class

home0 2012/01/19

画像hoverでテキスト表示

jquery
css

リンク

Xlune::Blog

可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js) なんだか可変グリッドレイアウトがまた流行ってる（？）ようなので、jQueryプラグイン書いてみた。一通りブラウザで表示確認ぐらいはしたけど、テストは十分じゃありません。 Demo Demo Index 利用方法はデモのソースを確認してください。(ウィンドウリサイズして動きも確認してね) Download github zip file 利用には、jQuery本体とjquery.easingプラグインが必要です。別途読み込んでください。更新情報 v0.1.8 (20120421) display属性で、グリッド要素の表示/非表示を切り替えれるように修正しました。 demo009を追加 v0.1.7 (20111110) 複数の可変ボックスを指定すると、開始位置がおかしくなるバグを修正しました。 demo008

home0 2012/01/19

グリッド表示

jquery

リンク

少しのコードで実装可能な20のjQuery小技集

2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます

home0 2012/01/12

リンク

HTML5のmenu要素にも対応した、独自の右クリックメニューを実装するjQueryプラグイン・jQuery contextMenu

HTML5のmenu要素もサポートしているオリジナルのコンテキストメニューを実装するjQueryプラグインです。普通のサイトじゃ使わないでしょうけど、最近ではHTML5製のリッチコンテンツ等利用するシーンもあるかもなのでメモがてら。基本的に通常のWebサイトでコンテキストメニューを変えてしまうのはユーザビリティを大きく損ないますが、HTML5によるペイントツールやゲームなど幅広いコンテンツの実装が可能になってきましたのでこういったライブラリも用途が出来始めた気がします。右クリックメニューを独自のものに変えます。それだけならちょっとアレなんですが、このプラグインは左クリックメニューにも出来るので一応覚えておいてもいいんじゃないかなと。他にもmenu要素にも対応してたり、アイコンを付けたりなどいろいろ応用が利くみたい。右クリックでフォームが出る・・なんてのも作れる。実際あった

home0 2011/12/02

右クリック編集

jquery

リンク

要素を遅延表示させながらレンガ風に整列させるシンプルで軽量なjQueryプラグイン・stalactite

jQuery Masonryのように、要素をレンガのように時系列を崩さず配列させるだけでなく、遅延表示させるjQueryプラグイン・stalactiteです。たまに見かけるエフェクトなんじゃないでしょうか。スクリプトも軽量で使い勝手も良さそうです。遅延表示はちょっと面白いですね。スクリプトも軽量なのでポートフォリオかギャラリーで使ってみたいですね。Tumblrでも試したい。 Masonryと同じタイプのスクリプトです。こちらは軽量でシンプルなのと、要素を遅延表示させるエフェクトが付いています。テキストや動画コンテンツなども対応していますよ。サンプル作りました。以下に進んでClick me!をクリックしてください。分かりやすいように少し遅延速度を遅めにしてあります。 Sample デモの写真はmark sebastian氏のものです。徐々に表示されたのが確認出来ましたでしょう