【Labs】いろいろ組み合わせてパララックスレイアウト - web design lab
home > labs > 【Labs】いろいろ組み合わせてパララックスレイアウト

9月更新・前月(8月)の人気記事トップ10 09/02/2024

  1. ( 01 – ) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
  2. ( 07 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
  3. ( 03 – ) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
  4. ( 10 ↑) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
  5. (圏外↑) 【Labs】CSSだけでドロップダウンメニュー
  6. ( 02 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む
  7. ( 09 ↑) 【Mac】Safariでソースコードを見る方法
  8. ( 04 ↓) 【jQuery】入門7. jQueryで新しいWindowを開く
  9. ( 06 ↓) 【2024年5月】iPad画面解像度まとめ
  10. (圏外↑) 【GIMP】レイヤーをロック
subscribe
にほんブログ村 デザインブログ Webデザインへ PVアクセスランキング にほんブログ村
【Labs】ヘッダーをトップに固定してスクロールでアニメーション 【Mac】メモリを解放する方法

【Labs】いろいろ組み合わせてパララックスレイアウト


【Labs】いろいろ組み合わせてパララックスレイアウト

こんにちは（・∀・）

今回は当サイトの他のサンプルを組み合わせてパララックスレイアウトを作ってみましたのでご紹介します。

使用するサンプルはヘッダーをトップに固定してスクロールでアニメーションとスクロールで要素の拡大縮小と移動とベースにCSSだけでパララックスレイアウトです。

サンプル
HTML

Google Hosted LibrariesからjQuery 1.x snippetを<head>内に読み込みます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


<body>
<div id="wrapper">
<header>
<section>
<h2 id="toplogo"><a href="/"><img src="logo.png" alt="Webデザインラボ"></a></h2>
</section>
</header>
<div class="sample-demo">
<div class="container">
<div class="box1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="container-outer">
<div class="container">
<div class="box2">
<h6>Lorem ipsum</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare vel risus sed imperdiet. Curabitur et euismod ipsum, ac volutpat tellus. Integer rhoncus tincidunt nisi, non luctus neque feugiat sed. Morbi efficitur non lectus in sodales.</p>
</div>
</div>
</div>
<div class="container">
<div class="box3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="container-outer">
<div class="container">
<div class="box4">
<h6>Lorem ipsum</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare vel risus sed imperdiet. Curabitur et euismod ipsum, ac volutpat tellus. Integer rhoncus tincidunt nisi, non luctus neque feugiat sed. Morbi efficitur non lectus in sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ut egestas nisi, in hendrerit dui. Curabitur vel aliquam lacus. Duis ultrices quam vel dignissim venenatis. Curabitur iaculis velit mauris. Aenean ut fringilla sem, eu cursus enim. Suspendisse eu convallis erat. Praesent dapibus ullamcorper sem. Sed quis ligula sed ex ullamcorper scelerisque a luctus ante. Duis facilisis tellus ac pretium pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam vehicula ipsum tortor, fringilla egestas dolor porttitor a. Duis ut eleifend justo. Phasellus posuere cursus nibh, in aliquet magna consectetur at. Vivamus vulputate convallis nulla, vel scelerisque urna aliquet et. Etiam elementum quam vel enim bibendum gravida. Quisque dignissim sed orci pellentesque consectetur. In luctus venenatis lectus. Pellentesque vestibulum lorem a mauris vehicula ullamcorper. Quisque dignissim nulla id ex hendrerit, et commodo eros bibendum. Suspendisse mollis nibh sed viverra sodales. Ut fermentum scelerisque faucibus. Pellentesque volutpat, leo a facilisis aliquam, sapien leo convallis diam, sed aliquet velit lacus id ligula.</p>
</div>
</div>
</div>
<!--sample-demo--></div>
<!--wrapper--></div>
</body>
CSS

header {
  position: absolute;
  background: #ccc;
  top: 0;
  width: 100%;
  height: 60px;
  border-bottom: none;
  box-shadow: 0 1px 2px #aaa;
}
    @keyframes anim1 {
          0% { height: 60px; }
      100% { height: 40px; }
    }
    @keyframes anim2 {
          0% { height: 40px; }
      100% { height: 60px; }
    }
    @keyframes anim3 {
          0% { width: 200px; height: 40px; }
      100% { width: 100px; height: 20px; }
    }
    @keyframes anim4 {
          0% { width: 100px; height: 20px; }
      100% { width: 200px; height: 40px; }
    }
.fixed {
  position: fixed;
  height: 40px;
  animation: 0.5s forwards anim1;
  text-align: center;
}
.fixed2 {
  position: fixed;
  height: 60px;
  animation: 0.2s backwards anim2;
  text-align: center;
}
.fixed section h2 img {
  width: 100px;
  height: 20px;
  animation: 0.5s forwards anim3;
}
.fixed2 section h2 img {
  width: 200px;
  height: 40px;
  animation: 0.2s backwards anim4;
}
.sample-demo {
  margin: 0;
  padding: 0;
}
h3 {
  margin-top: 60px;
  margin-bottom: 10px;
}
.container-outer {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  font-size: 28px;
  color: #fff;
  box-sizing: border-box;
}
.container {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  font-size: 28px;
  color: #fff;
  box-sizing: border-box;
}
.container .box1 {
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
  text-align: left;
  padding: 10px;
  background: url(img/bg1.jpg) no-repeat center top fixed;
}
.container .box2 {
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
  text-align: left;
  padding: 10px;
  background: #888;
}
.container .box3 {
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
  text-align: left;
  padding: 10px;
}
.container .box4 {
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
  text-align: left;
  padding: 10px;
  background: #999;
}
.container .box1,
.container .box3 {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .box3 p {
  position: relative;
}
    @keyframes anim1b {
      100% { right: 0; }
    }
    @keyframes anim2b {
          0% { right: 0; }
    }
    @keyframes anim3b {
      100% { left: 0; }
    }
    @keyframes anim4b {
          0% { left: 0; }
    }
footer {
  background: #999;
  border-top: none;
}
@media (min-width: 768px) {
/* ** */}
JavaScript

$(function() {/*ヘッダー固定*/
var obj = $('header'),
offset = obj.offset();
$(window).scroll(function () {
if($(window).scrollTop() > offset.top) {
obj.removeClass('fixed2');
obj.addClass('fixed');
} else {
obj.removeClass('fixed');
obj.addClass('fixed2');
}
});
});
$(function(){/*パララックスレイアウト*/
var ua = navigator.userAgent;
if( ua.indexOf('iPhone') > 0 || ua.indexOf('iPad') > 0 || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0)) {//モバイル
$('.container .box1').css({'background': 'url(img/bg1.jpg) no-repeat center top'});
$('.container .box3').css({'background': 'url(img/bg7.jpg) no-repeat center center'});
$('.container .box1').each(function() {
var winH = $(window).height();
var obj = $(this);
var offset = obj.offset();
$(window).scroll(function() {
scroll = $(window).scrollTop();
if (scroll > offset.top - obj.height()) {
var offsetY =  ((scroll - offset.top) / 2); 
var pos = '50%' + - offsetY + 'px';
obj.css('background-position', pos);
}
});
});
} else {//PC
$('.container .box1').css({'background': 'url(img/bg1.jpg) no-repeat center top fixed'});
$('.container .box3').css({'background': 'url(img/bg7.jpg) no-repeat center top fixed'});
$('.container .box1,.container .box3').each(function() {
var winH = $(window).height();
var obj = $(this);
var offset = obj.offset();
$(window).scroll(function() {
scroll = $(window).scrollTop();
if (scroll > offset.top - obj.height()) {
var offsetY =  ((scroll - offset.top) / 2); 
var pos = '50%' + - offsetY + 'px';
obj.css('background-position', pos);
}
});
});
}
});
$(function() {/*スライドイン*/
$('.container .box2').css({'right': '-100px','display': 'none'});
$('.container .box3 p').css({'right': '-100px'});
$('.container .box4').css({'left':'-100px'});
$(window).scroll(function () {
$('.container').each(function(){
var obj = $(this).offset().top;    
var scroll = $(window).scrollTop();
var winH = $(window).height();
if (scroll > obj - winH / 2) {
$('.box2,.box3 p,.box4',this).fadeIn();
$('.box2',this).css({'animation': '0.8s forwards anim1b'});
$('.box3 p',this).css({'animation': '0.8s forwards anim1b'});
$('.box4',this).css({'animation': '0.8s forwards anim3b'});
} else {
$('.box2,.box3 p,.box4',this).fadeOut();
$('.box2',this).css({'animation': '0.8s backwards anim2b'});
$('.box3 p',this).css({'animation': '0.8s backwards anim2b'});
$('.box4',this).css({'animation': '0.8s backwards anim4b'});
}
});
});
});
Result

サンプルデモはこちら
スマホでのご確認はこちらをどうぞ
QRコード

使用している背景画像のサイズは1600x1064pxです。

いかがでしたでしょうか、カスタマイズしやすいようにjQueryはサンプルごとに分けて書いてあります。必要に応じて変更してください。

関連リンク

ヘッダーをトップに固定してスクロールでアニメーション
スクロールで要素の拡大縮小と移動
CSSだけでパララックスレイアウト

【Labs】ヘッダーをトップに固定してスクロールでアニメーション 【Mac】メモリを解放する方法
subscribe
にほんブログ村 デザインブログ Webデザインへ PVアクセスランキング にほんブログ村