دشوار و تماشایی نیست. آواتار خود را لرزاند.
1. تصویری را که لازم داریم باز کنید و آن را برش دهید:
2. حالا پس زمینه دختر را با ابزار انتخاب کنید گرگ جادویی. یا می توانید برای کسانی که می دانید چگونه لایه را ماسک بزنید ، برجسته کنید. سپس \u003e معکوس را انتخاب کنید.
3. حال Ctrl + J. شما باید با یک دختر دو لایه بگیرید.
4. ما به فیلتر\u003e تاری\u003e تاری حرکت (فیلتر\u003e تاری\u003e تاری حرکت).
5- اکنون فقط پیکربندی انیمیشن باقی مانده است. پنجره اول لایه قابل مشاهده نیست ، دوم قابل مشاهده است ، سوم قابل مشاهده نیست. من بین 6 انجام دادم.
همه یکسان برای متن معتبر است. فقط برای تار کردن آن ، ابتدا باید این کار را انجام دهید نوع راستیزی کردن. متن مبهم دریافت می کنید:
برای تقویت بصری جلوه ، می توانید کمی دشوارتر پیش بروید:
1. ما متن را می نویسیم. لایه را مجدداً تنظیم کنید:
2. ما چندین نسخه درست می کنیم ، بیایید بگوییم دو مورد (ممکن است بیشتر باشد) Ctrl + J.
3. حالا هر لایه را به نوبه خود بشوییم ( فیلتر\u003e تاری\u003e تاری حرکت (فیلتر\u003e تاری\u003e تاری حرکت)) ، اما با درجات مختلف. یعنی باید اینگونه باشد:
لایه 1 \u003d بدون تار
لایه 2 \u003d تاری 5
لایه 3 \u003d تاری 10
سلام بر خوانندگان عزیز. امروز می خواهم به شما بگویم چگونه با استفاده از جی کوئری تقریباً تمام اشیاء موجود در سایت را که فقط می خواهیم لرزش داشته باشیم ، ایجاد کنید.
شما احتمالاً فکر می کنید چه مزخرفاتی است؟ :-) اصلا شبیه به آن نیست. بسیار چشمگیر به نظر می رسد مخصوصاً اگر واقعاً آشغال باشد ، من آن را در وبلاگ منتشر نکردم.
در اینجا ما به چند نمونه کاملاً نگاه می کنیم. این اسکریپت به شما امکان می دهد اشیاء را هنگامی که روی آنها و فقط تمام زمان معلق هستید ، تکان دهید. و همچنین اثرات اضافی نیز وجود دارد ، مانند. به نظر می رسد وسوسه انگیز است ، اینطور نیست؟ :-)
می خواهم از jackrugile.com بخاطر این افزونه جالب تشکر کنم.
به طور کلی ، بیایید ببینیم که چگونه چنین چیزی را در سایت خود پیاده سازی کنید.
ι
چارچوب JQuery و اسکریپت تکان دهنده
طبق سنت ، ما باید خود کتابخانه و متن تکان دهنده را وصل کنیم. برای این میان برچسب ها
و موارد زیر را اضافه کنید:
این پرونده ها (اسکریپت ها) در منابع هستند که می توانید در بالا بارگیری کنید.
یادآوری می كنم كه اگر قبلاً كتابخانه ای در آن وصل شده اید ، دیگر نیازی به وصل كردن مجدد آن نیست
jquery-1.7.2.min.js - کتابخانه (چارچوب). تکرار می کنم ، اگر این فیلم نامه را ضمیمه دارید ، بار دوم لازم نیست.
jquery.jrumble.1.3.min.js - اما این اسکریپت که در واقع با اشیاء موجود در سایت شگفتی می کند. :-) ما لزوماً آن را وصل می کنیم.
اشیاء
در این حالت موارد معمولی را که با استفاده از آنها ایجاد خواهیم کرد تکان خواهیم داد. در اینجا چگونگی ظاهر این بلوک آورده شده است:
و در اینجا خود کد CSS است:
نسخه ی نمایشی (float: left؛ margin: 10px 20px 20px 0؛ عرض: 130px؛) .demo-box.last (حاشیه: 10px 0 20px؛) .demo-box div (زمینه: # 40b9ff؛ رنگ: #fff؛ اندازه قلم: 30px؛ وزن-فونت: پررنگ؛ ارتفاع: 130px؛ خط-ارتفاع: 130px؛ حاشیه: 10px 0 0 0؛ متن-تراز متن: مرکز؛ متن-سایه: -2px 2px 0px rgba (0،0،0 ، .2)؛). demo-box div: hover (زمینه: # 4ec7ff؛)
این کد بلوکی است که در مثال نشان داده شده است.
لرزیدن
اکنون ما خود اسکریپت تکان دهنده را صدا خواهیم کرد.
اصل فیلمنامه بسیار ساده است. حرکات تصادفی را در امتداد محورهای x و y با سرعت مشخصی انجام می دهد. ما می توانیم خود این پارامترها را پیکربندی کنیم.
به عنوان مثال ، در نسخه ی نمایشی ، اولین بلوک شماره یک را داریم. هنگام شناور ، در امتداد محورهای داده شده حرکت می کند: x: 2 و y: 2 ، پارامتر چرخش نیز با مقدار 1 تنظیم می شود. این پارامتر تعیین می کند که آیا لرزش قوی تر خواهد شد یا خیر ، به عبارت دیگر ، اجازه نمی دهد که بلوک از مرزهای خود فراتر رود. بنابراین ، یک اثر کوچک یا قوی از لحاظ بصری بدست می آید.
حالا بیایید ببینیم که چگونه همه اینها در کد به نظر می رسند:
دامنه
به طور پیش فرض ، اولین بلوک را با کلاس demo1 بگیرید
demo-box کلاس بلوکی است که در ابتدا در سبک های CSS ایجاد کردیم.
demo1 - كلاسی كه در فیلمنامه از آن استفاده خواهیم كرد تا تكان دادن به این بلوك را صدا كند.
فیلمنامه
اکنون بین برچسب ها نیاز دارید
و این را اضافه کنید:
همانطور که در اسکریپت مشاهده می کنید ، بلوک توسط پارامترهای داده شده x: 2 ، y: 2 با چرخش همراه است: 1. می خواهم بگویم (تکرار کنید) که این پارامترها می توانند همانطور که دوست دارید تغییر کنند. و در نسخه ی نمایشی این پارامترها ارائه می شوند.
سرعت
در اینجا سرعت لرزش را افزایش داده و کاهش خواهیم داد. برای انجام این کار ، در نسخه ی نمایشی شماره 5 یک مثال بزنید. در این حالت ، اسکریپت تماس با خود کمی تغییر می کند. شبیه این خواهد شد:
به طور پیش فرض ، سرعت صفر است ، ارزش این پارامتر بزرگتر است ، لرزش آن کمتر خواهد شد :-) نسخه ی نمایشی چندین نمونه را با مقادیر مختلف ارائه می دهد.
شفافیت
در اینجا ما لرزش و شفافیت را به طور همزمان ترکیب خواهیم کرد. می خواهم بگویم که بسیار زیبا به نظر می رسد و معمول نیست :-)
در نسخه ی نمایشی ، بلوک شماره 12 را بگیرید که مانند دیوانه تکان می خورد و دوباره ، فقط اسکریپت تماس تغییر نخواهد کرد:
که در این مثال در هر دو محور روی 6 تنظیم کنید. پارامتر چرخش 6 ، سرعت آن 5 است. شفافیت در اسکریپت نامیده می شود - کدورت با مقدار true یک خط مورد نیاز است. و همچنین قدرت شفافیت - opacityMin: هزینه 05. هرچه این مقدار بالاتر باشد ، بلوک روی هوا شناور شفاف تر خواهد بود.
مثالهای دیگر
در اینجا نمونه هایی از اسکریپت های بلوک در نسخه ی نمایشی با تعداد و کلاس آنها را مشاهده می کنید:
بلوک 14 (کلیک کنید)
بلوک 15 (کلیک کنید (نگه دارید))
بلوک 16 (بدون توقف)
بلوک 17 و 18 (از راه دور)
آی تی جلوه جالبوقتی ، هنگامی که روی بلوک سمت راست می روید ، سمت چپ حرکت می کند و برعکس.
مسدود کردن 19 (چند ثانیه (کلیک کنید))
بلوک 20 (نبض)
ι
بنابراین ما یاد گرفتیم که اشیاء را در یک صفحه وب تکان دهیم. این همه دوستان عزیز ، اگر مشکل داشتید ، حتما در نظرات سؤال کنید. به زودی میبینمت.
در این مقاله ، من در مورد چگونگی ایجاد یک اثر کوچک از تکان دادن لبه های لایه ها (متن ، شکل و سایر موارد) در پس از اثراتبرای ایجاد یک فیلم تلطیف (عناصر). من فیلم های زیادی را دیدم که آنها از این اثر استفاده می کردند: در بالای کل ویدیو یا به عنوان تلطیف از هر عنصر استفاده می شد. شما می توانید آن را انجام دهید روش های مختلفمن در مورد یکی از آنها صحبت خواهم کرد. این لرزش را با کلاه گیس معمولی در موقعیت اشتباه نکنید ، این کاملاً متفاوت است.
انجام این کار ساده است ، برای این کار در ترکیب شما باید از قبل لایه های متنی یا برخی از عناصر لازم برای شل شدن وجود داشته باشد ، سپس یک لایه تنظیم ایجاد کنید و افزونه Turbulance Displace را روی آن پرتاب کنید:
پس از آن ، تنظیمات را پیچانده و پیچیده تر کنید: هرچه اندازه Turbulance Displace کوچکتر باشد ، جزئیاتی که در هنگام لرزش وجود دارد ، کوچکتر است. پارامتر Amout بر قدرت جرقه زنی تأثیر می گذارد ، من سمت چپ گذاشتم. چنین احساسی سریع را ایجاد کنیم ، زیرا بعداً از Posterize Time برای ایجاد پرش قاب استفاده خواهیم کرد.
پرش قاب ها روی لایه های لرزان این اثر را تقویت می کند. برای ترکیب می توانید فریم در ثانیه کم کنید روش های مختلف، هر دو عبارت و افزونه. برای پایین آمدن فریم در ثانیه از افزونه Posterize Time استفاده می کنم. می توانید یک لایه تنظیم جدید ایجاد کنید ، یا می توانید precompos را ایجاد کنید ، در هر صورت ، باید زمان افزونه را پرتاب کنید -\u003e postterize time. من 15 فریم در ثانیه تنظیم می کنم ، هرچه این مقدار پایین تر باشد ، تعداد فریم ها "تر" می شوند.
برای اشکال می توانید از اصلاح کننده مسیر wiggle به طور جداگانه استفاده کنید. علاوه بر این ، می توانید لایه های Turbulance Displace را به طور جداگانه بپوشانید تا لرزش تصادفی ایجاد شود.
علاوه بر این lpagina می توانید از Roughen Edges استفاده کنید ، به علاوه این گزینه این است که وی این پلاگین در لبه های لایه عمل می کند ، و نه به طور کامل روی کل لایه.
