Parallax Scrolling in Macaw
I've been amped about Macaw - the responsive web design tool - since I heard about it what seems like eons ago on Kickstarter. Team Macaw have just released v1.5 which has booted Macaw from 'good app' to 'great design tool'. It feels much more solid now and is destined for great things.
Anyway...
I've been toying with the features of this new, more solid version of Macaw and wanted see if I could implement a few tricks which I've built into some of my code-from-scratch sites. We're talking about parallaxing background!
Author Caveat: I won't profess owner/creator-ship of the script I've used; it was a lucky find online and the least complex of the solutions I tried. If anyone recognises it / knows who made it, please let me know so I can credit them! Furthermore, the way I've set up my Macaw project may look a little div-heavy but it's currently the best way I've found to combat some of the more idiosyncratic ways that Macaw works.
Here's what I did.
1) Looking at the topmost section (classed .header), I've put my copy and link button in here. This is any old content that sits within the standard flow of our DOM.
2) The bottommost div (classed .bg) is where we have our image background. I've put it right at the bottom of the document layers because I wanted absolutely everything to appear above it.
3) Take a look at the settings for our bottom .bg div.
- The background image is tall enough to accommodate the movement. I've set the div height because I have content scrolling immediately over it but if you've got something of a gap, you'll want to leave plenty of space and image height to parallax with.
- The div is set to position: fixed at the top of the window and has been centralised so that it will scale evenly when we change the browser width.
- The background is set to align to the top of the div and is set to :cover so that the image fills the div no matter what size the window (FYI: If you're wanting really wide viewport support, you're going to need a decent quality image else it'll start to look pretty janky when you stretch it!)
4) Drop the below script into the 'scripts' window; I've omitted the <script> tags without detriment (as far as I can tell, at least!). Note that we're concerned with our .bg div and it's position with the top of the window, not the actual content of the header.
<script>
// trigger parallax function on window scroll $(window).scroll(function(e){ parallax(); }); // declare parallax function function parallax(){ var scrolled = $(window).scrollTop(); $('.bg').css('top',-(scrolled*0.65)+'px'); }
</script>
5) Trusting you've got your elements setup right (sorry; that sounds like a cop-out!) you should find that your section.header scrolls at the normal window speed and your div.bg moves slower creating our parallax effect.
I'll post up a non-client version of this document for you to play with soon! Please do let me know your thoughts, if you've got any improvements, or if you've got any other awesome tips on working with Macaw!
Now? Some screens!
The section.header with div.bg underneath
Our DOM outline: we're concerned with the top and bottom elements.
div.bg settings (1)
div.bg settings (2)
div.bg settings for background image
Check me out on Twitter (@thepixelgrid) and follow @macawco for more on their awesome software.
