Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • James Kahler 36 posts 78 karma points
    Nov 23, 2012 @ 10:30
    James Kahler
    0

    parallax site

    I've got a requirement from a client for a parallax site , just trying to think of the best way to do this in umbraco.

    Does anyone have an examples or idea about how to approach this?

  • Edwin van Koppen 156 posts 270 karma points
    Nov 25, 2012 @ 12:22
    Edwin van Koppen
    0

    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? 

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Nov 25, 2012 @ 21:42
    Jan Skovgaard
    0

    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

  • Troels Larsen 75 posts 280 karma points
    Nov 25, 2012 @ 22:16
    Troels Larsen
    0

    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.

  • James Kahler 36 posts 78 karma points
    Nov 26, 2012 @ 11:06
    James Kahler
    0

    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.

  • Troels Larsen 75 posts 280 karma points
    Nov 26, 2012 @ 11:37
    Troels Larsen
    0

    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. 

     

  • Troels Larsen 75 posts 280 karma points
    Nov 26, 2012 @ 13:23
    Troels Larsen
    0

    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)

    }

    }

    //Hope that helps. els give me a note and ill send u the solution. 

     

  • Troels Larsen 75 posts 280 karma points
    Nov 28, 2012 @ 17:43
    Troels Larsen
    0

    Didt it get u anywhere mate ? 

  • James Kahler 36 posts 78 karma points
    Nov 29, 2012 @ 10:34
    James Kahler
    0

     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

  • Troels Larsen 75 posts 280 karma points
    Nov 29, 2012 @ 13:19
    Troels Larsen
    0

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

Please Sign in or register to post replies

Write your reply to:

Draft