The internet is no longer a static entity. With the abundance of information to be displayed in the confined space of a web page, it makes sense to hide some details until the user really needs it. Aside from that, moving elements can make a page more interesting. The Fluid demo page is extremely interesting with elements that move when clicked and slide into view when the page is scrolled — the page simply begs for your attention.
But Fluid isn't simply about motion, it allows you, as the demo page shows, to build complete web pages that include floating menus and most of the page content you need.
Using the Fluid Suite, you can add Buttons, Icons, Images and Text in addition to the default Fluid stack the Fluid Container, State Manager and Trigger.
The main Fluid stack supplies the JS necessary for any transitions whilst the Fluid Container will accommodate any of the other stacks. The Trigger stack defines when/how a transition should take place and the State Manager allows you to define the transition.
Just about any imaginable state is possible; from simply changing an element's colour upon hover, over opacity, rotation, zoom or positioning etc. on hover, click or page movement. There are many more transitions (z-Index, Object Size etc.) available.
So back to the 'learning curve'. After viewing the initial demo project with 11 pages of examples, I felt a little daunted. I contacted Skyler and he supplied a project with five pages that made things a whole lot more understandable!
Three things that you'll need to remember before you commit to Fluid:
Fluid is an amazing product that will allow you to build RW pages that you never imagined before.
Fluid has a fairly steep learning curve that is aided by Skyler's new demo project.
Less is more! You might want to let rip and animate everything on you newest RW pages. But don't overdo it!
Too much movement eventually distracts from your content, in addition to which the JS necessary to move all of your page elements can quickly become quite large.
Your project size might not matter to users in areas with good internet accessibility, but always remember that the JS necessary for any animation adds to the project size and your product might be viewed on a mobile phone or in other areas where every Kb costs your visitor valuable $.
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
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?
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.
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—16