parallax scrolling

Printed From: openElement Website
Category:

openElement

Forum Name: Templates
Forum Description: Questions about templates? Sharing a custom template? Post here.
URL: https://forums.openelement.uk/en/forum_posts.asp?TID=560
Printed Date: Apr 19 2024 at 7:01pm
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com

Topic: parallax scrolling

Posted By: NFS
Subject: parallax scrolling
Date Posted: Dec 09 2015 at 2:50pm

Is it possible to add parallax scrolling to the responsive template? If so, can someone give me some code examples and some direction on where to add the necessary code on the target page.

Thanks!

Replies:

Posted By: Dmit OE
Date Posted: Dec 10 2015 at 9:40am

Hi,

First, find a parallax script that suits you, and give the link to its "usage example", I will tell you how to integrate it into OE.

Have a nice day
D

Posted By: NFS
Date Posted: Dec 10 2015 at 7:55pm

Thanks.

Here is the link to what I was looking at.
http://callmenick.com/post/advanced-parallax-scrolling-effect

But, I don't have an understanding of where this code would need to be integrated into OE to get something like this to work.

Thanks very much for your willingness to help out and point me in the right direction!

Posted By: Dmit OE
Date Posted: Dec 10 2015 at 9:34pm

Well, it's rather very simple.

Add a Code Block (Source) type Javascript position EndBody (important, so that script can find class-marked tags), and copy all Javascript code from the tutorial as is:


(function(){

  var parallax = document.querySelectorAll(".parallax"),
      speed = 0.5;

  window.onscroll = function(){
    [].slice.call(parallax).forEach(function(el,i){

      var windowYOffset = window.pageYOffset,
          elBackgrounPos = "50% " + (windowYOffset * speed) + "px";

      el.style.backgroundPosition = elBackgrounPos;

    });
  };

})();

On each element with background to parallax, in its Property "Custom Classes", put "parallax".

That's all. You may want to modify background size, repetition etc. - go to Styles->Customize->Background.

Posted By: NFS
Date Posted: Dec 12 2015 at 5:36pm

Thank You!! The parallax effect is fantastic and it was so easy to implement with your help! Very very happy with OE and the awesome support! Clap