Wix Studio Tips and Tricks

<div class="wrapper">

<div class="hero">

<h1 class="hero__heading">Travel Guide</h1>

</div>

<div class="hero hero--secondary" aria-hidden="true" data-hero>

<p class="hero__heading">Plan Your Tour</p>

</div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>

<style>

@import url("https://fonts.googleapis.com/css?family=Montserrat:700");

* {

box-sizing: border-box;

}

body {

font-family: Montserrat, sans-serif;

margin: 0;

padding: 0;

background-color: rgb(9, 14, 23);

color: #ffffff;

overflow-x: hidden;

}

.wrapper {

position: relative;

width: 100%;

}

.hero {

min-height: 100vh;

padding: clamp(1rem, 2vw, 5rem);

display: flex;

align-items: center;

justify-content: center;

text-align: center;

}

.hero--secondary {

--mask: radial-gradient(circle at var(--x, 70%) var(--y, 50%), black 15%, transparent 0);

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: linear-gradient(45deg, #FF5733, #FFC300, #DAF7A6);

color: rgb(9, 14, 23);

-webkit-mask-image: var(--mask);

mask-image: var(--mask);

pointer-events: none;

}

.hero__heading {

font-size: clamp(2rem, 5vw, 8rem);

text-transform: uppercase;

margin: 0;

max-width: fit-content;

}

</style>

<!-- JS: Mouse movement interaction -->

<script>

const hero = document.querySelector('[data-hero]');

window.addEventListener('mousemove', (e) => {

const { clientX, clientY } = e;

const x = Math.round((clientX / window.innerWidth) * 100);

const y = Math.round((clientY / window.innerHeight) * 100);

gsap.to(hero, {

'--x': `${x}%`,

'--y': `${y}%`,

duration: 0.3,

ease: 'sine.out',

});

});

</script>