SVG ♥ JS
What & why
To make really fun & interesting visual interactions SVG can be very helpful.
SVG is best when combined with HTML, CSS & JavaScript—together the foursome can create magical things.
Understanding how to manipulate SVG elements with JavaScript can make great interactions.
Moving dinosaur egg
Set up
- This is an individual coding activity
- Fork & clone this repo
- Download the assets
- We’re going to work together, but independently, to each create an interactive SVG
The process:
We’ll walk through each question together and come up with a solution for each individual carousels.
- What HTML & CSS are necessary?
- What should the JavaScript do?
- Make the JS do its thing!
What HTML & CSS are necessary?
- How do we export the SVG?
- How do we insert the SVG into the HTML?
- How do we control the egg’s position?
- How do we animate the egg from position to position?
Code out the necessary HTML & CSS.
What should the JavaScript do?
- When does the egg move from side-to-side?
- What manipulations to the HTML need to be made?
- What manipulations to the CSS need to be made?
Write, in English, what the JS is doing.
Make the JS do its thing!
- What order does the code need to be in?
- What elements in the HTML need to be selected?
- What CSS classes need to be manipulated?
Write, in a new JS file, the necessary code.
jQuery
// Select an HTML tag; using CSS selectors
$('.dino')
// Add a class to an element
.addClass('move')
// Remove a class from an element
.removeClass('move')
// Calculate the width of an element
.outerWidth()
jQuery
// When the mouse is moved on an element
$('.dino').on('mousemove', function (eventObj) {
// The current x coordinate of the mouse on the element
eventObj.clientX
});
// Code branching: if-statement
if (location < 10) {
// True path
} else {
// False path
}