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

Опубликовано: 28 Сентябрь 2021
на канале: 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...

На этой странице сайта вы можете посмотреть видео онлайн Use Rough Notation in Javascript | Awesome animated scribble library ✏️ длительностью часов минут секунд в хорошем качестве, которое загрузил пользователь Leanne R 28 Сентябрь 2021, поделитесь ссылкой с друзьями и знакомыми, на youtube это видео уже посмотрели 877 раз и оно понравилось 26 зрителям. Приятного просмотра!

502