Sharing Is Caring:

Learn HTML Canvas: Advanced Text Effects

Take animated text to the next level

This course includes:

  • 1.5 hours of on-demand video
  • 10 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of completion

Hot & new

4.9

Created by Frank Dvorak

What you’ll learn

  • Draw and style multiline text on HTML canvas
  • Convert text into an animated particle system
  • Practice vanilla JavaScript and front-end web development techniques
  • Apply physics and advanced animation techniques

Course content

2 sections • 15 lectures • 1h 32m total lengthCollapse all sections

Introduction1 lecture • 1min

  • IntroductionPreview00:50

Project14 lectures • 1hr 32min

  • Project setupPreview02:02
  • CSS & JavaScript positioning tricksPreview02:24
  • Drawing, styling, and positioning textPreview09:30
  • Wrapping and centering multiline text12:04
  • How to center a block of text vertically03:42
  • HTML canvas gradients02:50
  • Refactoring into object-oriented JavaScript12:16
  • Scanning canvas for pixel data11:44
  • Converting text into particles10:39
  • Interactions and physicsPreview06:28
  • Custom fonts03:58
  • Resizing and responsive design04:05
  • Particle constellations effect06:17
  • Dynamic line opacity formula03:38

Requirements

  • Basic knowledge of HTML, CSS, and JavaScript needed

Description

Become a master of web animation.

From drawing a single letter to multiline animated particle text. In this HTML canvas crash course, we will go from basics to advanced in a single class. We will cover everything you need to know about using fonts and drawing text on HTML canvas. Let’s explore what’s possible in modern front-end web development and turn text into complex animated particle systems.

Practice vanilla JavaScript with no frameworks and no libraries

Read Also -->   CSS: Zero to Hero in CSS by Styling a Website from Scratch

Learn how to write creative coding prototypes and experiments in a simple procedural (line-by-line) codebase. Convert those experiments into a more modular object-oriented JavaScript syntax.

Experiment with code

Learn how to create the base version of the effect with me step by step. Apply the constellations algorithm for a completely different visual effect. Learn how to use canvas gradients, and custom web fonts, and how to change particle shapes and physics to get different visuals and movement.

This technique will also work with company LOGOS, even if the logo is a combination of text, symbols, and images.

Source code included

With the final lesson, you can download the complete source code, as well as some of my experimental variations of the codebase.

From basics to advanced

Basic knowledge of HTML, CSS, and JavaScript is required. The first part of the course will be very beginner friendly, we will learn how to set up an HTML canvas, and how to draw text using fillText and stroke text built-in methods and we will cover all available tools and techniques to style it.

The second part will cover more advanced algorithms. We will learn how to draw multiline-centered text on HTML canvas, how to turn it into particles, how to make those particle systems interactive and much more.

Have fun! 🙂

Who this course is for:

  • Creative coders curious about advanced web animation
  • Front end web developers who want to practice vanilla JavaScript and animation algorithms

👇👇👇👇 Click Below to Enroll in Free Udemy Course Limited Enrolls 👇👇👇👇

Go to Course
Join Us Join Us Join Us
Sharing Is Caring:

Leave a Comment

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
100% Free SEO Tools - Tool Kits PRO