This one likes a mouse.
The Magnetic Element responds to cursor movement, so this effect is designed for desktop.
Visit this page on desktop to try it out.
Move your cursor toward the button and see what happens.
Something GOOD is Waiting for You
MAGNETIC ELEMENT
Add an interactive magnetic effect to a Showit element. As the visitor's cursor approaches, the element gently pulls toward it.
Use it with buttons, text, images, icons, shapes, or decorative elements.
HOW TO USE IT
1. CHOOSE YOUR ELEMENT
Add and design your element normally in Showit.
This can be a button, text, image, icon, shape, or another Showit element.
2. ADD THE CLASS SELECTOR
Select the element and go to:
Advanced → Class Selectors
Add: magnetic-element
Then click the check mark to save it.
Showit may display a "." in front of the class name. That's correct.
3. ADD THE JAVASCRIPT
Select the page name in the Pages panel.
Go to:
Advanced Settings → Page Loaded Javascript
Paste the supplied JavaScript into the box.
Do not add <script> tags. Showit adds those automatically.
CUSTOMIZE THE EFFECT
At the top of the supplied code, you'll find three settings.
maxPull = 18
Controls how far the element can move toward the cursor.
Increase the number for a stronger pull. Decrease it for a more subtle effect.
activeRadius = 90
Controls how close the cursor needs to be before the element begins reacting.
Increase the number to activate the effect from farther away.
ease = 0.15
Controls how quickly the element follows the cursor.
A lower number creates softer, slower movement. A higher number creates faster, snappier movement.
MOBILE NOTE
This interaction is designed for desktop cursor movement.
For mobile, use your normal Showit layout. No additional code is required.
QUICK INFO
Difficulty: Easy
Requires: Class Selector + Page Loaded Javascript
Class Selector: magnetic-element
Interaction: Desktop cursor
Elements: Buttons, text, images, icons, shapes + more
Mobile: Standard Showit element
Coding knowledge: Not required