Row Background Mouse Interaction
-
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?
-
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-javascriptLet us know when you have more specific questions.
Best!
Marius
-
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:
-
I gave a row the id "landing-content"
-
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;
}- 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 :)
-
-
Dear @moritzmortimer
have a look again here under BINDING CLICK ELEMENTS
http://laytheme.com/documentation.html#custom-javascriptYou can also do it step by step.
Use console.log("TEST") to see if your code is executed.Best!
Marius
Before you post
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. Now see if your problem solved itself
5. Go here, see if your problem is listed here:
Troubleshooting
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it