タグ

jQueryに関するakinaloverのブックマーク (27)

  • How to Create a jQuery Animated Sliding Sub-Menu Navigation - DesignM.ag

    We have seen a lot of different jQuery techniques over the years. This comes at a time when website navigation is at an utmost importance. User experience is key in all forms of design. Without perfecting your layout it will be difficult to keep visitors coming back for more. And with so many jQuery Plugins for Navigation it’s hard to miss something great. Below I’ll be going into the code for dev

    How to Create a jQuery Animated Sliding Sub-Menu Navigation - DesignM.ag
    akinalover
    akinalover 2011/10/06
    アコーディオン型メニュー。
  • Fancybox - Fancy lightbox alternative

    This site is kept for historical purposes and represents original version of the Fancybox. Check out the latest - Fancybox v5 What is it? FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page. It was built using the jQuery library. Licensed under both MIT and GPL licenses Features Can display images, HTML elements, SWF movi

    akinalover
    akinalover 2011/08/29
    YouTube のURLを直貼りでもLightbox表示可能になるjQueryベースのJS。
  • Webサイトのレイアウト調整や補助に使えるjQueryプラグインいろいろ - かちびと.net

    レイアウトの調整を簡略化したり、通常 は難しいレイアウトを可能にしたり、とい った補助的なjQueryプラグインのまとめ です。最近探す機会が増えたので今後 の為に備忘録的に記事にしておきます。 この手のプラグインは数多にあるので 好みで端折っています。 レイアウトの調整や補助などに使えるjQueryプラグインのまとめ。と、言っても大抵は既出だと思います。順不同。 Supersized 画面に合わせて自動的に背景画像を伸縮してくれるだけでなく、スライドショーにもなってくれます。いつか仕事で使いたい。最近FlickrAPIにも対応しました。 Supersized jQuery UI.Layout Plug-in ブラウザごとの差異を考えずに自由にレイアウトを組めます。 jQuery UI.Layout Plug-in JQUERY CUSTOM CONTENT SCROLLER スクロール

    Webサイトのレイアウト調整や補助に使えるjQueryプラグインいろいろ - かちびと.net
    akinalover
    akinalover 2011/04/16
    いつもながら素敵なまとめ。あるとウェブ閲覧が楽しくなりそうなものばかり。
  • jQuery事始め・コピペに頼らず、基礎知識を理解して実際に動かしてみる - かちびと.net

    人気のJavaScriptライブラリ、jQueryもかなり 情報が増えました。僕の様に知識が無くても 簡単に動きのあるWebサイトや、更なるユー ザビリティの向上を可能にしてくれましたが、 いつまでもコピペではいずれ困る事になります。 その前にそろそろ基礎から学んでみませんか。 という訳で、jQuery事始め。さほど知識が無い僕が書くのも微妙なんですが、一緒に学んでいきましょう、という事でご了承下さい。内容は基礎中の基礎です。 いつまでもコピペに頼っていては、何か問題が起こったときに対応できませんし、そもそもコピペするならjQueryである必要はありません。 でもjQueryはすごく便利なので、ちゃんと使いこなしたいところですよね。この記事が、誰かが勉強し始める切欠になれば幸いです。 jQueryを使うには まず、jQueryを利用するには体を読み込む必要があります。方法は2つあって、

    akinalover
    akinalover 2011/04/02
    jQueryはわけわからん!と投げる前に一読すると世界が変わるかもしれないとても丁寧に構造の基礎部をおさらいしています。
  • シンプル・軽量(2.2KB)・手軽なjQueryコンテンツスライダー・hash slider - かちびと.net

    よくあるコンテンツスライダーですが、 軽くて使いやすそうでしたのでメモ。 hash sliderは、わずか2キロバイト ほどの軽量スクリプトです。こういう のはいくつ覚えておいても損しない ですね。 軽い、というのは大事ですよね。スライドさせるとURL末尾に#~が付き、ここにリンクすることが出来ます。 シンプルです。マークアップも単純なので使いやすいのでは。 <div id="slider"> <ul> <li> example</li> <li> example2</li> </ul> </div> <div id="left"> goLeft </div> <div id="right"> goRight </div> <ul id="numbers"> <li></li> </ul> デモでは画像を利用しています。 #~にリンク #~にリンクさせることで個々のスライドを指定して表示さ

    akinalover
    akinalover 2010/12/19
    非常に軽量(2.2kb)なスライダー「simple jquery hash-slider」が紹介されてます。outline=noneなトコも好感あり。
  • hash slider by manjographics

    HASHSLIDER V2 OUT NOW! You can found an improved version of the hashslider here simple jquery hash-slider This jquery-based slider does what the most jquery-sliders do, but adds a hashtag to the window location, so you can link to any content / position of the slider. I was searching for a script like this for a while but didn't find one and so a decided to make one myself. For example: http://you

    akinalover
    akinalover 2010/12/19
    紹介記事(日本語) :: シンプル・軽量(2.2KB)・手軽なjQueryコンテンツスライダー・hash slider - かちびと.net http://bit.ly/hihv0E
  • jQueryのプラグイン「Page Scroller」を商用利用でも無料に変更しました:更新- 3.0.7

    当サイトで配付しているページ内をスムーズにスクロールできるスクリプト「Page Scroller」をバージョンアップ(3.0.7)して、商用利用でも無料に変更しました。 スクリプトは当サイトでも下記のキャプチャのように、いろいろな箇所に利用しています。 簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 [ad#ad-2] 3.0.7の変更点 スクリプトのライセンス スクリプトのダウンロード 3.0.7の変更点 主な変更点は、下記の通りです。 3.0.7 ライセンスが変わりました。 詳しくは、「スクリプトのライセンス」を参照ください。 スクリプトのライセンス ライセンスを下記のように変更しました。 変更前: 表示 - 非営利 - 継承 2.1 日 変更後: 表示 - 継承 2.1 日 使用条件 上記のライセンスに従い、個人でも商用で

    akinalover
    akinalover 2010/11/19
    気づかない位がちょうど良い。これはちょっとしたギミックにも言える事で、自然に使えすぎて、拘りを主張しないくらいが僕は好きだったりします。
  • Ajaxやタブ切替には必須かも?ブラウザの「戻る」「進む」を有効にするjQueryのhashchangeプラグイン :: 5509

    Ajaxやタブ切替には必須かも?ブラウザの「戻る」「進む」を有効にするjQueryのhashchangeプラグイン Ajaxやタブクリックなどのイベントでもブラウザの「戻る」「進む」を有効にすることができるjQueryのhashchange eventというプラグインを紹介します。同じような効果を得られるスクリプトより断然使いやすいのでおすすめです。 使い方はとても簡単で windowにhashchangeイベントをbindするだけです。 $(window) .hashchange(function() { Hoge(location.hash.replace('#', '')); }); // ハッシュフラグメントが変わったときにHoge()を実行する $(window).hashchange(); // Windowロード時に実行できる Ben Alman » jQuery hashc

    akinalover
    akinalover 2010/11/19
    こぅ言う事も出来るんだなぁって事は案外多くて…と言うか、多すぎて、追いついてない事も多いです。それは「その中の人」すらたまに「えっ」と出会ってしまうくらいですもんね。
  • jQueryプラグインのベストトレンド総まとめ2010*ホームページを作る人のネタ帳

    もはやこの業界ではかなり浸透しつつあるjQuery。 今回はそんなjQueryにスポットを当て、年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。 1)3D表示プラグイン サンプルデモ 今年のトレンドと言えば3D。 というわけでこちら。まずはサンプルデモを確認。 触ってわかる通りですが、2枚の画像が3D表示されます。 呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;

    jQueryプラグインのベストトレンド総まとめ2010*ホームページを作る人のネタ帳
    akinalover
    akinalover 2010/11/17
    2010年のトレンドを感じられるjQueryツールを一挙そうまとめと言う感じのとてもナイスな記事です。記事自体もとても見やすくてgoooood.
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
    akinalover
    akinalover 2010/11/17
    JavaScriptとjQueryの基礎を学ぶのに最適な無料の教材が紹介されています。
  • Hover Slide Effect with jQuery | Codrops

    Today we will create a neat effect with some images using jQuery. The main idea is to have an image area with several images that slide out when we hover […] Today we will create a neat effect with some images using jQuery. The main idea is to have an image area with several images that slide out when we hover over them, revealing other images. The sliding effect will be random, i.e. the images wi

    Hover Slide Effect with jQuery | Codrops
    akinalover
    akinalover 2010/11/17
    このjQueryエフェクトの魅力はJavascriptをオフにしてもデザインが崩れない所。ギャラリー系に多いのはJavascriptを切ったときの対処をしてないモノが多すぎるなぁって事。
  • Tutorialzine

    Welcome to Tutorialzine! We are a community of talented developers who learn together. We have an ever-growing library of high-quality tutorials and articles that you can read completely for free!

    Tutorialzine
    akinalover
    akinalover 2010/09/11
    このサイトはホント綺麗で見易いチュートリアルを提供してくれています。勉強になる。
  • Full Page Image Gallery with jQuery | Codrops

    In this tutorial we are going to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar […] In this tutorial we are going to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically w

    Full Page Image Gallery with jQuery | Codrops
    akinalover
    akinalover 2010/09/10
    これは写真を主に扱っているアーティスト系ポートフォリオなどに良いかも。詳しくは「DEMO」を御覧ください。
  • Sponsor Flip Wall With jQuery & CSS

    Designing and coding a sponsors page is part of the developer's life (at least the lucky developer's life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design. We ar

    Sponsor Flip Wall With jQuery & CSS
    akinalover
    akinalover 2010/08/27
    バナーリンクをフリップ式にして表示出来るjQueryスクリプト。スポンサーリンクや音楽のジャケット表示などに利用するとオシャレかも。
  • $(DHTMLcoders).read(this) || throw your.job - 書評 - jQueryクックブック : 404 Blog Not Found

    2010年08月19日01:00 カテゴリ書評/画評/品評Lightweight Languages $(DHTMLcoders).read(this) || throw your.job - 書評 - jQueryクックブック オライリー矢野様より献御礼。 jQueryクックブック jQuery Community Experts / 株式会社クイープ訳 [原著:jQuery Cookbook] これでなくなった。 jQueryを使わない理由が。 DHTMLを利用する全ての人、必携。 特にHTMLCSSを書いても、JavaScriptはそれほど書かない人。これであなたにも書けるようになります。 書「jQueryクックブック」は、今や最重要のJavaScript Libraryといっても過言ではないjQueryの手引書。 目次 まえがき - John Resig はじめに jQuer

    $(DHTMLcoders).read(this) || throw your.job - 書評 - jQueryクックブック : 404 Blog Not Found
    akinalover
    akinalover 2010/08/19
    ちょっとこれは気になる。jQueryは便利である反面、どぅ説明する・されればその利点がわかり易いのかって言う勉強になりそう。後で読む。
  • 30 Useful Jquery Plugins For Developer & Designer

    jQuery is one of the most popular Javascript framework out there. It is very easy to use and full of cool features. It can be hard for us to know how to use the code and create amazing stuff using jQuery. So, developers decided to release and create plugins to help us fulfill this task by making it easier for us. Here’s that awesome list of the best jQuery plugins that will help you add beautiful

    30 Useful Jquery Plugins For Developer & Designer
    akinalover
    akinalover 2010/08/18
    Lightbox以外にも色々と紹介されているオススメjQueryのまとめ。良いですね。
  • YoxView - jQuery image viewer plugin

    YoxView is a free image viewer for websites. It's written in javascript using jQuery and is available as a jQuery plugin.YoxView is a free image viewer for websites. It's written in javascript using jQuery and is available as a jQuery plugin. YoxView is inspired by Lokesh Dhakar's Lightbox. Like it, YoxView displays images above the website's content, as a separate layer. Features Images are resiz

  • 画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net

    画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日語 English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 Lightbox Lightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。

    画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net
    akinalover
    akinalover 2010/08/04
    おぉ。この一覧は非常に見やすい Lightbox 系を含む一覧。It's a collection of Lightbox-like jQuery scripts. The article is prepared in English, too. Nice!
  • lightbox

    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

    akinalover
    akinalover 2010/08/04
    これはShadowbox同様、かなりヨサゲなツール。動画を埋め込んだり、画像を良く使うサイト管理者にはかなりオススメ。
  • PHP/MySQL Contact Form with jQuery | Codrops

    Here’s an implementation of a contact form with PHP and jQuery. Usually, one would only want the message posted by the user to be sent to an email address. This […] Here’s an implementation of a contact form with PHP and jQuery. Usually, one would only want the message posted by the user to be sent to an email address. This script does that and also saves all these messages in the database for the

    PHP/MySQL Contact Form with jQuery | Codrops
    akinalover
    akinalover 2010/07/21
    コンタクトフォームをフラッシュにしているサイトはアメリカにも多いけど、基本好きじゃない。見た目は綺麗だけど、その反面、自由度がなさすぎる。jQueryの場合は自由度、親切度、見た目の三点に於いて魅力的。