UNIRRY

WEBデザインとホロスコープと宇宙のブログ

中央固定配置で上下移動するコンテンツの横移動バージョンをつくった

fixedposition4

この前やった固定位置での上下移動コンテンツの横移動バージョンをやったので追加で記事にします。

このまえのやつ
マウスホイールに対応した固定位置上下移動コンテンツ

横バージョンにもろもろ調整したところ

ナビゲーションのcssをpositionでbottom配置に変更、listも横並びに変更します。

#nav {
position: fixed;
bottom: 120px;
}
#nav li {
float: left;
width: 12px;
height: 12px;
margin-right: 15px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
background: #ffb400;
cursor: pointer;
list-style: none;
margin-bottom: 10px;
}

コンテンツの一番外側の大枠のcssはそのままですが、中身の横幅は、各コンテンツ横並びになるので最大値で適当に9999pxとかにしておきます。中身の各コンテンツはfloatを指定して、marginは解除します。

#cntinner {
position: absolute;
top: 0;
left: 0;
width: 9999px;
}
.cnt {
float: left;
width: 750px;
height: 500px;
}

jsではウィンドウの横幅も取得するようにして、左右のpadding分を計算して指定し、中央表示にします。

// 変数定義
var cnt = $(".cnt"),
    winwt,padwt;
// ウィンドウの横幅取得
winwt = $(window).width();
// コンテンツの横padding計算
padwt = ( winwt - ($(".cnt").width()) ) / 2;
// コンテンツの横padding指定
var paddi = padht + "px " + padwt + "px";
cnt.css({"padding":paddi});

エリアを移動させる関数の上下移動を横移動に変更します。

// エリアの移動関数
function moveArea() {
    // selectedがついているlistの番目を取得
    var numb = nav.children("li").index(nav.children("li.selected"));
    // ウィンドウの横幅取得
    cntmgn = $(window).width();
    // 移動分をselectedの番目×ウィンドウの横幅で設定
    cntmgn = -( numb * cntmgn );
    // 各コンテンツを内包してるdivをleftに移動
    cntinner.animate({"left": cntmgn}, 1300, "easeInOutBack");
}

マウスホイールで横移動する中央固定配置コンテンツのサンプル

サンプル

※IE系で画像をつくるのがめんどくてcss3を使っているところだけ角丸などが対応していません。ただし動きに差はありません。


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3