Use Rough Notation in Javascript | Awesome animated scribble library ✏️

Veröffentlicht am: 28 September 2021
auf dem Kanal: Leanne R

877

In this video, I show you how to use the awesome Rough Notation library to add super-cool animated scribble annotations to your page.

✏️ Link to the Rough Notation Library: https://roughnotation.com/

✨ Video Contents: ✨

00:34 - Bringing the Rough Notation library into the project with a script tag.
00:58 - ⚠️ IMPORTANT: adding type=“module” to our index.js script tag to make the library work.
01:08 - Importing the library into our JS file.
01:36 - Adding ids to our HTML.
01:47 - Grabbing the ids in our JS with getElementById.
02:33 - Adding notations, choosing the type and color.
03:35 - Running the annotation in the browser.
04:40 - Adding padding to the annotations.
05:22 - Adding the bracket notation, controlling which brackets are displayed.
05:41 - Changing the stroke width.
05:52 -Refactoring the show() invocations and making the animations run sequentially with annotationGroup.
06:36 - Changing the order in which the animations are run.
06:53 - Using a media query to turn off the animations when the user has selected the reduced motion setting.
08:00 - Turning off individual animations.

--

const me = {
name: "Leanne 👩🏻",
passions: ["coffee☕️", "code 💻", "cats 🐱"],
unpopular_opinion: "LOVES CSS ❤️",
favorite_colors: ["hotpink", "orangered"],
channel_aim: "Show the world that CSS is fun and web development rules! 👑"
}

--

🐤 Say hi on Twitter: / rybaleanne
🤺 Join the Scrimba Weekly Web Dev Challenge: https://scrimba.com/learn/weeklychall...

Auf dieser Seite können Sie das Online-Video Use Rough Notation in Javascript | Awesome animated scribble library ✏️ mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Leanne R 28 September 2021 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 877 Mal angesehen und es wurde von 26 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

353