I’m still converting some of my old flash games and experiments into JavaScript. This time I redid an old memory game (concentration) I had called “Remember Me”, but decided to use icons and renamed it “Iconcentration”. This project was done with Next.js. It was a good practice of useEffect. Once a card was flipped, useEffect… Read more »
Posts Categorized: JavaScript
Mayan Math Redo
For the past year or so I have been learning React and more recently, Next.js. In order to practice, I decided to convert my old flash applications (I know, about 10 years too late) to JavaScript. The first of these old examples I have done is Mayan Math. Which teaches you about how the Maya… Read more »
Custom Navigation Bar Animations with AOS
I’m always on the lookout for easy-to-use JavaScript libraries for my students. Recently I discovered AOS (Animate on Scroll), which makes animating elements on the page as you scroll super easy. The library comes with many ready-to-go animations, but one of the things I really like about this small library is that you can create… Read more »
Dynamic SVGs with Custom Fields, and JavaScript
I recently worked on a WordPress project to make a site for an exhibition event (vendors in booths gathered in one place). The client wanted to have floor map that would show which booths were taken, and which were still available (there were over 130 booths). Normally, this would require a graphic that would have… Read more »
ScrollMagic for Beginners Tutorial
ScrollMagic is a JavaScript library for creating scroll interactions. It lets you create animations that start and stop at specific points during the scrolling of a page. It’s quite powerful, but can be intimidating for beginners, since unlike Skrollr, it’s all done in JavaScript. In this tutorial, I’ll cover the basics of adding ScrollMagic to a… Read more »
Skrollr for Beginners Tutorial
Skrollr is a scroller library that allows you to perform animations or changes to your web page’s content based on screen position. For example, you can make a div slowly appear, or slide in, as you scroll down the page. You can see it in action here. This tutorial will cover the bare minimum you need… Read more »