Videos playing in 3D Object by hover-on
-
Hello everyone,
does anyone know if its possible to have a video playing inside or better said on a 3D Object (Basically as skin)
by hovering over the 3D Object.3D Object can be like on this site: https://adam-powell.net/index/
and if you hover over it, theres a video playing on this 3D Object.Thanks for your help in advance.
Best,
-
no i dont know how to do that
probably difficult to code this -
with "3d object" do you mean the project thumbnails there that change their rotation based on the mouse position?
seems like he used this library:
https://micku7zu.github.io/vanilla-tilt.js/to do the same:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.8.1/vanilla-tilt.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> window.laytheme.on("newpageshown", function(){ VanillaTilt.init(document.querySelectorAll(".thumbnail-wrap"), { max: 40, speed: 800, reset: false, reverse: true, perspective: 900 }); } }); </script>
put this in
Enter this css in "lay options" -> "custom css & html" -> "custom head content"if you want the project thumbnail to show a video on hover:
in lay options set these 3 settings like this:
(the third setting will only be available once you update lay theme, cause its new. i will release the update today)
now for a project, set both the mouseover image and the project thumbnail video:
then on project thumbnail hover, you will see a video.
before, you will see the image set above. -
thank you very much armin
1/4
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it