Wenn man ein wenig runter scrollt bis Installable Demos und mit der Maus über die Bilder geht, drehen sich die Bilder so, dass sie in Richtung der Maus gucken. Weiß jemand wie das heißt bzw. wo ich dieses Script finde?
[S] Script (keine Ahnung)
-
-
-
Schau da mal
-
Schau da mal
Leider nicht das, was ich suche
-
müsste das sein. sieht schrecklich aus, ich weiß, hab es auch nur schnell aus dem quelltext entnommen.
Code
Alles anzeigenfunction style6Img(){$('.style-5').each(function(){$(this).find('.sizer').insertBefore($(this).find('.parallaxImg'));});$('.style-5').parents('.wpb_row').css('z-index','100');var d=document,de=d.documentElement,bd=d.getElementsByTagName('body')[0],htm=d.getElementsByTagName('html')[0],win=window,imgs=d.querySelectorAll('.parallaxImg'),totalImgs=imgs.length,supportsTouch='ontouchstart'in win||navigator.msMaxTouchPoints;if(totalImgs<=0){return;} for(var l=0;l<totalImgs;l++){var thisImg=imgs[l],layerElems=thisImg.querySelectorAll('.parallaxImg-layer'),totalLayerElems=layerElems.length;if(totalLayerElems<=0){continue;} while(thisImg.firstChild){thisImg.removeChild(thisImg.firstChild);} var lastMove=0;var eventThrottle=$('html').hasClass('cssreflections')?1:80;if(eventThrottle==80)$('body').addClass('cssreflections');var containerHTML=d.createElement('div'),shineHTML=d.createElement('div'),shadowHTML=d.createElement('div'),layersHTML=d.createElement('div'),layers=[];thisImg.id='parallaxImg__'+l;containerHTML.className='parallaxImg-container';shadowHTML.className='parallaxImg-shadow';layersHTML.className='parallaxImg-layers';for(var i=0;i<totalLayerElems;i++){var layer=d.createElement('div'),layerInner=d.createElement('div'),imgSrc=layerElems[i].getAttribute('data-img');$(layer).html($(layerElems[i]).html());layer.className='parallaxImg-rendered-layer';layer.setAttribute('data-layer',i);if(i==0&&$(thisImg).parents('.wpb_gallery').length==0){layerInner.className='bg-img';layerInner.style.backgroundImage='url('+imgSrc+')';layer.appendChild(layerInner);} layersHTML.appendChild(layer);layers.push(layer);} containerHTML.appendChild(layersHTML);thisImg.appendChild(containerHTML);$(thisImg).wrap('<div class="parallaxImg-wrap" />');if(!(navigator.userAgent.indexOf('Safari')!=-1&&navigator.userAgent.indexOf('Chrome')==-1)){$(thisImg).parent().append(shadowHTML);} var w=thisImg.clientWidth||thisImg.offsetWidth||thisImg.scrollWidth;if(supportsTouch){}else{(function(_thisImg,_layers,_totalLayers,_shine){$(thisImg).parents('.style-5').on('mousemove',function(e){var now=Date.now();if(now>lastMove+eventThrottle){lastMove=now;window.requestAnimationFrame(function(){processMovement(e,false,_thisImg,_layers,_totalLayers,_shine);});}});$(thisImg).parents('.style-5').on('mouseenter',function(e){processEnter(e,_thisImg,_layers,_totalLayers,_shine);});$(thisImg).parents('.style-5').on('mouseleave',function(e){processExit(e,_thisImg,_layers,_totalLayers,_shine);});})(thisImg,layers,totalLayerElems,shineHTML);} (function(_thisImg,_layers,_totalLayers,_shine){depths(false,_thisImg,_layers,_totalLayers,_shine);window.addEventListener('resize',function(e){depths(false,_thisImg,_layers,_totalLayers,_shine);});})(thisImg,layers,totalLayerElems,shineHTML);} function processMovement(e,touchEnabled,elem,layers,totalLayers,shine){if(!$(elem.firstChild).hasClass('over')){processExit(e,elem,layers,totalLayers,shine);return false} if($(elem).parents('.col.wide').length>0){var yMult=0.03;var xMult=0.063;}else if($(elem).parents('.col.regular').length>0||$(elem).parents('.wpb_gallery').length>0){var yMult=0.045;var xMult=0.045;}else if($(elem).parents('.col.tall').length>0){var yMult=0.05;var xMult=0.015;}else if($(elem).parents('.col.wide_tall').length>0){var yMult=0.04;var xMult=0.04;}else{var yMult=0.045;var xMult=0.075;} var bdst=bd.scrollTop||htm.scrollTop,bdsl=bd.scrollLeft,pageX=(touchEnabled)?e.touches[0].pageX:e.pageX,pageY=(touchEnabled)?e.touches[0].pageY:e.pageY,offsets=elem.getBoundingClientRect(),w=elem.clientWidth||elem.offsetWidth||elem.scrollWidth,h=elem.clientHeight||elem.offsetHeight||elem.scrollHeight,wMultiple=320/w,offsetX=0.52-(pageX-offsets.left-bdsl)/w,offsetY=0.52-(pageY-offsets.top-bdst)/h,dy=(pageY-offsets.top-bdst)-h/2,dx=(pageX-offsets.left-bdsl)-w/2,yRotate=(offsetX-dx)*(yMult*wMultiple),xRotate=(dy-offsetY)*(xMult*wMultiple);if($(elem).parents('.wpb_gallery').length>0){var imgCSS=' perspective('+w*3+'px) rotateX('+-xRotate*1.9+'deg) rotateY('+-yRotate*1.3+'deg)';}else{if($(elem).parents('.wide_tall').length==0&&$(elem).parents('.wide').length==0&&$(elem).parents('.tall').length==0){var imgCSS=' perspective('+w*3+'px) rotateX('+xRotate+'deg) rotateY('+yRotate+'deg) translateY('+offsetY*-10+'px) translateX('+offsetX*-10+'px) scale(1.03)';}else{var imgCSS=' perspective('+w*3+'px) rotateX('+xRotate+'deg) rotateY('+yRotate+'deg) translateY('+offsetY*-10+'px) translateX('+offsetX*-10+'px) scale(1.013)';}} if(elem.firstChild.className.indexOf(' over')!=-1){if($(elem).parents('.portfolio-items.masonry-items').length>0){}else{}} $(elem).find('.parallaxImg-container').css('transform',imgCSS);if(!(navigator.userAgent.indexOf('Safari')!=-1&&navigator.userAgent.indexOf('Chrome')==-1)){$(elem).parents('.parallaxImg-wrap').find('.parallaxImg-shadow').css('transform',imgCSS);}} function processShineMovement(e,touchEnabled,elem,layers,totalLayers,shine){var bdst=bd.scrollTop||htm.scrollTop,bdsl=bd.scrollLeft,pageX=(touchEnabled)?e.touches[0].pageX:e.pageX,pageY=(touchEnabled)?e.touches[0].pageY:e.pageY,offsets=elem.getBoundingClientRect(),w=elem.clientWidth||elem.offsetWidth||elem.scrollWidth,h=elem.clientHeight||elem.offsetHeight||elem.scrollHeight,wMultiple=320/w,offsetX=0.52-(pageX-offsets.left-bdsl)/w,offsetY=0.52-(pageY-offsets.top-bdst)/h,dy=(pageY-offsets.top-bdst)-h/2,dx=(pageX-offsets.left-bdsl)-w/2,yRotate=(offsetX-dx)*(0.040*wMultiple),xRotate=(dy-offsetY)*(0.070*wMultiple),arad=Math.atan2(dy,dx),angle=arad*180/Math.PI-90;if(angle<0){angle=angle+360;} shine.style.background='linear-gradient('+angle+'deg, rgba(255,255,255,'+(pageY-offsets.top-bdst)/h*0.3+') 0%,rgba(255,255,255,0) 80%)';shine.style.transform='translateX('+(offsetX*totalLayers)-0.1+'px) translateY('+(offsetY*totalLayers)-0.1+'px) ';} function processEnter(e,elem,layers,totalLayers,shine){elem.firstChild.className+=' over';elem.className+=' over';$(elem).addClass('transition');if($(elem).parents('.wpb_gallery').length>0){var $timeout=setTimeout(function(){$(elem).removeClass('transition');},450);}else{var $timeout=setTimeout(function(){$(elem).removeClass('transition');},200);}} function processExit(e,elem,layers,totalLayers,shine){var w=elem.clientWidth||elem.offsetWidth||elem.scrollWidth;var container=elem.firstChild;container.className=container.className.replace(' over','');elem.className=elem.className.replace(' over','');$(container).css('transform','perspective('+w*3+'px) rotateX(0deg) rotateY(0deg) translateZ(0)');$(elem).parents('.parallaxImg-wrap').find('.parallaxImg-shadow').css('transform','perspective('+w*3+'px) rotateX(0deg) rotateY(0deg) translateZ(0)');$(elem).addClass('transition');var $timeout=setTimeout(function(){$(elem).removeClass('transition');},200);} function depths(touchEnabled,elem,layers,totalLayers,shine){var w=elem.clientWidth||elem.offsetWidth||elem.scrollWidth;var revNum=totalLayers;var container=elem.firstChild;for(var ly=0;ly<totalLayers;ly++){if(ly==0)$(layers[ly]).css('transform','translateZ(0px)');else $(layers[ly]).css('transform','translateZ('+(w*3)/27*(ly*1.1)+'px) ');revNum--;} totalLayers=totalLayers+3;$(container).css('transform','perspective('+w*3+'px)');} function removeDepths(touchEnabled,elem,layers,totalLayers,shine){var w=elem.clientWidth||elem.offsetWidth||elem.scrollWidth;var revNum=totalLayers;for(var ly=0;ly<totalLayers;ly++){if(ly==0)$(layers[ly]).css('transform','translateZ('+(w*3)/45*(ly*1.1)+'px) scale(1)');else $(layers[ly]).css('transform','translateZ('+(w*3)/45*(ly*1.1)+'px) scale(1)');revNum--;} totalLayers=totalLayers+3;}} style6Img()
-
Leider nicht das, was ich suche
Laut dem Quellentext ist es aber diese Seite.
Hier nochmal der genaue link: http://flickity.metafizzy.co/events.html
-
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!