Alicia Ramirez Logo

Posts Categorized: JavaScript

Cryptograma – Redo

I finally converted the last of my old Flash games into React, using Next JS. For simplicity, instead of symbols, I used emojis to hide the message. It’s not perfect, but the basic functionality is there. Maybe in the future I’ll improve it. The objective of the game is to reveal the quote. Each symbol… Read more »

Iconcentration – A Memory Game

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 »

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 »

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 »