marekhrabe/madeindays — pull request #1 by KB1RMA (2014-10-01 20:15:08+00:00)
Title: Performance enhancing styles

First off, thanks for providing the source to this. It's really a great example of a well laid out project using the Skrollr.Js library and inspired me to lay my project out in a very similar way. Certainly helping save some time refactoring!

While putting together our project in a very similar style, I came across a very small performance tweak that has quite a large effect on frame-rate when using transforms to manipulate full-screen elements. Especially on lower powered devices.

This was really inspired by a blog post I came across when researching CSS performance: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

```Less
.performance() {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
}
```

I used it in my project with great results and applied it to your source just as a proof of concept. And perhaps a bit of thanks in there as well :). Really only the Materials section requires any of it as that's where most of the repaints seem to occur. There are still a few left, but this drastically increases how smoothly it scrolls.

**Before Tweaks**:

![](http://i.imgur.com/BOedA95.png)

**After Tweaks**:

![](http://i.imgur.com/igrJBhU.png)

Anyway, pop it in there if you want, or not. But hope it's useful for someone!