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;}
        
        /* side-nav */
        #side-nav {position: fixed; left: -300px; top: 0; width: 300px; height: 100vh; background: rgba(255,255,255,0.3); /* transition: left 0.3s ease-in-out; */}
        #side-nav.open {left: 0px;}
        #side-nav h1 {padding: 60px 20px 40px 20px; color: #fff; font-size: 40px; font-family: 'Abel'; text-align: center;text-shadow: 0 1px 1px rgba(0,0,0,0.2);}
        #side-nav li {border-left: 5px solid transparent;}
        #side-nav li a {text-decoration: none;padding: 14px 20px;display: block;text-transform: uppercase;color: #fff;text-shadow: 0 1px 1px rgba(0,0,0,0.2);}
        #side-nav li.active {background: rgba(255,255,255,0.4);border-left: 5px solid #fff;}
        #side-nav .navBtn {
            position: absolute; right: -60px; top: 10px;
            display: block; width: 50px; height: 50px;
            background: rgba(255,255,255,0.4);
            border-radius: 50%;
            text-align: center; line-height: 50px;
            text-decoration: none;
            color: #fff;
            font-size: 13px;
        }
        
        /* contents */
        #contents {text-align: center; color: #fff;}
        #contents > div {height: 100vh; line-height: 100vh;}
        #contents > div h2 {font-size: 90px; font-weight: 200; text-transform: uppercase;}
        #contents > div h2 strong {font-weight: 700; font-style: italic;}
        
        /* section */
        #section1 {background:radial-gradient(ellipse farthest-corner at center bottom, #69d2fb 0%, #20438E 100%);}
        #section2 {background:radial-gradient(ellipse farthest-corner at center top, #f39264 0%, #f2606f 100%); }
        #section3 {background:radial-gradient(ellipse farthest-corner at center top, #ffee75, #ff8930);}
        #section4 {background:radial-gradient(ellipse farthest-corner at center bottom, #6beace, #2e9aa4);}
        #section5 {background:radial-gradient(ellipse farthest-corner at center top, #cbf49a, #1ea623);}
        #section6 {background:radial-gradient(ellipse farthest-corner at center top, #6CEBCF 0%, #38a7aa 100%);}
    </style>
</head>
<body>
    <nav id="side-nav">
        <h1>WEBSTORYBOY</h1>
        <ul>
            <li class="active"><a href="#section1">menu1</a></li>
            <li><a href="#section2">menu2</a></li>
            <li><a href="#section3">menu3</a></li>
            <li><a href="#section4">menu4</a></li>
            <li><a href="#section5">menu5</a></li>
            <li><a href="#section6">menu6</a></li>
        </ul>   
        <a href="#" class="navBtn">Open</a>
    </nav>

    <div id="contents">
        <div id="section1"><h2>피할 수 없으면 <strong>즐겨라!</strong></h2></div>
        <div id="section2"><h2>삶이 있는 한 <strong>희망</strong>은 있다.</h2></div>
        <div id="section3"><h2>시간은 <strong>금이다.</strong></h2></div>
        <div id="section4"><h2>먼저핀 꽃은 <strong>먼저진다.</strong></h2></div>
        <div id="section5"><h2>내일은 내일의 <strong>태양이 뜬다.</strong></h2></div>
        <div id="section6"><h2>모든 인생은 <strong>실험이다.</strong></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>
        $(".navBtn").click(function(){
            //$("#side-nav").css("left","0");
            //$("#side-nav").addClass("open");
            $("#side-nav").toggleClass("on");
            //$("#side-nav").animate({ "left":"0" },200);

            if( $("#side-nav").hasClass("on") ){
                $("#side-nav").animate({ "left":"0" },200);
                $(".navBtn").text("Close");
            } else {
                $("#side-nav").animate({ "left":"-300" },200);
                $(".navBtn").text("Open");
            }
        });
        
        var nav = $("#side-nav ul li");
        var cont = $("#contents > div");

        nav.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,"easeInBounce");
        });

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




<nav id="side-nav">
    <h1>WEBSTORYBOY</h1>
    <ul>
        <li class="active"><a href="#section1">menu1</a></li>
        <li><a href="#section2">menu2</a></li>
        <li><a href="#section3">menu3</a></li>
        <li><a href="#section4">menu4</a></li>
        <li><a href="#section5">menu5</a></li>
        <li><a href="#section6">menu6</a></li>
    </ul>   
    <a href="#" class="navBtn">Open</a>
</nav>

<div id="contents">
    <div id="section1"><h2>피할 수 없으면 <strong>즐겨라!</strong></h2></div>
    <div id="section2"><h2>삶이 있는 한 <strong>희망</strong>은 있다.</h2></div>
    <div id="section3"><h2>시간은 <strong>금이다.</strong></h2></div>
    <div id="section4"><h2>먼저핀 꽃은 <strong>먼저진다.</strong></h2></div>
    <div id="section5"><h2>내일은 내일의 <strong>태양이 뜬다.</strong></h2></div>
    <div id="section6"><h2>모든 인생은 <strong>실험이다.</strong></h2></div>
</div>




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

    /* side-nav */
    #side-nav {position: fixed; left: -300px; top: 0; width: 300px; height: 100vh; background: rgba(255,255,255,0.3); /* transition: left 0.3s ease-in-out; */}
    #side-nav.open {left: 0px;}
    #side-nav h1 {padding: 60px 20px 40px 20px; color: #fff; font-size: 40px; font-family: 'Abel'; text-align: center;text-shadow: 0 1px 1px rgba(0,0,0,0.2);}
    #side-nav li {border-left: 5px solid transparent;}
    #side-nav li a {text-decoration: none;padding: 14px 20px;display: block;text-transform: uppercase;color: #fff;text-shadow: 0 1px 1px rgba(0,0,0,0.2);}
    #side-nav li.active {background: rgba(255,255,255,0.4);border-left: 5px solid #fff;}
    #side-nav .navBtn {
        position: absolute; right: -60px; top: 10px;
        display: block; width: 50px; height: 50px;
        background: rgba(255,255,255,0.4);
        border-radius: 50%;
        text-align: center; line-height: 50px;
        text-decoration: none;
        color: #fff;
        font-size: 13px;
    }

    /* contents */
    #contents {text-align: center; color: #fff;}
    #contents > div {height: 100vh; line-height: 100vh;}
    #contents > div h2 {font-size: 90px; font-weight: 200; text-transform: uppercase;}
    #contents > div h2 strong {font-weight: 700; font-style: italic;}

    /* section */
    #section1 {background:radial-gradient(ellipse farthest-corner at center bottom, #69d2fb 0%, #20438E 100%);}
    #section2 {background:radial-gradient(ellipse farthest-corner at center top, #f39264 0%, #f2606f 100%); }
    #section3 {background:radial-gradient(ellipse farthest-corner at center top, #ffee75, #ff8930);}
    #section4 {background:radial-gradient(ellipse farthest-corner at center bottom, #6beace, #2e9aa4);}
    #section5 {background:radial-gradient(ellipse farthest-corner at center top, #cbf49a, #1ea623);}
    #section6 {background:radial-gradient(ellipse farthest-corner at center top, #6CEBCF 0%, #38a7aa 100%);}
</style>




<-- script -->
<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>
    $(".navBtn").click(function(){
        //$("#side-nav").css("left","0");
        //$("#side-nav").addClass("open");
        $("#side-nav").toggleClass("on");
        //$("#side-nav").animate({ "left":"0" },200);

        if( $("#side-nav").hasClass("on") ){
            $("#side-nav").animate({ "left":"0" },200);
            $(".navBtn").text("Close");
        } else {
            $("#side-nav").animate({ "left":"-300" },200);
            $(".navBtn").text("Open");
        }
    });

    var nav = $("#side-nav ul li");
    var cont = $("#contents > div");

    nav.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,"easeInBounce");
    });

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

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




04. 패럴럭스 배우기 - Side Menu

패럴럭스 사이트에서 숨겨진 사이드 메뉴를 표현하는 튜토리얼입니다.

완성
광고

공유하기

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

전체메뉴

질문하기
댓글
  • 프로필사진 유토피아 완성했습니다.^^
    http://utopiaonline.dothome.co.kr/responsive/html5/parallax/parallax2.html

    저 근데 실무에서쓰는 제이쿼리 강좌는 언제쯤 볼수 있을까요?
    지금 저한테 제일 필요한거 같아서..^^;
    2019.03.05 18:43 신고
  • 프로필사진 @webs 최대한 빨리 만들려고는 노력 중인데요~~ 시간이 걸릴거 같네요^^ 2019.03.06 20:51 신고
댓글쓰기 폼