Parallax
The manGoweb Parallax component. Watches elements vertical position in viewport.
Demo: codesandbox.io/s/mangowebparallax-demo-hz24v
Installation
npm install @mangoweb/parallax @mangoweb/scripts-baseThis is a @mangoweb/scripts-base component.
Usage
In your template:
<script>
window.initComponents = (window.initComponents || []).push({
name: 'Parallax',
place: '#targetElement',
props: {
// Optional
offsetPropertyName: 'offset', // distance between element y center and window y center
heightPropertyName: 'height', // element height
windowHeightPropertyName: 'windowHeight',
},
})
</script>In your styles
#targetElement {
transform: translateY(calc(var(--offset, 0) * 20vh)); // Translates by 0 pixels when javascript is disabled
}