Row Background Mouse Interaction

[moritzmortimer]

Hi, I would like to add a mouse interaction animation with JS to a row background image as in this example: http://www.onextrapixel.com/examples/interactive-background/

Is this possible and can someone help me with the necessary code?

[mariusjopen]

Dear @moritzmortimer
this is cool.

Well, you need to add the code into the CUSTOM CODE section.

Have a close look here:
http://laytheme.com/documentation.html#custom-javascript

Let us know when you have more specific questions.

Best!

Marius

[moritzmortimer]

Hi @mariusjopen,

thanks for your answer. I already read the instructions on the laytheme page regarding custom javascript. Unfortunately I have issues with implementing this effect although I tried it with multiple different versions. This is what I have so far:

1. I gave a row the id "landing-content"

2. I inserted the following custom css:

#landing-content {
overflow: hidden;
background-image: url(image.jpg);
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

3. I inserted the javascript into custom HTML at bottom:

<script>
jquery('#landing-content').mousemove(function(e){
var amountMovedX = (e.pageX * -1 / 6);
var amountMovedY = (e.pageY * -1 / 6);
jquery(this).css('background-position', amountMovedX + 'px ' + amountMovedY + 'px');
});
</script>

Do you or anybody else have any thoughts on this or might be able to tell me where I’m wrong?

Thanks in advance :)

[mariusjopen]

Dear @moritzmortimer
have a look again here under BINDING CLICK ELEMENTS
http://laytheme.com/documentation.html#custom-javascript

You can also do it step by step.
Use console.log("TEST") to see if your code is executed.

Best!

Marius