Membuat fitur efek dengan HTML dan CSS penasaran seperti apa ok langsung saja kita buat file HTML terlebidahulu
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<div class="container">
<div class="image">
</div>
<div class="image"></div>
</div>
</body>
</html>
Kemudian buat file css untuk merubah tampilan
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
position: relative;
overflow: hidden;
--width: 800px;
--height: 400px;
width: var(--width);
height: var(--height);
}
.image {
position: absolute;
height: 100%;
background: url(../img/web-development.png);
background-size: var(--width) var(--height);
}
.image:first-child{
right: 0;
width: 100%;
background-position: center left;
}
.image:last-child{
right: 0;
width: calc( 100% - var(--x,50%));
background-position: center right;
filter: grayscale(100%);
box-shadow: inset 2px 0 0 #111, -2px 0 0 #111;
}
Selanjutnya yang terakhit kita buat fungsi efek mengunakan javascript
<script type="text/javascript">
document.querySelectorAll('.container').forEach((elem) => {
let x, width
elem.onmouseenter = () => {
const size = elem.getBoundingClientRect()
x = size.x
width = size.width
}
elem.onmousemove = (e) => {
const horizontal = ((e.clientX - x) / width) * 100
elem.style.setProperty('--x', horizontal + '%')
}
})
0 Komentar