Tips and tricks for Windows 8 JavaScript developer: How to create a cool parallax background - Eternal Coding - HTML5 / JavaScript / 3D development - Site Home - MSDN Blogs

Tips and tricks for Windows 8 JavaScript developer: How to create a cool parallax background


 

Tips and tricks for Windows 8 JavaScript developer: How to create a cool parallax background

  • Comments 7

Parallax background is a really simple but extremely cool feature you can add to your application. You just need a div containing your background picture and a listview on top of it:

<div id="backgroundHolder">
</div>
<div class="blocksList" id="blocksList" data-win-control="WinJS.UI.ListView">
</div>

Then you have to use this CSS to display background picture larger than the current window:

#backgroundHolder {
    background-size: 120% 100%;
    height: 100%;
    width: 100%;

}

Next you have to add a cool picture as a background picture of your div.

Then with the little following function you can handle the scroll event of your list and move the position of your background:

 var attachParallax = function (listQuery) {
     var listViewDOM = document.querySelector(listQuery);
     var listView = listViewDOM.winControl;
     var backGroundHolder = document.querySelector("#backgroundHolder");
     document.querySelector(listQuery + " .win-viewport").addEventListener("scroll", function (e) {
         setImmediate(function() {
             backGroundHolder.style["background-position-x"] = 
-((listViewDOM.scrollLeft / listViewDOM.scrollWidth) *
listViewDOM.clientWidth * 0.2) +
"px"; }); }); };

Considering that the background image is 20% larger than the main window, the idea of this function is to get a scaling ratio based on the scroll bar position. The result is used to move the left position of the background (from 0 to 20% of the window’s width).

But we have an issue with the smoothness of the translation. To resolve this problem, you can use the wonderful power of CSS3 transitions Sourire

#backgroundHolder {
    background-size: 120% 100%;
    height: 100%;
    width: 100%;
    transition-property: background-position-x;
    transition-timing-function: ease;
    transition-duration: 0.8s;
}

So thanks to these CSS rules, the position of the background will change smoothly instead of jumping from a position to the next one!

Obviously the next version of UrzaGatherer will include this feature!

At the begining:

image

Then after you scroll a bit, you can see that the background (1) only moved a few pixels where the foreground (2) moved almost the entire screen:

image

Leave a Comment
  • Please add 4 and 8 and type the answer here:
  • Post
  • Uhm...where  is scrollViewer coming from?

  • Oups it was a typo. scrollViewer = listViewDOM

  • Hi,

    thnx for this post. I'm trying to use it but my listviewdom.scrollLeft stays 0px always. Obviously i'm scrolling to the right , that's why there's the minus in front of it. But the event is just not triggered.

    Do you know what can cause this

    the background-position is always 0px;

    many thnx

  • Whats up very nice <a href="http://www.personalstudentloans.us">website</a>

    !! Man .. Beautiful .. Wonderful .. I will bookmark your site and take the feeds also?I am satisfied to seek out so many helpful information right here within the put up, we need work out more strategies in this regard, thank you for sharing. . . . . .

  • This is a great example for all beginners.

    Thanks for sharing this.

    Could you please tell me how to add scroll event to the ListView (here blockList)?

    Thanks!

  • Could this also be used for the Hub/Pivot controls of WinJS 2.x?

  • I think so

Page 1 of 1 (7 items)