Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!-- Sincronizar librería GSAP -->
- <script src='https://unpkg.co/gsap/dist/gsap.min.js'></script>
- <script>
- // Insertar el atributo data-image con las urls de las imagenes a cada fila
- const addData = document.querySelectorAll('.ov-data-image');
- const enlacesIMG = [
- '#',
- '#',
- '#',
- '#',
- '#',
- ];
- addData.forEach((div, index) => {
- div.setAttribute('data-img', enlacesIMG[index]);
- });
- </script>
- <script>
- // Funcionalidad GSAP efecto hover image
- const allVenues = gsap.utils.toArray(".cursor-img-item");
- const venueImageWrap = document.querySelector(".cursor-img-wrap");
- const venueImage = document.querySelector(".cursor-img");
- function initVenues() {
- allVenues.forEach((link) => {
- link.addEventListener("mouseenter", venueHover);
- link.addEventListener("mouseleave", venueHover);
- link.addEventListener("mousemove", moveVenueImage);
- });
- }
- function moveVenueImage(e) {
- let xpos = e.clientX;
- let ypos = e.clientY;
- const tl = gsap.timeline();
- tl.to(venueImageWrap, {
- x: xpos,
- y: ypos
- });
- }
- function venueHover(e) {
- if (e.type === "mouseenter") {
- const targetImage = e.target.dataset.img;
- const t1 = gsap.timeline();
- t1.set(venueImage, {
- backgroundImage: `url(${targetImage})`
- }).to(venueImageWrap, {
- duration: 0.5,
- autoAlpha: 1
- });
- } else if (e.type === "mouseleave") {
- const tl = gsap.timeline();
- tl.to(venueImageWrap, {
- duration: 0.5,
- autoAlpha: 0
- });
- }
- }
- function init() {
- initVenues();
- }
- window.addEventListener("load", function () {
- init();
- });
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement