stevescruz / js-flying_rocket

The flying rocket chases your cursor on mouse move using HTML, CSS and Vanilla JavaScript.

Flying Rocket

The Flying Rocket chases your cursor on mouse move using HTML, CSS and Vanilla JavaScript.

Why?   |    Technologies   |    What can I learn?   |    How to use   |    License

Desktop and mobile versions respectively

Why?

It is nice to build things with Pure CSS and Vanilla JavaScript to better appreciate functionalities provided by frameworks, libraries and preprocessors such as ReactJS, Angular, Vue.js, Bootstrap, Tailwind and SASS.

Technologies

This project was developed with the following technologies:

• HTML
• CSS
• JavaScript
• VS Code with Emmet
• GitHub Pages

What can I learn?

1. Looking at this code you can learn how to make an HTML element chase your cursor on mouse move using Vanilla JavaScript.

   • CodePen example: Chasing Ballon.

2. You can also learn how to create a throttle function (used to limit the rate at which events are triggered) to improve performance when using onmousemove or onscroll events.

   • CodePen example: Chasing Ballon.

3. Creative use of ::before and ::after pseudo-elements, gradients and filter: blur() to make the rocket thrusters glow.

4. Cool animation created by using a combination of ::before and ::after pseudo-elements, :active state and keyframes.

Check out the Front-end Mastery repository it contains references to level up with CSS and JavaScript tricks for front-end developers.

How to use

Access the deployed website at GitHub Pages.

Or clone and run this application on your own machine. You'll need Git installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/stevescruz/flying_rocket.git

# Go into the repository
$ cd flying_rocket

# Run the app
Run index.html with your web browser

📝 License

This project is under the MIT license.

---

Get in touch with me!