Focus stack | Elixir Graphics | $12.95
Focus is a clever little stack that allows you to add a button to your web page which, when clicked, opens a modal pop-up window using a a nice elastic animation.
You can set the button colour and width using either a fixed width in pixels or a percentage and define width breakpoints for desktop, tablet and mobile; buttons can be pill-shaped or have soft corners and in each case the animation and modal window ‘x’ button inherit your chosen style. You can define a label for the button and also add one of over 100 icons, so you give visitors a further visual clue as to what they’re about to see.
We’ve found it useful for adding maps to a contact page, a music player on a shop page where space was tight, and as a straightforward call to action that reveals a little newsletter sign up form. Interestingly, Focus can handle a lot of content and if there’s more than the available screen area, you can simply scroll down to reveal the rest. However, when you close the window you’ll end up exactly where you were before on the web page.
You probably wouldn’t want to pepper your pages with Focus stacks but for a one-off effect, it’s a striking way to display all manner of different content types quickly and easily. You may find one or two stacks that won’t work in a modal pop-up like this because they need to ‘see’ the page when it first loads and can’t be triggered like this; however, all of the stacks we tried behaved just fine. There’s also a z-index override option which is useful if you find that elements of a theme are sitting on top of the modal window — selecting this will ensure that your Focus window goes to the top of the pile.
This is an arresting, easy to deploy stack which is highly recommended.