JW's Filters Stack removes the secrets from said CSS effects and not only lets you easily choose from over 40 image effects, but also apply the effects to complete layout elements – hover effects included.
With Filters you can standardise all of the images on your web page by applying the same filter to every image; you have complete control over blur, brightness hue, etc. and you can apply hover effects that, for example, turn a black and white or sepia image into a full colour image.
Filters is delivered with 2 stacks. Filter Presets with (if I counted correctly) 41 different filter effects, and Filter Pro which allows you to build your own effects and to apply them to a 'Scope' i.e. to Images, Class, All, Custom Selector.
The effects possible with Filter Pro are: Greyscale, Sepia, Brightness, Contrast, Saturate, Invert, Hue, Opacity, Blur, Blend Mode, Duotone and Hover effects. Any or all of these effects can be combined with each other.
Filters will easily make your website more interesting and can draw attention to specific page elements. Total CMS users will be interested to know that Filters is fully compatible and can easily change whole pages of images.
The only downside: You won't be able to fully appreciate Joe's demo project without first investing in his Wallpaper and Target stacks.
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 $.
Michelangelo from Multithemes is one of the developers that delivers high quality and highly customisable themes. His latest creation, HYPE, is no exception. There are so many options for customisation that I shan't even attempt to go over them. Suffice it to say that if you deploy HYPE, you most certainly won't be disappointed.
There are 16 different web fonts available for title, slogan and Headlines, accompanied by web-safe fonts for your content. Animated Social Icons come as part of the deal, as do animated FA Icons. However, what immediately jumps out at visitors to Michelangelo's demo site, are the animated SVG headers. There are 16 different options to animate each page's title/slogan combination and the animations are so riveting that admirers have already enquired if they will be available as a stack!
I spent a couple of hours exploring HYPE's customisation options and if you're going to deploy the theme, you'll want to do the same. Whilst the default setup is attractive, there are so many options that HYPE can be almost anything you want it to be. However, you can rest assured that however much you tweak HYPE, it's always going to look good with the RW standard pages (assuming, of course that you're not colourblind) and that the theme will play along equally well with Stacks pages. That animated header will ensure that your pages will POP and two ExtraContent areas secure your pages' flexibility!
If you prefer the convenience of a prefabricated theme, but want extreme flexibility, then I highly recommend taking a look at HYPE
Assemble offers up to 17 different animations which can be staggered and offset. Assemble also allows you to set the Target mode. The result is an almost endless array of settings. But perhaps the most interesting fact is that it's possible to manually choose elements and/or list classes to let the stack know which partial segments should be animated.
The whole process is relatively complicated to describe and a picture says more than a thousand words, so why don't you take a look at the Assemble demo page to see what Assemble can do. I promise that you won't be disappointed.
[Animation] Type – 17 options
Speed – ms
Stagger – Adjust the total possible time between the first segment animation till the last. 1000ms would mean each segment will animate randomly in between 0 and 1000 milliseconds. Decrease this value to have the segments animate closer together
Offset – Adjust the distance from the top of the browser window the animation initializes. 100% will cause the animation to start as soon as it is inside the browser window. 30% will cause the animation to start only when the element is in the top half of the window
Target Mode – Automatic Segmented, Automatic Whole, Manual Segmented
If you're into animated page elements, Assemble offers a few innovative options which, when used sparingly, can make your page all the more interesting.
The wait is over. Duck Soup has a sibling and if you thought Maximum Design was cool, you'll find Quantum Edge has been chilled a couple of degrees more.
Quantum Edge began life as what was probably the single most complicated RapidWeaver project ever produced. In the meantime, Marten has taken sensible steps to split the project into more bite-sized modules. Five of them.
As with the Max Design pack, Quantum Edge is predominantly based on Sections modules; standalone, multi-purpose, full-width content containers that can be quickly deployed to make an instant impact on both your page and your clients. There are eighteen pages of these modules, but you don't have to purchase all eighteen of them; instead you can opt to acquire just five, or ten of them and, as a seasoned BWD user, work out for yourself how the remaining modules were created…
This time round, Marten's new package doesn't simply present Sections modules; there is a module with complete pages, one with cards, one that devotes itself to footers and one specifically aimed at the iPhone.
You can, of course, secure the complete bundle at a reduced price. But be warned: it will take you a whole day just to peruse your purchase and a month, or two, to get to grips with (i.e. understand) what Marten has put together! Quantum Edge takes advantage of the very latest BWD stacks to present subtle animations and 3D effects never before seen in RapidWeaver.
If you're looking to impress a new client, or just want to WOW the visitors to your new home page, Quantum Edge has everything you need to be able to do so easily.
Copy and Paste one of Marten's modules, replace the content with your own and the wow-effect is guaranteed!
Whichever module(s) you decide to procure, when you open your download, you'll discover that you have a Foundation, a Foundry and a Universal version for both RW7 and RW8. You'll also discover a download link to all images used within your project and – if SVGs were used in the project – you'll find all the SVGs too!
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