انیمیشن خط خزنده. انیمیشن برای یک گیف تیک تیک و انیمیشن نمایشگرهای LED

سلام، دوستداران صفحه آرایی و زبان های وب! موضوع انتشار امروز به درستی این است: "انیمیشن برای سایت html". این روزها انیمیشن ها بسیار محبوب هستند و بیشترین سوال را در بین مبتدیان ایجاد می کنند. به همین دلیل است که می‌خواهم به این موضوع بپردازم و به شما بگویم که عناصر متحرک برای چه چیزهایی مورد نیاز هستند، بیشتر از کجا استفاده می‌شوند و از چه ابزارهایی استفاده می‌شوند.

من همچنین تصمیم گرفتم که نمونه کدهای خاصی را نشان دهم و کارهای محبوب و پر تقاضا را اجرا کنم. پس از خواندن مقاله تا انتها، نحوه اجرای تکنیک هایی مانند نوار چسب و بارش برف را یاد خواهید گرفت. حالا بریم سراغ قسمت اصلی مقاله!

انیمیشن دنیا را طوفان کرده است

در واقع، اکثر منابع وب از اشیاء متحرک در محتوای خود استفاده می کنند. بارزترین نمونه، فروشگاه‌های آنلاین هستند، جایی که وقتی ماوس را روی یک مدل یا محصول می‌چرخانید، آن‌ها اسکرول می‌کنند.

پیش از این نقش انیمیشن را فایل های گیف ایفا می کردند. با این حال، امروزه بیشتر عناصر متحرک با استفاده از شیوه نامه های آبشاری انجام می شود. علاوه بر این، کتابخانه های زیادی وجود دارند که با ارائه راه حل های آماده، کار توسعه دهندگان وب را ساده می کنند.

به عنوان مثال، کتابخانه Animate.css. کتابخانه را می توان دانلود کرد و سپس از طریق آن به کد برنامه متصل شد < لینک>.

تیکر

ممکن است گاهی متوجه شده باشید که محتوای متنی در یک وب سایت چگونه به صورت افقی یا عمودی حرکت می کند، یا حتی ممکن است تصاویر حرکت کنند. کمی پیچیده به نظر می رسد، اما در واقع تنها یک تگ زبان html مسئول این است .

من می خواهم توجه داشته باشم که این یک عنصر جدید نیست و به html5 مربوط نمی شود. در ابتدا برای اینترنت اکسپلورر ایجاد شد، اما پس از مدتی مرورگرهای دیگر شروع به پشتیبانی از آن کردند.

بنابراین چگونه یک تیک تیک ایجاد می کنید؟ در واقع فقط باید متن مورد نیاز را در تگ جفت شده وارد کنید - و او "دوید". اینکه دقیقاً چگونه حرکت خواهد کرد بحث دیگری است.

صفت شرح
رفتار - اخلاق نحوه انتقال محتوا را نشان می دهد:

متناوب- محتوا بین دو مرز حرکت می کند و از آنها خارج می شود.

طومار- جسم مانند یک دایره حرکت می کند (از یک طرف ظاهر می شود، از طرف دیگر ناپدید می شود).

اسلاید- محتوا تمام مسیر را طی می کند و متوقف می شود.
حلقه تعیین می کند که محتوای تگ توصیف شده چند بار تکرار شود. به عنوان مثال، -1 برای تکرار نامحدود استفاده می شود.
جهت جهت حرکت را تنظیم می کند:

پایین- از لبه بالا به پایین حرکت می کند.

ترک کرد- از لبه راست به چپ؛

بالا- از مرز پایین به بالا؛

درست- از چپ به راست.
scrollaunt فاصله پیکسلی بین موقعیت فعلی شی و موقعیت بعدی را تنظیم می کند. بر سرعت حرکت تاثیر می گذارد. در ابتدا برابر با 6 است.
تاخیر پیمایش این همچنین بر سرعت "در حال اجرا" تأثیر می گذارد، اما به قیمت فرکانس به روز رسانی. تأخیر را بر حسب میلی ثانیه تنظیم می کند.

اکنون زمان آن است که دانش کسب شده را در عمل امتحان کنید. اجرای نرم‌افزار زیر را در کادر محاوره‌ای کد قرار دهید و آن را در مرورگر اجرا کنید.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 مثال جامپرها

مثال جامپرها

دو انیمیشن در صفحه نمایش داده شد: یک خط دویدن (یا بهتر است بگوییم پریدن) و یک اسب در حال تاخت.

با نزدیک شدن به ماه های زمستان، بسیاری از صاحبان منابع آنلاین وب سایت های خود را با شاخه های صنوبر، اسباب بازی های تعطیلات یا برف در حال سقوط تزئین می کنند. به نکته آخر می پردازیم.

ایجاد دانه های برف به روش های مختلف امکان پذیر است. برخی الگوهای خود را روی یک پس زمینه شفاف ترسیم می کنند، برخی دیگر از مواد آماده از اینترنت استفاده می کنند و برخی دیگر به ابزارهای CSS متوسل می شوند. تصمیم گرفتم به گروه آخر بپیوندم و جادوی خودم را روی استایل ها انجام دادم.

همانطور که ممکن است حدس زده باشید، این بار انیمیشن به طور انحصاری توسط مکانیزم های داخلی صفحات سبک آبشاری ایجاد می شود، اگرچه اسکریپت های راه حل دیگری نیز وجود دارد. همچنین، ما از html استفاده نخواهیم کرد، بلکه فقط از نشانه گذاری استاندارد استفاده خواهیم کرد.

برای ایجاد برف در حال ریزش، باید از ابزارهای زیر استفاده کنید:

ویژگی انیمیشن(که در مشخصات css3 ظاهر شد) و بلاک کنید @keyframes.

@keyframesبه تعیین وضعیت عناصر صفحه وب در یک نقطه خاص از زمان کمک می کند و بنابراین آنها را به حرکت وا می دارد. کلمه کلیدی از جانبمکان اولیه اشیاء و کلمه را تعیین می کند به- نهایی

نمای کلی آگهی: نام @keyframes (از جانب(…)به (…) )

انیمیشنبه چندین پارامتر تقسیم می شود که از 4 مورد از آنها استفاده خواهیم کرد.

و حالا یک مثال:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40



انیمیشن Ticker معمولا در صفحه نمایش های نسبتا بزرگ استفاده می شود. این به این دلیل است که انتخاب انیمیشن های گرافیکی برای یک صفحه کوچک دشوار است تا هماهنگ به نظر برسد و همه توجه را منحرف نکند. اما حرکت متن برای طیف گسترده ای از اندازه های صفحه نمایش استفاده می شود.

تیک تیک ال ای دیمی تواند تمام رنگی یا تک رنگ باشد و این نیز برای استفاده از انیمیشن اهمیت زیادی دارد. در مدل های تمام رنگی می توان از آن بدون محدودیت استفاده کرد، اما برای صفحه نمایش های تک رنگ لازم است:

  • استفاده از انیمیشن متشکل از یک رنگ.
  • نسبت اندازه را در نظر بگیرید، در غیر این صورت انیمیشن به سادگی محو می شود.

متحرک کردن متن تیک تیک برای صفحه های تک رنگ نباید خیلی پیچیده و با افکت بارگذاری شود. به یاد داشته باشید که همه چیز به همان رنگ انجام می شود و می تواند در یک نقطه روشن ادغام شود.

یک قالب مناسب برای تبادل تصاویر: gif، که اغلب هنگام کار با صفحه نمایش استفاده می شود. انیمیشن گیف برای یک خط خزنده می تواند تک رنگ یا چند رنگ باشد و حداکثر 256 رنگ داشته باشد.

در ویرایشگرهای صفحه نمایش LED، فایل های GIF را می توان هم در یک موقعیت ثابت و هم به صورت موازی ایجاد کرد:

  • حرکت خود برای تصویر؛
  • اثر حرکت در سراسر صفحه نمایش.

در این حالت، انیمیشن برای تیکر از طریق برنامه های ویرایشگر ویژه پیکربندی می شود و باید با استفاده از اسکریپت های خاص طراحی شود. می توانید آنها را در قالب آماده دانلود کنید یا برای دستگاه خود سفارش دهید.

انیمیشن برای تیک تیک ال ای دی

طراحی هر تصویر بر روی صفحه نمایش LED می تواند جالب تر شود اگر حرکت را به آن اضافه کنید. اما باید تمایز قائل شوید که انیمیشن برای یک تیک تیک LED و جلوه های نرم افزاری آن چیست. بنابراین، می توانید متن یا تصویر متحرک را در برنامه تنظیمات به شکل تمام شده بارگذاری کنید. فایل حاوی فریم های متوالی و اطلاعاتی در مورد زمان نمایش هر یک از آنها خواهد بود.

دو راه برای متحرک سازی یک تیک تیک وجود دارد.

راه اول

تصویری که پس‌زمینه خواهد بود را باز کنید (مثال). یک لایه جدید ایجاد کنید. با استفاده از ابزار "Rectangular Area"، یک مستطیل کوچک را انتخاب کنید که به عنوان میدانی عمل می کند که خط در امتداد آن اجرا می شود و آن را با مقداری رنگ پر کنید، که مهم نیست، زیرا دید از آن حذف می شود.

یک لایه متن ایجاد کنید.

یک لایه ماسک به لایه متن اضافه کنید و آن را با رنگ مشکی پر کنید. روی لایه با مستطیل رفته و ناحیه انتخاب شده را بارگذاری کنید: زبانه "Tab". آن را روی ماسک لایه قرار دهید و ناحیه انتخاب شده را با رنگ سفید پر کنید.

دید را از لایه با مستطیل حذف کنید. در تب "پنجره"، "Timeline" را انتخاب کنید و یک استوری بورد ایجاد کنید. در فریم اول "انتخاب زمان نمایش چرخه" و "انتخاب پارامترهای چرخه" را تنظیم می کنیم. لایه متن را از ماسک لایه جدا کنید. خط را به سمت راست حرکت دهید تا از دید ناپدید شود. این یک ناحیه مستطیلی را ایجاد می کند که در لایه ماسک به رنگ سفید برجسته شده است. برای اینکه خط هنگام حرکت در یک سطح باشد، باید "Elements Auxiliary" را فعال کنید: تب "View".

در فریم دوم، خط را به سمت چپ تغییر می دهیم تا از دید ناپدید شود.

در استوری بورد، کلید Shift را نگه دارید و روی فریم اول و دوم کلیک کنید. روی نماد "ایجاد فریم های میانی" کلیک کنید. در کادر محاوره ای، تعداد فریم های میانی را تنظیم کنید.

ما اولین روش یک خط خزنده را دریافت می کنیم.

راه دوم

یک لایه متنی ایجاد کنید که ثابت باشد، اما با تقلید حرکت.

قابلیت مشاهده را از همه لایه ها به جز لایه متن خاموش کنید. یک براش از لایه متن درست کنید.

ما روی لایه با تصویر می ایستیم، از ابزار "Rectangular Area" برای انتخاب بخشی از تصویر که خط خزنده روی آن شبیه سازی می شود، استفاده می کنیم. ناحیه انتخاب شده را کپی کرده و جایگذاری کنید.

یک لایه ماسک به لایه با قطعه تصویر اضافه کنید و آن را با رنگ سیاه پر کنید. در ماسک لایه، از یک براش از لایه متن سفید برای نمایش لایه استفاده کنید. یک لایه جدید در بالای لایه با قطعه تصویر ایجاد کنید و آن را با یک براش نرم با رنگ تیره مناسب رنگ کنید. با تکه‌ای از تصویر، لایه را به صورت یک ماسک بریده در رابطه با الک بسازید: در حالی که کلید Alt را نگه داشته‌اید، در امتداد مرز لایه‌ها در پنجره لایه‌ها کلیک کنید.

ما یک استوری بورد ایجاد می کنیم. در فریم اول، لایه را با نوار به سمت راست حرکت دهید.

در فریم دوم، لایه را با نوار به سمت چپ حرکت دهید.

ما قاب های میانی ایجاد می کنیم.

انیمیشن را ذخیره می کنیم و روش دوم یعنی شبیه سازی تیکر را دریافت می کنیم.



 

شاید خواندن آن مفید باشد: