آموزش Parallax رمزگشایی: ایجاد صفحات وب تعاملی با جاوا اسکریپت را بیاموزید
Demystifying Parallax: Learn to Create Interactive Web Pages with JavaScript
می دانید اختلاف منظر درست چیست؟ این افکت سه بعدی فوق العاده ای است که در هزاران وب سایت، بازی و برنامه دیده ایم (مثلاً Alto's Adventure). اختلاف منظر لذت تعامل است و دیوانه وار افراد را به خود جذب می کند. ممکن است شبیه وودو و جادوی تاریک به نظر برسد، اما در واقع کدنویسی برای خودتان بسیار ساده است! در این کلاس می‌خواهم توهم اختلاف منظر را از بین ببرم و به شما نشان دهم که چگونه می‌توانید صفحات وب تعاملی را با جاوا اسکریپت شروع کنید.
شما یاد خواهید گرفت که یک توهم تعاملی از عمق ایجاد کنید - جایی که موارد دورتر با سرعت کمتری نسبت به موارد نزدیکتر حرکت می کنند. و یاد خواهید گرفت که همه چیز را به حرکت کاربر پاسخ دهید، مانند زمانی که ماوس حرکت می کند یا زمانی که صفحه پیمایش می کند.
کلاس برای افرادی طراحی شده است که دانش اولیه HTML، CSS + JavaScript را دارند. من چند کلاس مبتدی در HTML + CSS و جاوا اسکریپت دارم که باید شما را سریع‌تر کند.
در طول این کلاس، موارد زیر را پوشش خواهیم داد:
- گوش دادن به ورودی کاربر (تغییر حرکت ماوس و موقعیت اسکرول).
- اتصال ویژگی های عنصر مانند موقعیت، تاری، و مقیاس به ورودی کاربر.
- ایجاد توهمات شبیه زندگی.
- اصول جاوا اسکریپت.
در اینجا چند کلاس مرتبط وجود دارد که ممکن است بخواهید قبل از این کلاس شرکت کنید:
با استفاده از برخی از تکنیک‌های اختلاف منظر که در کلاس یاد گرفته‌اید، یک قلم در CodePen بسازید.
یک تصویر و URL را به قلم یا وب‌سایت خود ارسال کنید!
می‌توانید دانلود کنید، یا از این URL برای تصاویر استفاده کنید:
https://s3-us-west-2.amazonaws.com/s.cdpn.io/1158400/parallax-asset-X.png. فقط X را در پایان با یک عدد از 1 تا 91 جایگزین کنید.
درس ها Lessons
-
اتصال حرکت ماوس به خروجی Connecting Mouse Movement To An Output
-
کد افراد دیگر Other People's Code
-
اختلاف منظر توضیح داده شد Parallax Explained
-
چگونه این کلاس قرار است کار کند How This Class Is Going To Work
-
واقعی تر کردن آن Making It More Realistic
-
مانند یک آماتور برنامه ریزی کنید Plan Like An Amateur
-
چرا باید در این کلاس شرکت کنید Why You Should Take This Class
-
ورودی ها و خروجی ها Inputs And Outputs
-
استفاده از ماوس و موقعیت اسکرول Using Mouse And Scroll Position
-
بعد چه می شود؟ What's Next?
-
ایجاد اثر اختلاف منظر Creating The Parallax Effect
-
مقادیر ورودی منحصر به فرد برای هر عنصر Unique Input Values For Each Element
-
گرفتن حرکت موش Capturing Mouse Movement
-
همه اش را بگذار کنار هم Putting It All Together
-
گرفتن موقعیت اسکرول Capturing Scroll Position
https://donyad.com/d/f6c29e
Rich Armstrong
هنرمند و طراح
هی! من ریچ آرمسترانگ هستم، خالق ADD چند خط فاصله. من طراحی، تصویرسازی، متحرک سازی، doodle و کدنویسی می کنم. آره همه آنها! و من عاشق این هستم. من می خواهم به شما در ایجاد چیز کمک کنم. من می خواهم ببینم شما سازنده هستید. از شما می خواهم رویاها و اهداف خود را دنبال کنید.
------------------------------
** اخبار بزرگ: پروژه 100 روزه کامل منتشر شد **
کتابی که در سال 2021 نوشتم منتشر شد! این پروژه The Perfect 100 Day Project نام دارد و به شما کمک می کند تا پروژه 100 روزه عالی را برای خود انتخاب کرده و تکمیل کنید. این کتاب بر اساس کلاس اشتراک مهارت معروف من به همین نام است.
------------------------------
من طراحی چند رسانه ای و سپس طراحی گرافیک را مطالعه کردم و به خودم یاد دادم که چگونه کدنویسی کنم. من به صورت آزاد کار کرده‌ام، برای آژانس‌ها و استارت‌آپ‌ها کار کرده‌ام و اکنون استودیوی خودم را با همسرم در آمستردام اداره می‌کنم. همچنین، من می توانم بینی خود را با زبانم لمس کنم!
من از سال 2015 در Skillshare تدریس می‌کنم و خیلی دوست دارم! دیدن آنچه دانش‌آموزان خلق می‌کنند و چگونه زندگی خود را به دلیل آنچه که من آموزش می‌دهم تغییر می‌دهند، مرا زنده می‌کند. بنابراین، متشکرم! لطفاً به اشتراک گذاری کار، نظرات و داستان های خود ادامه دهید!
برای انواع چیزهای فوق‌العاده مانند تمرین‌ها و تمرین‌های خلاقانه، بررسی کنید، برنامه رایگان من را دانلود کنید و مرا در اینستاگرام، Patreon و دنبال کنید. همچنین می‌توانید برای دریافت چیزهای اضافی و ترفندهای راهنمایی در صندوق ورودی خود ثبت نام کنید.
B.Tech. (Cum Laude) در طراحی گرافیک
2013 - 2014
B.A. در مدیریت ارتباطات متخصص در ارتباطات برند خلاق
2006 - 2008
نمایش نظرات