인터렉티브 웹 6 - 가로스크롤

2022. 3. 18. 10:38ㆍ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>ex8</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/prefixfree.min.js" defer></script>
	<script src="js/custom.js" defer></script>
</head>
<body>
	<h1><img src="img/logo.png" /></h1>
	
	<ul id="sns">
		<li><a href="#"><i class="fa fa-facebook"></i></a></li>
		<li><a href="#"><i class="fa fa-twitter"></i></a></li>
		<li><a href="#"><i class="fa fa-envelope"></i></a></li>
		<li><a href="#"><i class="fa fa-youtube"></i></a></li>
		<li><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
	</ul>
	
	<ul id="navi">
		<li>Artwork 01 ~</li>
		<li>Artwork 06 ~</li>
		<li>Artwork 11 ~</li>
		<li>Artwork 16 ~</li>
	</ul>
	

	<p class="txt">Loem <span>Ipsum</span><br /><em>Lorem Ipsum is simply dummy text.</em></p>
	
	<section>
		<article>
			<h2><a href="img/pic1.jpg">Art Work 01 </a></h2>
			<strong><img src="img/s1.jpg" /></strong>
			<p><img src="" /></p>
			<em>Artwork description comes here. <br />2015.02.20</em>
			<span>close</span>
		</article>
		
		<article>
			<h2><a href="img/pic2.jpg">Art Work 02 </a></h2>
			<strong><img src="img/s2.jpg" /></strong>
			<p><img src="" /></p>
			<em>Artwork description comes here. <br />2015.02.20</em>
			<span>close</span>
		</article>
		
		<article>
			<h2><a href="img/pic3.jpg">Art Work 03</a></h2>
			<strong><img src="img/s3.jpg" /></strong>
			<p><img src="" /></p>
			<em>Artwork description comes here. <br />2015.02.20</em>
			<span>close</span>
		</article>
		
		<article>
			<h2><a href="img/pic4.jpg">Art Work 04 </a></h2>
			<strong><img src="img/s4.jpg" /></strong>
			<p><img src="" /></p>
			<em>Artwork description comes here. <br />2015.02.20</em>
			<span>close</span>
		</article>
		
		<article>
			<h2><a href="img/pic5.jpg">Art Work 05 </a></h2>
			<strong><img src="img/s5.jpg" /></strong>
			<p><img src="" /></p>
			<em>Artwork description comes here. <br />2015.02.20</em>
			<span>close</span>
		</article>
		
		<article>
			<h2><a href="img/pic6.jpg">Art Work 06 </a></h2>
			<strong><img src="img/s6.jpg" /></strong>
			<p><img src="" /></p>
			<em>Artwork description comes here. <br />2015.02.20</em>
			<span>close</span>
		</article>
		
		<article>
			<h2><a href="img/pic7.jpg">Art Work 07 </a></h2>
			<strong><img src="img/s7.jpg" /></strong>
			<p><img src="" /></p>
			<em>Artwork description comes here. <br />2015.02.20</em>
			<span>close</span>
		</article>
		
		<article>
			<h2><a href="img/pic8.jpg">Art Work 08 </a></h2>
			<strong><img src="img/s8.jpg" /></strong>
			<p><img src="" /></p>
			<em>Artwork description comes here. <br />2015.02.20</em>
			<span>close</span>
		</article>
		
		<article>
			<h2><a href="img/pic9.jpg">Art Work 09 </a></h2>
			<strong><img src="img/s9.jpg" /></strong>
			<p><img src="" /></p>
			<em>Artwork description comes here. <br />2015.02.20</em>
			<span>close</span>
		</article>
		
		<article>
			<h2><a href="img/pic10.jpg">Art Work 10 </a></h2>
			<strong><img src="img/s10.jpg" /></strong>
			<p><img src="" /></p>
			<em>Artwork description comes here. <br />2015.02.20</em>
			<span>close</span>
		</article>
		
		<article>
			<h2><a href="img/pic11.jpg">Art Work 11 </a></h2>
			<strong><img src="img/s11.jpg" /></strong>
			<p><img src="" /></p>
			<em>Artwork description comes here. <br />2015.02.20</em>
			<span>close</span>
		</article>
		
		<article>
			<h2><a href="img/pic12.jpg">Art Work 12 </a></h2>
			<strong><img src="img/s12.jpg" /></strong>
			<p><img src="" /></p>
			<em>Artwork description comes here. <br />2015.02.20</em>
			<span>close</span>
		</article>
		
		<article>
			<h2><a href="img/pic13.jpg">Art Work 13 </a></h2>
			<strong><img src="img/s13.jpg" /></strong>
			<p><img src="" /></p>
			<em>Artwork description comes here. <br />2015.02.20</em>
			<span>close</span>
		</article>
		
		<article>
			<h2><a href="img/pic14.jpg">Art Work 14 </a></h2>
			<strong><img src="img/s14.jpg" /></strong>
			<p><img src="" /></p>
			<em>Artwork description comes here. <br />2015.02.20</em>
			<span>close</span>
		</article>
		
		<article>
			<h2><a href="img/pic15.jpg">Art Work 15 </a></h2>
			<strong><img src="img/s15.jpg" /></strong>
			<p><img src="" /></p>
			<em>Artwork description comes here. <br />2015.02.20</em>
			<span>close</span>
		</article>
		
		<article>
			<h2><a href="img/pic16.jpg">Art Work 16 </a></h2>
			<strong><img src="img/s16.jpg" /></strong>
			<p><img src="" /></p>
			<em>Artwork description comes here. <br />2015.02.20</em>
			<span>close</span>
		</article>
		
		<article>
			<h2><a href="img/pic17.jpg">Art Work 17 </a></h2>
			<strong><img src="img/s17.jpg" /></strong>
			<p><img src="" /></p>
			<em>Artwork description comes here. <br />2015.02.20</em>
			<span>close</span>
		</article>
		
		<article>
			<h2><a href="img/pic18.jpg">Art Work 18 </a></h2>
			<strong><img src="img/s18.jpg" /></strong>
			<p><img src="" /></p>
			<em>Artwork description comes here. <br />2015.02.20</em>
			<span>close</span>
		</article>
		
		<article>
			<h2><a href="img/pic19.jpg">Art Work 19 </a></h2>
			<strong><img src="img/s19.jpg" /></strong>
			<p><img src="" /></p>
			<em>Artwork description comes here. <br />2015.02.20</em>
			<span>close</span>
		</article>
		
		<article>
			<h2><a href="img/pic20.jpg">Art Work 20 </a></h2>
			<strong><img src="img/s20.jpg" /></strong>
			<p><img src="" /></p>
			<em>Artwork description comes here. <br />2015.02.20</em>
			<span>close</span>
		</article>		
	</section>
	
	<p class="copyright">2015 Seong-il, Choi All right reserved.</p>
</body>
</html>

 

 

CSS

@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Poiret+One);

/*  Reset CSS  */
* { margin:0;  padding:0;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#555; }
img { border:0;}
body { width:100%; min-width:1400px; height:4000px; font-family:poiret one; background:#ddd;}



/*로고*/
h1 { position:fixed; top:20px; right:20px; z-index:5;}
h1 img { box-shadow:5px 5px 3px #888;}

/*sns*/
#sns { position:fixed; top:30px; left:60px;}
#sns li { float:left; margin-right:30px;}
#sns li i { font-size:25px; color:#fff; transition:all 0.5s;}
#sns li:hover i { transform:scale(1.5); color:#888;}

/*메뉴*/
#navi { position:fixed; top:50%; left:60px; margin-top:-280px;}
#navi li { float:left; font-size:16px; font-weight:bold; color:#fff; margin-right:25px; transition:all 0.5s; cursor:pointer;}
#navi li:hover { color:#888;}
#navi li.on { color:#888;}

/*슬로건*/
.txt { position:fixed; top:50%; right:20px; margin-top:-80px;  font-size:100px; color:#fff; text-align:right; line-height:0.5;}
.txt span { color:#aaa;}
.txt em { font-family:arial; font-size:18px; font-style:normal; color:#888; letter-spacing:1px; }

/*레이아웃*/
section { position:fixed; top:50%; left:0px; margin-top:-250px; width:4600px; height:500px; }
article { position:relative; top:50%; width:180px; height:400px; margin:10px; margin-top:-200px; box-sizing:border-box; float:left; background:#fff; border-radius:5px; box-shadow:3px 3px 3px #bbb; overflow:hidden; transition:all 0.7s; }

/*포폴 제목*/
article h2 { position:absolute; top:300px; right:0px; width:100%; height:50px; box-sizing:border-box; padding-left:20px; background:#111;  opacity:0.4; z-index:2; cursor:pointer; transition:all 0.5s; }
article:hover h2 { opacity:0.8;}
article h2 a { font-size:14px; font-weight:bold; line-height:3.5; color:#fff; letter-spacing:2px; transition:all 0.5s;}

/*포폴 썸네일*/
article strong { display:block; position:absolute; left:0px; top:0px;  width:100%; height:300px; opacity:0.4; overflow:hidden; text-align:center; transition:all 0.5s; }
article:hover strong { opacity:1; }
article strong img {height:300px; width:auto;}


/*포폴 이미지*/
article p { position:absolute; top:50%; right:0%; z-index:1; margin-top:0px; width:100%; height:0px; text-align:center; overflow:hidden; background-color:#fff; opacity:0; transition:all 0.8s; }
article p img { width:auto; height:100%; }

/*포폴 설명*/
article em { position:absolute; bottom:50px; right:-300px; z-index:2; display:inline-block; box-sizing:border-box; padding:10px 20px; background:#000; color:#fff; opacity:0.8; transition:all 1s;}

/*닫기버튼*/
section span { position:absolute; top:110px; right:-300px; z-index:3; font-size:20px; color:#fff; cursor:pointer;}

/*copyright*/
.copyright { position:fixed; bottom:20px; right:30px; font:12px/1.5 arial; letter-spacing:4px; color:#999; text-align:center;}

/*클릭시 변형된 모습*/
article.on { width:780px; height:500px; margin-top:-250px; }
article.on h2 { top:100px; height:100px; background:#111; opacity:0.3;}
article.on h2 a { font-size:30px; color:#fff; }
article.on strong { opacity:0;}
article.on p { height:500px; margin-top:-250px; opacity:1;}
article.on em { right:20px; }
article.on span { right:20px;}

 

 

JS


//브라우저를 스크롤 할때
$(window).on("scroll",function(){
    // 변수 scroll에 현재 스크롤 한 만큼의 거리를 저장
    var scroll = $(this).scrollTop();		
    //section의 left값을 스크롤한 거리만큼 마이너스 값으로 이동
    $("section").stop().animate({"left":-scroll},600);
});



// 페이지 로딩시 화면 제일 아래쪽으로 자동 스크롤하기

//변수 numAc에 article의 갯수 저장
var numAc = $("article").size();	
//변수 widSec에 article의 넓이에 개수를 곱한 값을 저장(article요소의 총 넓이)
var widSec = 200*numAc;
//변수 widTital에 widSec에 600을 더한 값을 저장(패널이 하나 열렸을시의 총 넓이)
var widTotal = widSec+600;

//변수 widTotal에 저장된 넓이를 section의 넓이값으로 대입
$("section").width(widTotal);
//변수 widSec에 저장된 넓이를 body의 높이값으로 대입
$("body").height(widSec);	
//문서의 스크롤 거리를 변수 widSec의 넓이만큼 변경	
$("html,body").animate({"scrollTop":widSec},2000);	







// 각각 article 요소의 열리고 닫힘 효과 넣기

//각 article의 h2를 클릭했을 때
$("article h2").on("click",function(e){
    e.preventDefault();
    
    //변수 index에 현재 클릭한 h2의 부모인 article의 순서값을 저장
    var index = $(this).parent().index();
    //변수 src에 현재 클릭한 h2의 자식 요소인 a의 href값을 저장
    var src = $(this).children("a").attr("href");	
    //변수 posAc에 현재 클릭한 article의 순서값에 200을 곱한 값을 저장
    var posAc = 200*index;
    
    //먼저 모든 article의 "on"클래스를 지움
    $("article").removeClass("on");		
    //내가 클릭한 순서의 aritcle에만 "on"클래스를 추가
    $(this).parent().addClass("on");
    //모든 article p img의 이미시 속성값을 지움
    $("article p img").attr({"src":""});
    //현재 클릭된 article의 형제요소중 p를 찾아 다시 그 자식인 img의 주소값을 변수 src값으로 변경
    $(this).siblings("p").children("img").attr({"src":src});	
    //문서의 스크롤 위치값을 변수 posAc 값으로 변경
    $("html,body").scrollTop(posAc);
});

//닫기 버튼 클릭시 
$("span").on("click",function(){
    //모든 article의 "on"클래스 제거
    $("article").removeClass("on");
});





// 메뉴 클릭시 5개씩 이동

$("#navi li").on("click",function(){
var i = $(this).index();
var posNavi = 1000*i;  
$("#navi li, article").removeClass();
$(this).addClass("on");  
$("html,body").scrollTop(posNavi);
});

 

interective8 (2).zip
1.03MB

 

 

 

 

'Study > Example & Plug-in' 카테고리의 다른 글

DatePicker  (0) 2024.02.09
인터렉티브 웹 6 - 시간에 따라 배경이 달라지는 시계  (0) 2022.03.17
인터렉티브 웹 5-2 - 3D 회전 플러그인  (0) 2022.03.17
인터렉티브 웹 5-2 - 스틸컷 마우스 클릭,드래그  (0) 2022.03.17
인터렉티브 웹 5 - 스틸컷 마우스제어  (0) 2022.03.17

관련글

댓글 0

티스토리툴바