Sneak Preview of a PARALLAX template

[Adendum]

Rather than hijack rivieremagog's thread (see : viewtopic.php?f=19&t=60560 ) I thought it best to start this one.

Here is a sneak preview.

Still very much a work in progress and a great deal to do and to test, so it's early days.

Feel free to test in a variety of browsers and devices and let me know. For the record - it wont work on an iPad and maybe not on smartphones. I have yet to find any parallax sites that do....maybe someone else knows better?

And just to be clear - this will be a paid template not a free one. But at £10 I think it's worth every penny!!

[zinc]

Paul
This is by far one of the coolest things that I have seen on this forum, a breath of fresh air in terms of design and as I said to you before, this is taking WWB to another level. Well done! Def worth that £10.00!!!!
Z

[ColinM]

Excuse my ignorance Paul - what is parrallax?

[Adendum]

Take a look at the 'sneak preview' link and you'll see!

[Adendum]

Page load speed will depend entirely on how the end user applies images to the parallax page. If they dump loads of large unoptimised images on the page the load speed will suffer. However if the think about it first and optimse their images speeds will improve.

The template allows 4 x foreground images, 5 x mid-ground images and 4 x background images but that doesn't mean they have to use all 13 images. In fact most times I foresee that the mid-ground and background images are likely to be repeats of one or two images.

So you are right to mention it but the same is true of any page built with WWB.

[Adendum]

I am close to completing this template and have just uploaded a new demo (but not the final demo).

It now validates pretty well, for an HTML5 page and even the CSS is clean even though there's some CSS3 in there.
I've added an an animated pre-loader, just in case someone stuffs some big images in their site.
Navigation now optional and offers skins in 16 colours and 2 styles (circles and squares).
Navigational Labels and Next/Prev buttons in 16 colours.

One thing I do need to investigate is how to handle a potential SERP issue. Maybe someone can offer a suggestion? The issue is that the template is a one page site but is made up of 5 other pages that are embedded in the index page. This is necessary to make it easy for the user to create their content.

So once published and the site gets crawled it will find 6 pages in total. If Google reports back on a search and offers up one of the pages (that is embedded) and that page is clicked, the visitor will get a page with no navigation to the rest of the site. So I am looking for a method that ensures if one of the 5 pages is accessed (by any method) that the browser takes them to index.html. Ideas?

[Pascal-Gilles]

Hi,

Nice (very nice!) one Paul.

An idea (at first sight) would be to add this code to each of the 5 sub-page:

Code: Select all

<script>
window.location.href ='./index.html';
</script>

Cheers!

[Adendum]

Pascal,

the window.location.href sounds like a solution - will test that and report back!!

[Pascal-Gilles]

OK!

By the way, the safest way would be a redirection in the htacces file (see viewtopic.php?f=28&t=60630), so that Google can't see any (false) duplicate.

Cheers!

[Adendum]

Pascal,

True but I can't risk using that route when I release this as a template. Imagine the havoc I could create from the less experienced users out there!

When I am back on the PC I am going to try using anchors, so I'll add anchors to the html that the template generates and then use window.location.href='index.html#section-1'. So that should help

[haakoo]

You could always add a hash or search at the end of that script to point to the right section.

Hans

[Adendum]

Nope - that kinda killed the page!

Each of the 5 pages that are called in are called in using the object statement e.g.:-

Code: Select all

<object width="1000" height="550" data="./section-2.html" type="text/html"></object>

And when I add the location script each of the calls to the 5 pages tries to load the index page as well. So the page dies.

Shame....I have a way to deal with this but it's ugly, so if anyone can suggest an automated method I'd appreciate it...but remember the solution can only be invoked if/when the page is clicked or opened manually. So if someone opens the page ./section-2.html they actually get to index.html.

[haakoo]

Maybe jQuery works instead of object use a #div

Code: Select all

$(document).ready( function() {
    $("#wb_Shape1").on("click", function() {
        $("#wb_content").load("page1.html");
    });
 $("#wb_Shape2").on("click", function() {
        $("#wb_content").load("content.html");

    });
});

[Adendum]

I think the answer is a two fold approach - as I said, ugly, but I think effective...

1. Add a link in the called in pages that is not seen in the index page.

2. Add a canonical link to the index page, so search engines treat each called in page as duplicates and refer all links back to index.html.

Or can someone think of something neater/safer/better?

[Adendum]

Maybe jQuery works instead of object use a #div

Hey Haakoo,

Not sure how this helps. Using the object statement works very well - it's like using an iFrame I guess but embeds the content from one page into another with none of the disadvantages of using an iFrame. So I'm happy with the object call.

The problem is only if/when one of the pages like section-2.html is opened in a browser manually or via search engine results.

[haakoo]

<script>
top.location.href ='./index.html#section-two';
</script>

This might work

Hans

[haakoo]

Calling a div instead of object is actually the same approach without the iframe usage
So you could use a wb layer as target for the external html page

Hans

[Adendum]

Haakoo,

You are on to something here.

I am making manual edits to the page section-2.html and index.html as a test. I am still using the object embed but have added the top.location script into the <head> of section-2.html

Code: Select all

<script>top.location.href ='./index.html#section-2'; </script>

and I added a bookmark (maybe not needed) to the index page in section 2 e.g.

Code: Select all

	<article id="section-two">
	<a id="section-2">&nbsp;</a>
			<object width="1000" height="550" data="./section-2.html" type="text/html"></object>
			<nav class="next-prev">
			<a class="prev section-one" href="#section-one">Prev</a>
			<a class="next section-three" href="#section-three">Next</a>
			</nav>
	</article>

And it kinda works...if you try an open the section-2 page manually ( http://www.aditerum.co.uk/templates/T9/section-2.html ) you do go to the index page and straight to that section - which is great. But look at the url. Now try an open just the index page - it defaults to the section-2 bookmark. So when I add in the same coding for the other 4 pages I suspect the index page will go mental.

[Adendum]

Yup - it went mental.

Have removed the top.locations and book marks, so it's back to normal.

[Adendum]

Almost done now.

Abandoned the object embedding as it gave zero results in a spider crawl. So this development version has had a total re-write and uses php includes to pull in standard WWB pages. Just some fine tuning for the styling and further testing and then I can write up some instructions, create a proper demo and release it into the wild.

[Adendum]

The navigation menu will always be positioned on the right, there are 16 colours and 2 shapes to use, or you can hide the navigation. When you hover over the navigation there is a flyout that contains a customisable label. You will be able to add a standard WWB menu in the page or the header.

Be aware that I am using this folder as a development platform. So what you see now will very likely change in 10 minutes!!! And I am still modifying a variety of elements to make it simple to use.

[Adendum]

You will be able to add a standard WWB menu in the page or the header.

Actually you wont. You can add any menu you want to but you lose the smooth scrolling and parallax effect, so it would be pretty pointless. Try the internal links I set up to test. There is one in the first section that takes you to the 5th section and another in the 5th section that takes you back to the second section. That is how a standard nav menu would work as they would not have the CSS and jQuery applied to them that gives the smooth scrolling and parallax features.

[Adendum]

No. Any LINKS will JUMP to the linked anchor, so no smooth scroll or parallax effect.

Why are you wanting a different navigation method - expand on your needs so I can respond better.

[Adendum]

Remind me of the URL so I can see what that does. No promises though.

[zinc]

Mine it is just a simple menu , it does not have to be Exactly the same I just wanted to keep a top menu and have the slide page like this one
http://dadacommunications.com/

mine is not the same I just used one of the menu in Wysiwyg
associatinrivièremagog.org,

The dada site is not a true parallax like what paul has created. You can do this with Paul's Backstretch extension and RZ's PAO.

Have a look at these sites that I have made:

http://bit.ly/1hp0jQn
http://bit.ly/1kf9aBt

You will see that Paul's upcoming template is a true parallax in the senese that everything moves.

[zinc]

This is Great.......
Do you have the possibility to Highlight, the tab of the page we see when we are on ?
You mentionned :
"Paul's Backstretch extension and RZ's PAO."
Beeing just a novice knowing almost sweet..."nothing" in programming are these 2 extension available in WYSIWYG ?

PAO
viewtopic.php?f=42&t=48834

BackStretch
viewtopic.php?f=42&t=59991

[Rob]

Zinc - are you saying the two sites you noted were built using the two extensions you mentioned? Just curious. I see the designs being the current trend. Beautiful work. I look forward to learning this technique.

[zinc]

Zinc - are you saying the two sites you noted were built using the two extensions you mentioned? Just curious. I see the designs being the current trend. Beautiful work. I look forward to learning this technique.

Yes they are built using these extensions. But what Paul is cooking
is a different beast. Simply amazing!

[Adendum]

Just a question regarding this Parallax template,
Will we de able to get the menu section on top and describe each section instead of the black square on the right ?

OK, so I lied before! ... Just added a top navigation section.

It's a little unusual to set up but now not difficult for the end user. I have set this up so that you can show or hide any of the three navigation elements - top navigation, side navigation and next/prev navigation. When I say "just" it's taken me all bloody day to work out a way to get this all to work with the template and parallax extension!

I think I am pretty much done now. I'll be creating a new demo page, maybe two and then writing up the help file and instructions for related/relevant items. So, unless anyone spots a horrendous issue, I'll be releasing the template in a few days!

[Adendum]

OK, I'm done fiddling.

I have now changed the side navigation and the next/prev navigation to pure CSS. So no clumsy images (they were sprites). So now you will be able to totally customise the colour schemes of all three navigation systems, all of which are 100% CSS and image free zones!

So, next - a new demo.

[Adendum]

No. Any LINKS will JUMP to the linked anchor, so no smooth scroll or parallax effect.

Guess what.......... I lied yet again!

Thanks to Pablo's totally amazing program the internal links now also use the smooth scroll and parallax effects. So JUMPing doesn't have to happen. I just found that you can add a class statement to a link. Pablo thought of everything! Check out the links in section 1 and section 5 of the demo, while I get on with the new demo and documentation.

Have fun and talk amongst yourselves!

[zinc]

Paul;
Great work!

Two questions;

1. Is there a reason why the toolbar (5 buttons) appear during site load?
2. While the pagination and tooltips are now pure CSS, is there no way to assign images for pagination? Maybe something for the future versions.

[Adendum]

1. Is there a reason why the toolbar (5 buttons) appear during site load?

You are suffering from premature something or other! I am still tweaking and fault finding fella. This was on my list and now dealt with.

2. While the pagination and tooltips are now pure CSS, is there no way to assign images for pagination? Maybe something for the future versions.

The 5 buttons at the top in the header is the Top Navigation = pure CSS,
The 5 buttons at the side are the Side Navigation = pure CSS,
The Up and Down arrows (triangles) are the Next/Prev Navigation = pure CSS.

All the above WERE images but that limited the colour options, with pure CSS you can have any colour and you can manipulate the shape through border-radius settings. Not sure what you mean by 'images for pagination.

As this is a PARALLAX single page design I expect the pages to be top heavy on images so I am (and have) reduced all other imagery to zero by using CSS. SO I don't really want to add more weight by offering any more images to the page load. At the moment, you can (if you used all options) have 15 parallax images and whatever you use for the page background - the latest demo uses a single image via Backstretch, so the page is loading 16 images.....not ideal.

I'm signing off for the day now. I plan to produce another, and much simpler demo, tomorrow and then write up the instructions, help file etc. Feel free to browser test for me....and don't bother with iPads or Smart phones as parallax wont work with them.

[Adendum]

OK...........what you see now is the final demo and will remain as the example site.

When I complete the process of writing the help file and an instructions page in the template I will be releasing the template and will generate a new thread.

The purchase download will include the following:-

1. A blank template that includes a page of instructions and general information,
2. A separate zipped version of the Parallax extension with the normal help file, some of which may be duplicated in the template instructions,
3. A separate zipped version of the demo so you can inspect the .wbs project and files.

Note that your server will need to have PHP 5.0 or better. and you will need WWB 9.3 or better.

[Adendum]

HOUSTON...........we are good to go.

T-minus 10 in 10.

viewtopic.php?f=49&t=60775

[Adendum]

The demo template and its symbiotic extension do not currently set an active button in the Top Navigation system - there is an active button in the Side Navigation.

I will look at that possibility.

[Adendum]

It was released several weeks ago. Check my signature fot demos or go here to buy.

[bry]

One thing I do need to investigate is how to handle a potential SERP issue. Maybe someone can offer a suggestion? The issue is that the template is a one page site but is made up of 5 other pages that are embedded in the index page. This is necessary to make it easy for the user to create their content.

So once published and the site gets crawled it will find 6 pages in total. If Google reports back on a search and offers up one of the pages (that is embedded) and that page is clicked, the visitor will get a page with no navigation to the rest of the site. So I am looking for a method that ensures if one of the 5 pages is accessed (by any method) that the browser takes them to index.html. Ideas?

I think that to handle the SERP issue, your menu links should not be at the top and horizontally aligned but should be on the left vertically aligned. That would correspond to the vertical design of the pages and makes more sense to me. That is just my thought on it.

thanks