jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. It provides a full-featured and flexible toolset for navigating any HTML based content in a carousel-like fashion.
よく見かけるタイプのjQueryを使ったスクロールしても上に固定されているメニューを紹介します。最近FC2ブログの上部に現れた検索バー（このブログは非表示にしてます）みたいな感じです。 <script type="text/javascript"> $(function() { $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); if(scrollTop != 0) $('#nav').stop().animate({'opacity':'0.5'},400); //スクロール時 else $('#nav').stop().animate({'opacity':'1'},400); //一番上にあるとき }); $('#nav').hover( function (e) { var scrollTop =
最近あまり見なくなってきたし、個人的にも使う機会も減ったLightbox系のプラグインを久しぶりに探したついでにメモ。またいつか使うときのために・・・ライセンス形態と対応メディアも付けたのでそれなりに見やすいかもかもかも。 （デモもつけようと思ったけどめんどくさいからやめた・・・ jQuery LightBox plugin いつものLightbox。お世話になった人も多そう。 ページ
簡単なものですけど、jQuery Mobile でのマークアップ時によく使うっぽい UIのサンプル作ったので配布します。 簡単なチートシート代わりになるのでは 無いかと思ったのでシェアしてみよう かと。良かったら使ってください。 というのも、JQMの日本語サンプルの配布先を見かけなかったので、なかなかお困りの方もいらっしゃるんじゃないかなと。調べるの面倒ですし、手元にサンプルコードあったほうが何かと便利ですよね。 というわけで、以前マークアップサンプルの記事書いたときに作ったサンプルサイトに手を加えた物を丸ごと配布します。 流石にかなり出てるので今更説明不要かもですけど、ざっくり説明するとWebサイトをスマフォ向けに簡単に出来るjQueryプラグインです。 以下のサンプルで使用しているファイルが丸ごと梱包してあります。 サンプル※別窓 いちおうキャプチャ。 目次 サムネイル付きのサンプルと
twitter facebook hatena google pocket jQueryを使用してFacebookスタイルのツールチップを実現する「tipsy - Facebook-style tooltip plugin for jQuery」です。 ツールチップとは吹き出しのようなもので、リンクや画像などの説明をわかりやすく表示してくれます。 sponsors 使用方法 tipsyからファイルをダウンロードします。 <link rel="stylesheet" type="text/css" href="tipsy.css" /> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.tipsy.js"></script> <sc
サムネイル表示のあるフォトギャラリーを作りたい。 そんなときに参考になるのが、『Fresh Sliding Thumbnails Gallery with jQuery and PHP』。jQueryとPHPで作るサムネイルがスライドするギャラリーです。 マウスオーバー状態でカーソルを動かすことで、サムネイルをスライドさせることができます。クリックすると、大きくプレビュー表示されますね。 右上のドロップダウンで、アルバム管理もできるようなので、複数のセットを見せることができます。 デモは以下から。 View demo ソースもダウンロードできるので、一度見てみてください。 Fresh Sliding Thumbnails Gallery with jQuery and PHP iPhone版も作られています。 Awesome Mobile Image Gallery Web App やっと
Totem is our latest jQuery plugin release. It makes animated tickers easy. A New Release We’re very excited to launch our next jQuery plugin since the widely popular Supersized. Totem makes implementing animated vertical tickers with navigation easy. It is the result of a few recent client projects which required finely controlled tickers plus navigation. This is certainly not the first vertical t
Latest Version: 1.3 Latest Release Date: December 3, 2011 Original Release Date: March 30, 2011 Compressed: 1.47kb Uncompressed: 4.84kb View GitHub Repository About The Plugin jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It's great to use as a hover effect or a way to direct attention to an element. 2016-11-04 Update This project is no longer being
By Paul Andrew As many of us know, the initial 15-20 seconds of a new user's visit to a web site will have a large impact on whether on not they are going to like or dislike the site, prompting them to decide whether they will stay or go. This means it's vital that you follow usability rules with common design practices and layout your site, especially the navigation, in a style that the user can
The Psychology of Greatness in Legendary AthletesWhat defines greatness in legendary athletes? Beyond physical prowess and skill, their characters, mental resilience, and the ability to inspire transcend their technical achievements. The enduring legacies of individuals like Lionel Messi, Cristiano Ronaldo, Michael Jordan, and Muhammad Ali suggest a deeper interplay of psychological factors and so
そろそろHTML5でコーディングする機会も増えてきたりするかもしれませんが、どうしてもブラウザ対応はしておきたいもの。jQueryで（※）要素をごにょごにょする際にちょっとはまったので一応書いておきます。 IE8以下での話ですが、IE8以下でHTML5を利用するときはHTML5の要素にCSSが適用されないので、html5.jsのようなスクリプトをヘッダで読み込ませたりすると思います。 ちなみに僕はわざわざ読み込むのもアレなので、以下のものを毎回貼ってます。 こんな感じでJavaScriptのcreateElementメソッドでHTML5の要素を追加すれば、CSSが使えるようになって見た目もだいたいばっちりになるんですけど・・・ jQueryで $(hoge).append('セクション') とか $(hoge).append([ '', '', // hogehoge '', '' ].j
Collective 🎨✨💻 Stay informed and inspired with our daily selection of the most relevant and engaging frontend and design news. Zero fluff, all quality—every single day. Demos Hub: Explore 500+ free demos 🔥👾 Discover our collection of 500+ free animations, interaction concepts, UI designs, web templates & more. Webzibition 💎✨ Discover fresh gems in our handpicked exhibition of standout website
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語 English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 Lightbox Lightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。
Adobe の Creative Suite 5.5 が発表になりましたね。 Dreamweaver の進化っぷりが凄まじいです。マジで。 HTML5+CSS3への対応が目に付きますが、個人的にはjQuery MobileとPhoneGapフレームワークの導入に注目します。 アプリ開発はこれまで、Objective-Cやjavaが主流でしたがDreamweaverでアプリへの書き出しまで出来てしまうなんて…。今後、モバイルアプリケーションの統合開発環境のデファクトスタンダードになる予感が。 ってことで、まずはjQuery Mobileを理解せねば！ jQery Mobile についてはまだ書籍はあまりなく洋書しかありませんでしたので、参考になる記事を取り上げてみます。 http://jquerymobile.com/ 本家サイト jQuery Mobile Gallery http://w
株価のように流れるティッカー サンプル ニュース1 ニュース2 ニュース3 ニュース4 ニュース5 設置方法 01) jQuery liScrollから「jquery.li-scroller.1.0.js」と「li-scroller.css」をダウンロード 02) ヘッダに以下のソースを記述する <link rel="stylesheet" href="css/li-scroller.css" type="text/css" /> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.li-scroller.1.0.js" type="text/javascript"></script> <script type="text/javascript"> $(function
Posted on 18th February 2008 — Michiel Kenis requested a tutorial explaining how to create a similar effect used to showcase the products on the Apple web site. Earlier: Image Loading Next: Coda Popup Bubbles This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff. jQuery alr
【自分用メモ】 LavaLamp for jQuery Webサイトのナビゲーションに使用しようと思っているjQueryプラグイン「LavaLamp for jQuery」で、そのままの設定だと設置後にリンクをクリックしても動作しなかったので、動作させるようにするためのメモ。 [xhtml] <pre lang="”LANGUAGE”"> $(function() { $("#<strong style="color:black;background-color:#ffff66">lavaLamp</strong>").<strong style="color:black;background-color:#ffff66">lavaLamp</strong>({ fx: "backout", speed: 700, click: function(event, menuItem) { re
hover() は mouseenter と mouseleave を同時にセットする http://docs.jquery.com/Events/hover の引数の名前付けを見て、hover は mouseover と mouseout を同時に指定するものだと思っていたが違うらしい。 jquery-1.2.6.js の 2278 行付近 hover: function(fnOver, fnOut) { return this.bind('mouseenter', fnOver).bind('mouseleave', fnOut); }, とあるように mouseenter と mouseleave に対して指定するものである。 over/outと enter/leave の違いは、http://docs.jquery.com/Events/mouseover の Demo みるとよく
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く