Mouse Over Parallax Image

How To
1

Hi Is there anyway I can do the mouse over parallax like in this site?

image
image1831×658 86.3 KB

The original link: Live demo for Spectrum - Architecture One Page Modern HTML Landing Page Template #75697

2

Chao @hoangdong13 not without custom code. There is already a feature request on the idea board which is getting some good votes now over 500 which would give you this ability. Be sure to give it a thumbs up

1 Like
3

Thank you that’s awesome! Is there a way that I can do it now? I try different JQuery code but none are working

4

Hi,

you can use something like Parallax.js. The implemetation is pretty easy and works nicely!

5

That’s so awesome! :smiley: thank you so much. Is it ok if i can see the source code of your example?

6

I made a quick video: https://vimeo.com/623233925/696073ccb9

This is the Javascript Code:

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var scene = document.getElementById('scene');
    var parallaxInstance = new Parallax(scene, {
      selector: '.post-thumbnail',
    });
  });
</script>

Btw., you can add the

<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>

also into the code element instead to the global js if you use it e.g. only on the Homepage.

Edit: Settings > Page Settings > Body (Footer ) Scripts should also work.

3 Likes
7

Thank you so much really appreciate!! :smiley:

1 Like