Pixel Anim Test

Developer
Xavier Martínez
Size
2,415 Kb
Views
38,456
  1. Pixel Anim Test Previews
  2. Pixel Anim Test HTML Codes
  3. Pixel Anim Test CSS Codes
  4. Pixel Anim Test JS Codes

How do I make an pixel anim test?

What is a pixel anim test? How do you make a pixel anim test? This script and codes were developed by Xavier Martínez on 19 September 2022, Monday.

Pixel Anim Test Previews
IQ Test

Pixel Anim Test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pixel Anim Test</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <img id="cat" src="http://xmpdesign.com/projects/nyan-anim/nyan.gif" />
<canvas></canvas>
<audio id="nyancat-song" autoplay> <source src="https://ia800501.us.archive.org/33/items/nyannyannyan/NyanCatoriginal.mp3">
</audio>
<script>
var music = document.getElementById("nyancat-song");
music.volume = 0.1;
</script> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js?v=1'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ModifiersPlugin-latest-beta.js'></script>
<script src='https://cdn.rawgit.com/bit101/grid/40adacfed99b449400d30d60691d81de9d19bfe5/grid.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pixel Anim Test - Script Codes CSS Codes

html, body { height: 100%;
}
body { overflow: hidden; /* background-image: url("http://xmpdesign.com/projects/nyan-anim/nyan-sky.jpg");*/
}
canvas { position: absolute; top: 0; left: 0
}
#cat { position: absolute; top: 0; left: 0; visibility: hidden;
}

Pixel Anim Test - Script Codes JS Codes

var vw = window.innerWidth;
var vh = window.innerHeight;
var pixels = 6, count = 0;
window.addEventListener("resize", createGrid);
createGrid();
function init() { var x = Math.round((vw - 96) / pixels) * pixels; var y = Math.ceil((vh - 96) / pixels) * pixels; TweenLite.set("#cat", { autoAlpha: 1, x: 0, y: y }); TweenMax.to("#cat", vw / 700, { x: x, repeat: -1, yoyo: true, onRepeat:onRepeat, ease: Power0.easeNone, });
}
function onRepeat() { count++, TweenLite.set("body", {backgroundColor:"hsl(" + Math.random() * 255 + ", 90%, 60%)"}); TweenLite.set("#cat", {rotationY: 180 * count}); }
function createGrid() { var canvas = document.querySelector("canvas"); var context = canvas.getContext("2d"); vw = canvas.width = window.innerWidth; vh = canvas.height = window.innerHeight; grid.majorStrokeStyle = "#000000"; grid.square(context, 0, 0, vw, vh, pixels); init();
}
Pixel Anim Test - Script Codes
Pixel Anim Test - Script Codes
Home Page Home
Developer Xavier Martínez
Username xmjol
Uploaded September 19, 2022
Rating 3
Size 2,415 Kb
Views 38,456
Do you need developer help for Pixel Anim Test?

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!

Xavier Martínez (xmjol) Script Codes
Name
ResaFav Customizer
Open Card Animation
React UI - 03 - CardList
Flex2x2
Flex Side-content
Cat4President
React UI - 07 - Random Image Generator Giphy API
React UI - 04 Steps Form
ReactJS Tutorial Testing
Let
Create amazing sales emails 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!