Parallax image background based on screen position

Feature Requests
1

It would be good if the background image of an object could be made to offset, based on the scroll position of a page. (aka parallax effect) And also the ability to adjust the speed it scrolls at (0.5x 1x or 2 or an arbitrary figure etc…)

I know there’s scrollR, but development for that has stopped, and I don’t want to be using something that’s heading for obsolescence. :smile:

2

Hi @gaz

Have a search on here for parallax as there are a few posts on the subject.

Also look here Michael’s website where there is an example of a parallax template you can download and pick up some tips.

1 Like
3

Thanks @DBear

this is a very basic code but it works well.
you can change direction and speed

$(window).scroll(function(e){
  parallax();
});
function parallax(){
  var scrolled = $(window).scrollTop();
  $('.parallax').css('margin-top',-(scrolled*0.25)+'px');     
}
4

Your welcome @michelangelo

Also just to note that the above code needs JQuery to be added in the Head HTML.

Here is a vanilla version.

window.addEventListener('scroll', function () {

    var scrolled = window.scrollY;
    element.querySelector('.parallax').style.marginTop = "-" +(scrolled*0.25)+ "px";
});
5

forgot :slight_smile:
I'll check your code, thanks @DBear

6

Thanks, I’ve only just got around to trying this, do I add the code into the header between tags ? or as a script that runs within “on Scene Load”.

I guess I give the picture a Unique Element ID of “parallax” ?

Thanks
Gaz

7

no, you don't need a unique ID for parallax objects.
you can apply the parallax behavior to multiple objects with classes only.

Download this template, I added the parallax effect to some objects ( mac classic and the rainbow inside the apple)

BTW: the code by @DBear is better than mine, you could try both.

8

Anyone happen to have a new link to this template? Looks like it's out of date.

9
1 Like