webサイト制作の勉強|2018月2月クラスブログ

webサイト制作の勉強に関する解説ブログです。

jqueryでのパララックス

パララックスとは、視差効果のことです。
Webデザインにおけるパララックスはスクロールなどの動作に応じて、複数のレイヤー(層)にある要素を異なるスピードで動かすことで、「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェクト」を演出する手法を指します。




最近は一時期よりは減りましたが、シングルページの縦長ページではまだまだ見かけるデザインです。
シングルページはページデザインが単調になりがちなので、パララックスやスクロールアニメーションを使って、アイキャッチを作りましょう。


pogg-sweetpotatopie.com




on-ze.com


<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>動画を背景に使ったサイト</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script>
 $(function(){
 if($.cookie("access")){
    $('#loader-bg').css({display:'none'});//既に訪問した人
    } else {
     $('#loader-bg').delay(3000).fadeOut(700);//初訪問の人
    };
$(window).on('load',function(){
  $.cookie("access",$('body').addClass('access'));
});
});
</script>
</head>

<body>
<header>
<div class="header_inner">
<div class="box19">
<h1>タイトル</h1>
<p>サイトの説明文</p>
</div>
</div>

<div class="video_wrapper">
<video id="main_video" autoplay loop muted><!--autoplayはmutedが必須-->
<source src="img/main.mp4" type="video/mp4">
</video>
</div>
</header>
<nav>
<ul>
<li class="box17"><a href="index2.html">2ページ目へ</a></li>
<li class="box17"><a href="#">コンテンツ2</a></li>
<li class="box17"><a href="#">コンテンツ3</a></li>
</ul>
</nav>
<div class="parallax" data-speed="1" data-height="80vh" data-mobile="false">
<div class="box background" id="box1"><h2>コンテンツ1</h2>
<p>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。(青空文庫より)</p>
</div>
</div>

<div class="parallax">
<div class="box bg_img background"  id="box2"></div>
</div>

<div class="parallax">
<div class="box background"  id="box3"><h2>コンテンツ2</h2>
<p>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。(青空文庫より)</p>
</div>
</div>

<div class="parallax" data-speed="1">
<div class="box bg_img background"  id="box4"></div>
</div>

<div class="parallax" data-speed="1">
<div class="box background"  id="box5"><h2>コンテンツ3</h2>
<p>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。(青空文庫より)</p>
</div>
</div>
<!--<div id="loader-bg">
<div id="loader">
<img src="img/logo.svg" alt="">
</div>
</div>-->


<script src="js/parlx.js"></script>
<script>

$('.parallax').Parlx({
	 item: '.background'
});

</script>
</body>
</html>
@charset "utf-8";
/* CSS Document */

html,body,h1,h2,p,ul,li {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
}


header {
  width:100%;
  height:80vh;
}
.header_inner {
  width:440px;
  height:220px;
  box-sizing: border-box;
  padding:20px;
  background:rgba(255,255,255,0.8);
  position: absolute;
  top:50px;
  left:50px;
  margin:auto;
  text-align:center;
}
h1 {
  margin:40px 0 20px;
}
.video_wrapper {
  width:100%;
  height:80vh;
  overflow:hidden;
  position:absolute;
  top:0;
  left:0;
  z-index:-100;
}
#main_video {
  width:100%;
  margin-top:-100px;
}
nav {
  width:100%;
  height:14vh;
  position:relative;
  z-index:10;
}
nav ul {
  width:100%;
  height:14vh;
  display:flex;
  justify-content:center;/*水平方向に真ん中*/
  align-items: center;/*垂直方向に真ん中*/
}
nav li {
  width:200px;
  height:50px;
  margin:0 10px;
}
nav li a {
  display:block;
  width:100%;
  line-height:50px;
  color:#222;
  text-align:center;
}
nav:after {
  display:block;
  content:"";
  width:0;
  height:0;
  border:100px solid transparent;
  border-top:50px solid #FFF;
  position: absolute;
  top:200%;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  z-index:-1;
}
.box17{
    position: relative;
    border-top: solid 1px black;
    border-bottom: solid 1px black;
}
.box17:before, .box17:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 1px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: black;
}
.box17:before {left: 10px;}
.box17:after {right: 10px;}
.box17 p {
    margin: 0; 
    padding: 0;
}

.box19 {
  width:360px;
  height:160px;
    position: relative;
    padding:0.25em 1em;

}
.box19:before,.box19:after{ 
    content:'';
    width: 20px;
    height: 30px;
    position: absolute;
    display: inline-block;
}
.box19:before{
    border-left: solid 2px #333;
    border-top: solid 2px #333;
    top:0;
    left: 0;
}
.box19:after{
    border-right: solid 2px #333;
    border-bottom: solid 2px #333;
    bottom:0;
    right: 0;
}




.box {
  width:100%;
  height:80vh;
  background:#CCC;
}
.box:nth-of-type(2){
  background:#FFFFFF;
}

/*コンテンツ部分*/
h2 {
  text-align: center;
  padding:100px 0 40px;
  font-size:36px;
}
.box p {
  width:60%;
  margin: 0 auto 50px;
  line-height:2;
}

#box2 {
  background:#f00 url(../img/bg_01.jpg) no-repeat center center/cover;
}
#box4 {
  background:url(../img/bg_02.jpg) no-repeat center center/cover;
}


/*パララックス用*/
.parallax {
	position:relative;
	height:400px;
	overflow:hidden;
}
.background {
	position:absolute;
	background-repeat:no-repeat;
	background-size:cover;
}

/*ローディングアニメ*/
#loader-bg {
  width:100%;
  height:100vh;
  background:#FFF;
  position:fixed;
  top:0;
  left:0;
  z-index:1000;
}
#loader {
  width:56px;
  height:168px;
  position: absolute;
  top:-80px;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  animation:svg_anime 1.5s 0.3s ease-in forwards;
  opacity:0;
}
@keyframes svg_anime {
  0%{opacity:0;}
  100%{opacity:1;}
}