패럴랙스 기본 배우기 튜토리얼입니다.
이 강의는 기본적인 HTML, CSS, JavaScript, JQuery를 알고 있어야 배울 수 있는 강의입니다.
웹표준 강의, 반응형 강의, 메가박스 강의를 보고 오시면 도움이 됩니다.^^
모든 강의는 소스를 보면서 따라하는 튜토리얼이며,
직접 서버에 따라하시고 댓글로 서버 주소를 알려주시면
모르는 부분은 도움을 드릴 수 있습니다.
Code Youtube
Code example
<!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">
</head>
<body>
<nav id="nav">
<h1>WEB'S</h1>
<div class="mNav">
<div class="icon-wrap">
<div class="icon"></div>
</div>
</div>
<ul class="menu">
<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>
</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 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,"easeInOutExpo");
});
$(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");
}
});
$(".mNav").click(function(){
//$(".menu").css("display","block");
//$(".menu").show();
//$(".menu").fadeIn();
//$(".menu").slideDown();
$(".menu").toggle();
//$(".menu").fadeToggle();
//$(".menu").slideToggle();
});
$(window).resize(function(){
var wWidth = $(window).width();
//화면 크기가 960 이상일 때 style="display:none" 삭제
if(wWidth > 960 && $(".menu").is(":hidden") ){
$(".menu").removeAttr("style");
}
});
</script>
</body>
</html>
/* 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 .menu {float: right; padding-right: 10px; }
#nav .menu li {display: inline; }
#nav .menu li a {display: inline-block; padding: 20px 15px; color: #fff; font-weight: bold; font-family: 'Abel'; text-transform: capitalize;}
#nav .menu li.active a {color: #111;}
#nav .mNav {display: none; position: absolute; top: 7px; right: 10px; width: 65px; height: 45px; cursor: pointer;/*background-color: rgba(255,255,255,0.3);*/}
/* icon-menu */
.icon-wrap {padding-left: 10px;}
.icon-wrap .icon,
.icon-wrap .icon:before,
.icon-wrap .icon:after {width: 45px; height: 4px; background: #fff;}
.icon-wrap .icon {position: relative; margin-top:20px;}
.icon-wrap .icon:before {content:'';position: absolute; left: 0; bottom: 10px; }
.icon-wrap .icon:after {content:''; position: absolute; left: 0; top: 10px;}
/* 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 top, #cbf49a, #1ea623);}
#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 bottom, #69d2fb 0%, #20438E 100%);}
#section6 {background:radial-gradient(ellipse farthest-corner at center top, #6CEBCF 0%, #38a7aa 100%);}
/* mediaquery */
@media (max-width:800px){
#nav .menu {display: none;}
#nav .mNav {display: block;}
#nav h1 {width: 100%;}
#nav .menu {float: none; text-align: center; padding-right: 0;}
#nav .menu li {width: 100%; display: inline-block;}
#nav .menu li.active {background-color: rgba(255,255,255,0.3);}
#contents > div h2 {font-size: 6vw; font-weight: 300;}
}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,"easeInOutExpo");
});
$(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");
}
});
$(".mNav").click(function(){
//$(".menu").css("display","block");
//$(".menu").show();
//$(".menu").fadeIn();
//$(".menu").slideDown();
$(".menu").toggle();
//$(".menu").fadeToggle();
//$(".menu").slideToggle();
});
$(window).resize(function(){
var wWidth = $(window).width();
//화면 크기가 960 이상일 때 style="display:none" 삭제
if(wWidth > 960 && $(".menu").is(":hidden") ){
$(".menu").removeAttr("style");
}
});
도움이 되셨다면 구독과 좋아요 버튼을 꾸욱~~!!
여러분의 댓글은 영상을 제작하는데 많은 힘이 됩니다.
모르시거나 궁금한 사항은 언제든지 댓글로 남겨주세요.
최대한 힘이 되어 드리겠습니다.
오늘도 수고하셨습니다.
728x90
