can weaver xtreme do parallax and other common design features?

[sunrise]

I’m in the process of evaluating several “framework themes”, where you have lots of flexibility in doing custom design.  I really liked working with Weaver II Pro but it’s time to upgrade to something more up-to-date like Weaver Xtreme, and there are a few options out there.  In the last year or so full width parallax has become very common as well as various animation features.  I’m not sure if animation is the right term, but I’m talking about things that move or fade in and out.  For example, when you scroll down and rather than the menu disappearing it becomes thinner and stays at the top of the page and sometimes it becomes transparent.  Or when you scroll over an area of content or a widget it fades or brightens or goes from color to B&W or words appear.  Can Weaver Xtreme do any of these things, or if not, will your support be able to help me figure it out?

[Weaver]

I may look into parallax as a X-Plus feature, but my take at the moment is that is a rapidly passing fad. There are parallax plugins, but I’ve not tried any.

All of those other things are totally JavaScript features. We don’t have any specific plans to add any special effects like that, but if you have some very specific examples (perhaps with plugins that accomplish some of these effects), we could consider adding them to X-Plus.

But there are features that allow quite a few full width effects – full width header, content, footer. Full width posts with custom bg colors.

[sunrise]

Thanks.  I keep forgetting to check plugins for design elements, I only think of them for functionality.  I think I can probably find what I need then!

[scrambler]

for full width, read

http://forum.weavertheme.com/discussion/11124/full-width-designs

and check the demo site how to pages

http://demo.weavertheme.com/

[thesurge]

I have been experimenting with a CSS based parallax effect in Xtreme as seen here: http://testing.creativesurge.co.uk/xtreme/test-page/

I found this method at http://callmenick.com/post/simple-parallax-scrolling-effect and thought it could form the basis of something useful in Xtreme.

For animation perhaps CSS transitions and transforms are a good way forward?

[Weaver]

@thesurge:

Very interesting. This looks as if it could be made into a shortcode very easily. But since you are the user, I would like to see if my understanding is correct.

1. A Parallax page consists of some number of Parallax (plx) sections. There might be non-plx sections above and below.
2. A plx section has 3 parts: the full width BG image of some useful height. This bg image uses CSS background properties (attachment is the critical one, I think) to produce the effect.
3. A heading or title section that will have a transparent bg to allow its px bgimage to show through.
4. A content area with a solid bg that has some content. This section covers the bg image.

So a possible way to implement this in an easy to use fashion might be:

1. In the X-Plus options tabs, have a tab that allowed some number of sections to be defined by specifying the bg image for each named/numbered section.
2. Maybe options to specify text properties (and link properties) of head section.
3. Shortcodes that might look like this:

[parallax section=1]
[parallax_head]
Content of transparent (usually) head section. Uses text properties specified in options, perhaps.
[/parallax_head]
Regular content using theme default styling, colors, etc.
[/parallax]

etc for other sections.

Does this seem like it might work? Might need some width options for each section, too.

[thesurge]

So far I have actually done very little work on that test page, its pretty close to the original source files from callmenick.com, as once I established it would work its been left on hold until a project comes along that might make good use of it and then I would adapt it to suit my needs.

A shortcode would be a good idea I think, my take on it is that the content row of the parallax section should be optional, however I would expect that in most cases a plain solid bg full width row should follow the parallax row.

The two rows are constructed as below:

<section class=”module parallax parallax-1″>

<div class=”container”>

<h1>Serene</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p>

</div>

</section>

<section class=”module content”>

<div class=”container”>

<h2>Lorem Ipsum Dolor</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p>

</div>

</section>

The important features for each parallax section might be:

1. Option to omit the ‘module content’ row if desired

2. Ability to specify the content row bg colour

3. Ability to specify the content row font colour

4. Ability to add 2 columns to the content row for text and/or images (this could be just added in the page editor like any other text)

5. Ability to specify ‘module parallax’ font colour

6. All font styles should be easily customisable with css

Also the background-attachment:fixed rule doesn’t work well on iPads/iPhones so I added the following snippet:

@media screen and (max-device-width: 1024px) {

section.module.parallax {

  background-attachment: scroll;

}

}

[Spinney]

FYI, here’s another take on parallax, done with CSS and a bit of markup: http://keithclark.co.uk/articles/pure-css-parallax-websites/. Similar to the callmenick solution, but seems a bit more robust to me.

[Weaver]

@Spinney –

Interesting approach, but it totally fails on IE, while the http://callmenick.com/_development/simple-parallax-effect/ version works on IE – at least later versions.

That technique also degrades pretty nicely on IE8.

[Weaver]

@thesurge, @Spinney, @sunrise, @scrambler,

The parallax method described in @thesurge ‘s post earlier has led to support for Parallax to be added to Weaver Xtreme Plus for the next release.

I’ll post a demo soon, but I think the solution I found is amazing. I looked at several themes and plugins that support Parallax, and they make it really hard to do. Because of the inherent flexibility already designed into Weaver, I figured out how to make this as easy as I can imagine – given a bit of underlying complexity.

Here’s the outline of how it will work:

The whole concept of using it is based mostly on making each Parallax “slide” a regular post with a per post background image. By adding a tag to each post, they can be grouped as “pages” by using Page with Post filtered to that tag.

(This sort of means you need to use a Page with Posts for the regular blog page and filter out the Parallax posts. If you use Weaver Show Slides, you can even create the Parallax presentation using the Weaver Slider Posts post type, and then you don’t need to handle normal posts separately.)

You specify the bg image for each Parallax post. The post will be the content that covers the sliding image. If you want a title or label over the image, you can do that by specifying a manual excerpt for the post. That can be any content you want, and it allows full HTML styling. There are even plugins that add the full TinyMCE editor to edit manual excerpts if you wish. And, of course, that block will be wrapped in a class (.parallax-content) that can be style in general for the title over the bg image.

And this is a pure CSS3 only solution – so simple, no JavaScript required, and it degrades nicely for IE8 and phones.

Needs some refinement, and documentation, but it is pretty exciting!

[scrambler]

Great news

“(This sort of means you need to use a Page with Posts for the regular blog page and filter out the Parallax posts”

Why not make a custom post type for them like you did for post sliders?

[Weaver]

No need, really. A custom post type takes a whole line in the Dashboard Menu, and the Show Sliders type works perfectly well for the purpose. I just got done trying it, and it is very well suited for the purpose. And it already is well supported by the Show Posts plugin for creating a filter. Just use a slider group, for example, to create a group of posts for the parallax set. Then you can easily use either [show_posts] or Page with Posts. It is quite nice, actually.

I also discovered that the WP Edit plugin will support the Excerpts box, and that is very nice, too. (I had to tweak Show Sliders to have the Excerpts box available, so the current version doesn’t have it.)

But I also “rediscovered” that there is no option to add a “not” option to the tag filter like you can for categories, so creating a parallax set with normal posts will require a category and not a tag. Not a big deal, I think, but it does indicate the easiest way to manage parallax sets will be using the Show Sliders custom post type.

[thesurge]

Really looking forward to giving this new feature a try out.

[Weaver]

It is really exciting! Still tweaking to make it easier to use, including adding a couple of “Wide” themes as starting points for full width designs.

As soon as I get some better documentation written, I’ll send a development version to those of you who have posted on this thread previously.

[robfoster]

I would be interested in helping develop this

[Maureen]

I would love to see Weaver X parallax capabilities.

[Author]

Posts