수업내용
[HTML, CSS] movie 01 & fullpage 01
쿨키드
2022. 7. 31. 12:43
21st
movie 01 & fullpage 01
1. 동영상을 저장해서 사용하는 방법
2. 유튜브플레이어 플러그인을 사용하는 방법
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2022.06.16. movie01//동영상 넣기</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/jquery.mb.YTPlayer.min.css">
<style>
body {
height: 200vh;
}
.fixed_bg {
background: url(../img/mainvisual01.jpg) no-repeat fixed center center/cover;
padding: 200px 0;
text-align: center;
color: #fff;
}
.movie01 {
padding: 100px 0;
}
.movie01 .container {
display: flex;
gap: 30px;
width: 1200px;
margin: 0 auto;
}
.movie01 .container>div {
flex: 1;
}
.movie01 video {
max-width: 100%;
}
section h2 {
font-size: 30px;
font-weight: 700;
margin: 0 0 10px 0;
}
section p {
font-size: 15px;
font-weight: 300;
margin: 0 0 20px 0;
}
.movie01 .right {
display: flex;
align-items: center;
}
.movie01 .right i {
padding: 10px;
font-size: 30px;
background: #f7f7f7;
border-radius: 3px;
margin: 0 10px 0 0;
}
.movie02 {
padding: 200px 0;
text-align: center;
color: #fff;
}
.movie02 i {
font-size: 30px;
}
</style>
</head>
<body>
<section class="fixed_bg">
<h2>배경고정하기 : parallax</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, corrupti.
</p>
</section>
<section class="movie01">
<div class="container">
<div class="left">
<video src="../img/cc.mp4" autoplay muted playsinline class="vd01"></video>
</div>
<div class="right">
<div class="inner">
<h2>치타</h2>
<p>(งᐖ)ว쏘큐트(งᐖ)ว</p>
<div class="control">
<i class="xi-pause"></i>
<i class="xi-play"></i>
</div>
</div>
</div>
</div>
</section>
<section class="movie02">
<h2>배경고정하기 : parallax</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, corrupti.
</p>
<div class="controls">
<i class="xi-pause"></i>
<i class="xi-play"></i>
<i class="xi-volume-up"></i>
</div>
<div id="bgndVideo" class="player" data-property=""></div>
</section>
<script src="../js/jquery-1.12.4.min.js"></script>
<script src="../js/jquery.mb.YTPlayer.min.js"></script>
<!-- 유튜브플레이어 -->
<script>
$(function () {
$('.movie01 .right i:nth-child(1)').on('click', function () {
$('.vd01').trigger('pause')
});
$('.movie01 .right i:nth-child(2)').on('click', function () {
$('.vd01').trigger('play')
});
$('#bgndVideo').YTPlayer({
videoURL: 'https://youtu.be/dL82kbg2pbo',
containment: '.movie02',
autoPlay: true,
showControls: false,
mute: true,
playOnlyIfVisible: true,
startAt: 20,
});
$('.movie02 .controls i:nth-child(1)').on('click', function () {
$('#bgndVideo').YTPPause();
});
$('.movie02 .controls i:nth-child(2)').on('click', function () {
$('#bgndVideo').YTPPlay();
});
$('.movie02 .controls i:nth-child(3)').on('click', function () {
$('#bgndVideo').YTPUnmute();
});
}); //the end
</script>
</body>
</html>
<!--playsinline 동영상이 아이폰에서 전체화면 전환 없이 바로 재생
**반응형에서 필수** -->
<!-- .trigger 동영상 재생할 때만 사용 -->
<!-- containment 재생하는 곳이 어디냐 -->
<!-- playOnlyIfVisibl 동영상이 보일 때만 재생해라 -->
👇 fullpage 플러그인 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2022.06.16. fullpage01_포폴할때사용</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/fullpage.min.css">
<style>
.section {
text-align: center;
}
.section h2 {
font-size: 27px;
font-weight: 700;
margin: 0 0 10px 0;
}
.section.on h2 {
font-size: 60px;
font-weight: 700;
margin: 0 0 10px 0;
transition: 2s;
}
.section p {
font-size: 15px;
font-weight: 300;
}
.fp-watermark {
display: none;
}
/* .section:nth-child(2n-1) {
background: #f7f7f7;
2n-1 = odd
} */
h1 {
position: fixed;
inset: 50px auto auto 50px;
z-index: 999;
}
.cover_toggle {
position: fixed;
inset: 50px 50px auto auto;
z-index: 1001;
padding: 5px;
background: #f7f7f7;
border-radius: 2px;
font-size: 16px;
}
/* .cover_toggle::after {
content: "\e91c";
font-family: 'xeicon';
} */
/*
.cover_toggle.on::after {
content: "\e91b";
font-family: 'xeicon';
} */
.toTop {
position: fixed;
inset: auto 50px 50px auto;
z-index: 999;
padding: 5px;
background: #f7f7f7;
border-radius: 2px;
font-size: 16px;
}
nav {
position: fixed;
inset: 50% 50px auto auto;
z-index: 999;
transform: translateY(-50%);
}
nav>ul {
width: 50px;
}
nav>ul a {
position: relative;
display: block;
height: 13px;
font-size: 0;
}
nav>ul>li a::after {
content: "";
position: absolute;
inset: 50% 0 auto auto;
width: 20px;
height: 1px;
background: #333;
transition: 0.5s;
transform: translateY(-50%);
}
nav>ul>li.on a::after {
width: 100%;
}
#cover {
position: fixed;
inset: -100% auto auto 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: #333;
color: #fff;
z-index: 1000;
transition: 0.75s;
}
#cover.on {
inset: 0 auto auto 0;
}
#cover a {
display: block;
line-height: 40px;
border-bottom: 1px solid #666;
}
.cover_toggle::after {
content: "\e91c";
font-family: 'xeicon';
}
.cover_toggle.on::after {
content: "\e921";
font-family: 'xeicon';
}
</style>
</head>
<body>
<header id="header">
<h1>
<a href="">
2022 lsy'portfolio
</a>
</h1>
<nav>
<ul>
<li><a href="#p01">portfolio01</a></li>
<li><a href="#p02">portfolio02</a></li>
<li><a href="#p03">portfolio03</a></li>
<li><a href="#p04">portfolio04</a></li>
<li><a href="#p05">portfolio05</a></li>
</ul>
</nav>
<div class="cover_toggle">
<!-- <a href=""><i class="xi-bars"></i></a>
<a href=""><i class="xi-close-min"></i></a> -->
</div>
</header>
<main id="portfolio">
<section class="section portfolio01">
<div class="inner">
<h2>01. Lorem, ipsum dolor.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, ad.</p>
</div>
</section>
<section class="section portfolio02">
<div class="inner">
<h2>02. Lorem, ipsum dolor.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, ad.</p>
</div>
</section>
<section class="section portfolio03">
<div class="inner">
<h2>03. Lorem, ipsum dolor.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, ad.</p>
</div>
</section>
<section class="section portfolio04">
<div class="inner">
<h2>04. Lorem, ipsum dolor.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, ad.</p>
</div>
</section>
<section class="section portfolio05">
<div class="inner">
<h2>05. Lorem, ipsum dolor.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, ad.</p>
</div>
</section>
</main>
<div id="cover">
<ul>
<li><a href="#p01">portfolio01</a></li>
<li><a href="#p02">portfolio02</a></li>
<li><a href="#p03">portfolio03</a></li>
<li><a href="#p04">portfolio04</a></li>
<li><a href="#p05">portfolio05</a></li>
</ul>
</div>
<footer id="footer">
<div class="toTop">
<a href="#p01"><i class="xi-arrow-top"></i></a>
</div>
</footer>
<script src="../js/jquery-1.12.4.min.js"></script>
<script src="../js/fullpage.min.js"></script>
<script>
$(function () {
$('#portfolio').fullpage({
anchors: ['p01', 'p02', 'p03', 'p04', 'p05'],
afterLoad: function (origin, destination, direction, trigger) {
$('.section').eq(destination.index).addClass('on').siblings().removeClass('on');
$('nav li').eq(destination.index).addClass('on').siblings().removeClass('on');
},
});
$('.cover_toggle, #cover a').on('click', function () {
$('#cover').toggleClass('on');
$('.cover_toggle').toggleClass('on');
});
$('#cover').on('wheel scroll', function (e) {
e.stopPropagation();
})
// $('#cover a').on('click', function () {
// $('.cover_toggle').toggleClass('on');
// $('#cover').toggleClass('on');
// });
});
</script>
</body>
</html>
<!-- 풀페이지 = 접근을 쉽게 할 수 있다. 오직 스크롤을 사용해서 -->
<!-- <section class="section"></section> 풀페이지가 되겠다~는 약속의 의미-->
<!-- anchors: ['p01', 'p02'] 해시가 생성. a태그로 이동가능하게 해줌 -->
<!-- inset은 ie에서 안됨 -->