BullGuard Antivirus Sale - 60% Off with openElement !
openElement Website Homepage
Forum Home Forum Home >

openElement

> Templates
  New Posts New Posts RSS Feed - parallax scrolling
  FAQ FAQ  Forum Search   Register Register  Login Login

parallax scrolling

 Post Reply Post Reply
Author
Message
NFS View Drop Down
Newbie
Newbie


Joined: Nov 24 2015
Location: Canada
Status: Offline
Points: 11
Post Options Post Options   Thanks (0) Thanks(0)   Quote NFS Quote  Post ReplyReply Direct Link To This Post Topic: parallax scrolling
    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!
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group
Avatar

Joined: May 31 2012
Status: Offline
Points: 5261
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post 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
Back to Top
NFS View Drop Down
Newbie
Newbie


Joined: Nov 24 2015
Location: Canada
Status: Offline
Points: 11
Post Options Post Options   Thanks (0) Thanks(0)   Quote NFS Quote  Post ReplyReply Direct Link To This Post 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!
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group
Avatar

Joined: May 31 2012
Status: Offline
Points: 5261
Post Options Post Options   Thanks (1) Thanks(1)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post 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.
Back to Top
NFS View Drop Down
Newbie
Newbie


Joined: Nov 24 2015
Location: Canada
Status: Offline
Points: 11
Post Options Post Options   Thanks (0) Thanks(0)   Quote NFS Quote  Post ReplyReply Direct Link To This Post 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
Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 10.11
Copyright ©2001-2012 Web Wiz Ltd.

This page was generated in 0,035 seconds.