2.0.1 • Published 4 years ago
svelte-c-reveal v2.0.1
Reveal
Simple Svelte (<3) component for reveal on scroll
Usage
<script>
import Reveal from "svelte-c-reveal";
</script>
<Reveal> Content to be revealed </Reveal>
<Reveal trigger="0.1" reveal="fadeInUp">
Trigger when 10% is in viewport
</Reveal>
<Reveal trigger="0.5" reveal="fadeInUp">
Trigger in center of viweport (50%)
</Reveal>Reveal and Hide
<script>
import Reveal from "svelte-c-reveal";
</script>
<Reveal trigger="0.5" reveal="fadeInUp" hide="fadeOutDown">
<h1>My revealed content</h1>
<p>Hello I'm here!</p>
</Reveal>Props
| Name | Value | Desc |
|---|---|---|
reveal | String | Reveal effect |
hide | String | Reveal out (hide) effect |
trigger | Float | (0.0 to 1.0) When the reveal will trigger -> (viewport height * trigger) |
duration | Css value | (number) Duration of the transition in seconds without "s" |
delay | Css value | (number) Time delayed in seconds without "s" |
Effects availables
| Name |
|---|
fadeIn |
fadeOut |
fadeInUp default |
fadeOutUp |
fadeInDown |
fadeOutDown |
fadeInRotateX |
fadeOutRotateX |
fadeInRotateY |
fadeOutRotateY |
fadeInLeft |
fadeOutLeft |
fadeInRight |
fadeOutRight |
Custom effects
<script>
import Reveal from "svelte-c-reveal";
</script>
<style>
.myfx {
animation-name: myanimation;
}
@keyframes myanimation {
0% {
opacity: 0;
transform: rotate(90deg) scale(0);
}
100% {
opacity: 1;
transform: rotate(0deg) scale(1);
}
}
</style>
<Reveal trigger="0.5" reveal="myfx"> The center of viweport </Reveal>