인터렉티브 웹 2 - 원페이지 슬라이드
2022. 3. 15. 12:07ㆍStudy/Example & Plug-in
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>인터렉티브 웹 2</title>
<script src="https://kit.fontawesome.com/cdd59ed73b.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./css/style.css">
<script src="./js/jquery-2.1.1.min.js" defer></script>
<!-- <script src="./js/jquery.easing.1.3.js" defer></script> -->
<script src="./js/prefixfree.min.js" defer></script>
<script src="./js/jquery.mousewheel.min.js" defer></script>
<script src="./js/custom.js" defer></script>
</head>
<body>
<!-- 전체 페이지 -->
<div id="wrap">
<!-- 로고 -->
<h1><img src="img/logo.png" /></h1>
<!-- 주 메뉴 -->
<ul id="menu">
<li class="on"><a href="#">Full Blossom</a></li>
<li><a href="#">Be Colorful</a></li>
<li><a href="#">Time on Board</a></li>
<li><a href="#">Shiny Addict</a></li>
</ul>
<!-- sns -->
<ul id="sns">
<li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
<li><a href="#"><i class="fa-solid fa-envelope"></i></a></li>
</ul>
<!-- 첫 번째 박스 -->
<section>
<article>
<p>FULL BLOSSOM</p>
<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>
</article>
<img class="p11" src="img/obj11.png" alt="image1">
<img class="p12" src="img/obj12.png" alt="image2">
<img class="p13" src="img/obj13.png" alt="image3">
</section>
<!-- 두 번째 박스 -->
<section>
<article>
<p>BE COLORFUL</p>
<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>
</article>
<img class="p21" src="img/obj21.png" alt="image1">
<img class="p22" src="img/obj22.png" alt="image2">
</section>
<!-- 세 번째 박스 -->
<section>
<article>
<p>TIME ON BOARD</p>
<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>
</article>
<img class="p31" src="img/obj31.png" alt="image1">
<img class="p32" src="img/obj32.png" alt="image2">
<img class="p33" src="img/obj33.png" alt="image3">
</section>
<!-- 네 번째 박스 -->
<section>
<article>
<p>SHINY ADDICT</p>
<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>
</article>
<img class="p41" src="img/obj41.png" />
<img class="p42" src="img/obj42.png" />
</section>
</div>
</body>
</html>
CSS
@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Righteous);
/* Reset CSS */
* { margin:0; padding:0;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#555; }
img { border:0;}
body { font:12px/1.6 arial; color:#555; }
/* 로고 */
h1 {position:fixed; left:50px; top:50px; z-index:10;}
h1 img {width:200px; height:auto;}
/*sns*/
#sns {position:fixed; right:50px; top:40px; z-index:14;}
#sns li {float:left; margin-left:20px;}
#sns li i {font-size:25px; color:#111; opacity:0.5; transition:all 0.5s;}
#sns li i:hover {transform:scale(1.5); opacity:1;}
/*메뉴*/
#menu {position:fixed; left:0px; top:50%; margin-top:-100px; z-index:13;}
#menu a {display:block; width:200px; height:60px; font-family:righteous; font-size:14px; color:#000; text-align:right; overflow:hidden; box-sizing:border-box; border-top:1px solid #111; opacity:0.8; transition:all 0.5s;}
#menu li:hover a {font-size:24px; opacity:1;}
#menu li.on a {font-size:24px; opacity:1;}
#menu li:nth-child(1):hover a { color:#d4164c; border-color:#d4164c;}
#menu li:nth-child(2):hover a { color:#fff; border-color:#fff;}
#menu li:nth-child(3):hover a { color:#ffec6a; border-color:#ffec6a;}
#menu li:nth-child(4):hover a { color:#005a89; border-color:#005a89;}
#menu li:nth-child(1).on a { color:#d4164c; border-color:#d4164c;}
#menu li:nth-child(2).on a { color:#fff; border-color:#fff;}
#menu li:nth-child(3).on a { color:#ffec6a; border-color:#ffec6a;}
#menu li:nth-child(4).on a { color:#005a89; border-color:#005a89;}
/*레이아웃*/
section {position:relative; width:100%; height:700px; background-size:cover; background-position:right center; background-attachment:fixed; overflow:hidden;}
section:nth-of-type(1) { background-image:url(../img/bg1.jpg); }
section:nth-of-type(2) { background-image:url(../img/bg2.jpg); }
section:nth-of-type(3) { background-image:url(../img/bg3.jpg); }
section:nth-of-type(4) { background-image:url(../img/bg4.jpg); }
/*텍스트 박스*/
article {position:absolute; left:300px; top:46%; z-index:11;}
article p { font-family:righteous; font-size:50px; letter-spacing:2px; line-height:1;}
article span { font-size:16px; }
section:nth-of-type(1) p { color:#d4164c;}
section:nth-of-type(1) span { color:#111;}
section:nth-of-type(2) p { color:#fff;}
section:nth-of-type(2) span { color:#fff;}
section:nth-of-type(3) p { color:#fff;}
section:nth-of-type(3) span { color:#ffec6a;}
section:nth-of-type(4) p { color:#005a89;}
section:nth-of-type(4) span { color:#111;}
/*첫 번째 박스 이미지*/
.p11 { position:absolute; right:20px; bottom:20px;}
.p12 { position:absolute; right:130px; bottom:-40px;}
.p13 { position:absolute; right:60px; top:180px;}
/*두 번째 박스 이미지*/
.p21 { position:absolute; right:-180px; bottom:-480px;}
.p22 { position:absolute; right:130px; bottom:-40px;}
/*세 번째 박스 이미지 */
.p31 { position:absolute; right:180px; bottom:30px;}
.p32 { position:absolute; right:110px; bottom:-270px;}
.p33 { position:absolute; right:-70px; bottom:-130px;}
/*네 번째 박스 이미지 */
.p41 { position:absolute; right:20px; bottom:-120px;}
.p42 { position:absolute; right:0px; bottom:-180px;}
JS
// $(document).ready(function(){
// });
//변수 ht에 브라우저의 높이값을 저장
var ht = $(window).height();
//브라우저의 높이값을 section의 높이값으로 지정
$("section").height(ht);
//브라우저가 리사이즈 될 때마다 브라우저와 section의 높이값을 갱신
$(window).on("resize",function(){
var ht = $(window).height();
$("section").height(ht);
});
//각각의 section에서 마우스를 움직이면
$("section").on("mousemove",function(e){
//변수 posX에 마우스 커서의 x축 위치 저장
var posX= e.pageX;
//변수 posY에 마우스 커서의 y축 위치 저장
var posY= e.pageY;
//첫 번째 박스의 이미지 위치값을 마우스 커서의 위치값과 연동
$(".p11").css({"right":20-(posX/30) , "bottom":20-(posY/30) });
$(".p12").css({"right":130+(posX/20) , "bottom":-40+(posY/20) });
$(".p13").css({"right":60+(posX/20) , "top":180+(posY/20) });
//두 번째 박스의 이미지 위치값을 마우스 커서의 위치값과 연동
$(".p21").css({"right":-180-(posX/30) , "bottom":-480-(posY/30) });
$(".p22").css({"right":130+(posX/50) , "bottom":-40+(posY/50) });
//세 번째 박스의 이미지 위치값을 마우스 커서의 위치값과 연동
$(".p31").css({"right":280-(posX/30) , "bottom":30-(posY/30) });
$(".p32").css({"right":110+(posX/20) , "bottom":-270+(posY/20) });
$(".p33").css({"right":-70+(posX/20) , "bottom":-130+(posY/20) });
//네 번째 박스의 이미지 위치값을 마우스 커서의 위치값과 연동
$(".p41").css({"right":20-(posX/30) , "bottom":-120-(posY/30) });
$(".p42").css({"right":0+(posX/20) , "bottom":-180+(posY/20) });
});
//메뉴 버튼 클릭시
$("#menu li").on("click",function(e){
e.preventDefault();
//변수 ht에 브라우저의 높이값 저장
var ht = $(window).height();
//변수 i에 현재 클릭한 li의 순서값을 저장
var i = $(this).index(); // 0 1 2 3
//브라우저의 높이값*박스의 순서값은 현재 박스의 스크롤 위치값과 동일
var nowTop = i * ht;
//해당 스크롤 위치값으로 문서를 이동
$("html,body").stop().animate({"scrollTop":nowTop},500);
});
$(window).on("scroll",function(){
//변수 ht에 현재 브라우저의 넓이값 저장
var ht = $(window).height();
//변수 scroll에 현재 문서가 스크롤된 거리 저장
var scroll = $(window).scrollTop();
var dht = $(document).height() - ht;
/*
if(scroll>=ht*0 && scroll< ht*1){
$("#menu li").removeClass();
$("#menu li").eq(0).addClass("on");
}
if(scroll>=ht*1 && scroll< ht*2){
$("#menu li").removeClass();
$("#menu li").eq(1).addClass("on");
}
if(scroll>=ht*2 && scroll< ht*3){
$("#menu li").removeClass();
$("#menu li").eq(2).addClass("on");
}
if(scroll>=ht*3 && scroll< ht*4){
$("#menu li").removeClass();
$("#menu li").eq(3).addClass("on");
}
*/
for(var i=0; i<4; i++){
if(scroll >= ht*i && scroll < ht*(i+1)){
$("#menu li").removeClass();
$("#menu li").eq(i).addClass("on");
};
}
//section위에서 마우스 휠을 움직이면
$("section").on("mousewheel",function(event,delta){
var ht = $(window).height();
var dht = $(document).height() - ht;
var thistop = $(this).offset().top;
//마우스 휠을 올렸을때
if (delta > 0 && thistop > 0) {
//변수 prev에 현재 휠을 움직인 section에서 이전 section의 offset().top위치 저장
var prev = $(this).prev().offset().top;
//문서 전체를 prev에 저장된 위치로 이동
$("html,body").stop().animate({"scrollTop":prev},500);
return false;
//마우스 휠을 내렸을때
}else if (delta < 0 && thistop < dht) {
//변수 next에 현재 휠을 움직인 section에서 다음 section의 offset().top위치 저장
var next = $(this).next().offset().top;
//문서 전체를 next에 저장된 위치로 이동
$("html,body").stop().animate({"scrollTop":next},500);
return false;
}
});
});
'Study > Example & Plug-in' 카테고리의 다른 글
| 인터렉티브 웹 4 - z축 원근감 (0) | 2022.03.16 |
|---|---|
| 인터렉티브 웹 3 - 영상제어 (0) | 2022.03.16 |
| 인터렉티브 웹 1 - 3D rotate (0) | 2022.03.15 |
| 반응형 네비게이션 2 (0) | 2022.01.11 |
| 반응형 네비게이션 1 (0) | 2022.01.11 |
