CMP5-Opdracht16
How do I make an cmp5-opdracht16?
What is a cmp5-opdracht16? How do you make a cmp5-opdracht16? This script and codes were developed by Sanne Van Gastel on 30 July 2022, Saturday.
CMP5-Opdracht16 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CMP5-Opdracht16</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <iframe width="0" height="0" src="https://www.youtube.com/embed/uPGf12quies?autoplay=1" frameborder="0" allowfullscreen></iframe>
<canvas id="canvas"></canvas>
<h1>Merry Black Christmas from Sanne & Michèle</h1> <img src='https://scontent-bru2-1.xx.fbcdn.net/v/t31.0-8/12471687_818243438302814_8211021703325421729_o.jpg?oh=8eaee5326a0b175f8081f4e1e531cd42&oe=58DE95AE' width='500px' height='500px' class='current'> <img src='https://s28.postimg.org/3vxlyp0ml/12471687_818243438302814_8211021703325421729_o.jpg' class='hidden' width='500px' height='500px'> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
CMP5-Opdracht16 - Script Codes CSS Codes
/*Simple reset*/
* {margin: 0; padding: 0;}
body { /*You can use any kind of background here.*/ background: #6b92b9;
}
canvas { position: fixed; z-index:2;
}
img{ padding: 4em; margin: 0 26em; z-index:3;
}
h1{ color:white; text-align:center; margin:60px 0 0 20px ;
}
.hidden{ display:none;
}
CMP5-Opdracht16 - Script Codes JS Codes
window.onload = function(){ //canvas init var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); //canvas dimensions var W = window.innerWidth; var H = window.innerHeight; canvas.width = W; canvas.height = H; //snowflake particles var mp = 25; //max particles var particles = []; for(var i = 0; i < mp; i++) { particles.push({ x: Math.random()*W, //x-coordinate y: Math.random()*H, //y-coordinate r: Math.random()*4+1, //radius d: Math.random()*mp //density }) } //Lets draw the flakes function draw() { ctx.clearRect(0, 0, W, H); ctx.fillStyle = "rgba(255, 255, 255, 0.8)"; ctx.beginPath(); for(var i = 0; i < mp; i++) { var p = particles[i]; ctx.moveTo(p.x, p.y); ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true); } ctx.fill(); update(); } //Function to move the snowflakes //angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes var angle = 0; function update() { angle += 0.01; for(var i = 0; i < mp; i++) { var p = particles[i]; //Updating X and Y coordinates //We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards //Every particle has its own density which can be used to make the downward movement different for each flake //Lets make it more random by adding in the radius p.y += Math.cos(angle+p.d) + 1 + p.r/2; p.x += Math.sin(angle) * 2; //Sending flakes back from the top when it exits //Lets make it a bit more organic and let flakes enter from the left and right also. if(p.x > W+5 || p.x < -5 || p.y > H) { if(i%3 > 0) //66.67% of the flakes { particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d}; } else { //If the flake is exitting from the right if(Math.sin(angle) > 0) { //Enter from the left particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d}; } else { //Enter from the right particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d}; } } } } } //animation loop setInterval(draw, 33);
}
$( "" ).hover(
);
$( "img" ).mouseover(function() { $( '.hidden' ).removeClass( "hidden" ); $( this ).addClass( "hidden" );
});
Developer | Sanne Van Gastel |
Username | SannevanGastel |
Uploaded | July 30, 2022 |
Rating | 3 |
Size | 3,031 Kb |
Views | 26,312 |
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!
Name | Size |
CMP5-Opdracht15 | 2,733 Kb |
CMP5-Opdracht14 | 3,780 Kb |
CMP5-Opdracht16 | 3,031 Kb |
CMP5-Opdracht3 | 2,327 Kb |
CMP5-Opdracht6 | 2,799 Kb |
Flexslider.js | 9,370 Kb |
CMP5-Opdracht7 | 13,558 Kb |
Vex-theme-bottom-right-corner | 2,903 Kb |
CMP5-Opdracht11 | 2,642 Kb |
CMP5-Opdracht4 | 1,941 Kb |
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!
Name | Username | Size |
A Pen by Bryan Rojas | Bryanrojas | 1,873 Kb |
Simple personal profile | Miroot | 2,856 Kb |
Greyscale image with filter in CSS3 | NickyCDK | 1,562 Kb |
Next Word Predictor | Rfalor | 2,776 Kb |
Pure css thumbnails hover | Ksksoft | 1,773 Kb |
AngularJS Skills | Supro | 3,312 Kb |
Svg animation draw | SzymonDziewonski | 5,545 Kb |
JQuery Viewport Size | Jeffpannone | 2,317 Kb |
A Pen by Theun | Tjoen | 6,152 Kb |
Cattywompus - A Subtle Parallax Banner Plugin | Hkfoster | 4,486 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!