<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#container{
/* position: fixed; */
/* top: 0; left: 0; */
/* width: 100%; height: 100%; */
/* height: 5000px; */
/* background: linear-gradient(45deg, lightcyan, dodgerblue, darkseagreen); */
background: #0F4C81;
}
.navi{
display: flex;
position: fixed;
top: 20px;
right: 20px;
}
.navi li{
margin-left: 10px;
color: #fff;
}
.track{
display: flex; flex-wrap: wrap;
align-items: center;
position: fixed;
left: 0;
top: 50%; transform: translateY(-50%);
/* width: calc((270px + 20px) * 20); */
}
.item{
margin: 0 10px;
width: 270px;
height: 380px;
background-image: url(images/p1.jfif);
background-size: cover;
background-position: center top;
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 3px 3px 3px rgba(0,0,0,0.65);
}
.item .txt{
position: absolute;
bottom: 0; left: 0;
width: 100%; box-sizing: border-box;
padding: 16px 12px; color: #fff;
background-color: rgba(0,0,0,0.65);
}
</style>
</head>
<body>
<div id="container">
<ul class="navi">
<li>Artwork 01~05</li>
<li>Artwork 06~10</li>
<li>Artwork 11~15</li>
<li>Artwork 16~20</li>
</ul>
<div class="track">
<!-- <div class="item">
<div class="txt">
<h3>Artwork 01</h3>
<p>동해물과 백산이 마르고 닳도록 하느님이 보우하사 우리나라 만세</p>
</div>
</div> -->
</div>
</div>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
var src = ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg", "pic5.jpg", "pic6.jpg", "pic7.jpg", "pic8.jpg", "pic9.jpg", "pic10.jpg"];
var num = 0;
var srcLeng = src.length;
// var winWidth = $(window).width();
for(i=0; i<20; i++){
var idx = num % srcLeng;
var item = `
<div class="item">
<img src="image1/${src[idx]}">
<div class="txt">
<h3>Artwork ${i+1}</h3>
<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세</p>
</div>
</div>
`
$(".track").append(item);
num++;
}
var itemLeng = $(".track .item").length;
var itemWidth = $(".track .item").width();
var itemMarg = 20;
var trackWidth = (itemWidth + itemMarg) * itemLeng;
$(".track").width(trackWidth);
$("#container").height(trackWidth);
$(window).on("scroll", function() {
var scr= $(this).scrollTop();
$(".track").css("left",-scr);
});
function setItem(elem, itemW, itemH) {
elem.siblings().stop().animate({
"width" : 270,
"height" : 380
});
elem.stop().animate({
"width" : itemW,
"height" : itemH
}).find("img").css({
"width" : itemW,
"height" : itemH
});
expanded = itemW;
}
var expanded; // 확장된 item의 너비값
$(".item").on("click", function() {
var nW = $(this).find("img")[0].naturalWidth;
var nH = $(this).find("img")[0].naturalHeight;
$(".track").width(trackWidth + (nW - itemWidth));
var rat = nW / nH;
/*
rat = 1 -> 정방형
rat > 1 -> 가로가 긴 이미지
rat < 1 -> 세로가 긴 이미지
*/
if(rat === 1 && nH >= 700){
setItem($(this), 700,700);
} else if(rat > 1 && nW >= 1000) {
setItem($(this), 1000, 1000*rat);
} else if(rat < 1 && nH >= 700) {
setItem($(this), 700*rat, 700);
} else {
setItem($(this), nW, nH);
}
// $(this).stop().animate({
// "width" : nW,
// "height" : nH
// }).siblings().stop().animate({
// "width" : 270,
// "height" : 380
// });
/*
확장된 item을 화면 중앙으로 위치시키기
*/
// var sct = $(this).scrollTop();
// sct = ((winWidth/2) - itemMarg);
// $("html, body").stop().animate({
// "scrollTop" : sct
// });
var j = $(this).index(); // 클릭한 게 몇 번째 인지
var w = ($(window).width() / 2) + (itemMarg / 2);
var Y = w - expanded / 2;
var X = (itemWidth + itemMarg) * j; // 클릭한 너비 총 합
$("html, body").stop().animate({
"scrollTop" : X - Y
});
});
</script>
</body>
</html>
Engineering is the closest thing to magic that exists in the world.