So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at certain point into the HTML widget, so below is everything you will need!
You can download the complete template here
The Following are the css class names I used in the tutorial:
rebootheader
rebootcontent
rebootglow
rebootfakeglow
The Following code goes into the rebootheader Container under the custom css:
/* css goes in .rebootheader */
selector {
--blob-size:200px;
}
selector .rebootcontent{
-webkit-backdrop-filter: blur(10px); /* Safari support */
backdrop-filter: blur(10px);
height: 100%;
}
selector .rebootglow{
width: var(--blob-size);
height: 80%;
left: calc(50% - calc(var(--blob-size)/2));
filter: blur(40px);
z-index: -1;
opacity: 0;
transition: opacity 300ms 300ms linear;
}
selector .rebootfakeglow {
visibility: hidden;
z-index: -1;
height: 100%;
}
The Following code goes into the HTML widget:
<script type="text/javascript">
const cards = document.querySelectorAll(".rebootheader");
window.addEventListener("mousemove", (ev) => {
cards.forEach((e) => {
const rebootglow = e.querySelector(".rebootglow");
const rebootfakeglow = e.querySelector(".rebootfakeglow");
const rec = rebootfakeglow.getBoundingClientRect();
rebootglow.animate(
[
{
transform: `translate(${
(ev.clientX - rec.left) - (rec.width / 2)
}px,${(ev.clientY - rec.top) - (rec.height / 2)}px)`
}
],
{
duration: 300,
fill: "forwards"
}
);
rebootglow.style.opacity = "1";
});
});
</script>