Want to get this as ready made template with just 1 CLICK INSTALL?
Code Snippet for Full Width Menu:
<style>
body{
--menu-hover-color: #D54335;
--menu-item-gap: 12px;
--menu-border-color: #E9E9E9;
--menu-number-color: #DBB9B1;
--menu-number-font-size: 20px;
--hover-image-height: 250;
--hover-image-width: 350;
--search-icon-color: #EDB548;
--fallback-bg-color: #fff;
--disable-image-on-mobile: false;
}
body.mdw-entrance-complete,
body.mdw-active-menu{
overflow: hidden;
}
[data-elementor-type="header"]:nth-child(1){
position: relative;
z-index: 10;
}
body.mdw-active-menu-short [data-elementor-type="header"]:nth-child(1) .mdw-distorted-image-menu-area{
height: 0;
}
[data-elementor-type="header"]:nth-child(1) .mdw-distorted-image-menu-area > .e-con{
transition: transform var(--big-transition) cubic-bezier(0.7, 0, 0.2, 1);
}
[data-elementor-type="header"]:nth-child(2){
position: fixed;
width: 100%;
top: 0;
}
[data-elementor-type="header"]:nth-child(2) ~ *{
z-index: 9;
position: relative;
transition: transform var(--big-transition) cubic-bezier(0.7, 0, 0.2, 1);
}
body.fallback-bg-color [data-elementor-type="header"]:nth-child(2) + *{
background-color: var(--fallback-bg-color);
}
body.mdw-active-menu [data-elementor-type="header"]:nth-child(1) .mdw-distorted-image-menu-area > .e-con,
body.mdw-active-menu [data-elementor-type="header"]:nth-child(2) ~ *{
transform: translateX(-100vw);
}
html:not(.elementor-html) .mdw-distorted-image-menu-area .elementor-widget-html{
display: none;
}
.mdw-distorted-image-menu-area .mdw-distorted-image-menu-bar,
.mdw-distorted-image-menu-area .mdw-distorted-image-menu-close{
cursor: pointer;
}
.mdw-distorted-image-menu-area .mdw-distorted-image-menu-bar > .elementor-element{
transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);
}
.mdw-distorted-image-menu-area .mdw-distorted-image-menu-bar:hover > .elementor-element:nth-child(odd){
transform: translateX(-7px);
}
.mdw-distorted-image-menu-area .mdw-distorted-image-menu-bar:hover > .elementor-element:nth-child(even){
transform: translateX(7px);
}
.mdw-distorted-image-menu-area .mdw-distorted-image-menu-wrapper{
opacity: 0;
}
body.mdw-active-menu .mdw-distorted-image-menu-area .mdw-distorted-image-menu-wrapper,
body.mdw-entrance-complete .mdw-distorted-image-menu-area .mdw-distorted-image-menu-wrapper,
html.elementor-html .mdw-distorted-image-menu-area .mdw-distorted-image-menu-wrapper{
opacity: 1;
}
.mdw-distorted-image-menu-area .mdw-distorted-image-menu-wrapper > .e-con{
height: var(--min-height, 100vh);
scrollbar-width: none;
-ms-overflow-style: none;
overflow-y: auto;
z-index: 1;
}
.mdw-distorted-image-menu-area .mdw-distorted-image-menu-wrapper > .e-con::-webkit-scrollbar{
display: none;
}
.mdw-distorted-image-menu-area .elementor-widget-search > *{
overflow: hidden;
position: relative;
}
.mdw-distorted-image-menu-area .elementor-widget-search label{
color: var(--search-color, #FFFFFF);
font-family: var(--search-font-family, "Inter");
font-size: var(--search-font-size, 60px);
font-weight: var(--search-font-weight, 600);
letter-spacing: var(--search-letter-spacing, -0.07em);
position: absolute;
top: 0;
left: 0;
height: 100%;
display: flex;
align-items: center;
transform-origin: center right;
transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1);
}
.mdw-distorted-image-menu-area .elementor-widget-search.e-focus label{
transform: translateY(100%) rotate(-45deg);
}
.mdw-distorted-image-menu-area .elementor-widget-search .mdw-search-wrap{
overflow: hidden;
height: 100%;
display: flex;
align-items: center;
}
.mdw-distorted-image-menu-area .elementor-widget-search .mdw-search-wrap span{
transform: translateX(100%);
display: inline-block;
}
body.mdw-entrance-complete .mdw-distorted-image-menu-area .elementor-widget-search .mdw-search-wrap span,
html.elementor-html .mdw-distorted-image-menu-area .elementor-widget-search .mdw-search-wrap span{
transform: translateX(0);
transition: .5s cubic-bezier(0.7, 0, 0.2, 1) 0.25s;
}
.mdw-distorted-image-menu-area .mdw-distorted-image-menu-search-icon{
transform: scale(0);
transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1);
}
.mdw-distorted-image-menu-area .elementor-widget-search .mdw-distorted-image-menu-search-icon{
display: flex !important;
}
body.mdw-entrance-complete .mdw-distorted-image-menu-area .elementor-widget-search .mdw-distorted-image-menu-search-icon,
html.elementor-html .mdw-distorted-image-menu-area .mdw-distorted-image-menu-search-icon{
transform: scale(1);
}
.mdw-distorted-image-menu-area .elementor-widget-search:hover .mdw-distorted-image-menu-search-icon{
transform: scale(1.1) !important;
}
.mdw-distorted-image-menu-area .elementor-widget-search .mdw-distorted-image-menu-search-icon path{
stroke: var(--search-icon-color);
}
.mdw-distorted-image-menu-area .elementor-widget-search .hidden{
opacity: 1;
visibility: visible;
}
.mdw-distorted-image-menu-area .elementor-widget-search input[type="search"] + svg,
.mdw-distorted-image-menu-area .elementor-widget-search button[type="submit"]{
display: none;
}
.mdw-distorted-image-menu-area .elementor-widget-search input[type="search"]:focus{
color: var(--search-color,#ffffff);
}
.mdw-distorted-image-menu-area .mdw-distorted-image-menu .elementor-icon-list-item{
overflow: hidden;
padding: var(--menu-item-gap, 12px) 0;
}
.mdw-distorted-image-menu-area .mdw-distorted-image-menu .elementor-icon-list-item::before{
content: "";
position: absolute;
top: 0;
height: 1px;
background: var(--menu-border-color, #EAE9E8);
width: 100%;
transform: scaleX(0);
transform-origin: right;
}
body.mdw-active-menu .mdw-distorted-image-menu-area .mdw-distorted-image-menu .elementor-icon-list-item::before,
body.mdw-entrance-complete .mdw-distorted-image-menu-area .mdw-distorted-image-menu .elementor-icon-list-item::before,
html.elementor-html .mdw-distorted-image-menu-area .mdw-distorted-image-menu .elementor-icon-list-item::before{
transform: scaleX(100%);
transition: var(--big-transition) cubic-bezier(0.7, 0, 0.2, 1) var(--d, 0.1s);
}
.mdw-distorted-image-menu-area .mdw-distorted-image-menu .elementor-icon-list-item > *{
transform: translateY(calc(100% + var(--menu-item-gap, 12px)));
}
body.mdw-active-menu .mdw-distorted-image-menu-area .mdw-distorted-image-menu .elementor-icon-list-item > *,
body.mdw-entrance-complete .mdw-distorted-image-menu-area .mdw-distorted-image-menu .elementor-icon-list-item > *,
html.elementor-html .mdw-distorted-image-menu-area .mdw-distorted-image-menu .elementor-icon-list-item > *{
transform: translateY(0);
}
.mdw-distorted-image-menu-area .elementor-icon-list-item a:focus{
outline: none;
}
.mdw-distorted-image-menu-area .mdw-distorted-image-menu .elementor-icon-list-item:hover span{
color: var(--menu-hover-color);
}
.mdw-distorted-image-menu-area .mdw-distorted-image-menu .elementor-icon-list-text{
padding-right: 20px;
justify-content: flex-end;
display: flex;
transition: color 0.25s cubic-bezier(0.7, 0, 0.2, 1);
}
.mdw-distorted-image-menu-area .mdw-distorted-image-menu .elementor-icon-list-text span{
font-size: var(--menu-number-font-size, 20px);
line-height: 1em;
color: var(--menu-number-color);
margin-top: 0.3em;
letter-spacing: -0.1em;
}
.mdw-distorted-image-menu-area .mdw-distorted-image-menu-images{
z-index: -10;
}
.mdw-distorted-image-menu-area .mdw-distorted-image-menu-bottom .elementor-icon-list-items{
display: flex;
flex-direction: column;
align-items: end;
}
.mdw-distorted-image-menu-area .mdw-distorted-image-menu-bottom .elementor-icon-list-item{
transform: translateX(calc(100% + 10px));
overflow: hidden;
}
body.mdw-active-menu .mdw-distorted-image-menu-area .mdw-distorted-image-menu-bottom .elementor-icon-list-item,
body.mdw-entrance-complete .mdw-distorted-image-menu-area .mdw-distorted-image-menu-bottom .elementor-icon-list-item,
html.elementor-html .mdw-distorted-image-menu-area .mdw-distorted-image-menu-bottom .elementor-icon-list-item{
transform: translateX(0);
}
body.mdw-active-menu .mdw-distorted-image-menu-area .mdw-distorted-image-menu .elementor-icon-list-item > *,
body.mdw-active-menu .mdw-distorted-image-menu-area .mdw-distorted-image-menu-bottom .elementor-icon-list-item{
transition: var(--big-transition) cubic-bezier(0.7, 0, 0.2, 1) var(--d);
}
body.mdw-entrance-complete .mdw-distorted-image-menu-area .mdw-distorted-image-menu .elementor-icon-list-item > *{
transition: 0.25s cubic-bezier(0.7, 0, 0.2, 1);
}
body.mdw-active-menu .mdw-distorted-image-menu-area .mdw-distorted-image-menu-bottom .elementor-icon-list-item > *{
transition: 0s;
}
.mdw-distorted-image-menu-area .mdw-distorted-image-menu-bottom .elementor-icon-list-item:hover > *:nth-child(1){
transform: translateY(100%);
transition: .5s cubic-bezier(0.7, 0, 0.2, 1);
}
.mdw-distorted-image-menu-area .mdw-distorted-image-menu-bottom .elementor-icon-list-item > *:nth-child(2){
position: absolute;
transform: translateY(-100%);
}
.mdw-distorted-image-menu-area .mdw-distorted-image-menu-bottom .elementor-icon-list-item:hover > *:nth-child(2){
transform: translateY(0%);
transition: .5s cubic-bezier(0.7, 0, 0.2, 1);
}
.mdw-distorted-image-menu-area .mdw-distorted-image-menu-bottom .elementor-icon-list-item a{
width: auto;
}
.mdw-distorted-image-menu-area .mdw-distorted-image-menu-close > .elementor-element:nth-child(1) > *,
.mdw-distorted-image-menu-area .mdw-distorted-image-menu-close > .elementor-element:nth-child(2) > *{
transition: transform .25s cubic-bezier(0.7, 0, 0.2, 1);
}
.mdw-distorted-image-menu-area .mdw-distorted-image-menu-close:hover > .elementor-element:nth-child(1) > *{
transform: rotate(135deg);
}
.mdw-distorted-image-menu-area .mdw-distorted-image-menu-close:hover > .elementor-element:nth-child(2) > *{
transform: rotate(45deg);
}
.mdw-distorted-image-menu-area canvas{
position: fixed;
top: 0;
left: 0;
pointer-events: none;
}
body{
--big-transition: 0.7s;
}
.mdw-distorted-image-menu-area{
--search-color: #FFFFFF;
--search-font-family: "Inter";
--search-font-size: 60px;
--search-font-weight: 600;
--search-letter-spacing: -0.07em;
}
@media (max-width: 767px){
body{
--hover-image-height: 150;
--hover-image-width: 210;
}
.mdw-distorted-image-menu-area .mdw-distorted-image-menu .elementor-icon-list-text span{
margin-top: 0;
margin-right: 1px;
}
.mdw-distorted-image-menu-area.disable-image-on-mobile canvas{
display: none !important;
}
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
uniform sampler2D uTexture;
uniform vec2 uOffset;
varying vec2 vUv;
float M_PI = 3.141529;
vec3 deformationCurve(vec3 position, vec2 uv, vec2 offset){
position.x = position.x + (sin(uv.y * M_PI) * offset.x);
position.y = position.y + (sin(uv.x * M_PI) * offset.y);
return position;
}
void main(){
vUv = uv;
vec3 newPosition = deformationCurve(position, uv, uOffset);
gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform sampler2D uTexture;
uniform float uAlpha;
uniform vec2 uOffset;
varying vec2 vUv;
vec3 rgbShift(sampler2D textureimage, vec2 uv, vec2 offset){
float r = texture2D(textureimage, uv + offset).r;
vec2 gb = texture2D(textureimage, uv).gb;
return vec3(r, gb);
}
void main(){
vec3 color = rgbShift(uTexture, vUv, uOffset);
gl_FragColor = vec4(color, uAlpha);
}
</script>
<script>
if(!MDWNonce114){
var MDWNonce114 = true
;(function($){
var selector = '.mdw-distorted-image-menu-area',
listItems = [],
imageSources = [],
delay = 0.12,
animationTime,
uniforms,
linkHovered,
textures = [],
camera,
renderer,
targetX,
targetY,
offset,
mesh,
scene,
menuScrollIndex,
perspective = 1000,
sizes
function getCSS(elem, prop){
computedStyle = getComputedStyle(elem[0])
return computedStyle.getPropertyValue(prop)
}
function setCSS(settings, el){
for (let key in settings) {
if (settings.hasOwnProperty(key)) {
el.get(0).style.setProperty(key, settings[key])
}
}
}
function setSearchValues(){
$(selector).each(function(){
var $this = $(this),
search = $this.find('.elementor-widget-search input[type="search"]'),
form = $this.find('.elementor-widget-search form')
if(search.length){
setCSS({
'--search-color': getCSS(search, 'color'),
'--search-font-family': getCSS(search, 'font-family'),
'--search-font-size': getCSS(search, 'font-size'),
'--search-font-weight': getCSS(search, 'font-weight'),
'--search-letter-spacing': getCSS(search, 'letter-spacing')
}, $this)
}
})
}
function cloneHeader(){
if(!$('html').hasClass('elementor-html')){
let menuMain = $('.elementor-location-header').clone().addClass('mdw-header-duplicated')
$('.elementor-location-header').after(menuMain)
$('.mdw-header-duplicated .mdw-distorted-image-menu-area').children().not('.mdw-distorted-image-menu-wrapper').remove()
$('.elementor-location-header').eq(0).find('.mdw-distorted-image-menu-wrapper').remove()
}
}
function isTransparent(color) {
return color.includes('rgba(0, 0, 0, 0)') || color.toLowerCase().includes('transparent')
}
function getBackgroundColor(el){
let currentEl = el
while (currentEl.length){
var bgColor = currentEl.css('background-color')
if (bgColor && !isTransparent(bgColor)){
el.css('background-color',bgColor)
return
}
currentEl = currentEl.parent()
}
$('body').addClass('fallback-bg-color')
}
function blurSearch(){
var $this = $(this).is('.elementor-widget-search input') ? $(this) : $('.elementor-widget-search input')
if($this.val()!==''){
setTimeout(function(){
$this.closest('.elementor-widget-search').addClass('e-focus')
},10)
}
}
function init(){
setSearchValues()
$(selector).each(function(i){
var $this = $(this),
bottomItems = $this.find('.mdw-distorted-image-menu-bottom .elementor-icon-list-item'),
searchBox = $this.find('.elementor-widget-search'),
icon = $this.find('.mdw-distorted-image-menu-search-icon')
listItems[i] = $this.find('.elementor-icon-list-item')
animationTime = ((delay * listItems[i].length - 1) + 0.75) * 1000
searchBox.each(function(){
var $t = $(this),
placeholder = $t.find('input').attr('placeholder')
placeholder = placeholder == '' || placeholder == 'Search...' ? 'SEARCH' : placeholder
$t.find('input').removeAttr('placeholder')
$t.find('label').html('<span class="mdw-search-wrap"><span>'+placeholder+'</span></span>').append(icon.clone()).removeClass('elementor-screen-only')
})
listItems[i].each(function(j){
$(this).get(0).style.setProperty('--d', `${(j+1) * delay}s`)
})
bottomItems.each(function(){
$(this).append($(this).children().clone())
})
if(getCSS($this, '--disable-image-on-mobile') != 'false'){
$this.addClass('disable-image-on-mobile')
}
})
cloneHeader()
getBackgroundColor($('body [data-elementor-type="header"]:nth-child(2) + *'))
blurSearch()
}
function toggleMenu(){
$('body').toggleClass('mdw-active-menu')
setTimeout(function(){
if($('body').hasClass('mdw-entrance-complete')){
$('body').removeClass('mdw-entrance-complete')
}else{
$('body').addClass('mdw-entrance-complete')
$('body').addClass('mdw-active-menu-short')
}
},animationTime)
}
function closeHeader(){
$('body').removeClass('mdw-active-menu')
$('body').removeClass('mdw-active-menu-short')
setTimeout(function(){
$('body').removeClass('mdw-entrance-complete')
}, animationTime)
}
function idMenuItem(){
var link = $(this).attr('href')
if( link[0]=='#' && link.length > 1 && $(link).length ) {
closeHeader()
}
}
function lerp(start, end, t){
return start * ( 1 - t ) + end * t;
}
function viewport(){
var width = window.innerWidth,
height = window.innerHeight,
aspectRatio = width / height
return{ width, height, aspectRatio }
}
function manageImage(){
$('.mdw-distorted-image-menu-wrapper').each(function(i){
var $this = $(this),
vertex = $('#vertexShader').get(0).textContent,
fragment = $('#fragmentShader').get(0).textContent,
item = $this.find('.mdw-distorted-image-menu .elementor-icon-list-item'),
fov = (180 * (2 * Math.atan(viewport().height / 2 / perspective))) / Math.PI,
geometry = new THREE.PlaneGeometry(1,1,20,20)
targetX = 0
targetY = 0
scene = new THREE.Scene()
uniforms = {
uTexture: {value: new THREE.TextureLoader().load(imageSources[0])},
uAlpha: {value: 0.0},
uOffset: {value: new THREE.Vector2(0.0, 0.0)}
}
offset = new THREE.Vector2(0,0)
sizes = new THREE.Vector2(0,0)
$this.find('.mdw-distorted-image-menu-images img').each(function(){
imageSources.push($(this).attr('src'))
})
item.each(function(i){
textures[i] = new THREE.TextureLoader().load(imageSources[i])
})
camera = new THREE.PerspectiveCamera(fov, viewport().aspectRatio, 0.1, 1000)
renderer = new THREE.WebGL1Renderer({antialias: true, alpha: true })
camera.position.set(0, 0 , perspective)
renderer.setSize(viewport().width, viewport().height)
renderer.setPixelRatio(window.devicePixelRatio)
$this.append(renderer.domElement)
var material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: vertex,
fragmentShader: fragment,
transparent: true
})
mesh = new THREE.Mesh(geometry, material)
sizes.set(parseFloat(getCSS($('body'), '--hover-image-height')), parseFloat(getCSS($('body'), '--hover-image-width')), 1)
mesh.scale.set(sizes.x, sizes.y, 1)
mesh.position.set(offset.x, offset.y, 0)
scene.add(mesh)
})
}
function enterMenu(){ linkHovered = true }
function leaveMenu(){ linkHovered = false }
function enterMenuItem(){
var i = $(this).is('.elementor-icon-list-item') ? $(this).index() : menuScrollIndex
uniforms.uTexture.value = textures[i]
}
function leaveMenuItem(){
uniforms.uAlpha.value = lerp(uniforms.uAlpha.value, 0.0, 0.1)
}
function updateCanvas(){
sizes.set(parseFloat(getCSS($('body'), '--hover-image-height')), parseFloat(getCSS($('body'), '--hover-image-width')), 1)
mesh.scale.set(sizes.x, sizes.y, 1)
camera.aspect = viewport().aspectRatio;
camera.fov = (180 * (2 * Math.atan(viewport().height / 2 / perspective))) / Math.PI
renderer.setSize(viewport().width, viewport().height);
camera.updateProjectionMatrix();
}
function updateImageOnScroll(){
var items = $(this).find('.mdw-distorted-image-menu .elementor-icon-list-item'),
len = items.length
items.eq(0).each(function(){
menuScrollIndex = Math.floor((targetY-$(this).offset().top)/$(this).outerHeight())
if(menuScrollIndex > -1 && menuScrollIndex < len){
enterMenu()
enterMenuItem()
}else{
leaveMenu()
}
})
}
function render(){
offset.x = lerp(offset.x, targetX, 0.1)
offset.y = lerp(offset.y, targetY, 0.1)
uniforms.uOffset.value.set((targetX- offset.x) * 0.0005 , -(targetY- offset.y) * 0.0005 )
mesh.position.set(offset.x - (window.innerWidth / 2) , - offset.y + (window.innerHeight / 2), 0)
uniforms.uAlpha.value = linkHovered ? lerp(uniforms.uAlpha.value, 1.0, 0.1) : lerp(uniforms.uAlpha.value, 0.0, 0.1)
renderer.render(scene, camera)
requestAnimationFrame(render)
}
function mouseMove(e){
targetX = e.clientX
targetY = e.clientY
}
$(document).ready(function(){
init()
menuHeight()
manageImage()
$('.mdw-distorted-image-menu-bar').on('click', toggleMenu)
$('.mdw-distorted-image-menu-close').on('click', closeHeader)
$(selector).find('.elementor-widget-search input').on('blur', blurSearch)
$(selector).find('a').on('click', idMenuItem)
$('body').on('mouseenter', '.mdw-distorted-image-menu .elementor-icon-list-items', enterMenu)
$('body').on('mouseleave', '.mdw-distorted-image-menu .elementor-icon-list-items', leaveMenu)
$('body').on('mouseenter', '.mdw-distorted-image-menu .elementor-icon-list-item', enterMenuItem)
$('body').on('mouseleave', '.mdw-distorted-image-menu .elementor-icon-list-item', leaveMenuItem)
$('.mdw-distorted-image-menu-wrapper > .e-con').on('scroll', updateImageOnScroll)
render()
})
function menuHeight(){
$('.mdw-distorted-image-menu-wrapper').each(function(i){
var h = viewport().height + 'px'
setCSS({
'height': h,
'min-height': h
},
$(this).children('.e-con:not(.mdw-distorted-image-menu-close)'))
})
}
$(window).on('mousemove', mouseMove)
$(window).on('resize', function(){
menuHeight()
setSearchValues()
updateCanvas()
})
})(jQuery)
}
</script>
