이미지 출처 : unsplash.com
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>트위터 이미지 불러오기</title>
<link href="twt_blur.css" rel="stylesheet" type="text/css"/>
<script src="twt_blur.js" defer></script>
</head>
<body>
<!-- 이미지 출처 : https://unsplash.com/ -->
<section id="sect">
<div class="blur_img"><img src="./img-1.jpg"></div>
<div class="blur_img"><img src="./img-2.jpg"></div>
<div class="blur_img"><img src="./img-3.jpg"></div>
<div class="blur_img"><img src="./img-4.jpg"></div>
</section>
<div id="modal" class="off">
<button id="md_close"></button>
<div id="md_img"></div>
</div>
</body>
</html>
CSS
@charset "utf-8";
*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;min-height:100vh;}
img{vertical-align:middle;}
#btn{
display:block;
margin:1rem auto;padding:1em 2em;}
.blur_img{
position:relative; overflow:hidden;
width:40vw;
aspect-ratio:16/9;
margin:3rem auto;
background:#000;
border-radius:1rem;
cursor:pointer;}
.blur_img::after{
content:'이미지 불러오기';display:block;position:absolute;
left:50%;top:50%;
transform:translate(-50%, -50%);
padding:.5em 1.25em .65em;
background:rgba(0,0,0,.5); border-radius:10rem;
font-weight:bold;color:#fff;
pointer-events:none;}
.blur_img img{
transform:scale(1.5) translateY(-20%);
width:100%;height:auto;
filter:blur(8px);
transition:transform .3s;
pointer-events:none;}
.blur_img.onLoad{
aspect-ratio:unset;
border-radius:2px;}
.blur_img.onLoad::after{display:none;}
.blur_img.onLoad img{
transform:scale(1) translateY(0);
filter:none;
transition:transform .3s, filter 0s .3s;}
/* */
#modal{
display:flex;flex-wrap:wrap;
justify-content:center;align-items:center;
position:fixed; z-index:100;
top:0;left:0;
width:100%;height:100vh;
background:rgba(0,0,0,.8);
backdrop-filter:blur(10px);}
#modal.off{display:none;}
#md_close{
position:absolute; z-index:1000;
top:2rem;left:2rem;
width:3rem;height:3rem;
cursor:pointer;
background:rgba(0,0,0,.5);
border:none;
border-radius:50%;
cursor:pointer;}
#md_close::before,
#md_close::after{
content:'';display:block;position:absolute;
top:25%;left:45%;
width:3px;height:50%;
background:#fff;
pointer-events:none;}
#md_close::before{transform:rotate(45deg);}
#md_close::after{transform:rotate(-45deg);}
#md_img{ /* outline:3px solid red; */
display:flex;
justify-content:center;align-items:center;
position:relative; overflow:hidden;
text-align:center;}
#md_img.vw{width:100vw;}
#md_img.vh{height:100vh;}
#md_img.vw img{width:90%;height:auto;}
#md_img.vh img{width:auto;height:90%;}
JS
const sect = document.getElementById('sect');
const modal = document.getElementById('modal');
const md_img = document.getElementById('md_img');
const md_close = document.getElementById('md_close');
const blur_img = document.getElementsByClassName('blur_img');
let eq = 0;
let img,url;
sect.addEventListener('click',onLoadImage);
function onLoadImage(e){
e = e || window.event;
if(!e.target.classList.contains('blur_img')){ return; }
if(e.target.classList.contains('onLoad')){
onModal(e.target);
return;
}
e.target.classList.add('onLoad');
}
function onModal(div){
img = div.getElementsByTagName('IMG')[0];
url = img.src;
eq = Array.prototype.indexOf.call(blur_img,div);
console.log(eq);
if(img.offsetWidth > img.offsetHeight){
md_img.classList.add('vw');
md_img.classList.remove('vh,eq');
}else if(img.offsetWidth < img.offsetHeight){
md_img.classList.add('vh');
md_img.classList.remove('vw,eq');
}else{
md_img.classList.remove('vw,vh');
}
md_img.innerHTML = `<img src="${url}" alt=""/>`;
modal.classList.remove('off');
md_close.addEventListener('click', ()=>{closeModal(eq)});
}
function closeModal(idx){
modal.classList.add('off');
blur_img[idx].classList.remove('onLoad');
return;
}'CSS&JS > ⚡Thinkers' 카테고리의 다른 글
| 밑에서 떠오르는 텍스트 (잘려보이고, 밑에서 떠오름) (0) | 2021.08.30 |
|---|---|
| [vanilla JS] 터치 슬라이더, 그랩 슬라이더 (0) | 2021.08.02 |
| (vanilla JS) touch event로 snap 되는 grab slider 만들기 (0) | 2021.07.13 |
| hover시 전체 배경으로 되는... 하여간 다이나믹한 메뉴..뭐시기..뭐.. (0) | 2021.07.01 |
| (JS)wheel로 가로 스크롤 및 scroll indicator 만들기 (2) | 2021.07.01 |