Welcolme my Tutorial blog

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

Welcolme my Tutorial blog

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

Welcolme my Tutorial blog

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

안녕하세요!

현재는 베타버전입니다.

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

에디터가 드리는 인사

티스토리 뷰

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <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: 0; width: 100%; background-color: rgba(255,255,255,0.3);}
        #nav h1 {float: left; color: #fff; font-size: 40px; padding: 5px 5px 5px 15px; font-family: 'Abel' }
        #nav ul {float: right; padding-right: 10px; }
        #nav ul li {display: inline; }
        #nav ul li a {display: inline-block; padding: 20px 15px; color: #fff; font-weight: bold; font-family: 'Abel'; text-transform: capitalize;}
        
        /* contents */
        #contents {text-align: center; color: #fff;}
        #contents > div {height: 100vh; line-height: 100vh;}
        #contents > div h2 {font-size: 90px; font-weight: 100; text-transform: uppercase;}
        #contents > div h2 strong {font-weight: 700; font-style: italic;}
        
        /* section */
        #section1 {background:radial-gradient(ellipse farthest-corner at center top, #f39264 0%, #f2606f 100%); }
        #section2 {background:radial-gradient(ellipse farthest-corner at center top, #cbf49a, #1ea623);}
        #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 bottom, #69d2fb 0%, #20438E 100%);}
        #section6 {background:radial-gradient(ellipse farthest-corner at center top, #6CEBCF 0%, #38a7aa 100%);}
    </style>
</head>
<body>
    <nav id="nav">
        <h1>WEB'S</h1>
        <ul>
            <li><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>
    </nav>

    <div id="contents">
        <div id="section1"><h2>Time is <strong>gold</strong></h2></div>
        <div id="section2"><h2>Seeing is <strong>believing</strong></h2></div>
        <div id="section3"><h2>Asking costs <strong>nothing</strong></h2></div>
        <div id="section4"><h2><strong>Better</strong> is to bow than break</h2></div>
        <div id="section5"><h2><strong>Habit</strong> is second nature</h2></div>
        <div id="section6"><h2>Pain past is <strong>pleasure</strong></h2></div>
    </div>
    
    <!-- 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>
        var nav = $("#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,"easeInCubic");
        });
    </script>
</body>
</html>




<nav id="nav">
    <h1>WEB'S</h1>
    <ul>
        <li><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>
</nav>

<div id="contents">
    <div id="section1"><h2>Time is <strong>gold</strong></h2></div>
    <div id="section2"><h2>Seeing is <strong>believing</strong></h2></div>
    <div id="section3"><h2>Asking costs <strong>nothing</strong></h2></div>
    <div id="section4"><h2><strong>Better</strong> is to bow than break</h2></div>
    <div id="section5"><h2><strong>Habit</strong> is second nature</h2></div>
    <div id="section6"><h2>Pain past is <strong>pleasure</strong></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: 0; width: 100%; background-color: rgba(255,255,255,0.3);}
    #nav h1 {float: left; color: #fff; font-size: 40px; padding: 5px 5px 5px 15px; font-family: 'Abel' }
    #nav ul {float: right; padding-right: 10px; }
    #nav ul li {display: inline; }
    #nav ul li a {display: inline-block; padding: 20px 15px; color: #fff; font-weight: bold; font-family: 'Abel'; text-transform: capitalize;}

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

    /* section */
    #section1 {background:radial-gradient(ellipse farthest-corner at center top, #f39264 0%, #f2606f 100%); }
    #section2 {background:radial-gradient(ellipse farthest-corner at center top, #cbf49a, #1ea623);}
    #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 bottom, #69d2fb 0%, #20438E 100%);}
    #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>
    var nav = $("#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,"easeInCubic");
    });
</script>




[Parallax] 01. 패럴럭스 배우기 - 기본

패럴럭스 사이트를 만들기 위한 기본 예제 틀입니다.

완성
광고

공유하기

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

전체메뉴

질문하기
댓글
  • 프로필사진 @webs http://richclub7.dothome.co.kr/parallax/parallax01.html 제가 따라했어요~ 2018.11.18 18:44 신고
  • 프로필사진 코보 이런게 jquery로 구현을 하는지 알았는데 이런게 있엇군요..
    http://kobolim.dothome.co.kr/parallax/01.html
    2018.11.18 21:11 신고
  • 프로필사진 코보 코드에서 보면
    var nav = $("nav ul li"); //버튼을 변수에 할당
    var cont = $("#contents > div"); //컨텐츠을 변수에 할당
    같은 id 인데 위에는 그냥 nav라 쓰고 아래는 #contents라고 쓰는데 차이점이 뭔가요?
    2018.11.18 21:29 신고
  • 프로필사진 @webs 영상에서 그렇게 썼나요? 그럼 #nav 라고 쓰는게 맞습니다. 근데 그냥 nav라고 써도 nav 태그가 있기 때문에 인식하거 같습니다. 원래는 #nav라고 써야 합니다. 2018.11.18 22:35 신고
  • 프로필사진 geon http://testbox01.dothome.co.kr/parallax/parallax.html
    완성 재밌네요! 하지만 혼자 구현하라고 하면.. 힘들것 같아요.. 따라하다보면 언젠가 할 수 있겠죠
    2018.11.18 22:52 신고
  • 프로필사진 @webs 잘 하셨네요^^ 원래 처음엔 이것 저것 카피하면서 시작하는 겁니다.~ 처음부터 혼자 구현할려고 생각안하셔도 됩니다. 끝까지 포기하지 않는다면 혼자 구현할 실력이 될거예요^^ 2018.11.18 23:51 신고
  • 프로필사진 마라토너 http://www.humor-in.com/FE/webstoryboy/parallax/parallax01.html
    강사님 따라서 해보고 있습니다.
    웹표준, 반응형 따라하기 도 해보았습니다.
    감사합니다.
    2018.12.31 13:59 신고
  • 프로필사진 @webs 수고하셨어요^^ 2018.12.31 14:12 신고
  • 프로필사진 아무개 선생님 $(this)를 변수처리 하지않고( var target = $(this);) var index = $(this).index(); 이렇게 사용해도 되는데, 선생님께서는 혹시 this를 따로 변수처리 하신 이유가 있는지 궁금합니다 ~!! 2019.01.25 16:17 신고
  • 프로필사진 @webs 물론 그렇게 해도 됩니다.~
    처음 배우는 분들이기 때문에 디테일하게 들어간 것입니다.
    2019.01.25 16:18 신고
  • 프로필사진 KKS http://practice001.dothome.co.kr/parallax/parallax01.html
    잘 따라했습니다~!
    반응형 강의 동영상 끝내고, 락앤락 강의 끝내고, 강의업데이트 기다리다가 패럴럭스 먼저 보게되었어요 ㅜ
    좋은 강의 감사합니다.
    2019.02.28 17:13 신고
  • 프로필사진 @webs 열심히 하시네요^^ 빨리 강의를 올려야 하는데~~ 조금 시간이 걸리네요^^ 2019.02.28 17:20 신고
  • 프로필사진 KKS 안녕하세요~ 질문있습니다ㅠ!
    offset 값으로 nav의 메뉴들을 클릭했을 때, 각 section의 시작하는 부분에 nav가 붙잔아요.
    그런데 만약에 정해진 offset값보다 더 적게 하려면 코드를 어떻게 짜야할까요?..
    section 시작점에 nav를 맞추는 것이 아닌 각 section의 범위 바로 위에 nav를 설정하고싶습니다. ( menu2를 클릭했을 때, section2의 시작점이 아닌 section1의 마지막에 nav설정을 하고싶습니다. 설명하기가 어렵네요..)
    그리고 혹시 제이쿼리 플러그인이나 다양한 애니메이션 효과를 참고할만한 사이트가 있을까요?
    2019.03.07 17:20 신고
  • 프로필사진 @webs var offset = section.offset().top;
    이 부분을 수정해야 할거 같네요~
    var offset = section.offset().top - 100;
    이렇게 숫자를 붙여서 위치를 찾으시면 될거 같습니다.
    2019.03.09 15:05 신고
댓글쓰기 폼