Super Header Slider

index.html

<div id="left-side" class="side">
  <h2 class="title">
    Sometimes a simple header is 
    <span class="fancy">better</span>      
  </h2>
</div>
<div id="right-side" class="side">
  <h2 class="title">
    Sometimes a simple header is  
    <span class="fancy">better</span>     
  </h2>
</div>

<a id="source-link" class="meta-link" href="https://superlist.com" target="_blank">
  <i class="fa-solid fa-link"></i>
  <span class="roboto-mono">Source</span>
</a>

<a id="yt-link" class="meta-link" href="https://youtu.be/zGKNMm4L-r4" target="_blank">
  <i class="fa-brands fa-youtube"></i>
  <span>2 min tutorial</span>
</a>

script.js

const left = document.getElementById("left-side");

const handleMove = e => {
  left.style.width = `${e.clientX / window.innerWidth * 100}%`;
}

document.onmousemove = e => handleMove(e);

document.ontouchmove = e => handleMove(e.touches[0]);

scripts

<script src="https://kit.fontawesome.com/944eb371a4.js"></script>

style.css

:root {
  --yellow: rgb(253, 216, 53);
  --blue: rgb(98, 0, 234);
  --dark: rgb(20, 20, 20);
}

body {  
  background-color: var(--dark);
  margin: 0px;
}

.side {
  display: grid;
  height: 100vh;
  overflow: hidden;
  place-items: center;
  position: absolute;
  width: 100%;
}

.side .title {
  font-family: "Rubik", sans-serif;
  font-size: 8vw;
  margin: 0px 10vw;
  width: 80vw;
}

.side .fancy {
  font-family: "Lobster", cursive;
  font-size: 1.3em;
  line-height: 0.8em;
}

#left-side {
  background-color: var(--blue);
  width: 60%;
  z-index: 2;
}

#left-side .title {  
  color: white;  
}

#left-side .fancy {
  color: var(--yellow);
}

#right-side {
  background-color: var(--yellow);
}

#right-side .title {
  color: var(--dark);
}

#right-side .fancy {
  color: white;
}

/* -- YouTube Link Styles -- */

#source-link {
  top: 60px;
}

#source-link > i {
  color: rgb(94, 106, 210);
}

#yt-link {  
  top: 10px;
}

#yt-link > i {
  color: rgb(239, 83, 80);
}

.meta-link {
  align-items: center;
  backdrop-filter: blur(3px);
  background-color: rgba(40, 40, 40, 0.9);
  border-radius: 6px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;  
  display: inline-flex;
  gap: 5px;
  left: 10px;
  padding: 10px 20px;
  position: fixed;
  text-decoration: none;
  transition: background-color 350ms, border-color 350ms;
  z-index: 10000;
}

.meta-link:hover {
  background-color: rgb(40, 40, 40);
}

.meta-link > i, .meta-link > span {
  height: 20px;
  line-height: 20px;
}

.meta-link > span {
  color: white;
  font-family: "Rubik", sans-serif;
  transition: color 600ms;
}

super-header-slider.markdown

Super Header Slider

A Pen by vineeth on CodePen.

License.