menu
menu

キーワード検索

 

前月(10月)の人気記事トップ10

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5】スマホサイトの作成・基本編
  4. ( 7↑) 【HTML5】HTML5・ページ作成の基本
  5. ( 6↑)【jQuery入門】jQueryで日時を表示
  6. ( 5↓) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  7. ( 4↓) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  8. ( 8-) 【Mac Tips】MacにInkscapeをインストール
  9. ( 9-) 【MySQL】Windows 10にMySQLをインストール
  10. (10-) 【CSS Tips】スマホサイト向け横にスクロールするナビゲーション

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

  • Labs

jQuery

こんにちは(・∀・)

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

使用するサンプルはヘッダーをトップに固定してスクロールでアニメーションスクロールで要素の拡大縮小と移動とベースに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