コーポレートサイトトップを、あまり動きがない状態だったのでモーションを追加して、ファーストビューで少し変化のあるデザインへ改変しました。
タグ: 追加
コーポレートサイトにjQueryを使ったモーションを追加しました。
コーポレートサイトにjQueryベースでいろいろな機能を追加しました。
トップページのタイポグラフィーは上から表示されるように透明→非透明の効果を設定。
各ページヘはContact(お問い合わせ)を除き、ページ読み込みで下から上へイージングで表示されるようにしています。
その他サムネイルはリンクから、ページ内でフレーム上にウインドウを開き表示するLightbox的なものに変更。
最初右上に表示されている円はランダムに移動、色が変わります。
cdbk.net CREATIVES. http://creatives.cdbk.net
WebサイトでjQueryを使ってTwittelatorの画像表示のようなエフェクトを追加する方法
最近UIが一新され、新たなアプリケーションのインターフェイスを形にして切れた「Twittelator」。
そのインターフェースの中で自分が一番気になった画像表示のエフェクトをjQueryを使ってcdbk.net CREATIVESのshowcaseで形にしました。
使うのはjQuery.js(今回は1.4.2)とイージングのエフェクトを簡単に追加できるjQuery.easing.js(1.3)のみ。
エフェクトを施したい画像を<span class=”jumpin”></span>で囲みcssでdisplay:block,overflow:hiddenを指定。
JavaScriptはjQuery、easingを<head>内に追加したあとに下記を追記。
//初期表示設定 function jumpin_set(){ $(".jumpin").each(function(){ //指定するクラス var img_w = $(this).width(); //デフォルトの画像幅取得 var img_h = $(this).height(); //デフォルトの画像高取得 $(this).attr({"data-h":img_h}); //デフォルトの画像高を属性として保存 $(this).animate({opacity:0.5,"box-shadow":"0 0 2px #111",width:img_w,height:(img_h/4)},100); //画像の高さを縮小 }); } $(document).ready(function(){$(window).load(function(){ setTimeout(function(){ jumpin_set(); }, 100); });$(".jumpin").hover(function(){//マウスオーバー時の動作 var img_w = $(this).width(); var img_h = $(this).height(); var next_h = $(this).attr("data-h"); if(next_h){ $(this).animate({opacity:1,"box-shadow":"none",width:img_w,height:next_h},1000,"easeOutElastic"); $("img",this).animate({height:img_h},100).animate({height:next_h},100); $(this).removeAttr("data-h"); } }); $(".jumpin").mouseout(function(){//マウスアウト時の動作 var img_w = $(this).width(); var img_h = $(this).height(); $(this).attr({"data-h":img_h}); $(this).animate({opacity:0.5,"box-shadow":"0 0 2px #111",width:img_w,height:(img_h/4)},1000,"easeOutElastic"); }); });
サンプルスクリプト
上記でスクリプトやCSSがバッティングしていなければ動作すると思います。
続きを読む “WebサイトでjQueryを使ってTwittelatorの画像表示のようなエフェクトを追加する方法”
メンテナンス時の表示機能を追加
年賀状サイト「Nenga」に新しいデザインを追加
Nenga | 皆と違う、年賀状。
写真を使ったデザインを追加しました。
サイトテンプレートに「Aqua」を追加しました。
サイトテンプレートパッケージプラン「s1te」用のデザインテンプレート「Aqua」を公開いたしました。
スタイリッシュ、シンプルなデザインに仕上げ、ファッションブランドやコスメティクスブランド、ヘアサロンのサイトデザインとしてもオススメです。
サイトテンプレート「Aqua」を追加しました。
サイトテンプレートパッケージ「s1te」のを追加しました。
コーポレートサイトの他、さまざまなサイトに対応可能です。
cdbk.net CREATIVES s1teページ
スライドショーをページに追加できるNivo Slider
jQueryを使ってページにスライドショーを簡単に追加できるNivo Slidarをcdbk.net CREATIVESに導入してみました。
lightviewとJavaScriptの一部が競合してしまうので同じページに置くことはできませんが、複数の同じサイズの画像をひとつのコマで表示できるので便利です。
表示を切り替えする際のエフェクトもいくつか用意されているので、気になる方は配布元のデモページを見てください。
Nivo Slider
「Nivo Slider」をGoogleで調べる