Catch Me If You Can

Developer
Pedro Tavares
Size
4,094 Kb
Views
8,096
  1. Catch Me If You Can Previews
  2. Catch Me If You Can HTML Codes
  3. Catch Me If You Can CSS Codes
  4. Catch Me If You Can JS Codes

How do I make an catch me if you can?

Do try. It is possible to click. It's just meant to be hard. If you're on a trackpad.... Good luck tee, eh, eh, eh.. What is a catch me if you can? How do you make a catch me if you can? This script and codes were developed by Pedro Tavares on 01 December 2022, Thursday.

Catch Me If You Can Previews
IQ Test

Catch Me If You Can - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Catch Me If You Can</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/rwxpbb.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <p id="text">Click Me</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Catch Me If You Can - Script Codes CSS Codes

/* **************************************** */
/* Default CSS styles being imported from:
/* https://codepen.io/dipscom/pen/RWXPBB
/* **************************************** */
/* ****************** */
/* Notes and reminders
/* ****************** */
/* ****************** */
/* Local CSS styling
/* ****************** */
body { overflow: hidden;
}
.container { width: 200px; min-width: 0px; text-align: center; border: 6px solid $textColor; border-radius: 12px; position: absolute; left: 50%; top: 50%; // transform: translate(-50%, -50%); margin: 0;
}
.container { cursor: pointer;
}
p { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}

Catch Me If You Can - Script Codes JS Codes

var btn = document.querySelector('div');
var txt = document.querySelector('p');
var fun = true;
TweenMax.set(btn, {x:0, y:0, xPercent:-50, yPercent:-50})
window.addEventListener('mousemove', trackMouse);
btn.addEventListener('mouseenter', onMouseEnter);
btn.addEventListener('mouseleave', onMouseLeave);
btn.addEventListener('mousedown', onMouseDown);
btn.addEventListener('mouseup', onMouseUp);
btn.addEventListener('touchend', onTouch);
function onTouch() { // thisis acomm btn.removeEventListener('mousemove', trackMouse); btn.removeEventListener('mouseenter', onMouseEnter); btn.removeEventListener('mouseleave', onMouseLeave); btn.removeEventListener('mouseup', onMouseUp); txt.innerHTML = "Greasy fingers are not allowed. Use a mouse." TweenMax.delayedCall(3, function() { txt.innerHTML = "Click Me"; btn.addEventListener('mousemove', trackMouse); btn.addEventListener('mouseenter', onMouseEnter); btn.addEventListener('mouseleave', onMouseLeave); btn.addEventListener('mouseup', onMouseUp); });
}
function onMouseUp() { btn.removeEventListener('mouseup', onMouseUp); btn.style.cursor = 'auto'; txt.innerHTML = "Damn..." TweenMax.to(btn, 0.3, {scale:1, ease:Back.easeOut.config(5)}); TweenMax.delayedCall( 2, function() { TweenMax.to(btn, 3, {x:0, y:0, ease:Power1.easeInOut}); txt.innerHTML = "Fun's over. Go home."; btn.addEventListener('mouseenter', onMouseEnter); btn.addEventListener('mouseleave', onMouseLeave); })
}
function onMouseDown() { if( isTouchDevice() ) return; txt.innerHTML = "Ouch!" btn.removeEventListener('mouseenter', onMouseEnter); btn.removeEventListener('mouseleave', onMouseLeave); btn.removeEventListener('mousedown', onMouseDown); fun = false; TweenMax.killTweensOf(btn); TweenMax.to(btn, 0.8, {scale:0.9, ease:Elastic.easeOut.config(1)}); window.removeEventListener('mousemove', trackMouse);
}
function onMouseEnter() { if( fun ) { txt.innerHTML = "NOOOOOOOO!" } else { txt.innerHTML = "Not playing anymore... :(" }
}
function onMouseLeave() { if( fun ) { txt.innerHTML = "Click Me" } else { txt.innerHTML = "Fun's over. Go home."; }
}
function trackMouse(e) { if( isTouchDevice() ) return; var mouseX = event.clientX; // Get the horizontal coordinate var mouseY = event.clientY; // Get the vertical coordinate var btnX = btn.getBoundingClientRect().left + ( (btn.getBoundingClientRect().right - btn.getBoundingClientRect().left) / 2 ); var btnY = btn.getBoundingClientRect().top + ( (btn.getBoundingClientRect().bottom - btn.getBoundingClientRect().top) / 2 ); var distX = btnX - mouseX; var distY = btnY - mouseY; // The closer the mouse is, the more the button moves var toMoveX = ( 1 / (distX) * 50000 ); var toMoveY = (1 / (distY) * 50000 ); var midX = window.innerWidth * 0.5; var midY = window.innerHeight * 0.5; var dur = Math.abs( ( toMoveX + toMoveY ) * 0.01 ); moveBox(dur, toMoveX, toMoveY) // console.log("MousX:", btnX, " midX:", "dur", dur); oldBtnX = btnX; oldBtnY = btnY;
}
function moveBox(dur, toMoveX, toMoveY) { TweenMax.to(btn, dur, {x:toMoveX, y:toMoveY, ease:Power4.easeOut})
}
function isTouchDevice() { return 'ontouchstart' in document.documentElement;
}
Catch Me If You Can - Script Codes
Catch Me If You Can - Script Codes
Home Page Home
Developer Pedro Tavares
Username dipscom
Uploaded December 01, 2022
Rating 4
Size 4,094 Kb
Views 8,096
Do you need developer help for Catch Me If You Can?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Pedro Tavares (dipscom) Script Codes
Name
GSAP - Animate SVG path with AttrPlugin
GSAP - Responsive Corner Navigation
Using Functions to Build a timeline - Broken
SVGText - Pattern Fill
Animated SVG Blur
Buttons.js - Example
Mask Within Mask
GSAP - Fun with Cycle and Bezier
Shooting Hoops
SVG Grid Mask
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!