UNIRRY

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

リサイズしても中央配置のままコンテンツの中身だけ移動させる

fixedposition1

固定位置でコンテンツがきりかわる枠組みをやってみたので記載します。

あと、そういえば今まで、jQueryの本体とプラグインのeasingをヘッダーで読み込んでください、というのをずっと書き忘れていました。

ブラウザをリサイズしても固定位置でコンテンツが中央にくるよう設定する

つくるのは、①コンテンツを縦横中央に位置するように設定する ②左に固定ナビゲーションをつける ③ナビゲーション操作で固定位置内のコンテンツだけが移動して中央表示のまま切り替わるようにする です。

まずはhtml

cntarea内のcntinnerを上下に移動させることで、固定位置内のコンテンツだけが移動しているような見かけにします。なのでcntinnerの中には、3つのコンテンツが入っています。

<!-- ここからコンテンツアリア -->
<div id="cntarea">
<div id="cntinner">

<div class="cnt"><div class="inner">
<h1>It always seems impossible until it’s done.</h1>
<div class="area1">
<ul>
<li><img src="halo1.png"></li>
<li><img src="halo2.png"></li>
<li><img src="halo3.png"></li>
</ul>
</div>
</div></div>

<div class="cnt"><div class="inner">
<h1>Peace begins with a smile.</h1>
<div class="area2">
<p>Because it is Halloween,<br>
where they visited the house of grandpa next door,<br>
Grandpa was dead. Wow!</p>
<img id="img1" src="obake.png">
</div>
</div></div>

<div class="cnt"><div class="inner">
<h1>There is more to life than increasing its speed.</h1>
<div class="area3">
<p>I ate delicious cookies I got at Halloween.<br>
Give me candy because I want to eat more!</p>
<img id="img2" src="coki.png">
</div>
</div></div>

</div>
</div>
<!-- ここまでコンテンツアリア -->

<div id="nav">
<ul>
<li class="selected"></li>
<li></li>
<li></li>
</ul>
</div>

次にcss

cntinnerを移動させるので、positionで、cntareaにrelativeを、cntinnerにabsoluteを設定します。topの値はjsで指定するのでCSSでは指定しません。また、スクロールバーをだしたくないので、cntareaはブラウザの横幅いっぱい、縦幅いっぱいでoverflow:hiddenを設定します。縦幅のほうはjsで指定します。横幅はwidthを100%で指定しておきます。

/* ナビゲーション */
#nav {
position: fixed;
right: 40px;
}
#nav li {
width: 12px;
height: 12px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
background: #f79323;
cursor: pointer;
list-style: none;
margin-bottom: 10px;
}
#nav li.selected {
background: #009fbf;
}
/* コンテンツ配置 */
#cntarea {
position: relative;
width: 100%;
overflow: hidden;
}
#cntinner {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.cnt {
width: 750px;
height: 550px;
margin: 0 auto;
}

ブラウザをリサイズしても固定位置でコンテンツが中央にくるようにするjs

ページリロード時とウィンドウのリサイズ時に、CSSを指定します。クラスcntにpaddingで、ブラウザの縦幅から自分自身の縦幅をひいて2で割った数を設定、ナビゲーションも同じように設定して、常に真ん中にくるようにします。
cntarea自体の縦幅もウィンドウの縦幅を指定することで、スクロールがでないようにぴったりの高さで設定します。

ナビをクリックしたときは、コンテンツの移動関数をよびだして、コンテンツの縦幅+padding分をアニメーションさせます。

※ヘッダーで、jQueryの本体とプラグインのjQuery.easingを.jsをヘッダーで読み込んでください。

// 変数定義
var cntarea  = $("#cntarea"),
    cntinner = $("#cntinner"),
    cnt      = $(".cnt"),
    nav      = $("#nav ul"),
    winht,
    padht,
    cntmgn;

// ページリロード時とリサイズ時にスタイル設定とエリアの移動を実行
areaSet();
$(window).resize(function(){
    areaSet();
    moveArea();
});

// スタイル設定する関数
function areaSet() {
    winht = $(window).height();
    padht = ( winht - ($(".cnt").height()) - ($("#ftbox").height() * 2) ) / 2;
    navht = ( winht - ($("#nav ul").height()) - ($("#ftbox").height() * 2) ) / 2;
    cnt.css({"padding-top":padht,"padding-bottom":padht});
    $("#nav").css("top", navht);
    cntarea.css("height", winht);
}

// ナビクリック時、selecetdの操作とエリアを移動
nav.children("li").click(function(){
    nav.children("li").removeClass("selected");
    $(this).addClass("selected");
    moveArea();
});

// エリアの移動関数
function moveArea() {
    var numb = nav.children("li").index(nav.children("li.selected"));
    padht  = ( winht - ($(".cnt").height()) - ($("#ftbox").height() * 2) ) / 2;
    cntmgn = $(".cnt").height() + (padht * 2);
    cntmgn = -( numb * cntmgn );
    cntinner.animate({"top": cntmgn}, 1300, "easeInOutBack");
}

固定位置でコンテンツが中央に移動するサンプル

サンプルでは、各エリア別にif文でモーションを追加しています。

サンプル

css3を使っているとこだけ四角くIEで見た目なっちゃってますが、js自体は問題なく動きます。

追加分のcss

クラスarea1、2、3で中身を指定しているので、好きにcssを追加しています。

/* コンテンツ中身 */
.area1,
.area2,
.area3 {
position: relative;
}
.area1 ul li {
width: 185px;
height: 30px;
text-align: center;
float: left;
opacity: 0;
list-style: none;
}
.area2 #img1 {
position: absolute;
top: 500px;
right: -300px;
opacity: 0;
}
.area3 #img2 {
position: absolute;
top: 500px;
left: -300px;
opacity: 0;
}

追加したjs処理

// ナビクリック時、selecetdの操作とエリアを移動
nav.children("li").click(function(){
   nav.children("li").removeClass("selected");
   $(this).addClass("selected");
   moveArea();
   /* ここから追加 selectedのついているナビゲーションが何番目かによってエリア別のモーション関数を実行する */
   var numb = nav.children("li").index(nav.children("li.selected"));
   motionArea(numb);
});

// エリア別のモーション
function motionArea(numb) {
  if ( numb == 0 ) {
    // area1のモーション指定
    // ulのlistを順番に表示
    setTimeout( function(){
        $(".area1 ul li").each(function(i){
	    $(this).delay(100 * i).animate({"opacity":"1"}, 1000, "easeOutExpo");
	});
    }, 1300);
    // area2とarea3のモーションを元にもどす
    $(".area2 #img1").animate({"top":"500px","right":"-300px","opacity":"0"}, 1000, "easeOutExpo");
    $(".area3 #img2").animate({"top":"500px","left":"-300px","opacity":"0"}, 1000, "easeOutExpo");
  } else if ( numb == 1 ){

    // area2のモーション指定を同じく指定
	  
  } else if ( numb == 2 ){

    // area3のモーション指定を同じく指定

  }
}

これに移動リンクと背景の疑似パララックスを追加したのはこちら

移動リンク&背景疑似パララックスつき中央配置コンテンツ

これにマウスホイールと移動リンク&背景パララックスを追加したのはこちら

マウスホイールに対応した中央配置のままコンテンツが上下移動する


horoscope

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