Webleb - UI Elements - Images Navigation Hover Effect

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<div class="content">
				<svg class="distort" width="350" height="450" viewBox="0 0 350 450">
					<filter id="distortionFilter">
						<feTurbulence type="turbulence" baseFrequency="0.07 0.01" numOctaves="5" seed="2" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="noise"/>
						<feDisplacementMap in="SourceGraphic" in2="noise" scale="0" xChannelSelector="R" yChannelSelector="B" x="0%" y="0%" width="100%" height="100%" filterUnits="userSpaceOnUse"/>
					</filter>
					<g filter="url(#distortionFilter)">
						<image class="distort__img" x="50" y="50" xlink:href="https://images.unsplash.com/photo-1530092285049-1c42085fd395?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fHNwcmluZ3xlbnwwfHwwfHx8MA%3D%3D" height="350" width="250"/>
						<image class="distort__img" x="50" y="50" xlink:href="https://images.unsplash.com/photo-1532347922424-c652d9b7208e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8c3VtbWVyfGVufDB8fDB8fHww" height="350" width="250"/>
						<image class="distort__img" x="50" y="50" xlink:href="https://images.unsplash.com/photo-1543837173-6c26bc89937b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8YXV0dW1ufGVufDB8fDB8fHww" height="350" width="250"/>
						<image class="distort__img" x="50" y="50" xlink:href="https://images.unsplash.com/photo-1551582045-6ec9c11d8697?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8d2ludGVyfGVufDB8fDB8fHww" height="350" width="250"/>
					</g>
				</svg>
				<nav class="menu">
					<a href="#" class="menu__link">Spring</a>
					<a href="#" class="menu__link">Summer</a>
					<a href="#" class="menu__link">Autumn</a>
					<a href="#" class="menu__link">Winter</a>
				</nav>
			</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script><script  src="./script.js"></script>

</body>
</html>

CSS

JS

{
    const body = document.body;
    const docEl = document.documentElement;

const lineEq = (y2, y1, x2, x1, currentVal) => {
        // y = mx + b 
        var m = (y2 - y1) / (x2 - x1), b = y1 - m * x1;
        return m * currentVal + b;
    };

// The feDisplacementMap element
    const feDisplacementMapEl = document.querySelector('feDisplacementMap');

class Menu {
        constructor() {
            this.DOM = {
                // The SVG element
                svg: document.querySelector('svg.distort'),
                // The menu element
                menu: document.querySelector('nav.menu')
            };
            // The images (one per menu link)
            this.DOM.imgs = [...this.DOM.svg.querySelectorAll('g > image')];
            // The menu links
            this.DOM.menuLinks = [...this.DOM.menu.querySelectorAll('.menu__link')];
            // Mouse position
            this.mousePos = {x: winsize.width/2, y: winsize.height/2};
            // Last mouse positions (one to consider for the image translation movement, another for the scale value of the feDisplacementMap element)
            this.lastMousePos = {
                translation: {x: winsize.width/2, y: winsize.height/2},
                displacement: {x: 0, y: 0}
            };
            // feDisplacementMap scale value
            this.dmScale = 0;
            // Current menu link position
            this.current = -1;
            
            this.initEvents();
            requestAnimationFrame(() => this.render());
        }
        initEvents() {
            // Update mouse position
            window.addEventListener('mousemove', ev => this.mousePos = getMousePos(ev));

this.DOM.menuLinks.forEach((item, pos) => {
                // Create spans for each letter
                const letters = [...item.querySelectorAll('span')];

const mouseenterFn = () => {
                    // Hide the previous menu image.
                    if ( this.current !== -1 ) {
                       TweenMax.set(this.DOM.imgs[this.current], {opacity: 0});
                    }
                    // Update current.
                    this.current = pos;

// Now fade in the new image if we are entering the menu or just set the new image's opacity to 1 if switching between menu items.
                    if ( this.fade ) {
                        TweenMax.to(this.DOM.imgs[this.current], 0.5, {ease: Quad.easeOut, opacity: 1});
                        this.fade = false;
                    }
                    else {
                        TweenMax.set(this.DOM.imgs[this.current], {opacity: 1});
                    }
                    
                    // Letters effect
                    TweenMax.staggerTo(letters, 0.2, {
                        ease: Sine.easeInOut,
                        y: this.lastMousePos.translation.y < this.mousePos.y ? 30 : -30,
                        startAt: {opacity: 1, y: 0},
                        opacity: 0,
                        yoyo: true,
                        yoyoEase: Back.easeOut,
                        repeat: 1,
                        stagger: {
                            grid: [1,letters.length-1],
                            from: 'center',
                            amount: 0.12
                        }
                    });
                };
                item.addEventListener('mouseenter', mouseenterFn);
            });

requestAnimationFrame(() => this.render());
        }
    }

new Menu();
}

Images Navigation Hover Effect

Recommended

Portfolio website complete

HELLO MY FRIEND

Product card shop

HTML

CSS

JS

Recommended

Portfolio website complete

HELLO MY FRIEND

Product card shop

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS