[JS]二枚の画像を少しずつブレンドして切り替えるスクリプト -Floom二枚の画像を少しずつフェードでブレンドして切り替える画像ギャラリーのスクリプトをblog.olicio.usから紹介します。 Floom demo デモはまるでフラッシュのように、進捗のバーが表示され、画像を切り替えると共にテキストも変更し、次々と画像を表示します。 オプションでは、アニメーションのスピード、ブレンドの方向、キャプションの有無などが変更できます。 FloomはMooToolsのプラグインのため、実装にはmootoolsが必要です。
[JS]画像切り替えやパネル表示にフェードを使ったスライドショーのスクリプト -Fade-in slideshow
画像の切り替えやパネルの表示にフェード効果を使用したスライドショーのスクリプトをDynamic Driveから紹介します。
[JS]動作が軽快なパネルを水平・垂直にスライドするスクリプト -Easy Slider
リスト要素のパネルをスムーズなアニメーションでスライドさせるスクリプト「Easy Slider」をcss globeから紹介します。 Easy Slider 1.5 demo パネルには画像やテキストなどを配置することが可能で、スライドのコントローラーはテキストベースのものやグラフィカルなものを使用することができます。 demo 1（スタイルは無し） demo 2（スタイルを適用） demo 3（スタイル無しで垂直方向に） demo 4（スタイル適用、自動スライド） demo 5（複数のスライダーを設置） スクリプトのオプションでは、スライドのスピード、スライドの自動・手動、ポーズの時間などを調整することができます。 Easy SliderはjQueryのプラグインのため、実装にはjquery.jsが必要です。
PhotoSwipe
What’s new in v5Code quality and rewrite in ES6The script is now distributed as an ES module and does not require a build step to use. The documentation is also updated and now includes more examples. Simpler initialization and dynamic import supportPhotoSwipe now supports dynamic import and does not block page rendering. <script type="module"> import Lightbox from './photoswipe-lightbox.esm.js';
ダイナミックなアニメーションがかっこいい、フルスクリーン対応のスライダーを実装するチュートリアル
パネルに切り込みをいれ、垂直・水平方向にダイナミックにスライドするフルスクリーンで楽しめるスライダーをjQueryとCSS3で実装するチュートリアルを紹介します。 実装 実装方法はポイントを説明します。 HTML 各パネルは「sl-slide」のclassを持ったdiv要素で実装されており、カラーは「sl-slide-dark」で管理されています。 <section id="sl-slider" class="sl-slider"> <div class="sl-slide"> <div class="sl-deco" data-icon="6"></div> <h2>A bene placito</h2> <blockquote> <p>You have just dined, and however scrupulously the slaughterhouse is conceale
[JavaScript] 最近のjQueryとの付き合い方いろいろ - YoheiM .NET
こんにちは、@yoheiMuneです。 今日はjQuery Advent Calendar 2014の15日目の記事として書きたいと思います。 何を書こうかなーと思っていたのですが、最近の自分とjQueryについてライトに書いてみたいと思います。 Special Thanks to https://flic.kr/p/92J4Qt 目次 利用者としての付き合い方 最近の案件ではjQueryラブの時代は過ぎ去ったようで、案件によってjQueryが使われたり使われなかったりします。 今の案件ではjQueryが導入されていますが、担当者がコロコロと入れ替わったらしく、様々なjQueryの使い方が散乱しています。 ほぉほぉこんな書き方もできるのかと学ぶことが多くて、ある意味有意義ですw。 jQueryを使う理由 最近感じるjQueryを使うメリットは、以下のようなことがあります。 何かサクッと作る
![[JavaScript] 最近のjQueryとの付き合い方いろいろ - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/c317869f558b1e5757165df2d3ac230f00b3dc87/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F349.jpg)
俺のJSライブラリの世界観(2014末版) - Qiita
概論 ここ近年のモダンJSは特に理由がなければcommon.jsのrequireスタイルで記述され、webpack/browserifyでビルド/読み込むことを前提にしてよい。今やビュー層を除いてブラウザとnodeのライブラリの境界は非常に曖昧である。 識者諸君においては常にどちらの環境でも読み込めるようなライブラリを提供するように心がけることを切に願う。 今日はライブラリの名前しか出さないんで各自ググるように。 立場 サーバサイド~ゲームプログラミング出身node寄りフロントエンドエンジニア このサイトのスタッフだけど他のことに手一杯でQiitaのフロントはまだそんなにいじってない すまんな 他ってなんだろうな 言語 CoffeeScript TypeScript 最近DDDっぽい構成を目指しているのだけど、コアドメインをTypeScriptで書いて、それをUI層からCoffeeScri
[JS]スロットマシンのようなアニメーションが楽しいナビゲーションを実装するチュートリアル
jQuery quickie: Slot machine navigation デモページ [ad#ad-2] デモではナビゲーションの各ラベルをマウスでホバーすると、スロットマシンのアニメーションを楽しめます。 ナビゲーションの実装 HTML シンプルなリスト要素で実装します。 <ul id="jquerynav" class="navigation"> <li><a href="#" class="marcofolio">Marcofolio.net</a></li> <li><a href="#" class="rss">RSS</a></li> <li><a href="#" class="twitter">Twitter</a></li> <li><a href="#" class="jquery">jQuery</a></li> </ul> CSS 一枚の画像を使ってCSS S
[JS]ダイナミックで軽快なアニメーションを伴ったナビゲーション
画像を一切使用せずに実装する、軽快なアニメーションを伴ったナビゲーションのチュートリアルを紹介します。 Awesome Cufonized Fly-out Menu with jQuery and CSS3 デモページ デモでは右に配置されたナビゲーションの各ラベルにマウスホバーするとアニメーションでハイライトが移動し、それに伴う説明文が右からスライド表示されます。 HTML HTMLは非常にシンプルです。 <textarea name="code" class="html" cols="60" rows="5"> <div id="slidingMenuDesc" class="slidingMenuDesc"> <div><span>Maybe that's what life is... a wink of the eye and winking stars.</span></div
第1回 プラグインを見つけよう | gihyo.jp
はじめに この連載では、プログラムはあまり知らないという方に向け、今話題のJavascriptライブラリの一つであるjQueryのプラグインを用いた、ワンランク上のWebサイト制作方法を解説します。 第1回では「プラグインをどのように見つけるか」について、その方法を紹介していきます。今後も増加の傾向にあるjQueryプラグイン。インターネットの海の中から自分に必要なプラグインを効率よく探すテクニックは、jQueryを使いこなす上での重要なポイントとなるはずです。 jQueryプラグインの見つけ方 インターネットの海から必要なプラグインを探す方法は、ざっと次の3パターンに分けることができます。 検索エンジンで探す リスティングサイト/ブログから探す RSS/ML購読など 当然、それぞれの探索方法は一長一短であり、以下にそれぞれの方法に対し、詳しく紹介していくことにします。 検索エンジンで探す
2014年総まとめ、jQueryのプラグインとスクリプト100選
毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。 また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェ
[JS]検索ボックスをSafari風デザインにするスクリプト -Safari Searcher
jQuery Safari Searcher demo 検索ボックスのスタイルは通常用とインクリメンタルサーチ用が用意されており、ダウンロードできるファイルには画像やアニメーションgifなど一式が揃っています。 ボックスの幅の対応は画像が500pxのため、それより小さい幅まではそのまま対応できると思います。 Safari SearcherはjQueryのプラグインのため、実装にはjquery.jsが必要です。
フォームの入力をより分かりやすくするスクリプト -Context highlighting | コリス
Janko at warp speedのエントリーから、フォームの入力時に、ラベルと入力箇所をハイライトして、より分かりやすくするスクリプトを紹介します。 Building a better web forms: Context highlighting using jQuery デモ デモでは残念ながら、labelは使用されておらず、class名「row」のdivで囲まれた範囲にハイライトが適用する仕様になっています。 ハイライトする箇所は、ラベルと入力箇所のほかにも、そのグループ全体をハイライトすることも可能です。 Context highlightingはjQueryのプラグインのため、動作にはjquery.jsが必要です。 また、上記と同じエフェクトを実装するスタイルシートが別サイトで紹介されています。
[JS]日本語もOK、行単位でスタイルを適用できるようにするスクリプト -Lining.js
demo 5 一行ごとにさまざまなアニメーションで表示します。 「rolling」のエフェクトかっこいいです。 Lining.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <head> ... <script src="build/lining.min.js"></script> </head> デモにあるエフェクトを使用する時は、エフェクト用のスクリプトも加えます。 <head> ... <script src="build/lining.min.js"></script> <script src="build/lining.effect.min.js"></script> </head> Step 2: HTML 適用する要素に「data-lining」を加えます。 <p class="poem" data-lining>洋酒といえば、誰でも
![[JS]日本語もOK、行単位でスタイルを適用できるようにするスクリプト -Lining.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/94a5e0fe3568ecb41b259e96c1bc62f0c1f09601/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014112501-01.png)
初心者向けのjQuery入門講座
使い方 まず最初にチェックするコンテンツです。どのような考えをもとにプログラムを組み立てていくか、設計力を学びます。 サンプル 使い方で学んだことを生かして、簡単なサンプルの作成を学んでいきます。 プラグイン jQueryで利用できる便利なプラグインを紹介していきます。 リファレンス jQueryのリファレンスです。辞書代わりにご利用ください。 使用例 企業サイトでのjQueryの使用例を紹介していきます。 始めに jQueryはデザイナーにも利用しやすいjavaScriptプラグインです。このサイトはhtmlやcssを充分に理解しており、さらに基礎的なjavaScriptをマスターしている方を対象に記事を書いています。 現在はスマートフォン用のゲーム制作に注力しているため、本サイトの更新は休止状態（2014年3月が最終更新）です。ゲーム制作に関するブログ：スマゲー作るよ！はほぼ毎日更新し
第20回 jQueryでAJAX入門：正規表現でサイトに表示したTwitterにリンクをつける | gihyo.jp
Twitterにリンクをつける 前回は.getJSON()メソッドを使い、Twitter上での発言をサイトに表示できるようにしてみました。しかし、時にはTwitterの発言文中にはURLやhashタグや@ユーザー名などが含まれていることがありますが、前回のままではそのままテキストとして表示されるだけになってしまいます。 以前、フォームの内容を紹介した時に正規表現の紹介をしましたが、今回はその正規表現を利用して、Twitterの発言文中に含まれるURL・hashタグ・@ユーザー名をリンクをつけるサンプルをご紹介します。 URLにリンクをつける まずは文中に含まれるURLにリンクをつけてみましょう。文中からURL部分だけを見つけるために、正規表現を利用します。 URL用の正規表現 /(http:\/\/[\x21-\x7e]+)/gi 「[\x21-\x7e]」の部分は16進数で表現したASC
ギャラリープラグインデモいろいろ
jShowOff is a jQuery plugin for creating a rotating content module. It works by creating 'slides' from the child elements (eg. <li>) inside a specified wrapper element (eg. <ul>) on which .jshowoff() is invoked. It then rotates through the slides, with options for controls, links, and more. This type of module is often used to promote pages, sections, or features on a site. Required Files the jQue
[JS]HTMLコンテンツにも対応、カルーセルで表示するスライダーのスクリプト -jShowOff
一つ以上の子要素と、それらを内包する親要素をスライダーとして使用します。 下記は、テキストや画像を配置したdiv要素を子要素として、それらを内包するdiv要素を配置しています。 <div id="features"> <div><p>This is a slide!</p></div> <div><a href="http://google.com"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Google Logo" /></a></div> </div> JavaScript 「jquery.js」と「jquery.jshowoff.min.js」を外部ファイルとし、下記のスクリプトを記述します。 セレクタ（#features）は、自分の環境にあわせて変更してください。 $(document).re
第19回 jQueryでAJAX入門：JSONを使いサイトにTwitterを表示 | gihyo.jp
jQueryでAJAX入門2回目：JSON形式を扱う 前回はXML形式のRSSをAJAXで取得してリストで表示させました。今回はXMLではなく、JSON（ジェイソン）と呼ばれる形式を扱い、同じようにリストを表示させてみることにします。今回ご紹介するJSON形式も、前回紹介のXML形式同様jQueryで取得・表示をさせることができます JSON？ JSONはJavaScript Object Notationの略で、JavaScriptで簡単に扱えるテキストベースのデータフォーマットです。たとえば下記のような構造になっています。 JSONサンプル [ { "name": "技評太郎", "age" : 26, "skills":["PHP" , "JavaScript"] }, { "name": "長谷川広武", "age":25, "skills":["HTML" , "CSS"] },
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript・jQueryの改修・高速化のためのメモ - Qiita
