QUENTIN TARANTINO & ROGER AVARY
Pulp Fiction (1994)
<!-- nominify begin -->
<script>$(document).ready(function(){const shuffleArray=arr=>arr.sort(()=>Math.random()-0.5);const lineEq=(y2,y1,x2,x1,currentVal)=>{let m=(y2-y1)/(x2-x1);let b=y1-m*x1;return m*currentVal+b};const lerp=(a,b,n)=>(1-n)*a+n*b;const body=document.body;const bodyColor=getComputedStyle(body).getPropertyValue('--color-bg').trim()||'white';const getMousePos=(e)=>{let posx=0;let posy=0;if(!e)e=window.event;if(e.clientX||e.clientY){posx=e.clientX;posy=e.clientY}
return{x:posx,y:posy}}
let winsize;const calcWinsize=()=>winsize={width:window.innerWidth,height:window.innerHeight};calcWinsize();window.addEventListener('resize',calcWinsize);class CursorFx{constructor(el){this.DOM={el:el};this.DOM.dot=this.DOM.el.querySelector('.cursor__inner--dot');this.DOM.circle=this.DOM.el.querySelector('.cursor__inner--circle');this.bounds={dot:this.DOM.dot.getBoundingClientRect(),circle:this.DOM.circle.getBoundingClientRect()};this.scale=0.1;this.opacity=1;this.mousePos={x:0,y:0};this.lastMousePos={dot:{x:0,y:0},circle:{x:0,y:0}};this.lastScale=0.1;this.lastOpacity=1;this.initEvents();requestAnimationFrame(()=>this.render())}
initEvents(){window.addEventListener('mousemove',ev=>this.mousePos=getMousePos(ev))}
render(){$('.cursor__inner').css('visibility','visible');this.lastMousePos.dot.x=lerp(this.lastMousePos.dot.x,this.mousePos.x-this.bounds.dot.width/2,0);this.lastMousePos.dot.y=lerp(this.lastMousePos.dot.y,this.mousePos.y-this.bounds.dot.height/2,0);this.lastMousePos.circle.x=lerp(this.lastMousePos.circle.x,this.mousePos.x-this.bounds.circle.width/2,1);this.lastMousePos.circle.y=lerp(this.lastMousePos.circle.y,this.mousePos.y-this.bounds.circle.height/2,1);this.lastScale=lerp(this.lastScale,this.scale,0.15);this.lastOpacity=lerp(this.lastOpacity,this.opacity,0.1);this.DOM.dot.style.transform=`translateX(${(this.lastMousePos.dot.x)}px) translateY(${this.lastMousePos.dot.y}px)`;this.DOM.circle.style.transform=`translateX(${(this.lastMousePos.circle.x)}px) translateY(${this.lastMousePos.circle.y}px) scale(${this.lastScale})`;this.DOM.circle.style.opacity=this.lastOpacity
requestAnimationFrame(()=>this.render())}
enter(){cursor.scale=1}
leave(){cursor.scale=0.1}
click(){this.lastScale=0.1;this.lastOpacity=0}}
const cursor=new CursorFx(document.querySelector('.cursor'));[...document.querySelectorAll('[href]')].forEach((link)=>{link.addEventListener('mouseenter',()=>cursor.enter());link.addEventListener('mouseleave',()=>cursor.leave());link.addEventListener('click',()=>cursor.click())})});$(document).mouseleave(function(){$(".cursor__inner").hide()});$(document).mouseenter(function(){$(".cursor__inner").show()});</script>

<style>*,*::after,*::before{box-sizing:border-box;cursor:none!important}.cursor__inner{visibility:hidden;z-index:99999999999999;pointer-events:none;position:fixed;top:0;left:0;mix-blend-mode:difference;border-radius:50%}.cursor__inner--dot{width:10px;height:10px;top:-10px;left:-10px;background:#fff}.cursor__inner--circle{width:100px;height:100px;background:#fff;border:2px solid #fff}</style>

<div class="cursor"><div class="cursor__inner cursor__inner--circle" style="visibility: visible; transform: translateX(1173px) translateY(268px) scale(0.1); opacity: 1; display: none;"></div><div class="cursor__inner cursor__inner--dot" style="visibility: visible; transform: translateX(0px) translateY(0px); display: none;"></div></div>
 
<!-- nominify end -->
Made on
Tilda