jQuery Cards
Login to join the community jQuery Cards is a community to share and geek out about the latest, coolest jQuery plugins Login with: [TheChamp-Login] We'll never post to Twitter or Facebook without your permission. Top jQuery Plugins in 2020 jexcel jExcel is is a very light jquery plugin to embed a spreadsheet, compatible with Excel, in your browser. You can […] rUhuman simple captcha alternative Aa
ScrollUp demo - Mark Goodyear
scrollUp 2.0.0 Demo See the scrollUp v2.0.0 changelog for more information. Demo styles Tab Pill Link Image Demo styles can be found in the css/themes/ folder. activeOverlay Demo For demo purposes, toggle the activeOverlay below. Show activeOverlay Dummy content Dummy content to ensure the page is long enough to scroll on all screen sizes. Pellentesque habitant morbi tristique senectus et netus et
[JS]異なる高さのパネルを高いものに揃えたり、指定した高さに揃えるスクリプト -Equal Column Heights 2.0
Demo 7: 高さを変更する際にさまざまなスタイルを加えることができます。 ここでは背景色をグレーに変更。 Equal Column Heights 2.0の使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/equal-height-columns.js"></script> Step 2: HTML 各パネルを内包するラッパーを用意します。 <div class="hoge"> <div>パネル</div> <div>パネル</div> <div>パネル</div> </div> Step 3: JavaScript jQuery
jQuery Pseudo Plugin (:before and :after in Internet Explorer)
A jQuery plugin for :before and :after in Internet Explorer. Pseudo-who? CSS2's :before and :after pseudo-selectors are really handy ... but they don't work in Internet Explorer. Nope, not even IE7. I bet you're thinking: "But what if we used as many proprietary Microsoft features as possible all at the same time, that'll show 'em!" And you know what? You're absolutely right. You've just gotta lov
クールなカウントダウンパーツを作れるjQueryプラグイン7つ | Web活メモ帳
カウントダウンを用いた表現は、販促やキャンペーンを行う際に視覚的に訴えれるツールでは無いでしょうか。 単純なテキストだけでは味気ないので、クールな表現をする際に使えそうなjQueryプラグインを集めてみました。 どなたかの参考になれば幸いです。 jQuery Countdown Timer チュートリアルと共に詳しい作り方を紹介しています。 Add a Countdown Timer on Your Website 数字はテキストで、背景を変更する事でカウントダウンを表現しています。 Littlewebthings CountDown カウントダウン完了後にユーザーにお知らせするためのメール送信処理のサンプルも合わせてダウンロード出来ます。 jQuery CountDown Plugin こちらは3.2.1・・・ とカウントダウンするタイプ。サイトを表示してから一定時間経過した後に表示させ
[JS]背景画像をブラウザの枠いっぱいに広げて表示するスクリプト -fullscreenr
背景画像のアスペクト比を維持しつつ、ブラウザの枠いっぱいに広げて表示するスクリプトを紹介します。 デモではオプションで、ドットの画像をオーバーレイさせています。 スクリプトがオフ時の表示 fullscreenrの実装 fullscreenrはjQueryのプラグインのため、実装にはjquery.jsが必要です。 HTML 当スクリプト（jquery.fullscreenr.js）とjquery.jsを外部ファイルとして記述します。 <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/jquery.fullscreenr.js" type="text/javascript"></script> JavaScript head内に下記のスクリプトを記述します。 <script
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
jarallax.jsの使い方解説
こんにちは、デザイナーのサリーです。 JSを書けない私が、いろいろとパララックスのJSを漁ってみて、一番書き方がシンプルでわかりやすそうだったのが「jarallax.js」でした。 使ってみたら簡単でいい感じでしたが、ところどころクセがあって悩んだ箇所があったので、覚え書きの意味も兼ねて、今回はjarallax.jsの使い方を解説します。 （注：スマホやタブレットでは上手く動きませんので、PCでご覧ください。詳しくはこちら「パララックスサイトをつくるときにディレクターが気をつけるべき4つのこと」をどうぞ。） jarallax.jsとは？ パララックスの動きが実装できるJSです。その名の通りjQueryを使用します。 公式ページはこちら： http://www.jarallax.com/ HTML <!DOCTYPE html> <html lang="ja" dir="ltr"> <hea
【jQuery】パララックスなwebサイトを作れるjQueryプラグイン「jQuery-Parallax」
こんにちは。 最近、ウェブデザイン系のブログやニュースを見ているとパララックスという言葉をよく目にします。パララックスというのは「視差効果」のエフェクトのことで、 複数の画像や文章のスクロール量を個別に変化させることで、奥行きのある立体的なデザインが可能となる、というものです。 そんなパララックスを施したサイトを作るためのjQueryプラグインが「jQuery-Parallax」です。 まずはデモサイトです。 http://www.ianlunn.co.uk/plugins/jquery-parallax/ かっこいいですね。以前の nikebetterworld.comをベースにして作成したものだそうです。 内容をみてみると各要素にスクロール速度が設定してあって、特に靴の部分のアニメーションが立体的に見える働きをしています。 サイト訪問者の目を惹きつけ、下のコンテンツをもっと見たくなるよ
パララックス効果を作るスクリプトやプラグインのまとめ:phpspot開発日誌
Parallax Scrolling Scripts and Plugins | Impressive Webs パララックス効果を作るスクリプトやプラグインのまとめ。 最近では国内でもちらほら見かけるようになったパララックスなデザイン。 一言にパララックスといっても色々な実装があり、どれも斬新なものになっていて、見ておくだけでも参考になるであろう物が満載 こういう今では真新しいような技術も数年後には新しいテクニックが出てきていて、陳腐化したり応用されて汎用的なものになったりと今後も技術の進歩が楽しみですね 関連エントリ パララックス効果をダイナミックに使ったスライダー実装jQueryチュートリアル パララックス効果を使った秀逸なjQueryスライダー実装チュートリアル＆サンプルDL
紙がカールしたように見える効果を付けるjQueryプラグイン-pShadow
よくみかける紙がカールしたように見える効果を、画像を使わずにjQueryで表現できます。css3を使えば画像を使わなくても表現できますが、IEでは非対応です。pShadowを使用すればIE6でも画像を使わずに表現できます。使い方も簡単です。 配布先とデモページ 配布先→pShadow – a jQuery extension for gorgeous drop shadows 使用方法 ヘッダー内に下記のように記入します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="pshadow.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.効果を付
パララックスエフェクトの基本
jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。 Webサイトの55％で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ
可愛いツールチップを実装したjQuery＆CSS3のデモ「Sweet Tooltip」:phpspot開発日誌
Sweet Tooltip a jQuery & CSS3 Tooltips ? Webstuffshare ? Learn and share. The simplest harmony. 可愛いツールチップを実装したjQuery＆CSS3のデモ「Sweet Tooltip」 次のような可愛いモダンなデザインのツールチップの実装デモが公開されています。 目立たせたい時や注目してもらいたい場合に使うと効果的ですね。通常のデザインも入っているようなので使い分けられそうです ファイルをDLすればデモのHTMLとCSS, JSが入っているので変更して容易に利用できます 関連エントリ もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 簡単コードで実装＆カスタマイズできるツールチップ実装jQueryプラグイン「Poshy Tip」 シンプルなツールチップ実装ができるj
13 jQuery SelectBox/Drop-down Plugins — SitePoint
There are several ways to define a block of JavaScript functionality. Learn which is the most appropriate one for your particular use case.
JQuery Cycle Plugin
Check out Cycle2, the latest in the Cycle line of slideshows. Overview The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. It also supports, but does not require, the Easing Plugin. How it Works The plugin provides a method called cycle which is
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
個人的に気に入ってる10のLightbox系jQueryプラグイン及び、その特徴まとめ
個人的に気に入ってよく使っている、又は いつか役に立ちそう、いずれ使いたい的な Lightbox風に拡大実装出来るjQueryプラグ インのまとめです。使うときにいちいち引っ 張り出しているのが面倒なのでまとめにして ついでにシェアしようと思って記事にします。 オーソドックスなものから、やや特徴的なもの、Twitterで「こんなのない？」って聞かれて探したものなど10個厳選です。特徴も一緒にメモしておきます。 なお、画像を使うjQueryプラグインにご興味が有るようでしたら、以前書いた画像を使ったいろいろなjQueryプラグイン224個まとめも参考にして頂けるかと思います。 colorbox 一番よく使っているかもしれません。MITライセンスで、グループ化⇒スライドも可能。また、iPhone、iPadでも動いて表示も崩れません。エフェクトも変更可能で、YoutubeやIframe、Flas
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5のplaceholder属性をIEでも使えるようにするjQueryプラグイン「ah-placeholder.js」
yuguri.com
Loading...
