locked
How to add Parallax effect to windows 8 App using Javascript/HTML RRS feed

  • Question

  • Can someone share me code snippet to add parallax effect to the listview. I see many posts for c#, but not for javascript.

    I followed based on this article - http://css.dzone.com/articles/how-create-cool-parallax, but couldn't understand what need to be passed for "listQuery". Any suggestions/help to achieve this?

    Saturday, May 4, 2013 12:48 AM

Answers

All replies

  • Here's a good starting point. you can easily adapt this to your desires...

    <html>
    
        <head>
    
            <script>
    
                function onLoad() {
                    window.onscroll = function () {
                        var speed = 8.0;
                        document.body.style.backgroundPosition = (-window.pageXOffset / speed) + "px " + (-window.pageYOffset / speed) + "px";
                    }
                }
    
            </script>
    
        </head>
    
        <body onload="onLoad()" style="height: 200%; width: 200%; background-image:url('../images/pat.png'); background-repeat:repeat-xy; background-attachment: fixed;">
    
            <div style="color:#000; font-size:3em; margin: 64px 64px 32px 128px;">
                Super easy parallax sample.<br>
            </div>
    
            <div style="background-color:#000; border-radius: 8px; margin-bottom: 10%; color: white; font-size:1em; padding: 16px;float: left; margin: 32px 64px 32px 128px;">
    
                <div style="float: right;">
                    Hello World <br>
                </div>
    
            </div>
        </body>
    
    </html>

    Sunday, May 5, 2013 3:07 PM
  • Here's the original link for that article, http://blogs.msdn.com/b/eternalcoding/archive/2012/11/21/tips-and-tricks-for-windows-8-javascript-developer-how-to-create-a-cool-parallax-background.aspx . There was one typo corrected in the script that wasn't included in the link you have above.

    As far as the 'listQuery' parameter, that should be a selector for your listview. So if your listview has id="myListView", you can pass in "#myListView" for listQuery.

    Joel

    Thursday, May 9, 2013 5:26 PM