آموزش SVG به عنوان کد: نمادهای تعاملی و دستکاری آسان تصویر
SVGs as Code: Interactive Icons and Easy Image Manipulation
- در حال بارگزاری، لطفا صبر کنید...
SVGها فرمت تصویری محبوبیت فزاینده ای برای وب هستند، به خصوص برای نمادها، عمدتاً به این دلیل که در مقایسه با سایر فرمت های تصویر کوچک هستند و برای اندازه های مختلف صفحه نمایش کاملاً پاسخگو هستند. با این حال، بخش دیگری از جذابیت و قدرت آنها که اغلب نادیده گرفته می‌شود این است که SVGها درست مانند HTML کد هستند و می‌توانند با CSS استایل‌بندی شوند و با جاوا اسکریپت دستکاری شوند.
در این دوره به جزئیات نحوه دستکاری SVGها به عنوان کد خواهیم پرداخت. برای هر کسی که با HTML، CSS و جاوا اسکریپت آشنایی دارد، قابل دسترسی است. یاد خواهید گرفت:
- نحوه تغییر رنگ نمادهای SVG زمانی که کاربر روی آنها قرار می گیرد و روی آنها کلیک می کند
- نحوه استفاده از SVG برای برجسته کردن، محو کردن و دستکاری قسمت‌های مختلف عکس‌ها و جلب توجه دقیقاً در جایی که قصد دارید
- چگونه می توان تصاویر SVG خود را با جاوا اسکریپت دستکاری کرد و آنها را در پاسخ به عملکرد کاربر متحرک کرد.
به عنوان پروژه کلاس خود، یک صفحه وب ساده برای فیلتر کردن و دستکاری عکس می سازید، صفحه ای که به شما امکان می دهد یک عکس را دستکاری کنید و یک فیلتر مبتنی بر SVG سفارشی برای آن ایجاد کنید که جلوه ها و هایلایت ها را اضافه می کند.
پیوندهایی به نمونه‌های کد در طول دوره و پروژه به شما ارائه می‌شود.
پروژه شما برای این دوره ایجاد یک صفحه وب ساده برای فیلتر کردن و دستکاری عکس است که به شما امکان می دهد فیلترهایی را به صورت تعاملی مشابه آنچه در اینستاگرام یا اسنپ چت انجام می دهید اضافه کنید.
ما با راه‌اندازی یک نوار منوی ساده با نمادهای SVG شروع می‌کنیم، که باعث می‌شود آن نمادها بر اساس تعامل کاربر تغییر رنگ دهند.
سپس یک عکس اضافه می‌کنیم و نحوه دستکاری، برجسته کردن و محو کردن آن را با استفاده از فیلترهای SVG می‌آموزیم.
در نهایت ما آن را کاملاً تعاملی خواهیم کرد و با استفاده از جاوا اسکریپت به کاربر اجازه می‌دهیم فیلترهایی را که می‌خواهد اعمال کند و کجا می‌خواهد روی عکس اعمال کند انتخاب و انتخاب کند.
در اینجا لیستی از نمونه‌های کد وجود دارد که در کلاس و پروژه به آنها ارجاع خواهیم داد:
- SVG صورت ساده: https://codepen.io/kball/pen/jZajON
- SVG صورت ساده با CSS: https://codepen.io/kball/pen/padXvv/
- نمونه هایی با Image src و Shadow Dom:
- ابزار درونی جاوا اسکریپت:
- FontAwesome SVG با جاوا اسکریپت: https://codepen.io/kball/pen/eVqJop
- آغاز منوبار: https://codepen.io/kball/pen/NyQxQm
- منوی تعاملی:
- تصویر شطرنجی داخل SVG: https://codepen.io/kball/pen/BrBKJE
- فیلترهای محو:
- فیلترهای رنگی:
- ماسک‌ها: https://codepen.io/kball/pen/VXvjOx
- دستکاری برنامه ای: https://codepen.io/kball/pen/rdOWvR
- فیلتر از منو کلیک کنید:
- کاوش رویدادهای ماوس:
- ایجاد ماسک با کلیک و کشیدن:
- آپلود عکس:
- دانلود عکس: https://codepen.io/kball/pen/PRGzeb
درس ها Lessons
-
ایجاد ماسک با کلیک و کشیدن Creating a Mask With Click and Drag
-
Fontawesome 5 و svg-with-js Fontawesome 5 & svg-with-js
-
SVG به عنوان کد SVG as Code
-
ایجاد نوار منو Creating a Menu Bar
-
مرحله نهایی Final Step
-
ترکیب ماسک با فیلترها Combining Masks with Filters
-
ماسک ها Masks
-
اعمال فیلترها به صورت برنامه ای Applying Filters Programmatically
-
جاسازی عکس ها در SVG Embedding Photos in SVGs
-
تعاملی کردن نوار منوی ما Making Our Menu Bar Interactive
-
شیرجه زدن در Dive In
-
فیلتر تبدیل رنگ Color Transformation Filter
-
دستکاری برنامه ای SVG Programmatic Manipulation of SVG
-
آپلود تصویر سفارشی Uploading Custom Image
-
SVG 'استفاده' و Shadow DOM SVG 'Use' and the Shadow DOM
-
دستکاری Stroke و Fill با CSS Manipulating Stroke and Fill with CSS
-
ذخیره SVG Saving Your SVG
-
SVG درونی Inlining SVG
-
اولین فیلتر SVG شما - Blur Your First SVG Filter - Blur
-
رویدادها و مختصات ماوس در جاوا اسکریپت Mouse Events and Coordinates in JavaScript
https://donyad.com/d/a629
Kevin Ball
مشاور و مربی توسعه وب
سلام، من کوین بال (مستعار KBall) هستم و بیش از یک دهه است که یک توسعه دهنده نرم افزار هستم. من یک شرکت مشاوره و آموزش توسعه وب به نام ZenDev را اداره می کنم.
قبل از راه اندازی ZenDev، توسعه را برای هدایت می کردم. من همچنین در کنفرانس‌هایی در سرتاسر جهان مانند همه چیز باز، ، اجلاس CSS صحبت می‌کنم. a>، و اجلاس دسترسی. من در بنیانگذاری مشارکت کردم و به سازماندهی جلسات بنیاد و جاوا اسکریپت ادامه می دهم.
من عاشق نوشتن کد هستم، اما همچنین عاشق تدریس و کمک به افراد برای رسیدن به پتانسیل کامل خود هستم. علاوه بر دوره‌هایم در مورد Skillshare، من یک خبرنامه در مورد توسعه frontend منتشر می‌کنم به نام
نمایش نظرات