Optical illusion - Motion Binding

Developer
Ludvig Lindblom
Size
3,875 Kb
Views
48,576
  1. Optical illusion - Motion Binding Previews
  2. Optical illusion - Motion Binding HTML Codes
  3. Optical illusion - Motion Binding CSS Codes
  4. Optical illusion - Motion Binding JS Codes

How do I make an optical illusion - motion binding?

Http://michaelbach.de/ot/mot-motionBinding/index.html. What is a optical illusion - motion binding? How do you make a optical illusion - motion binding? This script and codes were developed by Ludvig Lindblom on 25 July 2022, Monday.

Optical illusion - Motion Binding Previews
IQ Test

Optical illusion - Motion Binding - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Optical illusion - Motion Binding</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html { height: 100%; background: #7f8c8d;
}
body { margin: 0; padding: 0;
}
a { font-family: sans-serif; font-size: 20px; font-weight: bold; line-height: 1; text-decoration: none; display: inline-block; padding: 10px; background: #333; color: #eaeaea;
}
a:hover, a:focus { text-decoration: underline;
}
#opacity { visibility: hidden;
}
#opacity.visible { visibility: visible;
}
.wrapper { width: 300px; height: 300px; position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -150px; transform-origin: center center; transform: rotate(45deg);
}
.lines { width: 300px; height: 300px; box-sizing: border-box; border: 8px solid #2c3e50; animation: move 4s infinite linear; margin: -20px 0 0 -20px;
}
.occluder { width: 80px; height: 80px; background: #7f8c8d; position: absolute; z-index: 2;
}
.occluder.proof { background: #c0392b;
}
.occluder:nth-child(1) { top: -56px; left: -56px;
}
.occluder:nth-child(2) { top: -56px; right: -16px;
}
.occluder:nth-child(3) { bottom: -16px; right: -16px;
}
.occluder:nth-child(4) { bottom: -16px; left: -56px;
}
@keyframes move { from { transform: rotate(0deg) translateX(-20px) rotate(0deg); } to { transform: rotate(360deg) translateX(-20px) rotate(-360deg); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <a href='#'>Toggle occluders</a>
<input id='opacity' max='100' min='0' step='1' type='range' value='100'>
<div class='wrapper'> <div class='occluder'></div> <div class='occluder'></div> <div class='occluder'></div> <div class='occluder'></div> <div class='lines'></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Optical illusion - Motion Binding - Script Codes CSS Codes

html { height: 100%; background: #7f8c8d;
}
body { margin: 0; padding: 0;
}
a { font-family: sans-serif; font-size: 20px; font-weight: bold; line-height: 1; text-decoration: none; display: inline-block; padding: 10px; background: #333; color: #eaeaea;
}
a:hover, a:focus { text-decoration: underline;
}
#opacity { visibility: hidden;
}
#opacity.visible { visibility: visible;
}
.wrapper { width: 300px; height: 300px; position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -150px; transform-origin: center center; transform: rotate(45deg);
}
.lines { width: 300px; height: 300px; box-sizing: border-box; border: 8px solid #2c3e50; animation: move 4s infinite linear; margin: -20px 0 0 -20px;
}
.occluder { width: 80px; height: 80px; background: #7f8c8d; position: absolute; z-index: 2;
}
.occluder.proof { background: #c0392b;
}
.occluder:nth-child(1) { top: -56px; left: -56px;
}
.occluder:nth-child(2) { top: -56px; right: -16px;
}
.occluder:nth-child(3) { bottom: -16px; right: -16px;
}
.occluder:nth-child(4) { bottom: -16px; left: -56px;
}
@keyframes move { from { transform: rotate(0deg) translateX(-20px) rotate(0deg); } to { transform: rotate(360deg) translateX(-20px) rotate(-360deg); }
}

Optical illusion - Motion Binding - Script Codes JS Codes

$("body").on("click", "a", function(e) {	e.preventDefault();	$(".occluder").toggleClass("proof");	$("#opacity").toggleClass("visible");	if ($(".occluder").hasClass("proof")) {	$(".occluder").css("opacity", $("#opacity").val() / 100);	} else {	$(".occluder").css("opacity", "1");	}
});
$("#opacity").mousemove( function(e){	$(".occluder").css("opacity", $(this).val() / 100);
});
$("#opacity").change( function(e){	$(".occluder").css("opacity", $(this).val() / 100);
});
Optical illusion - Motion Binding - Script Codes
Optical illusion - Motion Binding - Script Codes
Home Page Home
Developer Ludvig Lindblom
Username ludviglindblom
Uploaded July 25, 2022
Rating 3
Size 3,875 Kb
Views 48,576
Do you need developer help for Optical illusion - Motion Binding?

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!

Ludvig Lindblom (ludviglindblom) Script Codes
Name
JQuery countdown plugin
Just another responsive layout
Christmas Tree
Circle star
Canvas box-shadow pixel art generator
CSS mask-image
CSS loading spinners
Starburst
Canvas animation
Christmas ornaments
Create amazing video scripts 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!