The ParallaxText from pol-ui represents a component that animates a text as a infinite carrousel with a parallax effect.
When you scroll, the text will move at a faster speed than usual and when inverting the scroll, the text will also invert the direction.
import { ParallaxText } from "pol-ui";
Default ParallaxText
Default ParallaxText
import { ParallaxText } from "pol-ui";
const ParallaxTextComponent = () => {
const text = "Parallax text in Pol-ui";
return (
<section>
<ParallaxText velocity={-5} className="">
{text}
</ParallaxText>
<ParallaxText velocity={1}>{text}</ParallaxText>
<ParallaxText>{text}</ParallaxText>
</section>
);
};
export default ParallaxTextComponent;
Props
Prop name | Type | Default | Description |
---|---|---|---|
children | string | - | The text to be displayed. |
velocity | number | 5 | The speed of the parallax effect. |
className | string | - | The class to be applied to the component. |
as | T | 'span' | The HTML tag to be used. |
resistence | number | 1000 | The resistence of the parallax effect. |
renderedElements | number | Math.ceil(100 / children.length) | Number of elements to render. |
theme | ParallaxTextTheme | {} | The theme to be applied to the component. |
The renderedElements are the concrete number of elements (copies) to render. This is a performance optimization, the lower the number the better, but you need to make sure that the text is long enough to cover the whole screen.
You can also provide any prop comming from the As prop, HTML span tag by default.
Examples
Blurred ParallaxText
Blurred ParallaxText
import { ParallaxText } from "pol-ui";
const ParallaxTextComponent = () => {
const text = "Parallax text in Pol-ui";
return (
<section>
<ParallaxText velocity={-2} className="blur-[5px]">
{text}
</ParallaxText>
<ParallaxText className="blur-[2px]" velocity={1}>
{text}
</ParallaxText>
<ParallaxText>{text}</ParallaxText>
</section>
);
};
export default ParallaxTextComponent;
ParallaxText in the same direction
Use velocity prop to make the parallax effect in the same direction. Positive values will make the elements move right when scrolling down and left when scrolling up.
The opposite happens with negative values.
The higher the number, the faster the parallax effect.
Same direction
import { ParallaxText } from "pol-ui";
const ParallaxTextComponent = () => {
const text = "Parallax text in Pol-ui";
return (
<section>
<ParallaxText velocity={1}>{text}</ParallaxText>
<ParallaxText velocity={2}>{text}</ParallaxText>
<ParallaxText velocity={3}>{text}</ParallaxText>
<ParallaxText velocity={5}>{text}</ParallaxText>
<ParallaxText velocity={6}>{text}</ParallaxText>
</section>
);
};
export default ParallaxTextComponent;
Custom classes
You can customize any CSS property of the ParallaxText component by using the className and Tailwind CSS classes.
Custom clases
import { ParallaxText } from "pol-ui";
const ParallaxTextComponent = () => {
const text = "Parallax text in Pol-ui";
return (
<section>
<ParallaxText className="text-error">{text}</ParallaxText>
<ParallaxText className="text-success">{text}</ParallaxText>
<ParallaxText className="text-info">{text}</ParallaxText>
<ParallaxText className="text-warning">{text}</ParallaxText>
<ParallaxText className="text-secondary">{text}</ParallaxText>
</section>
);
};
export default ParallaxTextComponent;
Custom elements amount
The number of elements to render. This is a performance optimization, the lower the number the better, but you need to make sure that the text is long enough to cover the whole screen. By default is:
Math.ceil(100 / children.length) ?? 10;
Custom elements amount
import { ParallaxText } from "pol-ui";
const ParallaxTextComponent = () => {
const text = "Parallax text in Pol-ui";
return (
<section>
<ParallaxText className="text-sm" renderedElements={20}>
{text}
</ParallaxText>
<ParallaxText className="text-md" renderedElements={18}>
{text}
</ParallaxText>
<ParallaxText className="text-lg" renderedElements={16}>
{text}
</ParallaxText>
<ParallaxText className="text-xl" renderedElements={14}>
{text}
</ParallaxText>
<ParallaxText className="text-2xl" renderedElements={12}>
{text}
</ParallaxText>
</section>
);
};
export default ParallaxTextComponent;
Custom elements tag
By default, the ParallaxText component uses the span tag, but you can customize it using the as prop.
Custom elements tag
import { ParallaxText } from "pol-ui";
const ParallaxTextComponent = () => {
return (
<section>
<ParallaxText as="h1">I'm a H1</ParallaxText>
<ParallaxText as="h2">I'm a H2</ParallaxText>
<ParallaxText as="h3">I'm a H3</ParallaxText>
<ParallaxText as="h3">I'm a H4</ParallaxText>
<ParallaxText as="button">I'm a button 😵💫</ParallaxText>
</section>
);
};
export default ParallaxTextComponent;
Custom resistance
To customize the resistance of the parallax effect, you can use the resistance prop, the higher the number, the slower the parallax effect.
Resistance
import { ParallaxText } from "pol-ui";
const ParallaxTextComponent = () => {
return <ParallaxText resistence={6000}>I'm a H1</ParallaxText>;
};
export default ParallaxTextComponent;
Theme
To learn more about how to customize the appearance of components, please see the Theme docs.
interface ParallaxTextTheme {
base: string;
}