UNIRRY

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

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

fixedposition2

中央固定配置のままコンテンツの中身だけを上下に移動させる仕組みに、移動用リンクアイコンと疑似パララックス背景を追加したのでそのまとめです。

この前のはこちら
ブラウザをリサイズしても中央固定配置のまま、コンテンツの中身だけ移動させる

追加したのは、①矢印アイコンで、次のコンテンツに移動 ②一番下までいったら、最初のコンテンツまでもどる ③ついでに背景を疑似パララックスさせる です。

移動用リンクアイコンでもコンテンツの中身が移動するようにする

html

コメントで記載している箇所に、疑似パララックス用背景と、移動用リンク画像を追加しています。

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

<!-- ↓疑似パララックス用背景 -->
<div id="cntbg1"></div>

<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>
<!-- ↓移動用リンク画像 -->
<img class="under" src="ico.png">
</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">
<!-- ↓移動用リンク画像 -->
<img class="under" src="ico.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">
<!-- ↓移動用リンク画像 -->
<img class="top" src="top.png">
</div>
</div></div>

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

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

css

前回からほとんど変わらず、追加したのは最後の「.under」部分だけです。

/* ナビゲーション */
#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%;
}
#cntbg1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3000px;
background: url(bg1.png) top left;
opacity: 0.4;
filter: alpha(opacity=40);
-ms-filter: "alpha(opacity=40)";
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
}
.cnt {
width: 750px;
height: 500px;
margin: 0 auto;
}
.cnt h1 {
color: #009fbf;
text-align: center;
margin: 0 auto 20px auto;
}
.inner {
height: 500px;
/*background: url(bgline.png) no-repeat left top;*/
}

/* コンテンツ中身 */
.area1,
.area2,
.area3 {
position: relative;
}
.area1 ul li {
width: 185px;
height: 30px;
margin: 30px 51px 0 0;
padding: 155px 0 0 0;
text-align: center;
float: left;
background: #005293;
border-radius: 90px;
-webkit-border-radius: 90px;
-moz-border-radius: 90px;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "alpha(opacity=0)";
-moz-opacity: 0;
-khtml-opacity: 0;
list-style: none;
}
.area2 p,
.area3 p {
text-align: center;
color: #7a5b28;
font-size: 130%;
}
.area2 #img1 {
position: absolute;
top: 500px;
right: -500px;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "alpha(opacity=0)";
-moz-opacity: 0;
-khtml-opacity: 0;
}
.area3 #img2 {
position: absolute;
top: 500px;
left: -500px;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "alpha(opacity=0)";
-moz-opacity: 0;
-khtml-opacity: 0;
}

/* ここから移動用リンク画像スタイルを追加 */
.under,
.top {
position: absolute;
top: 375px;
left: 325px;
cursor: pointer;
}
.under:hover,
.top:hover {
opacity: 0.6;
filter: alpha(opacity=60);
-ms-filter: "alpha(opacity=60)";
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
}

js

下矢印と上矢印クリック時の挙動を追加しています。あとは疑似パララックス用に、エリアの移動関数に処理を追加しています。

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

// ページリロード時とリサイズ時にスタイル設定とエリアの移動を実行
areaSet();
setTimeout( function(){
  $(".area1 ul li").each(function(i){
    $(this).delay(100 * i).animate({"opacity":"1"}, 1000, "easeOutExpo");
  });
}, 600);
$(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();
    var numb = nav.children("li").index(nav.children("li.selected"));
    motionArea(numb);
});

// 下矢印と上矢印クリック時、ナビのselected操作とエリア移動(ここを追加)
$(".under").click(function(){
    var navslect = nav.children("li").index(nav.children("li.selected")) + 1;
    nav.children("li").removeClass("selected");
    nav.children("li").eq(navslect).addClass("selected");
    moveArea();
    var numb = nav.children("li").index(nav.children("li.selected"));
    motionArea(numb);
});
$(".top").click(function(){
    nav.children("li").removeClass("selected");
    nav.children("li").eq(0).addClass("selected");
    moveArea();
    var numb = nav.children("li").index(nav.children("li.selected"));
    motionArea(numb);
});

// エリアの移動関数
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");
    /* 疑似パララックスの移動を指定 */
    $("#cntbg1").animate({"top": cntmgn/2}, 1300, "easeInOutSine");
}

// エリア別動き
function motionArea(numb) {
  if ( numb == 0 ) {
    setTimeout( function(){
        $(".area1 ul li").each(function(i){
	    $(this).delay(100 * i).animate({"opacity":"1"}, 1000, "easeOutExpo");
	});
    }, 1300);
    $(".area2 #img1").animate({"top":"500px","right":"-500px","opacity":"0"}, 800, "easeOutExpo");
    $(".area3 #img2").animate({"top":"500px","left":"-500px","opacity":"0"}, 800, "easeOutExpo");
  } else if ( numb == 1 ){
    setTimeout( function(){
        $(".area2 #img1").animate({"top":"70px","right":"-150px","opacity":"1"}, 1000, "easeOutExpo");
    }, 1000);
    $(".area1 ul li").each(function(i){$(this).delay(100 * i).animate({"opacity":"0"}, 800, "easeOutExpo");});
    $(".area3 #img2").animate({"top":"500px","left":"-500px","opacity":"0"}, 800, "easeOutExpo");
  } else if ( numb == 2 ){
    setTimeout( function(){
        $(".area3 #img2").animate({"top":"10px","left":"-150px","opacity":"1"}, 1000, "easeOutExpo");
    }, 1000);
    $(".area1 ul li").each(function(i){$(this).delay(100 * i).animate({"opacity":"0"}, 800, "easeOutExpo");});
    $(".area2 #img1").animate({"top":"500px","right":"-500px","opacity":"0"}, 800, "easeOutExpo");	  
  }
}

移動用リンクアイコンと疑似パララックス背景を追加したサンプル

サンプル

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

これに追加してマウスホイール対応したのがこちら

マウスホイールに対応 固定エリアでコンテンツだけ縦移動させる


horoscope

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