<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript for frontend developer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="bg"></div>
<div class="container">
<h1>Hover over the links</h1>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I
will <a data-bg="https://s3-us-west-2.amazonaws.com/s.cdpn.io/485050/freedom.jpg"
href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/485050/freedom.jpg" target="_blank">freedom</a> you a
account of the system, and expound the actual teachings of the great of the truth, <a
data-bg="https://s3-us-west-2.amazonaws.com/s.cdpn.io/485050/travel.jpg"
href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/485050/travel.jpg" target='_blank'>travel</a>
master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is, but <a
data-bg="https://s3-us-west-2.amazonaws.com/s.cdpn.io/485050/explore.jpg"
href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/485050/explore.jpg" target="_blank">explore</a> those who
do not know how to pursue pleasure rationally encounter consequences that are <a
data-bg="https://s3-us-west-2.amazonaws.com/s.cdpn.io/485050/holiday.jpg"
href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/485050/holiday.jpg" target="_blank">holidays</a> painful.
</div>
<script src="script.js"></script>
</body>
</html>/* RESET RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
--red: firebrick;
--white: white;
}
* {
padding: 0;
margin: 0;
}
a {
color: inherit;
text-decoration: none;
}
body {
font: 22px/1.5 sans-serif;
}
h1 {
text-align: center;
margin: 20px 0;
}
/* MAIN STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
max-width: 800px;
margin: 0 auto;
width: 100%;
}
.container a {
border-bottom: 2px dashed var(--red);
position: relative;
}
.container a:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
min-height: 30px;
transform: translate(-50%, -50%) scaleX(0);
padding: 10px;
z-index: -1;
transform-origin: 50% 50%;
background: var(--white);
transition: all 0.3s ease-out;
}
.bg {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: all 0.3s ease-out;
}
.bg-show .bg {
opacity: 1;
z-index: 1;
}
.container a:hover {
z-index: 2;
border-bottom-color: transparent;
color: var(--red);
}
.container a:hover:before {
transform: translate(-50%, -50%) scaleX(1);
}const links = document.querySelectorAll(".container a");
const bg = document.querySelector(".bg");
const showClss = "bg-show"
//es6문법
for (const link of links) {
const img = new Image(); //해당 이미지를 마우스 올리기 전에 네트워크로 다운 받아져서 빠르게 보여줄수 있음
img.src = link.dataset.bg;
//img.src = link.getAttribute("data-bg"); //link.dataset.bg;와 같은것
link.addEventListener("mouseenter", function (event) {
bg.style.backgroundImage = `url(${event.target.dataset.bg})`;
document.body.classList.add(showClss);
});
link.addEventListener("mouseleave", function () {
document.body.classList.remove(showClss);
});
}'웹 개발 > 바닐라js' 카테고리의 다른 글
| [따라만들기] multiple slider (0) | 2022.02.20 |
|---|---|
| [따라만들기] cookie popup (0) | 2022.02.20 |
| [따라만들기] lightbox (0) | 2022.02.20 |
| [따라만들기] tabs menu (0) | 2022.02.20 |
| [따라만들기] Accodion menu (0) | 2022.02.20 |
[따라만들기] Hover Animation