Welcolme my Tutorial blog

퍼블리셔와 디자이너를 위한 사이트입니다.
동영상과 소스를 보면서 따라하는 튜토리얼 사이트입니다.

Welcolme my Tutorial blog

웹 표준 사이트 따라하기 튜토리얼 입니다.
유튜브 영상과 같이 보면서 따라하는 튜토입니다.

Welcolme my Tutorial blog

사이트는 현재 만드는 중입니다.
버그와 잘못된 링크가 엄청 많습니다.

안녕하세요!

현재는 베타버전입니다.

이 사이트는 코딩을 동영상과 소스를 보면서 따라하는 튜토리얼 사이트입니다.

에디터가 드리는 인사

티스토리 뷰

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
    <title>Parallax</title>
    
    <link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i'" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
    <style>
        /* reset */
        * {margin:0; padding:0; font-family: 'Lato';}
        li {list-style: none;}
        a {text-decoration: none;}
        
        /* nav */
        #nav {position: fixed; left: 0; top: 0px; width: 100%; height: 61px; z-index: 1000; background-color: rgba(255,255,255,0.3); transition: all 0.3s ease;}
        #nav.on {position: fixed; top: -61px;}
        #nav h1 {float: left; color: #fff; font-size: 40px; padding: 5px 5px 5px 15px; font-family: 'Abel' }
        
        /* dot */
        #dot {position: fixed; right: 20px; top:50%; z-index: 10; transform: translatey(-50%);}
        #dot li {
            position: relative;
            width: 20px; height: 20px; border-radius:50%; 
            box-shadow: 0 0 0 2px rgba(255,255,255,0);
            margin: 8px;
            transition: box-shadow 0.3s ease;
        }
        #dot li a { 
            background-color: rgba(255,255,255,0.7);
            width: 100%; height: 100%;
            position: absolute; top:0; left: 0;
            border-radius: 50%;
            transition: background-color 0.3s ease, transform 0.3s ease;
        }
        #dot li.active {box-shadow: 0 0 0 2px rgba(255,255,255,1);}
        #dot li.active a {transform: scale(0.4);}
        #dot li a em {display: none;}   
        
        /* contents */
        #contents {text-align: center; color: #fff;}
        #contents > div {height: 100vh; display: flex; justify-content : center; align-items : center;}
        #contents > div h2 {font-size: 70px; font-weight: 200; text-transform: uppercase;}
        #contents > div h2 strong {font-weight: 700; font-style: italic;}
        
        /* section */
        #section3 {background:radial-gradient(ellipse farthest-corner at center top, #A3A1FF, #3A3897);}
        #section2 {background:radial-gradient(ellipse farthest-corner at center bottom, #3AA17E, #00537E);}
        #section4 {background:radial-gradient(ellipse farthest-corner at center top, #29ABE2, #4F00BC);}
        #section5 {background:radial-gradient(ellipse farthest-corner at center top, #FF5300, #45145A);}
        #section1 {background:radial-gradient(ellipse farthest-corner at center bottom, #852D91, #312A6C);}
        #section6 {background:radial-gradient(ellipse farthest-corner at center top, #FBB03B, #D4145A);}
        
        /* text animation */
        #contents > div h2 {transition: all 0.6s ease-in-out;}
        #section1 h2 {opacity: 0; transform: translate(0,0)}
        #section2 h2 {opacity: 0; transform: translate(0,-20%)}
        #section3 h2 {opacity: 0; transform: translate(-20%,0)}
        #section4 h2 {opacity: 0; transform: translate(10%,0)}
        #section5 h2 {opacity: 0; transform: rotate(45deg)}
        #section6 h2 {opacity: 0; transform: skew(90deg)}
        #contents > div.show h2 {transform: none;}
        #section1.show h2 {opacity: 1;}
        #section2.show h2 {opacity: 1;}
        #section3.show h2 {opacity: 1;}
        #section4.show h2 {opacity: 1;}
        #section5.show h2 {opacity: 1;}
        #section6.show h2 {opacity: 1;}
    </style>
</head>
<body>
    <nav id="nav">
        <h1>WEB'S</h1>
    </nav>
    
    <div id="dot">
        <ul>
            <li class="active"><a href="#"><em>menu1</em></a></li>
            <li><a href="#"><em>menu2</em></a></li>
            <li><a href="#"><em>menu3</em></a></li>
            <li><a href="#"><em>menu4</em></a></li>
            <li><a href="#"><em>menu5</em></a></li>
            <li><a href="#"><em>menu6</em></a></li>
        </ul>
    </div>

    <div id="contents">
        <div id="section1"><h2><strong>잘 살아라!</strong><br>그게 최고의 복수다.</h2></div>
        <div id="section2"><h2><strong>꿈을 크게 가지면</strong><br>깨져도 그 조각이 크다.</h2></div>
        <div id="section3"><h2><strong>꽃이 방안에 있으면</strong><br>벌이 어떻게 찾아가겠어요?</h2></div>
        <div id="section4"><h2><strong>절망하지 마라</strong><br>종종 열쇠 꾸러미의 마지막 열쇠가<br>자물쇠를 연다.</h2></div>
        <div id="section5"><h2>하고 싶은 일에는 <strong>방법이 보이고,</strong><br>하기 싫은 일에는 <strong>핑계가 보인다.</strong></h2></div>
        <div id="section6"><h2><strong>실패는</strong> 삶에서<br>불필요한 것들을 제거해준다.</h2></div>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        var dot = $("#dot > ul > li");
        var cont = $("#contents > div");

        dot.click(function(e){
            e.preventDefault();
            var target = $(this);
            var index = target.index();
            //alert(index);
            var section = cont.eq(index);
            var offset = section.offset().top;
            $("html,body").animate({ scrollTop:offset },600,"easeInOutCirc");
        });

        $(window).scroll(function(){
            var wScroll = $(this).scrollTop();
            
            if(wScroll >= cont.eq(0).offset().top){
                dot.removeClass("active");
                dot.eq(0).addClass("active");
            }
            if(wScroll >= cont.eq(1).offset().top){
                dot.removeClass("active");
                dot.eq(1).addClass("active");
            }
            if(wScroll >= cont.eq(2).offset().top){
                dot.removeClass("active");
                dot.eq(2).addClass("active");
            }
            if(wScroll >= cont.eq(3).offset().top){
                dot.removeClass("active");
                dot.eq(3).addClass("active");
            }
            if(wScroll >= cont.eq(4).offset().top){
                dot.removeClass("active");
                dot.eq(4).addClass("active");
            }
            if(wScroll >= cont.eq(5).offset().top){
                dot.removeClass("active");
                dot.eq(5).addClass("active");
            }
            
            //Text Animation
            if(wScroll >= cont.eq(0).offset().top - $(window).height()/3 ){
                cont.eq(0).addClass("show");
            }
            if(wScroll >= cont.eq(1).offset().top - $(window).height()/3 ){
                cont.eq(1).addClass("show");
            }
            if(wScroll >= cont.eq(2).offset().top - $(window).height()/3 ){
                cont.eq(2).addClass("show");
            }
            if(wScroll >= cont.eq(3).offset().top - $(window).height()/3 ){
                cont.eq(3).addClass("show");
            }
            if(wScroll >= cont.eq(4).offset().top - $(window).height()/3 ){
                cont.eq(4).addClass("show");
            }
            if(wScroll >= cont.eq(5).offset().top - $(window).height()/3 ){
                cont.eq(5).addClass("show");
            }            
            
        });
    </script>
</body>
</html>




<nav id="nav">
    <h1>WEB'S</h1>
</nav>

<div id="dot">
    <ul>
        <li class="active"><a href="#"><em>menu1</em></a></li>
        <li><a href="#"><em>menu2</em></a></li>
        <li><a href="#"><em>menu3</em></a></li>
        <li><a href="#"><em>menu4</em></a></li>
        <li><a href="#"><em>menu5</em></a></li>
        <li><a href="#"><em>menu6</em></a></li>
    </ul>
</div>

<div id="contents">
    <div id="section1"><h2><strong>잘 살아라!</strong><br>그게 최고의 복수다.</h2></div>
    <div id="section2"><h2><strong>꿈을 크게 가지면</strong><br>깨져도 그 조각이 크다.</h2></div>
    <div id="section3"><h2><strong>꽃이 방안에 있으면</strong><br>벌이 어떻게 찾아가겠어요?</h2></div>
    <div id="section4"><h2><strong>절망하지 마라</strong><br>종종 열쇠 꾸러미의 마지막 열쇠가<br>자물쇠를 연다.</h2></div>
    <div id="section5"><h2>하고 싶은 일에는 <strong>방법이 보이고,</strong><br>하기 싫은 일에는 <strong>핑계가 보인다.</strong></h2></div>
    <div id="section6"><h2><strong>실패는</strong> 삶에서<br>불필요한 것들을 제거해준다.</h2></div>
</div>




<style>
    /* reset */
    * {margin:0; padding:0; font-family: 'Lato';}
    li {list-style: none;}
    a {text-decoration: none;}

    /* nav */
    #nav {position: fixed; left: 0; top: 0px; width: 100%; height: 61px; z-index: 1000; background-color: rgba(255,255,255,0.3); transition: all 0.3s ease;}
    #nav.on {position: fixed; top: -61px;}
    #nav h1 {float: left; color: #fff; font-size: 40px; padding: 5px 5px 5px 15px; font-family: 'Abel' }

    /* dot */
    #dot {position: fixed; right: 20px; top:50%; z-index: 10; transform: translatey(-50%);}
    #dot li {
        position: relative;
        width: 20px; height: 20px; border-radius:50%; 
        box-shadow: 0 0 0 2px rgba(255,255,255,0);
        margin: 8px;
        transition: box-shadow 0.3s ease;
    }
    #dot li a { 
        background-color: rgba(255,255,255,0.7);
        width: 100%; height: 100%;
        position: absolute; top:0; left: 0;
        border-radius: 50%;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }
    #dot li.active {box-shadow: 0 0 0 2px rgba(255,255,255,1);}
    #dot li.active a {transform: scale(0.4);}
    #dot li a em {display: none;}   

    /* contents */
    #contents {text-align: center; color: #fff;}
    #contents > div {height: 100vh; display: flex; justify-content : center; align-items : center;}
    #contents > div h2 {font-size: 70px; font-weight: 200; text-transform: uppercase;}
    #contents > div h2 strong {font-weight: 700; font-style: italic;}

    /* section */
    #section3 {background:radial-gradient(ellipse farthest-corner at center top, #A3A1FF, #3A3897);}
    #section2 {background:radial-gradient(ellipse farthest-corner at center bottom, #3AA17E, #00537E);}
    #section4 {background:radial-gradient(ellipse farthest-corner at center top, #29ABE2, #4F00BC);}
    #section5 {background:radial-gradient(ellipse farthest-corner at center top, #FF5300, #45145A);}
    #section1 {background:radial-gradient(ellipse farthest-corner at center bottom, #852D91, #312A6C);}
    #section6 {background:radial-gradient(ellipse farthest-corner at center top, #FBB03B, #D4145A);}

    /* text animation */
    #contents > div h2 {transition: all 0.6s ease-in-out;}
    #section1 h2 {opacity: 0; transform: translate(0,0)}
    #section2 h2 {opacity: 0; transform: translate(0,-20%)}
    #section3 h2 {opacity: 0; transform: translate(-20%,0)}
    #section4 h2 {opacity: 0; transform: translate(10%,0)}
    #section5 h2 {opacity: 0; transform: rotate(45deg)}
    #section6 h2 {opacity: 0; transform: skew(90deg)}
    #contents > div.show h2 {transform: none;}
    #section1.show h2 {opacity: 1;}
    #section2.show h2 {opacity: 1;}
    #section3.show h2 {opacity: 1;}
    #section4.show h2 {opacity: 1;}
    #section5.show h2 {opacity: 1;}
    #section6.show h2 {opacity: 1;}
</style>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
    var dot = $("#dot > ul > li");
    var cont = $("#contents > div");

    dot.click(function(e){
        e.preventDefault();
        var target = $(this);
        var index = target.index();
        //alert(index);
        var section = cont.eq(index);
        var offset = section.offset().top;
        $("html,body").animate({ scrollTop:offset },600,"easeInOutCirc");
    });

    $(window).scroll(function(){
        var wScroll = $(this).scrollTop();

        if(wScroll >= cont.eq(0).offset().top){
            dot.removeClass("active");
            dot.eq(0).addClass("active");
        }
        if(wScroll >= cont.eq(1).offset().top){
            dot.removeClass("active");
            dot.eq(1).addClass("active");
        }
        if(wScroll >= cont.eq(2).offset().top){
            dot.removeClass("active");
            dot.eq(2).addClass("active");
        }
        if(wScroll >= cont.eq(3).offset().top){
            dot.removeClass("active");
            dot.eq(3).addClass("active");
        }
        if(wScroll >= cont.eq(4).offset().top){
            dot.removeClass("active");
            dot.eq(4).addClass("active");
        }
        if(wScroll >= cont.eq(5).offset().top){
            dot.removeClass("active");
            dot.eq(5).addClass("active");
        }

        //Text Animation
        if(wScroll >= cont.eq(0).offset().top - $(window).height()/3 ){
            cont.eq(0).addClass("show");
        }
        if(wScroll >= cont.eq(1).offset().top - $(window).height()/3 ){
            cont.eq(1).addClass("show");
        }
        if(wScroll >= cont.eq(2).offset().top - $(window).height()/3 ){
            cont.eq(2).addClass("show");
        }
        if(wScroll >= cont.eq(3).offset().top - $(window).height()/3 ){
            cont.eq(3).addClass("show");
        }
        if(wScroll >= cont.eq(4).offset().top - $(window).height()/3 ){
            cont.eq(4).addClass("show");
        }
        if(wScroll >= cont.eq(5).offset().top - $(window).height()/3 ){
            cont.eq(5).addClass("show");
        }            
    });
</script>




11. 패럴럭스 배우기 - Text Animation1

스크롤을 내리면 글씨가 서서히 나타나는 튜토리얼입니다.

완성
광고

공유하기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
태그보기

전체메뉴

질문하기
댓글
  • 프로필사진 geon http://testbox01.dothome.co.kr/parallax/parallax11.html
    완성
    CSS 질문이 있는데요...
    #contents .section.show h2{transform:none; opacity:1;}
    #contents 를 지웠을 때에도 작동이 돼야 하는데 작동이 안돼요 어느부분 때문에 그러는지 알 수 있을까요?
    2018.12.21 17:41 신고
  • 프로필사진 @webs #contents 를 지웠을 때에도 작동이 돼야 하는데 작동이 안돼요

    이게 무슨 말인지 이해를 못하겠네요!
    2018.12.21 20:55 신고
  • 프로필사진 유토피아 css 선택자에는 우선순위란게 있습니다.
    그 우선순위를 정하는 기준중에 하나가 선택자를 좀더 구체적으로 썻을때 상위 우선순위가 주어집니다.
    즉위에서 #contents.section h2 라고 선택자를 써놓고
    밑에서 .section.show h2라고 써놓으면 위에 쓴게 더 구체적으로 #contents까지 썻기 때문에 우선순위가 위에것이 적용돼어 집니다.
    한마디로 위에 transform속성을 써놓고 밑에다 다시 transform을 바꿔서 써놓으면 위에것이 우선순위가 되어 밑에 바뀐 transform 속성은 실행이 안돼겠죠.
    2019.03.14 19:35 신고
댓글쓰기 폼