Oefening 1

Developer
Jelle Vrieswijk
Size
2,292 Kb
Views
22,264
  1. Oefening 1 Previews
  2. Oefening 1 HTML Codes
  3. Oefening 1 CSS Codes
  4. Oefening 1 JS Codes

How do I make an oefening 1?

What is a oefening 1? How do you make a oefening 1? This script and codes were developed by Jelle Vrieswijk on 20 October 2022, Thursday.

Oefening 1 Previews
IQ Test

Oefening 1 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Oefening 1</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg width="250px" height="150px" viewBox="0 0 250 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> <!-- Generator: Sketch 3.4.1 (15681) - http://www.bohemiancoding.com/sketch --> <title>Vlag</title> <desc>Created with Sketch.</desc> <defs></defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="Vlag" sketch:type="MSLayerGroup"> <rect id="paars" fill="#BD0FE1" sketch:type="MSShapeGroup" x="0" y="120" width="250" height="30" class="vlag"></rect> <rect id="blauw" fill="#4990E2" sketch:type="MSShapeGroup" x="0" y="90" width="250" height="30" class="vlag"></rect> <rect id="groen" fill="#7ED321" sketch:type="MSShapeGroup" x="0" y="60" width="250" height="30" class="vlag"></rect> <rect id="geel" fill="#F8E81C" sketch:type="MSShapeGroup" x="0" y="30" width="250" height="30" class="vlag"></rect> <rect id="oranje" fill="#F6A623" sketch:type="MSShapeGroup" x="0" y="0" width="250" height="30" class="vlag"></rect> </g> </g>
</svg> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Oefening 1 - Script Codes CSS Codes

/*svg { display: block; margin: auto;
}*/
svg { width: 300px; height: 300px; position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: -150px;
}

Oefening 1 - Script Codes JS Codes

// Variabelen
var paars = $("#paars");
var blauw = $("#blauw");
var groen = $("#groen");
var geel = $("#geel");
var oranje = $("#oranje");
var vlag = $("#vlag");
// Timeline
var tl = new TimelineMax({ repeat: -1
});
// Vijf kleurvlakken fly in
tl.from(paars, 0.7, { y: 0, x: 500, opacity: 0, ease: Power3.easeOut
});
tl.from(blauw, 0.7, { y: 0, x: -850, opacity: 0, ease: Power3.easeOut
});
tl.from(groen, 0.7, { y: 0, x: 500, opacity: 0, ease: Power3.easeOut
});
tl.from(geel, 0.7, { y: 0, x: -350, opacity: 0, ease: Power3.easeOut
});
tl.from(oranje, 0.7, { y: 0, x: 500, opacity: 0, ease: Power3.easeOut
});
tl.to($(".vlag"), 1, { opacity: 0.3
});
tl.staggerTo([paars, blauw, groen, geel, oranje], 1, { scale: 0.2, opacity: 0.3
}, 1);
Oefening 1 - Script Codes
Oefening 1 - Script Codes
Home Page Home
Developer Jelle Vrieswijk
Username jellevrswk
Uploaded October 20, 2022
Rating 3
Size 2,292 Kb
Views 22,264
Do you need developer help for Oefening 1?

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!

Jelle Vrieswijk (jellevrswk) Script Codes
Name
A Pen by Jelle Vrieswijk
Deeltoets 2
Datavis testje
Test
Datavis test
D3 Workshop Oefening 4
Motion Design Eindopdracht
Aantekeningen D3.js
Datavis eindopdracht final
Kut D3
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!