43 lines
1.8 KiB
Text
43 lines
1.8 KiB
Text
<article class="blurb__wrapper">
|
|
<section>
|
|
<p>
|
|
<em>Complete</em> and <em>easy-to-use</em> virtual guide for learning, understanding, and visualizing the complexities of human anatomy in 3D.
|
|
Includes information and images for each anatomical system and part, multiple options to interact with the <em>3D anatomy</em> models (hiding, fading, etc), and much more.
|
|
</p>
|
|
<p class="hide-on-mobile">
|
|
The <%= site.site_name %> app can be downloaded and tested for free, which contains the skeleton and ligaments, other anatomical systems can be purchased separately.
|
|
The anatomy app is available on <em>most platforms</em> (android, iOS, windows and mac) and can be used on your phone, tablet or desktop pc.
|
|
</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="59" 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>
|
|
.before-and-after .background-img {
|
|
background-image: url('./assets/images/slider-1.png');
|
|
background-position-x: -1px;
|
|
}
|
|
|
|
.before-and-after .foreground-img {
|
|
background-image: url('./assets/images/slider-2.png');
|
|
background-position-x: -1px;
|
|
width: 59%;
|
|
}
|
|
</style>
|