Archive of: JavaScript

• Making Faces - SVG and JavaScript

  March 15, 2021

  After spending some time away from the code I wrote yesterday and reading a very useful article, I was able to finish this silly prototype. I noticed I had some pretty gnarly typos in my JavaScript yesterday that I'm embarassed to point out, but I am know going to make sure I double check my namespace URIs.

  100daysofcode, CSS, HTML, JavaScript, SVG

• Playing with an SVG of my old logo

  March 14, 2021

  How hard is it to add an SVG element that makes use of the USE element to place another instance of an SVG symbol into a document using JavaScript? Turns out, it's tough. At least for me at this time. So instead I made my old logo animate when hovered over. This probably won't work on mobile, but at this moment that's ok.

  100daysofcode, CSS, HTML, JavaScript, SVG

• Testing out JavaScript image replacement

  December 2, 2020

  I've been thinking about building super lightweight pages that prompt the user to decide whether or not they want to load in images at full size and enhance the page with additional styling. So I built this proof-of-concept to figure out how I might approach it. This is pretty fresh and untested in anything other than Firefox on Windows 10.

  JavaScript, JS, CSS, HTML

• Scrolling animation practice

  July 1, 2020

  On the most recent episode of ShopTalk Show (episode 419), Chris Coyier mentioned a simple piece of JavaScript that can be used to create a custom CSS property that helps animate elements alongside scroll position. The article containing the JS is on CSStricks.com.

  CSS, HTML, JavaScript, code

• Sakura petals falling with CSS and JS

  June 23, 2020

  I worked with my sakura petals again today. I wanted to see if I could animate the petals falling and randomize their positions to some extent. Luckily with the help of Chris Ferdinandi's concise and insightful posts on his website, I was able to add some vanilla JavaScript to help me do just that.

  CSS, SVG, HTML, JavaScript, code