The name SVG stack is slightly misleading. The stack will also load warehoused jpg, png and gif files and can display an alternate image on hover. The latter function is interesting especially as it allows you to mix formats.
SVG Image – Set Link
Alternate Text – Default 'Missing Image'
On Click – Do Nothing, Link To URL
On Hover – Do nothing, Show Alternate Image
Max Width – Desk, Tablet, Mobile
Position – Left, Centre, Right – Desk, Tablet, Mobile
Breakpoints – Standard, Custom
The fact that SVG has an option to display an alternate image on hover is a neat trick, which many will find useful.
Bars can display your statistics both vertically and horizontally, the stack is animated so your bars slide into view as the stack is within the viewport and the bars are able to increase in value, or decrease. Bars can be formatted globally, or each bar can have its own custom formatting.
Bars formatting options are almost endless, so there is only a short summary below.
General – Chart Range, Fill Direction, Animation Speed, Sizing
Header – Sizing, Orientation
Bar Items – Global formatting – Sizing, Alignment, Font (15 Otions plus Google font)
Bar Titles – Sizes, Spacing, Alignment, Icon Position, Font
Colours & Backgrounds – Fonts, Bar Background (flat, or gradient) Bars (flat, or gradient), Background (off, flat, gradient, or image)
Show Rule – Size and Colours
Bars Item Stack
Icon Font – Ion Icons, Fontawesome, Material Icons, or Custom
A lot of thought has gone into creating
If you need to display statistics, grab Bars now!
Since Stacks 3, this kind of 'suite' has become obsolete. Instead we have either stacks Childs, or an option within the settings panel to change a stack's function.
And that is exactly what the S4S AnimateIt update brings you – a single stack with all the options that the previous suite presented, a much cleaner interface and code that has been optimised.
Whilst I was able to view a pre-release version of the new AnimateIt stack, I hadn't realised that, in the meantime, it has been released. So I apologise for the delay:
AnimateIt is a stack that, as the name implies, animates any content placed within it, or can animate any stack with a specific ID. There are six different triggers for an animation – On Pageload, When In View, etc. fourteen different effect types and nine different animation types – which, when combined, result in over 50 (fifty) different animation possibilities.
The animation speed may be set and the animation may also be set to Loop Infinitely.
I've had AnimateIt in my Stacks' library for some years now and it's good to see that it has been updated for Stacks 3.
ShakeIt is one of those attention-grabbers that I personally am not fond of. That, however, is my own humble opinion and should not influence you if you need to Shake, Rumble, Vibrate or Pulse any element on your page
ShakeIt does exactly what the name implies — it causes a stack to wobble about and beg for attention. It can shake, or pulse a stack, or a set of stacks (using CSS ids) either constantly, or upon interaction with the mouse, i.e. when hovered. There are ten different animations to choose from.
The animation is endless – so I personally would confine the effect to display only when hovered. But again, that's just personal taste.
If you intend to animate an image stack with ShakeIt, some of the animations will cause the image corners to be cropped when moving. To avoid this, make sure that your image has enough padding.
Shake – Stacks (default), Custom CSS Selector(s)
Shake Trigger – Shake Constantly (default), Shake Constantly, Pause on Hover, Shake on Hover
Shake Effect – Ten options – ranging from subtle (Little) to totally Crazy!
Don't let yourself be influenced by my personal taste. If ShakeIt is the stack that you need, to grab your visitor's attention, go for it!
If you are prone to epileptic seizures, you might prefer to avoid the demo page!
Your aim: to present your business, or your products. Feature cards with snippets of information about your company, your employees, or the services you offer. Feature Section is a great way to do just that in a professional manner –
An animated (or not) grid of cards that present your product with an Icon, or an image – an employees portrait, for instance –above each card (or not) and a short, informative text.
Each Feature Card has a container for a headline, plus a container for your text. As you can see in the example on the left, you can also add HTML to the text section – the image in the example was positioned with a link to a warehoused image.
So how does it come together?
When you drop a Feature Section stack onto your page, you'll be presented with a grey card, a centred smiley icon, a Feature Title and a text. In preview mode both the card and the icon already change their colours when hovered.
Format the first card by leaving the Feature Section stack active and altering the background colour, the icon colour and the Icon position. Then change the background and Icon colours for the hovered state.
Once you have your first card formatted, you can drag copy it to duplicate it, or add a fresh card by clicking the + child button; then decide how many columns your grid should have on each viewport. You can then set about adding hover animations to your cards – if you wish.
The settings within the main Feature Section stack are global settings that determine the appearance of all the cards within the grid.
The Feature Card stack simply has settings for the icon, or inset thumbnail image and has settings for a link.
Max Width – Determines the max width of the grid
Card Alignment – Defines how the cards are aligned. Top, Centred, Bottom, Stretch. With 'Stretch' each of the cards in a row has the same height
Desktop Cols; Tablet Cols; Mobile Cols – The number of columns to be displayed below each breakpoint
Gutters – Horizontal, Vertical
Background – None, Colour, Gradient, Image
Borders – Off, On
Shadow – Off, On
Alignment – Left, Centre, Right
Hide Inner Icon
Text Alignment – Left, Centre, Right
Title Font – 13 standard fonts plus Custom
Title Size, Title Spacing, Title Colour
Content formatting as above
Hover Scale – 0—1.5
Rotate (Icon) – -360—360º
Translate – -50—50px (distance the card moves up/down when hovered)
Hover BG Ripple – Card colour change on hover (default)
Ripple Origin – Top Left, Top Right, Centre, Bottom Left, Bottom Right
Ripple Colour – Card colour on hover
Hover Icon Background
Hover Icon Colour
Hover Title – default
Hover Title Colour
Hover Text – default
Hover Text Colour
My personal opinion: Because Feature Section has so many customisable options, it is a great way to present product details, short biographies, or company details. Each card can be linked to another page, or page section and make Feature Section an extremely versatile stack. I like it!
If you need inspiration, open up the demo file that comes with the stacks – it has numerous examples.
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Subscribe to Ninja News
or ask a question
Yes, I would like to receive your monthly newsletter.
No thanks, I’m good for now. I have a different issue.
[1-1], thanks for subscribing.
By clicking 'Submit', you are giving your consent to having rjh-webdesign collect your name and email.
These details are used exclusively for the newsletter and will not be passed on to third parties!
As soon as I've added you to the mailing list, you'll receive a mail asking you to confirm your subscription.
If you made a further request, I’ll get back to you – typically within 24 hrs.
[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.
Thanks again for contacting us. Your request was successfully submitted.
Looking for Inspiration?
Looking for Inspiration for a new site, or need a CTA
The Latest & Greatest
Do you have a question regarding RapidWeaver?
Would you like help with your new project?
Would you like us to build your new RapidWeaver website?
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—17
Powered by rjh-design
Don’t miss a post!
Sign up for our monthly newsletter.
A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.
By clicking 'Submit', you are agreeing to receive emails from Ninja News