Clicky

RapidWeaver Stacks, PlugIns, Themes ...
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Animated Titles for RapidWeaver

You may remember that, back in March, I reviewed the Hype theme from Multithemes. The feature that immediately stood out was the animation of the page titles and as soon as the demo page was published, Michelangelo was bombarded with requests to release the Hype titles as a stack.

Well, Michelangelo has submitted to pressure and the resulting Hype Titles stack includes 17 different animations with 29 built-in fonts and an option for Google Fonts.

Hype Titles – Multithemes
For both the Title and the slogan, you'll find settings not only for the font, but also for size and font style. The Title font can be shifted up / down / left or right by 50px and 70 px respectively.The slogan can be shifted up / down / left or right by 200px and 600px respectively and can be rotated up to 90º in either direction.

As you can see in the demo above, the title can be made up of two different colours. The slogan and the animated line[s] are coloured separately. Unlike the screenshot above, Hype Titles animates once. Either immediately or after a 1 second / 2 second pause. Hype Titles can also be set to static.

It must be noted that Hype Titles is conceived as a banner stack i.e. it will always appear at the top of your page and saves us from the agony of having multiple animated headlines on a page. The default Stacks option to add a background colour or an image to the stack allows Hype Titles to be displayed over a banner image.

It's worth taking a look at Michelangelo's demo page it has 25 x 16 different examples of how Hype Titles can make your next project pop.Your Header at least won't be boring. And if you like a specific Title, the demo project contains every page from the demo so you can simply copy and paste and add your own text without needing to experiment.

Comments

Filters Stack for RapidWeaver

As a semi-pro Weaver, you'll already know which image effects can be achieved with CSS filters. Changes such as colour intensity, hover effects and much more are possible. As a non-coder, you may have wondered how some of these many effects are achieved.

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 – Joe Workman


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.

Comments

Fluid for RapidWeaver

Last week Weavium released a set of stacks under the title 'Fluid' On the webpage there are two interesting statements 'The build tool that will change RapidWeaver forever' AND 'If you can dream it, you can achieve it, with Fluid'. I also read somewhere that there's a learning curve involved.

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 $.

Comments

The HYPE Around RapidWeaver

As a regular reader of my RapidWeaver reviews, I sure that you remember that the last time I used a theme was back in 2012. There are, however, developers that still eek out a living by developing themes and there are enough of those developers to suggest that the majority of RW sites are built by Weavers that prefer the convenience of a prefabricated theme. After all – it's so simple: tweak the theme's settings to suit your design requirements then add the theme to each of your pages. Conformity guaranteed!

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!

Hype – Multithemes
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

Comments

Assemble Your RapidWeaver Project

With DK Stacks having disappeared from the RW scene we are now one animation stack poorer. I used DK's Mover on a number of sites, so until just a few days ago, I was wondering what I should replace it with. 1LD came up with the solution for me. Assemble!

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.

Stack Settings
[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.

Please note that DISQUS operates the forum below.
When you sign in to comment, RWNinja will provide your email, first and last names to DISQUS. That information, along with your comments, will be governed by DISQUS’ privacy policy. By commenting, you are accepting the DISQUS terms of service.
Comments

Show more posts

  • Stacks Image 35399
  • Stacks Image 35402
  • Stacks Image 35405
  • Stacks Image 35408
  • Stacks Image 35411
  • Stacks Image 35414
  • Stacks Image 35417
  • Stacks Image 35420
  • Stacks Image 35423
  • Stacks Image 35426
  • Stacks Image 35429
  • Stacks Image 35432
  • Stacks Image 35435
  • Stacks Image 35438
  • Stacks Image 35441
  • Stacks Image 35444
  • Stacks Image 35447
  • Stacks Image 35450
  • Stacks Image 35453
  • Stacks Image 35456
  • Stacks Image 35459
  • Stacks Image 35462
  • Stacks Image 35465
  • Stacks Image 35468
  • Stacks Image 35471
  • weaverthemes
  • Stacks Image 35477
  • Stacks Image 35480
  • Stacks Image 35483

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

x

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.

* indicates required

Contact Information

My Image

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—16

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