webdesignkeys

CSSやjavascriptなどを利用した動的なサイト作りやwebデザインに関するネタを紹介!

Subscribe by RSS RSS Icon
Follow me Twitter Twitter Icon
 
 

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comment

コメントの投稿













管理者にだけ表示を許可する
 

スタイリッシュなjQuery plugin 「Flip-box」

jq-entry01.jpg
jqueryを用いたプラグインです。

ボタンを押すことで動作させることができます

海外サイトなので解説が英語なのですが、エフェクトが大きく

かなり面白い動作をするので閲覧者に強い印象を与えることができそうです。

参考サイト>>http://lab.smashup.it/flip/

以下は必要な部分を抜粋して配色や画像を差し替えたオリジナルです

Flip-box デモバージョン

HTML部分

タグ内に用意するスクリプトです。
こちらのサイトでjqueryのスクリプトをダウンロードできるので置き換えたい方はどうぞ

>>http://lab.smashup.it/flip/Dounload Now !! より入手可能


以下からコピー↓↓

<link rel="stylesheet" type="text/css" href="http://blog-imgs-29.fc2.com/w/e/b/webdesignkeys/flipboxmain.css"/>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load jQuery
google.load("jquery", "1");
</script>
<script type="text/javascript" src="http://lab.smashup.it/flip/js/jquery-ui-personalized-1.6rc6.min.js"></script>
<script type="text/javascript" src="http://lab.smashup.it/flip/js/jquery.flip-compressed.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("a#mail").attr("href","mailto"+":"+"luca"+"@smas"+"hup.it");

$("#flipBT").click(function(){
$("#flipBox").flip({
direction: 'bt',
color: '#ada250',
speed: 400,
content: "<div class='demo_one'></div>"
});
});
$("#flipTB").click(function(){
$("#flipBox").flip({
direction: 'tb',
color: '#0095d9',
speed: 600,
content: "<div class='demo_two'></div>"
});
});
$("#flipLR").click(function(){
$("#flipBox").flip({
direction: 'lr',
color: '#eb6ea5',
content: "<div class='demo_three'></div>"
});
});
$("#flipRL").click(function(){
$("#flipBox").flip({
direction: 'rl',
color: '#00552e',
speed: 550,
content: "<div class='demo_four'></div>"
});
});

$("#downloadLink").click(function(){
pageTracker._trackPageview('download_flip');
});
});
</script>



各スライドの色はcolor:の部分で変えることができます。
またスピードも変えることが可能です。
動作を変化させる場合はdirectionの部分の 
tb(top-bottom) 
bt(bottom-top)  
lr(left-right)  
rl(right-left)

で変化させることができます。

次に内の該当要素です。

<div id="demo">
<div id="flipBox">
<div class="demo_one"></div>
</div>
<div id="buttons">
<a id="flipBT" title="Flip the flipbox from bottom to top" href="#">bottom > top</a>
<a id="flipTB" title="Flip the flipbox from top to bottom" href="#">top > bottom</a>
<a id="flipLR" title="Flip the flipbox from left to right" href="#">left > right</a>
<a id="flipRL" title="Flip the flipbox from right to left" href="#">right > left</a>
</div>
</div>



CSSでdemo_oneやtwoのところで透過画像を使用しています。

デモではwelcome our site !と書かれた部分に該当します。

これは自由に画像を差し替えてください。

以下はCSSファイルです。 

>>http://blog-imgs-29.fc2.com/w/e/b/webdesignkeys/flipboxmain.css


使用しているjqueryで誤動作が起きIEでバグが生じることがあります。

他のブラウザでは正常だったのですがww

紹介した最低限のスクリプトなのでレイアウトは行っていません

いろいろ改善の余地はありそうなので試してみてください^^

Comment

コメントの投稿













管理者にだけ表示を許可する
 
<< PREV | HOME | NEXT >>

FC2 template
fc2_template_question.jpg

Category

NEWS
 

Comment

Archives

Favorite
125x125 banner 1
125x125 banner 2
125x125 banner 3
125x125 banner 4

Object
CoRich word of mouth information
Web service is developed through word of mouth information. ⇒CoRich
web design keys fc2 blog ranking!!
It challenges the ranking on my site. Please click this links. ⇒FC2 Blog Ranking
Proin magna amet fermentum dignissim
Nulla gravida, lacus molestie convallis dolor sem suscipit nisl, ut pharetra erat leo in elit.
Fusce pulvinar euismod urna vel viverra
Quisque malesuada laoreet tellus vel iaculis. Morbi nulla leo euismod pulvinar erat.
Class aptent taciti sociosqu ad litora
Curabitur vestibulum est eu purus bibendum eu eleifend diam tempor. Fusce metus eros, faucibus ut hendrerit ac.

Links

 
 
 
 
 
 
Copyright Info.

Nulla enim nibh, conse ctetuer sed, vesti bulum eleme ntum, sagittis nec, diam. Mauris blan dit vehi cula neque. Read More

 
Other Links
 
 
 
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。