Newsletter Signup
Sign up to our newsletter to gain access to exclusive discounts and more.
Attention Seeker Stack
This stack is designed to direct your user's attention to whichever element on the page you want by fading out everything but that element.
Demo
You can have multiple attention seeking elements on the same page, click here.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Here's what I want your attention on. The stack will fade everything but this block of text. Hover over this area for the effect to stop. Color, pulsation and more are all configurable.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Key Features
 |
Multiple instances per page
You can have multiple stacks per page, each with it's own settings.
|
|
Scroll into View
If the element that is seeking attention is not fully into view, the browser will smoothly scroll towards it.
|
|
Fade and/or Pulse
You can choose to fade the rest of the page, pulsate the element that is seeking attention, or both!
|
Editing Area
The HUD
Unique ID
The unique identifier for this stack. It should contain no spaces. Must be different for each copy of the stack on the same page.
Container
If you want the fade out to only apply to a specific area, type the CSS selector here. Leave empty (default) and the stack will fade the entire page.
BG Color
The color used to fade the page.
Opacity
The opacity of the overlay.
Fade Speed
The speed of the overlay fade effect.
Pulse Speed
The speed of the target element pulse effect.
Padding
Padding you can apply to the top of the target element overlay.
Smooth Outline
Refers to a smooth outline of the target element.
Hide on Click
Whether or not to hide the overlay when the user clicks anywhere in the document.
Hide on Hover
Whether or not to hide the overlay when the user hovers over the element that sought attention.
The unique identifier for this stack. It should contain no spaces. Must be different for each copy of the stack on the same page.
Container
If you want the fade out to only apply to a specific area, type the CSS selector here. Leave empty (default) and the stack will fade the entire page.
BG Color
The color used to fade the page.
Opacity
The opacity of the overlay.
Fade Speed
The speed of the overlay fade effect.
Pulse Speed
The speed of the target element pulse effect.
Padding
Padding you can apply to the top of the target element overlay.
Smooth Outline
Refers to a smooth outline of the target element.
Hide on Click
Whether or not to hide the overlay when the user clicks anywhere in the document.
Hide on Hover
Whether or not to hide the overlay when the user hovers over the element that sought attention.
Documentation
Extra documentation is available here.
Browser Support
v 3.0.11+
v 3.2.1+
v 9.64+
v 6+
v 4.0.249+- More info
(*) Some padding issues in IE 6.