Small library for tracking mouse movments ☄️
Before your closing <body> tag add:
<script type="text/javascript" src="./lib/follow.min.js"></script><div class="follow-el"></div><script>
follow.init({...});
</script>| Option | Type | Default | Description |
|---|---|---|---|
| selector | string | '.follow-el' | CSS selector. |
| areas | number | 4 | Choose how many wedges of a circle you want. |
| type | string | 'text' | Choose between 'text' and 'style' |
| prop | string | '' | Only required if option type is equal'style'. Css property written in camel casing. Example: backgroundColor, borderRadius, color .. |
| feed | array | [ ] | Array of strings(text or css properties). feed length must be equal to number of areas. |
| default | string | '' | Default value on load and when mouse is over element. |
<div class="follow-el"></div>
<script>
//we want 3 wedges and style element's background color depending on what wedge mouse is.
follow.init({
areas: 3,
type: 'style',
prop: 'backgroundColor',
feed: ['blue', 'red', 'green'],
default: 'white'
});
</script><div class="follow-el"></div>
<script>
//we want 4 wedges and text inside element to change depending on wedge. Remember we don't need 'prop' since it's not css styling!
follow.init({
areas: 4,
type: 'text',
feed: ['one', 'two', 'three', 'four'],
default: 'center'
});
</script><div id="idSelector"></div>
<script>
//we want 8 wedges and text which shows where mouse is from element perspective.
follow.init({
selector: '#idSelector',
areas: 8,
type: 'text',
feed: ['right', 'top-right', 'top', 'top-left', 'left', 'bottom-left', 'bottom', 'bottom-right'],
default: 'center'
});
</script>Now let's explain how it actually works.
Above we can see default setup with 4 wedges.. that is 4 wedges of element(here represented as gray circle) that follows mouse movement.
If we pick our type to be 'style' with prop:'backgroundColor' and give feed property array of colors it will look like picture above.
In this case it's in bounds of wedge #1 so element's backgroundColor will be red.
If we move it to wedge #2 element's backgroundColor will be green and so forth, you get the logic.
Of course if we move mouse over our element it's value will be what we set in our default property.
One thing to be aware is when we set how many wedges we want in areas property first wedge will always be direct right of element. We can see in next picture how it looks when we have 3 wedges (areas:3)
That's about it for type:'style', now let's explain type:'text'. In image below we can see how it would look in default state (default:'innerText').
Once we start moving mouse text inside element will be updated depending on wedge as we can see in following three pictures. Feed property in this case is (feed:['1st wedge','2nd wedge','3rd wedge'])
As we mentioned before first wedge is generated on hard right of an element as we can see in image below.
One more image to demonstrate how it looks when we pick choose 8 wedges (areas:8).
Licensed under the MIT license.
Made with ❤️ by Vuk Samardžić.