آموزش تکنیک ساخت افکت پارالاکس در طراحی صفحه ی سایت فقط با CSS: افکت پارالاکس یکی از زیباترین ترفندهای کوچکی است که می توانید در صفحه اصلی خود برای جلب توجه بازدیدکنندگان خود از آن استفاده کنید. CSS در چند سال گذشته بسیار رشد کرده است، و این بدان معنی است که انعطاف پذیری زیادی در مورد نحوه انجام کاری وجود دارد. با این حال ، ترفندهایی مانند آن background-positionبسیار دشوار است. این مقاله نشان می دهد که چگونه می توانید از CSS مدرن برای ایجاد یک افکت منظر زیبا برای حفظ آسان استفاده کنید.
درک شرایط لازم برای ایجاد یک افکت پارالاکس به اجرای صحیح آن کمک می کند. با این حال، اگر می‌خواهید رد شوید و به جای آن به نوشتن کد بپردازید، به موضوع بعدی بروید . اثر پارالاکس این است که دو لایه (به منظور توضیح) روی یکدیگر که با سرعت ثابت حرکت می‌کنند، به نظر می‌رسد که لایه بالایی نسبتاً سریعتر از لایه زیر آن حرکت می‌کند.(نوعی صفحه موازی ، روبه روی هم. که ما تنها صفحه ی جلویی را میبینم.)
ممکن است در بازی‌های دوبعدی کاربردهای اثر پارالاکس را دیده باشید که به نظر می‌رسد پس‌زمینه در مقایسه با پیش‌زمینه کندتر تغییر می‌کند. شما ممکن است اثر پارالاکس را در حالی که در ماشین هستید مشاهده کرده باشید، جایی که به نظر می رسد اجسام دورتر کندتر از ماشین های دیگر در جاده حرکت می کنند.
آموزش تکنیک ساخت افکت پارالاکس در طراحی صفحه ی سایت فقط با CSS
بنابراین به بیان ساده، شرایطی که برای ایجاد یک اثر پارالاکس باید برآورده شود عبارتند از:
– نحوه درک لایه پارالاکس را طوری تغییر دهید که به نظر می رسد نسبتاً سریعتر یا کندتر حرکت می کند، بدون اینکه از اندازه اصلی خود منحرف شود.
برای دستیابی به هر دو این شرایط، باید فاصله قابل درک بین کاربر و لایه را افزایش دهیم، سپس آن را در امتداد محور Z منفی جابجا کنیم. از آنجا که فاصله قابل درک افزایش یافته است، ممکن است لایه کوچکتر به نظر برسد. برای مقابله با این کاهش اندازه، می‌توانیم آن را به اندازه اصلی خود تغییر دهیم. این بدان معنی است که ما عمدتاً از دو ویژگی CSS استفاده خواهیم کرد: translateZ() و scale().
آماده سازی اولیه
ابتدا به مقداری HTML نیاز داریم. فایلی با نام index.html ایجاد کنید و کد زیر را کپی/پیست کنید:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pure CSS Parallax Effect</title>
</head>
<body>
<main>
<section class="no-parallax">
<h1>Fun fact:</h1>
</section>
<section class="parallax bg">
<h1>
The sound that occurs when you snap your fingers is made by your
middle finger hitting your palm!
</h1>
</section>
<section class="no-parallax">
<h1>Have a nice day!</h1>
</section>
</main>
</body>
</html>
با این کار 3 بخش ایجاد می شود که تنها قسمت دوم دارای اثر پارالاکس است. هنگامی که 2 بخش ایستا/غیر منظر برای مقایسه وجود دارد، تشخیص تفاوت آسان تر است. حالا یک styles.cssفایل بسازید و سپس با قرار دادن کد زیر در HTML تگ آن را به فایل پیوند دهید <head>:
عناصر <main>و sectionهر دو حداقل ارتفاع یکسانی از نمای را خواهند گرفت. عنصر بخش از CSS3 Flexbox به منظور مرکز دادن عناصر داخل آن به صورت عمودی و افقی استفاده می کند.
مرحله بعدی افزایش فاصله قابل درک بین کاربر و mainعنصر است که برای آن از ویژگی پرسپکتیو استفاده خواهیم کرد. هرچه این مقدار کوچکتر باشد، اثر پارالاکس ظریف تر و طبیعی تر به نظر می رسد.
main {
/*...Collapsed...*/
overflow-y: auto;
perspective: 2px; /* <-- This line */
}
اکنون، ما باید لایه پارالاکس را در امتداد محور منفی Z تغییر دهیم، و سپس مقیاس آن را برای مقابله با کاهش اندازه افزایش دهیم، زیرا قبلاً پرسپکتیو را تغییر دادیم. این به این دلیل است که وقتی دیدگاه برای والدین اعمال می شود، فرزندان آن والدین تحت تأثیر قرار می گیرند.
اگر مقدار Z بزرگتر از فرزند باشد، بزرگتر و اگر کوچکتر از 0 باشد، کوچکتر به نظر می رسد. ویژگی Z با نزدیک کردن عنصر به ما (بزرگتر به نظر رسیدن) یا دور کردن آن (کوچکتر به نظر می رسد) عنصر را در فضای سه بعدی حرکت می دهد.
اول از همه، ما باید عبارت transform-style: preserve-3d; را به والد عنصری که می‌خواهیم تغییر Z را در آن اعمال کنیم، اضافه کنیم. این اطمینان حاصل می کند که عناصر فرزند آن به جای صفحه مسطح 2 بعدی در فضای سه بعدی قرار گیرند:
حال تصویری را قرار می دهیم که افکت پارالاکس داشته باشد. ما می توانیم از یک divیا یک imgیا هر عنصر دیگری استفاده کنیم، اما برای موضوع این آموزش فقط از ::afterعنصر انتخابگر کاذب استفاده می کنیم، فقط به این دلیل که می توانیم 🙂
برای بهتر کردن آن، یک لایه تیره در بالای تصویر اضافه می کنیم تا متن سفید خواناتر باشد. برای انجام این کار، ما linear-gradientبه css خود اضافه می کنیم :
با انجام این کار، باید بتوانیم جلوه پارالاکس را هنگام حرکت به سمت بالا و پایین متوجه شویم. به نظر می رسد که فونت ثابت است و تصویر پس زمینه به آرامی در زیر آن حرکت می کند.
نتیجه
افکت هایی مانند افکت پارالاکس روشی نسبتاً ساده برای افزایش جذابیت و جلب توجه کاربر است. با این حال، مهم است که به یاد داشته باشید برای اینکه چیزها خوب به نظر برسند، هرگز نباید تجربه کاربری را قربانی کنید، یا به عبارت دیگر، باید از افکت‌ها در جایی که می‌توانید پتانسیل آن را به حداکثر برسانید، استفاده کنید.
اوه! و اگر از وردپرس استفاده می کنید، لیست ما را از بهترین تم های Parallax برای وردپرس بررسی کنید .
پس زمینه گرادیان : طراحی وب امروزه ابزاری قدرتمند برای ارتقاء تجربه کاربری است. یکی از عناصری که می‌تواند وب‌سایت‌ها را جلب‌کننده و جذاب تر کند، استفاده هوشمندانه از پس‌زمینه‌های گرادیانی است. در این مطلب، Read more…
رفع ارور کار نکردن افزونه ها در وردپرس : این یکی از پر تکرر ترین ارور های توسعه ی سایت در وردپرس است. بسیار شده است که ساعت ها در حال کد نوشتن و طراحی Read more…
تنظیم کردن ایمیل وردپرس – تنظیمات پلاگین smtp : بار ها شده است ، برای ارسال ایمیل از طریق سایت خودتان ، به مشکل های مختلفی برخورد کرده اید. یکی از این مشکلات که عموما برای خیلی Read more…
0 Comments