728x90
2021/04/01(목)
자바스크립트를 이용하여 영상처리 할 수 있는 프로젝트 설명
전체적인 프로젝트 컨셉 : 다양한 영상처리의 컨셉을 보여주기 위해 디즈니 영화를 주제로 잡아 구성을 했습니다.
- 인어공주 : 뒷 배경을 3중으로된 물결을 모듈로 만들고 앞에 화면에는 캔버스를 띄워 버튼 클릭 시 각각 영상 처리
- 업 : 뒷배경을 풍선이 날아다니는 모션을 두고 앞에 캔버스를 띄워 영상 처리
- 코코 : 뒷배경을 기타 줄을 튕기는 모션을 두고 앞에 캔버스를 띄워 영상 처리
<첫화면 구성>
제이 쿼리를 가져와서 첫 화면을 구성
<first.html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./first.css">
<script src="./first.js" defer>
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>
</head>
<body>
<section class="container">
<h1>
<span style=" line-height: 1;" class="title">photo</span>
<span style=" line-height: 1;" class="title">effects</span>
<h style="font-size: 50px;">
<h style="color: #8ADCC2;">
<span style=" line-height: 2;" class="title">- kim do a -</span>
</h>
</h>
</h1>
<!-- 앵커효과를 이용해서 버튼 클릭시 slide.html로 이동 -->
<a class="button" href='slide.html'> start </a>
</section>
</body>
</html>start버튼 클릭 시 slide.html로 이동
<first.js>
$(document).ready(function () {
$(".title").lettering();
$(".button").lettering();
});
$(document).ready(function () {
animation();
}, 1000);
function animation() {
var title1 = new TimelineMax();
title1.to(".button", 0, { visibility: 'hidden', opacity: 0 })
title1.staggerFromTo(".title span", 0.5,
{ ease: Back.easeOut.config(1.7), opacity: 0, bottom: -80 },
{ ease: Back.easeOut.config(1.7), opacity: 1, bottom: 0 }, 0.05);
title1.to(".button", 0.2, { visibility: 'visible', opacity: 1 })
}
<first.css>
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);
html {
height: 100%;
}
body {
font-family: 'Fjalla One', sans-serif;
background: linear-gradient(to bottom, #1E47A1 0%, #C697DF 100%);
}
.container {
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
display: block;
position: absolute;
max-width: 380px;
}
.button {
float: left;
position: relative;
bottom: -100px;
left: -5%;
font-size: 30px;
transform: translateX(-50%) rotate(-10deg);
color: #2F419A;
text-transform: uppercase;
opacity: 0;
visibility: hidden;
cursor: pointer;
background-color: rgba(255, 255, 255, 0);
border: none;
}
.button span {
transform: skew(-10deg);
display: block;
float: left;
text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px;
}
h1 {
color: rgb(222, 222, 222);
text-transform: uppercase;
font-size: 90px;
margin: 0;
letter-spacing: 2px;
}
.title {
transform: translateX(-50%) rotate(-10deg);
display: block;
float: left;
left: 50%;
position: relative;
}
.title span {
transform: skew(-10deg);
display: block;
float: left;
text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px, #533d4a 5px 5px, #533d4a 6px 6px;
min-width: 0px;
min-height: 10px;
position: relative;
}
/*
.title:nth-child(1) {
color: #e55643;
color: #d2d2d2;
}
.title:nth-child(2) {
color: #2b9f5e;
color: #d2d2d2;
}
.title:nth-child(3) {
color: #f1c83c;
color: #8adcc2;
}
*/
start 버튼 클릭 후 실행화면
처음화면은 슬라이드 html위에 화면을 띄운 방식이기 때문에 슬라이드 html에서 화살표를 클릭하면 iframe으로 넘어가는 형식
<slide.html>
<!DOCTYPE html>
<html>
<head>
<style>
.section input[id*="slide"] {
display: none;
}
.section .slidewrap {
max-width: 100%;
margin: 0 auto;
overflow: hidden;
}
.section .slidelist {
white-space: nowrap;
font-size: 0;
width: 100%;
padding: auto;
}
.section .slidelist>li {
display: inline-block;
vertical-align: middle;
width: 100%;
transition: all .5s;
}
.section .slidelist>li>a iframe {
width: 100%;
}
.section .slidelist label {
position: absolute;
z-index: 10;
top: 450px;
transform: translateY(-50%);
padding: 30px;
cursor: pointer;
}
.section .slidelist .left {
left: 50px;
background: url('./left-arrow.png') center center / 100% no-repeat;
}
.section .slidelist .right {
right: 50px;
background: url('./right-arrow.png') center center / 100% no-repeat;
}
.section .slide-control [class *="control"] {
display: none;
}
.section [id="slide01"]:checked~.slidewrap .control01 {
display: block;
}
.section [id="slide02"]:checked~.slidewrap .control02 {
display: block;
}
.section [id="slide03"]:checked~.slidewrap .control03 {
display: block;
}
.section [id="slide01"]:checked~.slidewrap .slidelist>li {
transform: translateX(0%);
}
.section [id="slide02"]:checked~.slidewrap .slidelist>li {
transform: translateX(-100%);
}
.section [id="slide03"]:checked~.slidewrap .slidelist>li {
transform: translateX(-200%);
}
ul {
padding: 0;
}
body {
margin: 0;
}
iframe {
height: 940px;
border: none;
}
</style>
</head>
<body>
<div class="section">
<input type="radio" name="slide" id="slide01" checked>
<input type="radio" name="slide" id="slide02">
<input type="radio" name="slide" id="slide03">
<div class="slidewrap">
<ul class="slidelist">
<li>
<a>
<iframe src="./index.html"></iframe>
</a>
</li>
<li>
<a>
<iframe src="./index2.html"></iframe>
</a>
</li>
<li>
<a>
<iframe src="./index3.html"></iframe>
</a>
</li>
<div class="slide-control">
<div class="control01">
<label for="slide03" class="left"></label>
<label for="slide02" class="right"></label>
</div>
<div class="control02">
<label for="slide01" class="left"></label>
<label for="slide03" class="right"></label>
</div>
<div class="control03">
<label for="slide02" class="left"></label>
<label for="slide01" class="right"></label>
</div>
</div>
</ul>
</div>
</div>
</body>
</html>
사진이 아닌 html을 슬라이드로 띄워주기 위해서 iframe을 사용
참고: 코딩하는 남자(유튜브)
728x90
'코딩 연습장 > Javascript' 카테고리의 다른 글
| 자바스크립트를 이용한 개인 프로젝트 - 4(코코coco 화면) (0) | 2021.06.13 |
|---|---|
| 자바스크립트를 이용한 개인 프로젝트 - 3(업up 화면) (0) | 2021.06.13 |
| 자바스크립트를 이용한 개인 프로젝트 - 2(인어 공주 화면) (0) | 2021.06.11 |
| 자바스크립트 영상 처리 코딩 (0) | 2021.03.24 |
| Visual Studio Code설치(HTML5사용) (0) | 2021.03.19 |