こんにちは、デザイナーのモモコです。 今回はjQueryやCSS3を使用したリッチなエフェクトやhover効果をまとめた記事の中から、スタイリッシュなエフェクトを幾つかご紹介します。 CSS3やJqueryで実装出来るリッチなエフェクト6選 3D Thumbnail Hover Effects http://tympanus.net/Tutorials/3DHoverEffects/ 紙のように画像を折り畳んだりめくったりするようなエフェクト。とてもリアルですね…！思い切ってサムネイルに動きをつけたい時に役立ちそうです。 Scrollable Thumbs Menu with jQuery http://tympanus.net/Tutorials/ScrollingThumbs/ ミニギャラリー的な用途に使えそうなエフェクト。左下のメニューにカーソルを当てるとサムネイル画像の一覧が縦にず
及川です、忙しさを理由に更新できずにいたので久しぶりとなってしまいました。 お客さんからいただく要望は色々あるんですが、それ以上にスライドショーやカルーセルを実現するjQueryプラグインなんかもありすぎて、50個も100個もまとめているページを良く見かけます。 「いらない、そんなに。」 毎日、毎日思ってます。 そこで、Web制作の現場で毎日のようによく使うスライドショーやカルーセルについて、よくご依頼いただくご要望に合わせて自分がよく使うものをまとめてみました。 Web制作現場でよくつかうjQueryスライドショーのサンプルコード 「実物とは違うアイコンをサムネイルとして使いたい、あのなんか○のやつじゃなくて」 「矢印クリックすると次に行ったり前に行ったり、最後に右の矢印クリックしたら先頭に戻してよ、できるよね」 「アイコンサムネイルクリックするとひもづいた画像に表示切り替えて、もちろん
# Download specific slider from jssor.com View a slider file, e.g. /jssorservice/001-image-slider.slider, click Command Button at top right corner.
美女にイタズラしたくてCanvasとAjaxを勉強してみた こんにちは、インターン中のファイ部の田口です。 突然ですが、美女に落書きできたら楽しいと思いませんか？ グラビアなどの女の子の水着写真を黒く落書きすると、まるで裸のように見えてエロくなるってのは、ネット上でひそかに流行ってます。 今回は美女に落書きしたいという男性の潜在的欲望にのっとって、jQueryのAjaxで美女の画像をネット上から取得しながら、HTMLのCanvasで落書きしたいと思います。大きな流れはこんな感じ。 [STEP1] AjaxでBjin.Meから美人の画像を取得 [STEP2] 美人の画像にCanvasでお絵描き [STEP1] AjaxでBjin.Meから美人の画像を取得 美人の画像を取得します。美人の画像はbjin.MeでAPIとして提供しています。 このAPIを使ってAjaxを用いて、画像を取得して行
こんにちは、工藤です。 今回はよくお世話になるjQueryプラグインをまとめました。 コードがまったく書けない人間なのでありがたいです・・。 yuga.js yuga.js公式ページ お名前の通り、『Web制作を優雅にするために』作られたそうです。 このブログでもお世話になっています。 まずはjQuery本体と『yuga.js』をheadで読み込みます。 ロールオーバー ロールオーバー時に画像を切り替えることが出来ます。 やり方はすごく簡単で ロールオーバー前の画像と、ロールオーバー前の画像名に『_on』とつけた画像を用意します。 ロールオーバー前の画像のimg要素に『class=”btn”』と記述します。 これだけでロールオーバーが再現できます。 もし『class=”btn”』で都合が悪かったらyuga.jsのたぶん87行目のあたりにロールオーバーの記述があるのでそこに好きなclassを
ThickBox 3とは? ThickBox 3はAjax(非同期通信処理)を利用して画像を表示するライブラリです。同じようなライブラリとしてはLightbox)が有名ですが、Lightboxはprototype.jsライブラリを利用しているのに対し、ThickBox 3はjQueryライブラリを利用しています。ThickBox 3の画像は単独の表示だけでなく、複数画像をグループ化してスライドとして表示させることもできます。また、画像だけでなくHTMLファイルなども表示させることができるので、いろいろ応用できそうです。Lightboxと比べてもThickBoxの方がプログラムサイズがコンパクトなことも魅力です。 ThickBox 3の大きな特長としてスクリプト(プログラム)を記述しなくてよいという点があります。つまり、全くプログラムが分からない人手も気軽に使うことができます。ThickBo
Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images. With the responsive awakening in web design it becomes important to not only take care of the visual part of a website but also of the functionality. Elastislide is a responsive jQuery image carousel
SMINT SMINTの使い方 Step 1: 外部ファイル スクリプトを外部ファイルとして記述します。 <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="js/jquery.smint.js"></script> </head> Step 2: HTML まずは、最上部に配置されるナビゲーションから。 <div class="subMenu" > <div class="inner"> <a href="#" id="sTop" class="subNavBtn">Home</a> <a href="#" id="s1" class="subNavBtn">Section 1</a> <a href="#" id="s2" c
今年も数多くの素晴らしいjQueryのプラグインがリリースされました。当ブログで紹介したものをはじめ、未紹介のものまで、jQueryのプラグイン100+α選です。 今年目立ったのは、アニメーションを使ったスクロール関連のスクリプト。 スクロール前提の1ページサイト、パララックスなど、コンテンツをより大きなサイズで楽しむものが増えました。また、スマフォ・タブレットに大きく影響を受けたインタラクションも目立ちましたね。 1ページコンテンツ用のスクロール関連 パララックス スクロール関連 スクロールで定位置関連 その他スクロール操作・補助関連 スクロールバー関連 レスポンシブ関連 エフェクト関連 ナビゲーション関連 レイアウト関連 画像ギャラリー関連 画像拡大・配置・キャプション関連 コンテンツスライダー関連 カルーセル関連 アニメーション関連 フォーム関連 コンテンツのツアー関連 テキスト関連
RWD対応のモーダルウィンドウを実装するスクリプト、Remodalのご紹介です。jQueryに依存しています。 RWDなWebサイトで使えるモーダルウィンドウ実装スクリプトです。 デバイスのモニタサイズに応じて適切なレイアウトを維持するモーダルウィンドウです。 スマフォの場合は全画面に表示されるのでフィンガーフレンドリーを考慮した設計と言えそうです。 <script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.remodal.min.js"></script> 本体とスクリプトを読み込みます。 <div class="remodal" data-remodal-id="modal" data-remodal-options='{
TOP > plugin > クリエイティブな動きがデザインが実装できる フリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」 魅力的なwebサイトを実現させるためには、他にはないデザインや動きを取り入れることで、より理想に近づけることができます。今回はそんな魅力的な動きを実装できるフリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」を紹介したいと思います。 （Drop） そのまま利用しても、自分のデザインと組み合わせて使っても、クリエイティブなwebサイトを作り出せるプラグインがまとめられています。 詳しくは以下 scrollReveal.js スクロールするとバーの動きを楽しむことができるプラグイン。個性的なデザインのサイトに仕上げたい時におすすめ。 leas
↑このようなモーダルウインドウを様々なエフェクトで表示させる事が出来ます。 デモはこちら ※デモの中にある画像の「more」を押すとモーダルウインドウが表示してください。 スマホ対応もされているとのこと。興味のある方はデモをご覧ください。
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
jQueryを使ってのレスポンシブに対応したスライドショーを実装するいくつかのパターンを紹介してきましたが、サムネイルも何もなしでただ画像（コンテンツ要素）がクロスフェードするだけのシンプルなスライドショーのレスポンシブに対応したパターンの要望を多くいただいたので、試しに作ってみたのを紹介してみます。 レスポンシブ動作はブラウザ枠を目いっぱいにするタイプなので、まずは別枠表示で動作サンプルから。 「jQueryでレスポンシブ対応のシンプルなクロスフェードビューアーを作る方法」サンプルを別枠で表示 サンプルでは6枚の画像を自動でクロスフェードで切り替え、最大幅を「800px」最小幅を「320px」としてブラウザ幅によってスライドショー部分が拡大縮小します。（どちらの値も変更可） 簡単な動作仕様については以上になります。 全体構成についてまずはHTMLから。 ◆HTML <div class=
twitter facebook hatena google pocket WEBの表示領域は膨大にあるといってもごちゃごちゃしすぎると見ている側には鬱陶しいものです。 そこで、説明をオーバーレイで見せ、すっきりかつ印象的にしちゃいましょう。 jQueryプラグインのChardin.jsであれば簡単なことこの上なしです。 sponsors 使用方法 Chardin.jsからファイル一式をダウンロード。 <link rel="stylesheet" type="text/css" href="chardinjs.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="chardinjs
Pinterest風グリッドレイアウトを作ってみよう：jQuery×HTML5×CSS3を真面目に勉強（3）（1/4 ページ） はじめに 一口にSNSというと、読者の皆さんはまず、TwitterやFacebook、LINEなどのサービスを思い浮かべることでしょう。しかし、こういったデファクトスタンダードなサービスだけでなく、世の中にはさまざまなジャンルに特化したSNSがいくつも登場してきています。 特に写真共有に特化したSNSのUIというのは、その特性のためか画像を画面いっぱいに敷き詰めたものがよく見受けられます。基本的な操作性はもちろんのこと、いかに美しく、ユニークに画像を並べるかによって他サービスとの差別化を図るかが、デザイナーならびにフロントエンドエンジニアの腕の見せ所といっても過言ではありません。 Pinterestは、そうした写真共有SNSの1つです。高さが均一のグリッドが整然と
Re:初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips ネタ元:初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips : アシアルブログ ちょっと気になるコードがあるのでツッコミを。 １．現在見ているページのナビゲーションをアクティブにする if (document.URL.indexOf("001.html") != -1) { $("nav a.top").toggleClass("on"); } else if (document.URL.indexOf("002.html") != -1){ $("nav a.list").toggleClass("on"); } class属性の付加にtoggleClass()を利用しているけどaddClass()のほうがシンプルでよいです。 if (document.URL.index
50 Amazing jQuery Plugins That You Should Start Using Right Now jQuery has a wonderful community of programmers that create incredible things. However, it may become difficult to sift through everything that is released and find the gems that are absolute must-haves. This is why, in this post, you will find a collection of 50 new jQuery plugins and JavaScript libraries that, when applied with good
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
