Jump to content

Parallax - Disabling code injection on Mobile

Recommended Posts

Hi All,

I am struggling with Parallax on mobile and I wanted to know if there is a line of code I can insert in the header code injection that will enable me to keep the effect on desktop versions of the site.

Site in question : www.nicolebarton.co.ukSite Style: Bedford

You can see on the mobile version I am getting bars appear on the top / bottom when viewed in the mobile format.

I have copied my Parallax code below, which sits in Settings>Advanced>Code Injection


<!-- Parallax -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.6.2/rellax.min.js"></script>
<script>
 document.addEventListener('DOMContentLoaded', function() {
   var targets = '.banner-thumbnail-wrapper #thumbnail img, .index-section #thumbnail img, .index-section:first-child .slide .thumb-image';
   if (document.querySelector(targets)) {
     var rellax = new Rellax(targets, {
       speed: -3,
       center: true
     });
   }
 });
</script>
<!-- end Parallax -->

Ideally this would be a few lines of code at the end that states if a page is 640px wide then it will disable this particular piece of code.

Any help greatly appreciated!

Edited by NB1986
Link to comment
  • 4 months later...

Hey, NB - did you ever get an answer to this? I'm actually struggling with the opposite problem: I want to turn parallax banner images ON for my blog posts, but the Brine template doesn't support it so I'm having to use code injection as well. And even then, I'm not sure the script I have is the most efficient and it doesn't do anything with the parallax. Any thoughts?

I'll also keep an eye out for a solution to your problem.

JB

Link to comment
  • 3 months later...

I did not try this and i was searching for something else, so idk if it will work, but I had do a similar thing for some headers, I wanted them to change with the screen size but only after a certain point. I used the following code

@media (max-width: 480px) {
  h4 {
    font-size: 14vw;
  }
}

Anything within @media will only take effect if the condition stated is met (could use min-width too). So in this case h4 will have a font size of 14vw when the media window is between 0-480, using min width would set the lower bound. 

so I wonder if that would be something you could add to the script or something, maybe hide all of this in a @media? Just thinking here, could be totally wrong

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.