web counter
RapidWeaver Stacks, PlugIns, Themes ...
My Image

All the latest RapidWeaver Stacks reviewed,
plus the most important community news …

Stay up to date with current RapidWeaver developments

Responsive Timelines in RapidWeaver

Traditionally a timeline is displayed vertically. But if you were to place a timeline of all assassinations that took place in Italy into a vertical timeline, your webpage would be endless (Being Emperor, King, or Pope in Italy was always accompanied by occupational hazards and political visitors didn't always survive their trip to the Apennine Peninsula). Enter Responsive Timeline from One Little Designer…

Responsive Timeline isn't the first timeline stack for RapidWeaver, I've reviewed two in the past, but it is the first timeline stack that will allow you to scroll your timeline horizontally. The result: Your Italian assassinations still take up a heck of a lot of space, but there is still room on your page for a lot more content!

Responsive Timeline – 1LD
And the timeline can be made to look very attractive – there's an example on 1LD's homepage that displays a full screen image with the first date visible. Then, when you scroll vertically, further dates fade in. This is the default appearance for Responsive Timeline – the first date appears on the left of the screen, accompanied by a button at the top of the screen, inviting you to scroll right. When you do so, the next dates are revealed with a fade-up animation. With the timeline set to horizontal, Responsive Timeline automatically reverts to vertical below a defined breakpoint.
… if you have Responsive Timeline set to vertical as you scroll down the page, a single date will appear, then the next and the next, as you scroll further

So about that button. It says Scroll and has an arrow pointing to the right. As horizontal scrolling is not yet the expected behaviour on a website, I clicked the button and nothing happened. Currently nothing will happen and that is the only complaint that I have with Responsive Timeline – it has a scroll button that doesn't.

Stack settings
General
Use Animations – When deactivated the timeline is static
Orientation – Horizontal (default), Vertical
Item Max Width
Mobile [break]Point
Line Thickness – Joining line in px
Line Colour

Content Blocks
Text [colour]
Headers [colour]
Links [colour]
Content BG [colour]
Margin
Padding
Radius
Content Font – 14 font options
Triangle size – connector in px
Triangle Radius
Shadow – deactivated by default

Icons
Icon Colour
Background Colour
Icon Size – Desktop, Mobile
Icon Text Size – Desktop, Mobile
Icon Margin – Desktop, Mobile
Icon Radius
Border Weight
Border Colour
Shadow – deactivated by default

Dates
Text Colour
Text Size – Desktop, Mobile

The Responsive Timeline Item Child has options to set the Date, the Icon Font and the Icon, plus an option to add an icon image just in case you can't find the weapon of choice for your assassinations…

If you need a timeline on your website, you now have a choice of three. Two of them are the more traditional, vertical timeline and 1LD's interesting space saver – Responsive Timeline – I know which one I would choose for longer publications.

Comments

AnimateIt – One of the Original Animation Stacks for RapidWeaver

There are numerous animation stacks available for RapidWeaver. AnimateIt from Tsooj Media was one of the first to appear. Originally a couple of different stacks (trigger, stacks container and, if I remember correctly, a separate stack to animate stacks that had been assigned an id.

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.

Comments

NewsFlash – Duck Soup

Since the Weaver's Space Conference people have been impatiently awaiting the demo file that Marten Claridge promised to make available during his presentation 'Designing Every Element'.

I've just been able to take a look at at the pre-release version of what Marten will be delivering and I'm flabbergasted!

'Duck Soup' isn't simply a single project page, it is a whole set of projects with over 150 different amazing modules that you can paste into your own projects to achieve instant design perfection. The modules are built exclusively with BWD stacks and should work with virtually any theme.

I hear that Duck Soup will be released very soon (perhaps even before Thanksgiving) and I personally can't wait!

Comments

RapidWeaver Twerks Again!

If you purchased ShakeIt fron Tsooj Media, now is the time to update! Will Woodgate just released a new version of ShakeIt. The interface is now cleaner and – more importantly – ShakeIt is now pure CSS, so it's 100X faster!

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.

Stack settings

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!

Comments

Quick Menu For RapidWeaver

The past twelve months have seen a couple of menu stacks arrive on the RapidWeaver scene. Weavium just added an interesting new stack that will make your choice even more difficult than before. The fifth stack in the Weavium line-up is called Quick Menu.

Quick Menu – WeaviumQuick Menu is one of those stacks that makes you wonder why no one came up with this solution before now. A menu stack that appears, or disappears when and where needed and can trigger whatever you want it to trigger.

Here's an example: I have a single page website and would like a context menu to appear for each section. With Quick Menu I can add a menu of my choice to either side of the page with markers before and after each section and with each section a new menu will fade into view.

A product section, for instance, with a couple of rows of images could display a menu to call up product information for each item.
And when you scroll to the next section, the menu fades out, ready for the next products…

A group of social buttons when a contact form is visible on the page, or that contains a trigger for the contact form's lightbox alongside the social buttons.

Quick Menu can also be set to be permanently in view, or to appear when a marker on the page is scrolled to and then remain visible until the bottom of the page is reached. Quick Menu can also contain hidden menu buttons.
In this case, there is a 'View All' button which triggers a Quick Menu lightbox that displays a complete list of menu items.
Quick Menu is highly configurable, so that each button can have its own colour and it goes without saying that each button can have its own icon.

Quick Menu – Weavium
Quick Menu consists of three stacks – the main stack that supplies the menu's global settings, a Menu Item stack that allows configuration of each separate item and a Marker stack.
The first thing that struck me about the settings panel, is that there are no unnecessary settings included – so no background colour, no margins, or padding. The second thing that I observed is that Weavium, like a number of other developers that produce great stacks, don't make use of tool tips; so you'll either need to experiment, or read the manual.

Stack settings

Show/Hide – Display – Always, On Scroll To, Between Markers
Responsive – Hide Menu (for the standard breakpoints)

General
Horizontal Position – Left, Right
Vertical Position – Top, Centre, Bottom
Top Offset – px
Padding – Top Offset for the lightbox menu
Z-Index – Default setting 1 quadrillion
Background – Lightbox background colour
Hide View All Button – deactivates the lightbox

Items
Default BG (colour)
Default Content (colour)
Item Size
Item Radius (interesting to note that whilst the menu radius is altered top and bottom, the lightbox radius only top right)
Icon Size
Text Size
Text Weight – Normal, Bold
Font – Selection of 15 web fonts

Items > Open
Max Width – px
Item Padding – Vertical, Horizontal
Item Radius – sets the radius of all four item corners
Icon Size
Text Size

Close Button
Size
Icon Size
Radius
Icon Colour
Background [colour]

Quick Menu Item Stack
Hide (shows when opened)
Item Action – Link (default), Scroll to Top, Scroll to Bottom, Scroll to Marker, Java Function
Icon Font – Font Awesome, Ionic, Material, Custom
Custom Colours

Quick Menu Marker Stack
Marker ID

Quick Menu is an interesting new stack that is well worth a look at. Check out the demo page to see its possibilities.

Show more posts

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

Hi, I’m the Ninja Bot. What’s your name?
image/svg+xml
Nice to meet you, [1-1]. Could you tell me your mail address?
image/svg+xml
[1-1], would you like to subscribe to the monthly Ninja Newsletter?

Yes, I would like to receive your monthly newsletter.

No thanks, I’m good for now. I have a different issue.

image/svg+xml
Thanks for your support, [1-1]. Is there anything else I can do for you?
image/svg+xml

[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I would like to subscribe to the Ninja Newsletter

Message

[4]
I’m sorry tohear that, [1-1]. How may I help you then today?
image/svg+xml

[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I don’t want to subscribe to the Ninja Newsletter right now.

Message

[6]

Thanks again for contacting us. Your request was successfully submitted.

My Image

Looking for Inspiration?

Looking for Inspiration for a new site, or need a CTA
really quickly?

Contact Information

rjh logo

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.

Legal

This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—17

Powered by rjh-design

This website was built with loving care on a Mac using Foundation. For more information, contact me.

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.

View previous campaigns.

Subscribe to the Ninja Newsletter

* indicates required