I'm just a Umbraco starter but can't you make 1 node with every layer a own tab? Or maybe every layer it's own node? 

Hi James

The way I see it wether or not you're able to create the desired parallax effect really has nothing to do with Umbraco since Umbraco is just containing the data for your site roughly speaking.

You should be able to create the neccesary html elements and styling effects using CSS like you would do just using static HTML and CSS files.

So I would like to hear what it is you're having doubts about? Is it where to place the HTML and styles etc?

Looking forward to hearing from you.

/Jan

Hey James 

I made a prof of concept for a customer not long ago with parallax scrolling both horisontal and vertical manners, what i didt was make a "dispatcher" razor file that switch in the template type and after that i just added a class for styling.So all pages are loaded on the front page taken there indevidual template in to considearation. and children to that node then cam out as left right elements. Pretty easy solution.

tu can still find the solution here : speed is not gonna kill you, it is just a misunderstod dev server :)  

http://en.alphap.dev3.1508test.dk/    

Drop me a line if u want me to send you some code to investegate.

Thanks for the replys

Troels, thats the way i was thinking, how did you go about handling the urls that are created with seperate nodes because obviously urls will exist that you don't want.

I dont use the urls, evrything is rendered on the same page, so no need for urls. It has that drawback that u cant deep link to the pages but that is how it is when the customers want snazzyness in a cup :) 

for navigation purpos i use node ids that way i can make parallax scroll to the desired div tag. 

 

here is my "SectionView" razor file that calls the rendering needed for eacht document type. it is the one i render on my frontpage.

 

@using umbraco.MacroEngines

@inherits umbraco.MacroEngines.DynamicNodeContext

@{

var i = 0;

} 

 

 

@foreach(var item in Model.Children){ 

<div id="[email protected]" class="section slide sectionMain section-@i" data-section="@i" >

<ul class="sectionInner">

@if (item.NodeTypeAlias == "backgroundPage") { 

@RenderPage("Section Modules/backgroundPage.cshtml", item.Id)

}

@if (item.NodeTypeAlias == "imagePage") { 

@RenderPage("Section Modules/imagePage.cshtml", item.Id)

}

@if (item.NodeTypeAlias == "spotPage") { 

@RenderPage("Section Modules/spotPage.cshtml", item.Id)

}

@if (item.NodeTypeAlias == "contentPage") { 

@RenderPage("Section Modules/contentPage.cshtml", item.Id)

}

@if (item.NodeTypeAlias == "contactPage") { 

@RenderPage("Section Modules/contactPage.cshtml", item.Id)

}

@if (item.NodeTypeAlias == "videoPage") { 

@RenderPage("Section Modules/videoPage.cshtml", item.Id)

}

@if (item.NodeTypeAlias == "mapPage"){ 

@RenderPage("GoogleMaps/MapView.cshtml", item.Id)

}

</ul>

</div>

i++;

}

 

And one of my templates called "backgroupPage" it grabs the model id out of the PageData array and renders the properties on that current model out. in the end it calles my dispatcher view that checks if that node has children if true it then adds those as horisontal scrolling pages to my current section.

@inherits umbraco.MacroEngines.DynamicNodeContext

@{

var currentItem = CurrentModel.NodeById(PageData[0]);

var css = "";

var myId = "";

 

if(currentItem.HasValue("backgroundImage"))

{

//style="background:url(@currentItem.Media("backgroundImage", "umbracoFile"));"

css = string.Format("style=\"background:url({0});\"", currentItem.Media("backgroundImage", "umbracoFile"));

}

 

if(currentItem.Level == 2){

myId = string.Format("id=\"myLi-{0}\"", currentItem.Id);

}

 

}

<li @Html.Raw(myId) class="page backgroundPage touchPage"  @Html.Raw(css)>

<div class="pageCaption">

@Html.Raw("<p>" + currentItem.GetPropertyValue("pageTitle") + "</p>")

@Html.Raw("<h1>" + currentItem.GetPropertyValue("pageManchet") + "</h1>")

@Html.Raw("" + currentItem.GetPropertyValue("pageContent") + "")

</div>

</li>

@RenderPage("../Common/_pageTypeChooser.cshtml", currentItem.Id)

 

My pageTypeChooser 

@inherits umbraco.MacroEngines.DynamicNodeContext

@using umbraco.MacroEngines

 

@{

var currentItem = CurrentModel.NodeById(PageData[0]);

}

 

@foreach (var item in currentItem.Children)

{

if (item.NodeTypeAlias == "backgroundPage")

{

@RenderPage("../Section Modules/backgroundPage.cshtml", item.Id);

}

if (item.NodeTypeAlias == "imagePage") { 

@RenderPage("../Section Modules/imagePage.cshtml", item.Id)

}

if (item.NodeTypeAlias == "spotPage") { 

@RenderPage("../Section Modules/spotPage.cshtml", item.Id)

}

if (item.NodeTypeAlias == "contactPage") { 

@RenderPage("../Section Modules/contactPage.cshtml", item.Id)

}

if (item.NodeTypeAlias == "contentPage") { 

@RenderPage("../Section Modules/contentPage.cshtml", item.Id)

}

if (item.NodeTypeAlias == "videoPage") { 

@RenderPage("../Section Modules/videoPage.cshtml", item.Id)

}

if (item.NodeTypeAlias == "mapPage") { 

@RenderPage("../GoogleMaps/mapView.cshtml", item.Id)

}

}

 

Didt it get u anywhere mate ? 

 Sorry for not getting back, Haven't had a chance to look at this properly yet but i think this is definatly the way we will approach it.

Many thanks for your assistance

Np mate give me a note when u got something up and running would love to see it 

is working on a reply...