Código
function smoothstep(min: number, max: number, value: number): number {
if (min === max) return 0;
const t = Math.max(0, Math.min(1, (value - min) / (max - min)));
return t * t * (3 - 2 * t);
}
Parámetros
| Parámetro | Descripción |
|---|---|
min | Valor donde inicia la transición. |
max | Valor donde finaliza la transición. |
value | Valor actual que se mapea a la curva suavizada. |
Ejemplo en Nuxt
<script setup lang="ts">
const smoothstep = (min: number, max: number, value: number) => {
if (min === max) return 0
const t = Math.max(0, Math.min(1, (value - min) / (max - min)))
return t * t * (3 - 2 * t)
}
const opacity = ref(0)
const handleScroll = () => {
opacity.value = smoothstep(0, 300, window.scrollY)
}
onMounted(() => {
handleScroll()
window.addEventListener('scroll', handleScroll)
})
onUnmounted(() => {
window.removeEventListener('scroll', handleScroll)
})
</script>
<template>
<section class="hero" :style="{ opacity }">
<h1>Un título que aparece suavemente</h1>
</section>
</template>
<style scoped>
.hero {
min-height: 60vh;
display: grid;
place-items: center;
font-size: clamp(2rem, 6vw, 4rem);
transition: opacity 0.1s linear;
}
</style>