139 lines
No EOL
3.6 KiB
Text
139 lines
No EOL
3.6 KiB
Text
<article class="blurb__wrapper">
|
|
<section>
|
|
<p>
|
|
Learn human anatomy quickly and easily by zooming, panning, hiding layers and interacting in real time.
|
|
</p>
|
|
</section>
|
|
<section>
|
|
<div class="before-and-after">
|
|
<div class='img background-img'></div>
|
|
<div class='img foreground-img'></div>
|
|
<input type="range" min="1" max="100" value="50" class="slider" name='slider' id="before-and-after__slider">
|
|
<div class='slider-button'></div>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
|
|
<script>
|
|
|
|
document.querySelector("#before-and-after__slider").addEventListener("input", (e) => {
|
|
const sliderPos = e.target.value;
|
|
// Update the width of the foreground image
|
|
document.querySelector('.foreground-img').style.width = `${sliderPos}%`;
|
|
// Update the position of the slider button
|
|
document.querySelector('.slider-button').style.left = `calc(${sliderPos}% - 18px)`;
|
|
});
|
|
|
|
</script>
|
|
|
|
<style>
|
|
article.blurb__wrapper {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 3rem;
|
|
padding: 2rem 4rem;
|
|
}
|
|
|
|
.blurb__wrapper section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.before-and-after {
|
|
position: relative;
|
|
width: 100%;
|
|
aspect-ratio: 300/200;
|
|
border: 2px solid white;
|
|
}
|
|
|
|
.before-and-after .img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 900px 100%;
|
|
}
|
|
|
|
.before-and-after .background-img {
|
|
background-image: url("https://picsum.photos/200/300");
|
|
border-radius: var(--r-1);
|
|
}
|
|
|
|
.before-and-after .foreground-img {
|
|
background-image: url("https://picsum.photos/200/301");
|
|
width: 50%;
|
|
|
|
border-radius: var(--r-1) 0 0 var(--r-1);
|
|
}
|
|
|
|
.before-and-after .slider {
|
|
position: absolute;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(242, 242, 242, 0.3);
|
|
outline: none;
|
|
margin: 0;
|
|
transition: all 0.2s;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.before-and-after .slider:hover {
|
|
background: rgba(242, 242, 242, 0.1);
|
|
}
|
|
|
|
.before-and-after .slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 6px;
|
|
height: 600px;
|
|
background: white;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.before-and-after .slider::-moz-range-thumb {
|
|
width: 6px;
|
|
height: 600px;
|
|
background: white;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.before-and-after .slider-button {
|
|
pointer-events: none;
|
|
position: absolute;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
background-color: white;
|
|
left: calc(50% - 18px);
|
|
top: calc(50% - 18px);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.before-and-after .slider-button:after {
|
|
content: "";
|
|
padding: 3px;
|
|
display: inline-block;
|
|
border: solid #5D5D5D;
|
|
border-width: 0 2px 2px 0;
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
.before-and-after .slider-button:before {
|
|
content: "";
|
|
padding: 3px;
|
|
display: inline-block;
|
|
border: solid #5D5D5D;
|
|
border-width: 0 2px 2px 0;
|
|
transform: rotate(135deg);
|
|
}
|
|
</style> |