Event Horizon
Where we're going, we won't need eyes to see...
Project setup
In your project root
import Vue from "vue";
import EventHorizon from "vue-event-horizon";
Vue.use(EventHorizon)Usage
<div vue-event-horizon:trigger />
<div vue-event-horizon:trigger.once />
<div vue-event-horizon:trigger="(el, is_visible) => onVisibilityChange(el, is_visible)" />
<div vue-event-horizon:parallax="{x: {from: 0, to: 2, at: 1}}" />
<div vue-event-horizon:parallax="{
x: {from: 0, to: 2, at: 1},
y: {from: 0, to: 3},
callback: (el, is_visible) => onVisibilityChange(el, is_visible)}
" />Trigger adds classes
<div vue-event-horizon:trigger />
...
<div class="trigger-0 trigger-25 trigger-50 trigger-75 trigger-100"/>Parallax adds transforms
<div vue-event-horizon:parallax="{x: {from: 0, to: 2, at: 1}}" />
<div style="transform: translateX(0.5px)" />