cssやjsで背景を切り替える
HTML
<section id="sec-02"></section>
css
#sec-02 {
width: 100%;
height: 80vh;
background-color: #fff;
background-image:
repeating-linear-gradient(to bottom,
rgba( 0, 0, 0, 0.5),
rgba( 0, 0, 0, 0.5) 50px,
rgba( 0, 0, 0, 0) 0,
rgba( 0, 0, 0, 0) 100px),
repeating-linear-gradient(to right,
rgba( 0, 0, 0, 0.5),
rgba( 0, 0, 0, 0.5) 50px,
rgba( 0, 0, 0, 0) 0,
rgba( 0, 0, 0, 0) 100px);
}
jsなし
ドット柄背景
HTML
<section id="sec-03"></section>
css
#sec-03 {
width: 100%;
height: 80vh;
background: url(img/back.png);
background-repeat: repeat;
}
jsなし
動くドット柄背景
HTML
<section id="sec-04"></section>
css
#sec-04 {
width: 100%;
height: 80vh;
background: url(img/back02.png);
background-repeat: repeat;
animation: fall 20s infinite linear;
@keyframes fall {
0% {
background-position: 0 0;
}
100% {
background-position: -300px 300px;
}
}
}
jsなし
右からスライドしてくる背景
HTML
<section id="sec-05"></section>
css
#sec-05 {
width: 100%;
height: 80vh;
position: relative;
padding-bottom: 100px;
}
#sec-05::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #333;
transition: 1s .4s;
transform: skewY(-5deg) translateX(-100%);
z-index: -1;
}
#sec-05.appear::after {
transform: skewY(-5deg) translateX(0);
}
js
$('#sec-05').on('inview', function(){
$(this).addClass('appear');
});
ある地点でフェイドインしある地点でフェイドアウトする背景
HTML
<section id="sec-06">
<div class="page-01-wrap">
</div> <!-- page-01-wrap -->
</section><!-- sec-06 -->
<div class="bg"></div>
css
#sec-06 {
z-index: 20;
margin-bottom: 480px;
}
.bg {
background: url(img/bg.jpg) center center repeat !important;
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
display: none;
z-index: 10;
}
js
$(window).scroll(function() {
// スクロール位置を取得
let scroll = $(window).scrollTop();
// 画面下から#sec-06-afterまでの距離を取得
let after_position = $('#sec-06-after').offset().top - $(window).height();
// 画面下から#sec-06までの距離を取得
let sec_06_position = $('#sec-06').offset().top - $(window).height();
// #sec-06が表示された場合
if(scroll > sec_06_position){
// #sec-06-afterが表示されるまでの間は、背景画像をfadeInで表示する
if(scroll < after_position){
$('.bg').fadeIn(500);
} else {
$('.bg').fadeOut(500);
}
// #sec-06が表示される前の場合
} else {
// 背景画像を表示しない
$('.bg').fadeOut(500);
}
});
パララックス
HTML
<div class="img">
<img src="img/bg02.jpg" alt="" class="js-target-parallax">
</div>
css
.img {
width: 100%;
height: 80vw;
overflow: hidden;
}
.img img {
width: 100%;
}
js
document.addEventListener("DOMContentLoaded", function () {
const elem = document.querySelector(".js-target-parallax");
if (elem !== null) {
let target = document.getElementsByClassName("js-target-parallax");
let parallaxConfig = {
delay: 0,
orientation: "down",
//overflow: true,
scale: 2
};
const parallax_instance = new simpleParallax(target, parallaxConfig);
}
});
上下にコンテンツと同色の画像を配置した背景
HTML
<div class="wrap">
<div class="top-bg">
<img src="img/bg03.png" alt="">
</div>
<div class="bg-bm">
<img src="img/bg03-bm.png" alt="">
</div>
</div>
css
.wrap {
position: relative;
background-color: #88b81a;
}
.top-bg {
position: absolute;
top: -170px;
left: 0;
width: 100%;
}
.top-bg img {
width: 100%;
}
.bg-bm {
position: absolute;
bottom: -105px;
left: 0;
width: 100%;
}
.bg-bm img {
width: 100%;
}
jsなし
画像の上にグラデーションを配置。下に行くと濃くなる。
HTML
<section id="sec-09"></section>
css
#sec-09 {
position: relative;
width: 100%;
height: 160vh;
background: url(img/bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#sec-09::after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: "";
background: linear-gradient(transparent, black);
}
jsなし
チェック柄背景