tsukalogo0000


 

 

alt

ページ内でゆっくり移動する“スムーススクロール”
よく考えたらこのサイトのトップへ戻るが押しにくいというか、ユーザヴィリティに配慮してないので、 ボタンをスクロールに追随式にして、戻るときも戻った感が出る様にぬるぬる戻るスタイルにしてみた。
というか気に入ったデザインのボタンがなかったのだけど、結局一番上のボタンに揃える形に… このサイト実験的につぎはぎで作ってるから、.jsが入り乱れてて、 おのおのが影響し合って挙動がおかしくなるし、チェックが非常にめんどくさい。
だから、添え物のメインのjQueryはしっかり作るけど、添え物のスクリプトは出来るだけ短く軽いものがいいのです。
以下が使用した最も簡単なjsです。headに読み込もうとしたけ、なんだがサイトの整形がおかしくなったから、htmlに直接読み込んだ。joomla!なんだからカスタムモジュールに書き込んでいれこんでも良かったけど…。


javascriptの本体の記述です。
function backToTop() {
var x1 = x2 = x3 = 0;
var y1 = y2 = y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
x3 = window.scrollX || 0;
y3 = window.scrollY || 0;
var x = Math.max(x1, Math.max(x2, x3));
var y = Math.max(y1, Math.max(y2, y3));
window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));
if (x > 0 || y > 0) {
window.setTimeout("backToTop()", 25);<!--スピード変更数値-->
}
}
これを、読み込むリンクを直接htmlに貼付けた。 
<script type="text/javascript" src="<?php echo $path ?>/scripts/smoothScroll.js"></script>">
以下のリンクで繋がります。あとはトップページか途中のページがお好みで設置
<a href="#" onclick="backToTop(); return false">このページの先頭へ(又は画像)</a>   
こちらが、ボタン本体のCSSの記述です。一応クリックで下が見える様に半透明にしてます。
.任意の名前 {
bottom:0px;
position:fixed;<!--スクロールしても不動の絶対位置指定-->
right:50px;
}
.任意の名前 a:hover{
filter:alpha(opacity=50);<!--50%の透明度に-->
-moz-opacity: 0.5;<!--Firefox(Mozzila)向けの指定-->
opacity: 0.5;<!--SafariやOpera向けの指定-->
bottom:-2px;
position:fixed;
right:50px;
}
しかし、safariだけa:hoverが機能しない〜なぜだろう???と思っていたら、オンマウスは任意名称:hoverとaを省略すべきなんだな〜まあ、タッチパネルの時代だからこのタグも使われなくなるだろうが…。
とりあえずこのページは事例でスクリプトが< pre >で表示されているのでエディタ-No Editorで編集保存しなければ…
このバナーでも使った透過や切り抜きも多用するので、あんまりなにも考えずにpng画像を掘り込むもんで最近サイトの重さも気になってきた〜

サイトの表示に必要サイズファイルサイズのチェック

で、測ってみたらやっぱりランクはF。でもappleのサイトでもFクラスなんで、気にはならないのだけどね…
FTPでimagesファイルから吸い上げてたまにダイエットとしてやるフォトショップの>ファイル>Web用に保存で“やや高画質”を選択してやれば良い。

 

alt

トップページのjQuery
このサイトには入り口が2カ所ある。一つはドック型jQueryで装飾した画面(画像をクリック)

メニューがドックタイプの標準top画面

<script src="jquery-ui/scripts/jquery-1.3.2.min.js" type="text/javascript"><!--mce:0--></script>
<script src="jquery-ui/dock/jquery.jqDock.min.js" type="text/javascript"><!--mce:1--></script>
<script type="text/javascript"><!--mce:2--></script>
 

もうひとつはキューブ型でくるくる画面が回るロゴタイプ(画像をクリック)

ロゴがキューブするイラスト専用画面

このタイプで各々にリンクを張ろうとしたのだが、aリンクを設定すると画像がうまく表示されなくなってしまう。またこの2つを同じページに表示させようとしたのだがscriptが干渉(多分)してしまって機能しなかった。読む順番を変えたりしたのだが…簡単にはいかないので時間がある時にソースうをじっくり調べてみたい〜この辺はflashの方が有利。ちなみに両方とも30秒後に別ページに自動で飛びます。
最後はメインの画像が3Dでスクロールするタイプ(画像をクリック)

ビジュアルががスクロールするゴルフ専用画面

写真一つ一つが関連した記事にリンクしていて説明文としてはツールチップを使用。

<!-- CSS記述 -->
body {
font-family: Arial, "MS Trebuchet", sans-serif;
background-color: #fff;
}
#list {
margin:0 auto;
height:600px;
width:520px;
overflow:hidden;
position:relative;
background-color: #fff;
}
#list ul, #list li {
list-style:none;
margin:0;
padding:0;
}
#list a {
position:absolute;
text-decoration: none;
color:#666;
}
#list a:hover {
color:#ccc;
}
<!--CSS記述終了-->
 
<!--jsスクリプト記述-->
$(document).ready(function(){
 
var element = $('#list a');;
var offset = 0; 
var stepping = 0.03;
var list = $('#list');
var $list = $(list)
$list.mousemove(function(e){
var topOfList = $list.eq(0).offset().top
var listHeight = $list.height()
stepping = (e.clientY - topOfList) /  listHeight * 0.2 - 0.1;    
});
for (var i = element.length - 1; i >= 0; i--)
{
element[i].elemAngle = i * Math.PI * 2 / element.length;
}
setInterval(render, 100);<!--スピード通常160--> 
function render(){
for (var i = element.length - 1; i >= 0; i--){
var angle = element[i].elemAngle + offset;
x = 120 + Math.sin(angle) * 50;<!--円の広がり通常正方形だと30--> 
y = 35 + Math.cos(angle) * 30;<!--円の縦の広がり通常30--> 
size = Math.round(40 - Math.sin(angle) * 40);<!--透明度の階層調整--> 
var elementCenter = $(element[i]).width() / 2;<!--左右のセンター位置--> 
var leftValue = (($list.width()/2) * x / 120 - elementCenter) + "px"<!--左右の位置通常100--> 
$(element[i]).css("fontSize", size + "pt");
$(element[i]).css("opacity",size/50); <!--透明度--> 
$(element[i]).css("zIndex" ,size);
$(element[i]).css("left" ,leftValue);
$(element[i]).css("top", y + "%");
}
offset += stepping;
}
});
<!--jsスクリプト記述終了-->
 

 
alt
●jQueryアコーディオン仕様

前ページのサンプル→http://www.tsuka-time.com/golf.html



このスクリプトはページ数が増えても、コンパクトに収まる為効果バツグンです。iphoneでもサクサク動く(嬉)但しファイル数は変わらないので当たり前に容量 は食いますね。これは、自分のHPのメインカラーであるSouth-streetを使いました。
jQuery UIのテーマギャラリーのダウンロード