画像がスライドする際に視差効果 を与える事が出来るjQueryプラグ インのご紹介。イメージスライダー とは相性良さそうですね。シンプル なものですが、応用も出来そうです。 パララックスなイメージスライダーです。画像をスライドさせるとテキストがやや遅れて動きます。 デモが目にやり場に困る写真ですが・・工夫すれば訴求力のあるコンテンツに出来そうです。アニメーションはeasing使ってますです。 $('.foo').each(function(index, el){ $(this).destaque({ slideMovement: 100, slideSpeed: 1000, elementSpeed: 1100, easingType: "easeInOutExpo", itemSelector: ".piyo", itemForegroundElementSelector: ".hoge

画像の切り替え時のエフェクトが とっても素敵なjQueryのイメージ スライダー・jq-tilesのご紹介で す。クロスブラウザという訳では 無いのでこのままだと用途は限ら れますけど・・ 素敵なエフェクトが用意されたスライダー。CodeCanYouにあるような有料のスクリプトでたまに見かけるタイプです。OSSで公開されてるのはちょっと珍しいかも。 タイル状に画像が切り取られながらフェードアウトします。他にもいろいろ。 目を惹く事は出来そうです。 $('.foo').tilesSlider() 本体とプラグインを読み込んで初期化すれば動作します。 { x : 4, // x軸にタイルを動かす数値。最大20 y : 4, // y軸にタイルを動かす数値。最大20 effect : ‘default’,//エフェクト指定 fade : false, // フェードさせるかどうか auto :

コンテンツのスライドイン・ アウトと簡易的なスライダー を実装する、というスクリ プト。うまく説明できません が、目を惹くことは出来そう です。 デモを見てもらったほうが早そうなので見た目の解説は割愛します。語彙が欲しい。 動作サンプルご覧頂いたほうがいいっぽいです。 Sample 素敵な動きですね。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="custom.js"></script>サンプルのようにする

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

忙しい朝もサクッと寝癖直し完了! コードレスでどこでも使えるブラシ型ヘアアイロン「Hair Master」を使ってみた

まぁスマートフォンとPC用だと画像の切り替えに迷う。 基本的に画像をスマートフォンに対応させるには下記のようなCSSが多い気がする。 とりあえず現状では、下記の用にcssを指定するのはデフォルトのよう。 img{ width:100%; max-width:100%; height:auto; } 幅はIE用に「width:100%」にしておいて、後は「max-width:100%」にしておく。高さは自動的に変わるように「height:auto」にしておく。これで、PCやスマートフォンでのデバイスの幅、もしくは画像を包んでいる要素に合わせて画像は100%で表示される。 一つの画像による要領の問題 上記の方法だとスマートフォンでも画像がデバイスに合わせて縮小されるがもともとのファイルサイズが変わらないので、使いまわすのが難しいところ。 そこでjqueryとnoscript要素を利用した切り替

どうも、はやちです_(:3」∠)_ スマホに使うとよりサイトが見やすくなるjQueryをまとめてみました。 アコーディオン アコーディオンみたく開閉式のメニューが実装できるjsです。 記事の多いコンテンツをまとめるのに便利ですね。 ■動きをみる HTML <dl class="acordion"> <dt class="trigger">アコーディオンメニュー<span class="open-close">open</span></dt> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキスト テキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキ

TOP  >  WebDesign  >  新しい価値を与えてくれるjQueryプラグイン集「20 New jQuery Plugins Worth Taking a Look at」 WEBを制作する上で、非常に便利なjQueryプラグイン。javascriptで実現できる様々な動作、機能を簡単に実装できます。今日紹介するのはjQueryプラグインの中でも、新しい価値を与えてくれるjQueryプラグイン集「20 New jQuery Plugins Worth Taking a Look at」です。 RSlider フリップして進むブックスライダーだったり、jQueryのみで画像を描画したり、映像を背景にしたフルスクリーンサイトなどなど、様々なjQueryプラグインがまとめられています。今日はその中から気になったものをピックアップして紹介したいと思います。 詳しくは以下 BookBlo

サイズの異なるボックスを綺麗 に配置してくれるスクリプト、 MasonryっぽいjQueryプラグイン、 Freetile.jsです。似たような スクリプトは結構ありますので 参考までに。 よく見かける、異なるボックスを綺麗に並べるスクリプトです。Masonryっぽいやつ。 こういうやつです。ウィンドウサイズが変わってもボックスを再配置してくれます。 $('#foo').freetile(); 本体とプラグインを読み込んでセレクタ指定します。アニメーションオプション等もありました。 ライセンスはBSDです。手抜きな記事ですけどちょい忙しいので今日はこれにて。 Freetile.js

お客さんから送られてきた、Excelデータからせっせとリストや表のHTMLをコーディングしているあなた！そろそろ手がが疲れてきていませんか？ そんなあなたは、この記事で紹介するExcelテクニックをぜひ覚えてください。 面倒な作業が、わずか数秒で終わります！ Excelを使った高速HTML生成 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います！ DreamweaverでもCSVファイルを取り込むことはできるのですが、<dl>タグでマークアップしたい時とか、カスタマイズしたい場合は、これから紹介するExcelを使った方法が簡単で、効果的です。 さぁ、↓のようなお客さんから送られてきたExcelデータから ... こんな感じの、<dl>タグでマークアップされたHTML生成する流れを説明します。データ数はうんざりするくらいあると思ってください。 Let's Excel 1)

お休みですので軽い話題。もう いいだろってくらい出回ってい るコンテンツスライダーですが、 汎用性が高そうだったのでご 紹介。アコーディオンにも出来 るプラグインです。 ベーシックで汎用性がありそうです。IE7などのオールドブラウザにも対応できて、マウスホイールにも対応しています。 よく見かけるようなコンテンツスライダーを実装できる、というプラグイン。有料版と無料版があります。 マウスホイールで進めることも出来ます。 有料版と無料版の相違点も表になってますのでご確認下さい。 DLすると、枠のみのものを貰えるのでテキストと写真を入れればすぐに完成します。 コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <scri

最近リリースされた、jQueryプラグイン10選「10 jQuery Plugins that Will Make your Life Easier」 世界中で利用されている便利なjavascriptライブラリjQuery。多くのWEBデザイナー、デベロッパーの手によって日夜新しいプラグインが生み出されていますが、今日紹介するのは最近リリースされた、jQueryプラグイン10選「10 jQuery Plugins that Will Make your Life Easier」です。 blur.js 背景との間にぼかし効果をあたえるものや定番のシンプルでミニマムなツールチップ、写真の上に自分で書き込むペイント機能まで、様々なjQueryプラグインがまとめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 Nestable 入れ替えが可

twitter facebook hatena google pocket aタグを付与すると色が変わりアンダーラインが表示され、リンクさます。 しかし、もっと大きなdivなど全体をリンクにしたい時もあるでしょう。 Link Boxesではjavascriptでの解決策を示しています。 sponsors 使用方法 Link Boxesで使用しているjavascriptをちょっと変更したLinkBox.jsをダウンロードしてください。 ＊li要素をdiv要素に変更しただけです。 <script src="http://yourdomain/LinkBox.js" type="text/javascript"></script> <style type="text/css"> .linkbox {border:1px solid #888;background:#f9f9f9;padding: