छवियाँ नेविगेशन होवर प्रभाव

1970 Andev.web

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

5 December 2024

प्रेमी खोजें और डेटिंग वेबसाइट

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();
}

छवियाँ नेविगेशन होवर प्रभाव

अनुशंसित

JEBJEB द्वारा एक कोड

वेबसाइट टेम्पलेट HTML और CSS

प्रेमी खोजें और डेटिंग वेबसाइट

HTML

CSS

JS

अनुशंसित

JEBJEB द्वारा एक कोड

वेबसाइट टेम्पलेट HTML और CSS

प्रेमी खोजें और डेटिंग वेबसाइट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS