フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。
ディスプレイサイズ(ブラウザサイズ)いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ(ブラウザ)のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します! 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max
以前、紹介した「Page Scroller」のバージョンアップ版「Page Scroller ver.3」の紹介です。 追記: 2013年10月26日 ver.3.0.9をリリース jQueryの旧版によるXSSに対応しました。 2011年5月4日 デモおよびダウンロードファイルをjQuery1.6に変更しました。 2011年1月31日 ver.3.0.8をリリース 機能を追加しました。 2010年11月19日 ver.3.0.7をリリース ライセンスを変更しました。 2010年11月17日 デモおよびダウンロードファイルをjQuery1.4.4に変更しました。 2010年9月19日 デモおよびダウンロードファイルをjQuery1.4.2に変更しました。 2009年7月6日 対応ブラウザ(IE8, Fx2.5, Chrome2)を更新しました。 2009年2月23日 ver.3.0.6をリ
Google Mapって便利ですよね。 でも細かい設定をするのは少し面倒とお思いの方にjQueryプラグインの「gMap - Google Maps Plugin For jQuery」を紹介します。 マーカー位置やzoomレベル、コントローラー設置など設定が簡単に可能です。 sponsors 使用方法 gMap - Google Maps Plugin For jQueryからjquery.gmap-1.0.0.jsをダウンロードします。 <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=APIキー"></script> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="te
NETEYE Activity Indicator A jQuery plugin that renders a translucent activity indicator (spinner) using SVG or VML. Features Lightweight script No images required No external CSS Resolution independent Alpha transparency Highly configurable appearance Works in all major browsers Uses feature detection Degrades gracefully Supported Browsers The plugin has been successfully tested in the following b
ページ遷移の際に何らかのエフェクトが発生するサイトがありますが、今回紹介するjQuery Animated Pageswitch Pluginを利用することで、それを簡単に再現可能です。 sponsors 使用方法 jQuery Animated Pageswitch Pluginからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.4.3.min.js"></script> <script src="jquery.pageswitch.js" type="text/javascript"></script> <script> $(function() { $('#id名 a').pageswitch({ url: '/test/', //遷移先URL(通常のaタグでの指定でも問題ありません) properties
画像のシンプルな見せ方としてクロスフェードを使用するケースは多いのではないでしょうか? それを簡単に行えるのが、jQueryプラグインのImage Fader jQuery plugin - wingtechです。 sponsors 使用方法 Image Fader jQuery plugin - wingtechからjquery.metadata.jsとjquery.imagefadingslider.jsをダウンロードします。 もちろんjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.metadata.js"></script> <script type="text/j
ソーシャルな時代にはブックマークやrss、twitter、facebookなど使っているものが多くなります。 これらを手軽に表示するjSocial | Social Links Plugin By thatryanを表示することで、あなたのファンが増えていくことでしょう。 sponsors 使用方法 jSocial | Social Links Plugin By thatryanからファイル一式をダウンロード。 <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8"> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/java
日本人ですし、WEBでも縦書き使いたいですよね? はいJavaScript! 縦書きjQueryで実現するnehan - Project Hosting on Google Codeです。 ※作者の方からご指摘いただき、jQueryがなくても動くとのことです。 jQueryないバージョン sponsors 使用方法 nehan - Project Hosting on Google Codeからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="nehan.js"></script> <script type="text/javascript"> $(function(){ Nehan.LayoutMa
PC、スマートフォン、タブレットなど様々なウィンドウ幅に対応する必要が生じている昨今、対応負荷を軽減するためにFitText - A plugin for inflating web typeを使用してみるのはいかがでしょうか。 画面幅に応じてフォントサイズを変えてくれます。 これをサイトやページタイトルに適用しておくとある程度デザインイメージを統一させることができそうです。 sponsors 使用方法 FitText - A plugin for inflating web typeからファイル一式をダウンロード。 <script src="jquery-1.5.1.min.js" type="text/javascript"></script> <script src="jquery.fittext.js" type="text/javascript"></script> <scrip
JavaScriptでテキストを効果付きでローテション表示「jLetter - jQuery text rotator plugin」 ローテション表示させるバナー画像を作るのはちょっと面倒・・・ そんなあなたには、jQuery text rotator plugin - jLetterが良いかもしれません。 テキストに動きをつけてローテションさせられ、ちょっとインパクトを与えられそうです。 sponsors 使用方法 jQuery text rotator plugin - jLetterからファイルをダウンロード。 <link type="text/css" href="jletter.css" rel="stylesheet" /> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script t
Dating a widow demands thoughtful considerations for a healthier relationship. This person never chooses to break up but may not have the closure of a traditional breakup. They would never have said goodbye to their late partner if matters were within their control. For the relationship to work, you’ll have to look out for these…
Retweetradar has nice little effect in the footer - links in top lists fade, emphasizing the most popular links with strongest color intensity. This tutorial will explain how to fade a color in array of elements using jQuery. Download source View demo 1 In the example in this tutorial we'll will fade links in unordered list like in the example below. <ul id="links"> <li><a href="#">Some text
私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ(透過PNGの黒ずみなど)対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね!インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。 今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク(仕
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く