Have you ever built a parallax scrolling website and wanted to make it responsive but didn’t know how? Does your page work perfectly on desktop but is completely unusable on mobile and tablet devices?
Here’s a step-by-step guide on how you can turn off parallax scrolling for mobile and touch devices using enquire.js.
The initial files for this tutorial are the final files for my tutorial simple parallax scrolling.
View Demo →Download Startup Files ↓
Before we begin, here’s a quick summary of the steps we’ll follow:
<ul
1. Include Enquire.js
The first thing we need to do is include enquire.js.
This is a useful and lightweight JavaScript library, which allows you to use media queries within your JavaScript files.
Download enquire.js, copy it into the js folder, and include the reference at the bottom of our index.html.
Now we need to disable Skroll.js for mobile devices.
2. Disable Skrollr.js for mobile
We’re starting Skrollr.js in _main.js inside the adjustWindow() function.
We’ll need to modify this function and make sure it runs every time we resize the browser window from desktop to mobile breakpoint.
In our case it will be 768 pixels, but feel free to define your own breakpoint based on your content.
function adjustWindow(){ // Get the window size winH = $window.height(); winW = $window.width(); // Keep the minimum height 550 if(winH = 768) { // Start Skrollr var s = skrollr.init({ forceHeight: false }); // Change the size of our slides $slide.height(winH); s.refresh($(‘.homeSlide’)); } else { // Initialize Skrollr var s = skrollr.init(); s.destroy(); } // Check for touch if(Modernizr.touch) { // Init Skrollr var s = skrollr.init(); s.destroy(); } }
We are adding the winW variable and starting skrollr only if the browser window is wider than 768px.
We are destroying skrollr in screens below 768 pixels and on touch devices of any size.
We must also register the enquire.js breakpoint right after the adjustWindow() function.
function adjustWindow(){ … } function initAdjustWindow() { return { match : function() { adjustWindow(); }, unpair: function() { fitWindow(); } }; } enquire.register(“screen y (min width: 768px)”, initAdjustWindow(), false);
This will ensure that adjustWindow() is called every time we change the window size from one breakpoint to another.
To see if everything works correctly, open the developer tools
strong> (Right-click > Inspect Element) in Chrome and inspect the .hsContent element.
You’ll notice that on the desktop you have some extra classes and some inline styles, these are generated by skrollr.
If you change the size to less than 768px, you will see that the same container has only one class, data attributes and no inline styles.
That’s what we wanted, now we just need to include media queries and adjust our css for mobile devices.
3. Include Media Queries
From now on it’s a process of moving some styles to the desktop breakpoint and setting new styles for the smaller screens. p>
The goal is to keep movable styles as simple as possible.
Typically, make things float instead of an absolute or fixed position and use % for the width is enough for your content to fit in the viewport.
Of course, adjusting the font size is also a good idea.
Paste the following code below the EXAMPLE Media Queries for Responsive Design comment in the css/main.css file.
/* Medium devices (tablets, 768px and above) */ @media screen only and (min width: 768px) { body, html { height: auto; } .bcg { background position: center center; background repeat: no repeat; background attachment: fixed; background size: cover; height: 100%; width: 100%; } section { min width: 768px; height: 600px; } .hsContainer { width: 100%; height: 100%; overflow: hidden; relative position; } .hsContent { max width: 700px; position: absolute; left: 50%; above: 50%; text alignment: left; padding: 0; } .hsContent h2 { font-size: 35px; line height: 38px; } .hsContent p { width: 400px; } #slide-1 .hsContent { down: 200px; top: automatic; left margin: -80px; } #slide-2 .hsContent { left margin: -340px; top: automatic; } #slide-2 h2 { position: fixed; above: 70%; } #slide-3 .hsContent { left margin: -300px; } #slide-4 .hsContent { left margin: -340px; position: fixed; } #slide-4 h2 { background: none; } }
Any styling within this media query will only be applied to our page once it is viewed on a wide screen of 768 pixels or more. p>
In case your content requires many styles on the desktop, first paste everything inside the desktop media query.
Then copy only little snippets of css for each of your elements go back to the default (mobile-first) part of your stylesheet.
This will keep your mobile styles very minimalistic.
4. Adjust CSS
With these rules applied only to larger screens, we can now modify mobile styles however we want.
This is a quick example of the values I’m setting for small screens by default. Replace the default styles (declarations from the previous tutorial, not within the media query) with the styles below:
section { opacity: 0; height: 360px; } .bcg { background-size: cover; height: 100%; width: 100%; } /* this aligns the content 150px up from the center */ .hsContainer { display: table; table layout: fixed; width: 100%; height: 100%; overflow: hidden; relative position; } .hsContent { max width: 80%; margin: -150px auto 0 auto; display: table-cell; vertical alignment: middle; padding: 0 8%; text alignment: center; relative position; } .hsContent h2 { color: #fff8de; backgroundcolor: rgba(0,0,0,0.5); padding: 10px 5px; font size: 20px; line height: 23px; bottom margin: 12px; } .hsContent p { width: 80%; colour: #b2b2b2; }
As you can see, I’m setting the height of the sections to 360px, centering the content in the middle, reducing the font, and setting the width of the text. at 80%.
Each of the slides has only the following styles applied on mobile:
/* Slide 1 */ #slide-1 .bcg { background-image:url(‘../img/bcg_slide-1.jpg’)} #slide-1 .hsContent {} /* Slide 2 */ #slide-2 .bcg {background-image:url ( ‘../img/bcg_slide-2.jpg’)} #slide-2 .hsContent {} #slide-2 h2 {} /* Slide 3 */ #slide-3 .bcg {background-image:url(‘ . ./img/bcg_slide-3.jpg’)} #slide-3 .hsContent {} #slide-3 h2 { color: #f2ead6; backgroundcolor: rgba(0,0,0,0.6); } /* Slide 4 */ #slide-4 .bcg { background-image:url(‘../img/bcg_slide-4.jpg’); bottom position: center center; } #slide-4 .hsContent {} #slide-4 h2 { padding-left: 0; right padding: 0; }
This is where you can also apply a mobile-optimized background image to each of the sections.
Some of these rules are overridden >. > by styles within our desktop media query.
View Demo →Download Final Files ↓
Conclusion
The more complex your parallax scrolling website that is, the more CSS tweaks you have to do.
What is your approach when it comes to making Parallax websites responsive? Have you ever tried implementing any of the scrolling libraries to work on mobile devices?
Let me know in the comments below.
.