코딩 연습장/Javascript

자바스크립트 이용한 개인 프로젝트 - 1(첫 화면, 슬라이드 화면)

Do아 2021. 5. 16. 21:58
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

'코딩 연습장/Javascript'의 다른글

  • 현재글자바스크립트 이용한 개인 프로젝트 - 1(첫 화면, 슬라이드 화면)

관련글

댓글

티스토리툴바