Bubble Layout Bubble Layout -GitHub まずはアニメーションを使った斬新なUI、バブルレイアウト。 ベースにはmo.jsが使われており、バブルをクリックしてからの遷移だけでなく、バブル自体も楽しいアニメーションで動かすことができます。デモページで実際の動きに触れてみてください。
こんにちは! 毎朝寒さで布団からなかなか抜け出せません、エンジニアのゆたろです。 みなさん、スマホのタッチジェスチャーの実装につまずいたことはありませんか? 今回は、そんなときに便利なライブラリ「Hammer.js」をご紹介します。 hammer.jsを使ってみよう http://hammerjs.github.io/ まずは、上のリンクよりプラグインをダウンロードしちゃいましょう! https://github.com/hammerjs/jquery.hammer.js ここではjQqueryプラグインとして使いたいので、jquery.hammer.jsも合わせてダウンロードしてください。 ダウンロードしたファイルとjQueryをHTMLに読みこませます。 <script src="jquery.js"></script> <script src="hammer.js"></script
HTML版簡易ローディング画面設置jQuery 今回ご紹介するのは、ページの読み込み完了までローディング画面を表示し、完了後コンテンツを表示する方法です。 大きな画像を多用していたり、1ページあたりの容量が大きくなった場合など、読み込みが完了するまで結構な時間がかかってしまうページでの訪問者のイライラを解消する選択肢の一つにいかがでしょうか。 HTMLで作成したページでローディング画面を表示させ、ページ全体が読み込まれてから表示させる方法を、2GRAVITY(ニジュウリョク)様が、とてもわかり易く説明していただいているのでご紹介致します。 Flashページで読み込み時に「loading・・・」等と表示されるのをよく見かけますよね。 javascript(jQuery版)を使用すると、HTMLで作成したページでも同じようなことが表現可能になります。 【html】記述例 <body> <div
最近のWebサイトでよく見かける面白い仕掛けのコンテンツやエフェクト、便利な機能を実装できるjQueryのプラグインやスクリプトを紹介します。 Midnight デモページ ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示するjQueryのプラグイン。 デモでは、表示されているコンテンツに応じて、ロゴの背景色とカラーが変わります。 Off Canvas Menu Effects デモページ メニューをサイドやトップ・ボトムから気持ちいいアニメーションで表示させるOff Canvas Menuのかっこいいエフェクトのまとめ。アニメーションのバリエーションとして見るだけでも楽しいです。
画像やテキストのホバー時にふわっと透明度を変えて、ロールオーバー効果を付けるjQueryのコードです。 以下のデモのようなエフェクトをかける事ができます。 See the Pen ホバー時にふわっと透明度を変えるjQueryのコード by Saomocari (@Saomocari) on CodePen. 下記のようにヘッダー内に記入します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".hover_img").hover( //↑.hover_imgはアニメーションを付けたい要素を
マウスオーバーで画像を切替える方法はいくつかあります。 大別してCSSを使ってやる方法とJavascriptを使ってやるというのが主流かと思います。 CSSでやる場合、ボタンの切り替えはどうしても瞬間的に切り替わるものになってしまいます。 (ふわっと切り替える方法もあるのかな・・・) でもやっぱり僕的には「ふわり」と切り替わるエフェクトの方が好みなんです。 そこで今回はJavascriptを使ってやる方法を選択してみました。 Javascriptを使って簡単にアニメーションを実装といえばもちろんjQueryさんの出番です。 と言う事で、HTMLのHEAD内にまずはjQueryをインポートしてしまいましょう。 <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2
Chapter 02 3 ステップではじめるかんたん jQuery 入門 # Easing Chapter 04 確かな基礎力を養う jQuery の基本テクニック 01 さまざまなホバーエフェクトで学ぶ動きのある表現の基本 02 画像とキャプションの表現 03 丸いボタンのレイアウト 04 見え隠れするサイドバー 05 タイポグラフィの表現 # Chaper 04 完成版 Chapter 05 活用の幅を広げる jQuery の必修テクニック 01 なめらかな動きの スライドショー Basic 02 多機能なスライドショー Advanced 03 スティッキーヘッダー Basic 04 デザインが変化する スティッキーヘッダー Advanced 05 画面領域を有効活用できるタブ Basic 06 高機能で拡張しやすいタブ Advanced 07 スムーズスクロール Basic 08 拡
わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
前回書いた 短期間でプログラミングを習得してWebサービスをつくるための知識と方法まとめ が好評だったので、今回は、JavaScriptに絞って習得するための方法をまとめてみたいと思います。 ちなみに、一番最初に、JSに触れた時は、Hello, Worldを表示させたり、 aタグでリンクをはったりぐらいしか出来ませんでした。 ですが、現在はjQueryで社内システムの 画面をつくる(Ajaxとかを使って)事を任せてもらっています。 なぜ、JavaScript(JS)がいいのか?なぜ勉強するのか? まずは、なぜJSをお薦めするのかを説明します。 ①ネイティブアプリがつくれちゃう。 ネイティブアプリとは、iPhoneアプリとか、Androidアプリのことです。 これまでは、iPhoneなら、Objective-Cという言語を、 AndroidならJava(JSとは別物)という言語
Table テーブルのコンテンツをページネーションにすることもできます。 jPagesの使い方 外部ファイル スタイルシートとスクリプトを外部ファイルとして記述します。 <link rel="stylesheet" href="css/jPages.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="js/jPages.js"></script> アニメーションのエフェクトを使用する場合は、「animate.css」も記述します。 <link rel="stylesheet" href="css/animate.css"> HTML デフォルトのHTMLの例です。 ページネーション用のdiv要素と各アイテムをリスト要素で実装します。 ※各ア
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 LightboxLightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。グル
Posted: 2012.03.08 / Category: javascript / Tag: jQuery, アニメーション 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-
Glisse.js - a simple, responsive and fully customizable jQuery photo viewer レスポンシブなPhotoギャラリーを作成できるCSS3&jQueryな「Glisse.js」 デザイン性に嫌味がなく色々な場所で使えそうです。画像を送った際のアニメーションが選べるのもいい感じです ギャラリーページ 拡大 レスポンシブ レスポンシブが発明されなかったらどんな感じになってるんだろうっていう気がしますが、頭の良い人がいるもんですね。 そういう発明をしてみたいものです 関連エントリ 秀逸なレスポンシブWEBデザイン50のサンプル レスポンシブな背景画像スライドショーを実現するjQueryプラグイン「bgStretcher」 レスポンシブなjQueryスライダー実装プラグイン8個
なかなか斬新なプレゼンを作成出来る事で ちょっと話題になった impress.jsという jsライブラリがあるんですが、これのjQuery 依存型があったのでご紹介します。元々 jQueryを使用しているサイトならこちら のほうが導入が楽かもですね。 3Dなプレゼンを作成出来るライブラリ、impress.jsのjQuery版です。impress.jsに関しては以下をご参照下さい。 3Dで斬新なプレゼンが作れる『impress.js』の使い方をざっと説明してみるよ で、このjQuery依存型が出てきました。 デモを作りたかったんですが、昨日今日は少し時間がなくて出来ませんでした。というわけで公式のデモをどうぞ。 Sample もちろんキーボードでも操作できますし、impress.js同様にハッシュチェンジイベント対応済みです。 コード<script type="text/javascript
IEでも滑らかで快適に動作するスライダーを簡単に実装できるjQueryのプラグインを紹介します。 実装にかかる時間は2分くらいでしょうか。 Flow Slider [ad#ad-2] Flow Sliderの特徴 Flow Sliderのデモ Flow Sliderの実装 Flow Sliderの特徴 滑らかなアニメーションで動作します。 実装は簡単で少しのコピペでok。 ベースとなるスタイルシートは用意済み。 クロスブラウザ対応。 対応ブラウザ Firefox Safari Chrome IE Opera9 Flow Sliderのデモ デモではサイトのトップにあるベーシックなスライダーと、本棚に並べたようなスライダーがあります。 スライダーの操作はマウスホバーで、左右の端ほど素早くスライドします。 Flow Slider: Example グリーンのボタン「Buy Book」をクリック
2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く