**کدهای آماده CSS برای ایجاد پس‌زمینه‌های کهکشانی (Galaxy Background) متحرک**
رفیق برنامه‌نویس، دنبال راهی هستی که وب‌سایت یا اپلیکیشنت رو از یه فضای معمولی ببری به یه کهکشان پر ستاره؟ می‌خوای کاربرات با دیدن پس‌زمینه‌ت محو تماشای حرکت سیارات و ستارگان بشن؟ خب، جای درستی اومدی. تو این مقاله قراره با هم قدم به قدم پیش بریم و با استفاده از کدهای CSS، پس‌زمینه‌های کهکشانی متحرک و خیره‌کننده بسازیم. این دیگه فقط یه بک‌گراند ساده نیست، یه تجربه‌س!
راستی، اگه دنبال ابزارهای کاربردی و خفن برای پروژه‌های وبت هستی، حتماً یه سر به [فروشگاه ابزارهای وب‌سازی Fa-Tools](https://fa-tools.ir/shop/) بزن. کلی چیزای به‌دردبخور اونجا منتظرته!
اگه هم سوالی داشتی یا نیاز به راهنمایی بیشتر بود، نگران نباش! همین الان میتونی با [تیم فنی ما تماس بگیرید](tel:09202232789) تا کمکت کنیم.
***
✨ نقشه راه کهکشانی شما ✨
🌌 چرا پس‌زمینه کهکشانی؟
- جذابیت بصری
- تجربه کاربری منحصربه‌فرد
- ایجاد حس عمق و حرکت
🛠️ ابزارهای کار
- HTML پایه
- CSS پیشرفته (گرادیان، انیمیشن)
- یک ادیتور کد (VS Code, Sublime)
🚀 تکنیک‌های ساخت
- گرادیان‌های چندگانه
- ترکیب تصاویر و گرادیان
- ایجاد ستاره با Text-Shadow
💫 انیمیشن‌ها
- جابجایی پس‌زمینه
- چشمک‌زن ستاره‌ها
- ترکیب لایه‌ها
📱 رسپانسیو کردن
- @media queries
- واحدهای vw, vh
- background-size: cover
💡 نکات پیشرفته و عیب‌یابی
- will-change
- transform vs background-position
- سوالات متداول
بیایید سفرمون رو به سمت بی‌کران آغاز کنیم!
***
چرا پس‌زمینه‌های کهکشانی متحرک؟
دنبال جذب نگاه کاربری؟ دنبال این هستی که سایتت تو ذهن مخاطب بمونه؟ پس‌زمینه‌های کهکشانی متحرک دقیقاً همین کار رو برات می‌کنه. ما به عنوان برنامه‌نویس، همیشه دنبال راه‌هایی هستیم که رابط کاربری رو جذاب‌تر و البته کاربرپسندتر کنیم. یه پس‌زمینه متحرک که حس حرکت و عمق رو القا می‌کنه، میتونه تاثیر خارق‌العاده‌ای روی تجربه کاربری (UX) بذاره. این کار باعث میشه سایتت حرفه‌ای‌تر و مدرن‌تر به نظر بیاد، یه جورایی بهش هویت میده و حس کنجکاوی و هیجان رو در بیننده زنده می‌کنه.
تصور کن کاربر وارد سایتت میشه و یهو با یه منظره بی‌کران از ستاره‌ها و کهکشان‌ها روبه‌رو میشه که آروم آروم حرکت می‌کنن. این دیگه یه صفحه وب ساده نیست، یه ماجراجویی بصریه! این حس غرق شدن در فضا، میتونه بازدیدکننده رو بیشتر تو سایت نگه داره و نرخ بانس ریت رو حسابی بیاره پایین. خلاصه که برای سایت‌هایی با محتوای خلاقانه، بازی، یا حتی صرفاً یه پورتفولیو شخصی، این جلوه‌ها معجزه می‌کنن.
ابزارهای مورد نیاز برای سفر کهکشانی ما
برای اینکه بتونیم این پس‌زمینه‌های جادویی رو بسازیم، به ابزارهای خاص و پیچیده‌ای نیاز نداریم. فقط کافیه با چندتا مفهوم پایه تو HTML و CSS آشنا باشی. اگه هم نه، نگران نباش، چون اینجا همه چیز رو قدم به قدم توضیح میدیم.
* **HTML پایه:** فقط برای اینکه یه جایگاهی برای این پس‌زمینه ایجاد کنیم. یه تگ `div` ساده کفایت می‌کنه.
* **CSS:** اینجاست که جادو اتفاق می‌افته. تمام جلوه‌های بصری و انیمیشن‌ها رو با CSS پیاده‌سازی می‌کنیم.
* **یک نرم‌افذار ویرایشگر کد:** مثل VS Code, Sublime Text یا حتی Notepad++ برای اینکه کدهامون رو بنویسیم و سازماندهی کنیم.
* **مرورگر وب:** برای دیدن نتیجه کارمون. Chrome, Firefox, Edge، هر کدوم که راحت‌تری.
مفاهیم پایه CSS برای انیمیشن: سوخت موشک ما
قبل از اینکه کدهای کهکشانی رو بنویسیم، بیایید یه مرور سریع روی چندتا مفهوم اساسی تو CSS داشته باشیم که برای ساخت انیمیشن لازمه. اینا حکم سوخت موشک ما رو دارن:
* **`@keyframes`:** این قوانین، مراحل مختلف یک انیمیشن رو تعریف می‌کنن. مشخص می‌کنن که درصدهای مختلف پیشرفت انیمیشن (مثلاً 0%، 50%، 100%) چه تغییراتی باید رخ بده.
* مثلاً:
@keyframes moveBackground {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 100%;
}
}
* **`animation` property:** این ویژگی یه میانبر برای تنظیم تمام خصوصیات انیمیشن تو یک خطه.
* `animation-name`: اسمی که برای `@keyframes` تعریف کردی (مثلاً `moveBackground`).
* `animation-duration`: مدت زمان هر سیکل انیمیشن (مثلاً `20s`).
* `animation-timing-function`: سرعت انیمیشن در طول زمان (مثل `linear`, `ease-in-out`).
* `animation-delay`: تاخیر قبل از شروع انیمیشن.
* `animation-iteration-count`: چند بار انیمیشن تکرار بشه (مثلاً `infinite` برای بی‌نهایت).
* `animation-direction`: جهت تکرار انیمیشن (مثلاً `alternate`).
* `animation-fill-mode`: وضعیت استایل عنصر قبل یا بعد از اتمام انیمیشن.
* **`background-image` (Multiple Backgrounds):** می‌تونیم چندتا تصویر پس‌زمینه رو روی هم قرار بدیم تا یه افکت لایه‌ای ایجاد کنیم. این قابلیت برای ساخت پس‌زمینه‌های کهکشانی با عمق زیاد، حسابی به‌دردبخوره.
* `background-image: url(‘star.png’), linear-gradient(to bottom, #000, #111);`
* **`background-size` و `background-position`:** این دوتا هم برای کنترل اندازه و جایگاه هر لایه پس‌زمینه خیلی مهمن.
گام اول: آماده‌سازی ساختار HTML
برای شروع، یه فایل HTML ساده نیاز داریم. می‌تونیم یه `div` با یه `class` مشخص درست کنیم که قراره پس‌زمینه کهکشانیمون رو توش بذاریم.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>پس‌زمینه کهکشانی متحرک</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="galaxy-background"></div>
<!-- محتوای سایت شما اینجا قرار می‌گیرد -->
<div class="content">
<h1>به کهکشان ما خوش آمدید!</h1>
<p>اینجا میتونی دنیایی از امکانات رو کشف کنی.</p>
</div>
</body>
</html>
و یه فایل `style.css` که به `index.html` لینک شده باشه. برای اینکه `galaxy-background` کل صفحه رو بپوشونه و زیر محتوای اصلی قرار بگیره، یه سری استایل پایه بهش میدیم:
body {
margin: 0;
overflow: hidden; /* برای جلوگیری از اسکرول اضافی */
font-family: Arial, sans-serif;
color: #e0e0e0;
text-align: center;
}
.galaxy-background {
position: fixed; /* تا همیشه ثابت باشه و کل صفحه رو بگیره */
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1; /* تا پشت محتوای اصلی قرار بگیره */
background: #000; /* پس‌زمینه سیاه اولیه */
}
.content {
position: relative; /* برای اینکه بالای پس‌زمینه قرار بگیره */
z-index: 0;
padding: 50px;
color: #fff;
}
تکنیک‌های ساخت پس‌زمینه کهکشانی
حالا که ساختار اصلی رو داریم، وقتشه که خلاقیت به خرج بدیم و پس‌زمینه‌های کهکشانی رو بسازیم. چندتا روش مختلف وجود داره که با هم بررسی می‌کنیم:
روش 1: استفاده از گرادیان‌های چندگانه (Multiple Gradients)
این روش یکی از ساده‌ترین و قدرتمندترین راه‌ها برای شبیه‌سازی فضا و ستاره‌هاست. با استفاده از ترکیب `radial-gradient` (برای ستاره‌ها و کهکشان‌های دور) و `linear-gradient` (برای مه و عمق فضا)، می‌تونیم یه جلوه بصری عالی خلق کنیم.
.galaxy-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background:
/* لایه ستاره‌های ریزتر و دورتر */
radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)),
radial-gradient(1px 1px at 40px 70px, #fff, rgba(0,0,0,0)),
radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0,0,0,0)),
radial-gradient(1px 1px at 90px 80px, #fff, rgba(0,0,0,0)),
radial-gradient(2px 2px at 100px 10px, #eee, rgba(0,0,0,0)),
/* لایه ستاره‌های بزرگتر و نزدیکتر */
radial-gradient(3px 3px at 150px 120px, #fff, rgba(0,0,0,0)),
radial-gradient(2px 2px at 130px 200px, #eee, rgba(0,0,0,0)),
radial-gradient(3px 3px at 200px 150px, #fff, rgba(0,0,0,0)),
/* لایه ابرهای کهکشانی یا رنگی */
radial-gradient(circle 300px at 50% 50%, rgba(100, 100, 255, 0.1), rgba(0,0,0,0)),
radial-gradient(circle 200px at 30% 70%, rgba(255, 100, 100, 0.1), rgba(0,0,0,0)),
/* پس‌زمینه اصلی فضا */
#000;
background-size: 500px 500px, 500px 500px, 500px 500px, 500px 500px, 500px 500px,
800px 800px, 800px 800px, 800px 800px,
100% 100%, 100% 100%,
100% 100%; /* ابعاد برای هر لایه پس‌زمینه */
}
توی این کد، هر `radial-gradient` با `px px at X Y` یه ستاره کوچیک در یک نقطه خاص ایجاد می‌کنه. با تکرار این کار و تغییر سایز `background-size` برای هر لایه، یه عالمه ستاره در سایزهای مختلف درست می‌کنیم. اون دو تا `radial-gradient` بزرگتر هم برای شبیه‌سازی ابرهای گازی یا کهکشان‌های دور هستن.
روش 2: ترکیب تصاویر کوچک ستاره و گرادیان (Stars Image + Gradients)
این روش کمی انعطاف‌پذیرتره. اگه بخواییم ستاره‌های پیچیده‌تر یا با جزئیات بیشتر داشته باشیم، می‌تونیم از یه تصویر کوچک (مثلاً یه فایل PNG شفاف) از یک ستاره یا حتی یه الگوی ستاره‌ای استفاده کنیم.
* ابتدا یک تصویر کوچک (مثلاً 50×50 پیکسل) از چند ستاره یا یک نقطه سفید شفاف ذخیره کنید (مثلاً `stars.png`).
.galaxy-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background:
/* لایه ستاره‌ها با تصویر */
url('stars.png') repeat, /* تصویر stars.png تکرار میشه */
url('stars.png') repeat, /* لایه دوم برای تکرار با سایز متفاوت */
/* لایه ابرهای کهکشانی با گرادیان */
radial-gradient(circle 400px at 70% 30%, rgba(150, 200, 255, 0.15), rgba(0,0,0,0)),
radial-gradient(circle 300px at 20% 80%, rgba(255, 150, 200, 0.15), rgba(0,0,0,0)),
/* پس‌زمینه اصلی */
#000;
background-size: 200px 200px, 400px 400px, /* سایز برای تصاویر ستاره‌ها */
100% 100%, 100% 100%, /* سایز برای گرادیان‌ها */
100% 100%;
}
با تغییر `background-size` برای هر `url(‘stars.png’)` میتونی تراکم و اندازه ستاره‌ها رو کنترل کنی. اگه بخوای افکت بهتری بگیری، میتونی چندتا تصویر `stars.png` با اندازه‌های مختلف و حتی درجات شفافیت متفاوت درست کنی.
روش 3: ایجاد ستاره‌ها با سایه متن (Text-Shadow Stars)
این روش کمی خلاقانه‌تر و پیچیده‌تره، اما نتیجه فوق‌العاده‌ای میده. با استفاده از خاصیت `text-shadow` روی یک تک کاراکتر، می‌تونیم هزاران ستاره با سایز و رنگ متفاوت ایجاد کنیم بدون اینکه از تصاویر زیاد استفاده کنیم. این روش برای لایه‌های ستاره‌ای خیلی ریز و دور خوب عمل می‌کنه.
/* در HTML یک div جداگانه برای ستاره‌ها نیاز دارید */
<div class="galaxy-background"></div>
<div class="stars"></div> /* این div برای ستاره‌های text-shadow هست */
/* CSS برای stars */
.stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2; /* زیر galaxy-background */
background: transparent;
overflow: hidden; /* برای جلوگیری از نمایش ستاره‌های خارج از کادر */
}
.stars::before {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* اینجا جادو اتفاق می‌افتد: تعداد زیادی text-shadow */
box-shadow:
/* فرمت: X Y blur color */
10px 10px 0px 1px #fff,
20px 50px 0px 1px #eee,
50px 200px 0px 1px #ddd,
80px 30px 0px 1px #fff,
120px 100px 0px 1px #eee,
150px 250px 0px 1px #fff,
/* ... صدها و هزاران مورد دیگر ... */
1900px 900px 0px 1px #fff,
1850px 50px 0px 1px #eee;
animation: twinkle 5s infinite alternate; /* انیمیشن چشمک‌زن */
}
@keyframes twinkle {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* برای تولید تعداد زیادی text-shadow، معمولاً از SASS یا ابزارهای آنلاین استفاده می‌شود */
/* مثال: http://www.cssscript.com/demo/pure-css-starfield-with-text-shadow/ */
/* این کد بالا فقط برای نمایش فرمت است و شما باید تعداد زیادی از اینها را تولید کنید */
این روش به خصوص برای ایجاد افکت `starfield` یا `field of stars` کاربردیه. نقطه ضعفش اینه که باید تعداد زیادی از این سایه‌ها رو به صورت دستی (یا با ابزار) تولید کنی، اما اگه اصولیئ انجام بشه، خیلی سبک و سریع لود میشه.
متحرک‌سازی پس‌زمینه کهکشانی (Animating the Galaxy Background)
یه پس‌زمینه کهکشانی بدون حرکت مثل یه عکس معمولیه. جذابیت اصلی ماجرا تو حرکتشه. حالا بیا یاد بگیریم چطور به این کهکشانمون جون بدیم.
انیمیشن‌های ساده جابجایی (Simple Movement Animations)
ساده‌ترین راه برای ایجاد حرکت، جابجا کردن `background-position` لایه‌های مختلفه. این کار حس شناور بودن و حرکت آهسته در فضا رو القا می‌کنه.
.galaxy-background {
/* ... استایل‌های پس‌زمینه قبلی ... */
background:
radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)), /* لایه 1 */
radial-gradient(1px 1px at 40px 70px, #fff, rgba(0,0,0,0)), /* لایه 2 */
radial-gradient(circle 300px at 50% 50%, rgba(100, 100, 255, 0.1), rgba(0,0,0,0)), /* لایه 3 */
#000;
background-size: 500px 500px, 700px 700px, 100% 100%, 100% 100%;
animation: moveLayer1 50s linear infinite,
moveLayer2 100s linear infinite,
moveLayer3 150s linear infinite; /* هر لایه با سرعت خودش */
}
@keyframes moveLayer1 {
from { background-position: 0 0, 0 0, 0 0; }
to { background-position: 500px 500px, 700px 700px, 0 0; } /* فقط لایه‌های 1 و 2 حرکت می‌کنند */
}
@keyframes moveLayer2 {
from { background-position: 0 0; }
to { background-position: -700px 700px; } /* لایه 2 به سمت مخالف */
}
@keyframes moveLayer3 {
from { background-position: 0 0; }
to { background-position: 1000px 0; } /* لایه 3 حرکت افقی */
}
/* نکته مهم: اگر می‌خواهید هر لایه به طور مستقل حرکت کند، باید background-position را به ازای هر لایه در @keyframes تعریف کنید
یا اینکه برای هر لایه، یک انیمیشن جدا با نام متفاوت بسازید و به آن اعمال کنید.
مثال بالا یک راه ساده برای شروع است. */
همونطور که دیدی، توی `background-position` می‌تونیم مختصات هر لایه رو جداگانه تغییر بدیم. با کم و زیاد کردن `duration` (مدت زمان) هر انیمیشن، می‌تونیم سرعت حرکت لایه‌ها رو متفاوت کنیم که حس عمق رو بیشتر می‌کنه.
انیمیشن چشمک‌زن ستاره‌ها (Twinkling Stars Animation)
برای اینکه ستاره‌هامون زنده‌تر به نظر بیان، می‌تونیم یه انیمیشن چشمک‌زن (twinkle) بهشون اضافه کنیم. این کار رو میشه با تغییر `opacity` یا `transform: scale()` انجام داد.
اگه از روش `radial-gradient` برای ستاره‌ها استفاده کردی، میتونی یه انیمیشن `opacity` به `galaxy-background` بدی تا همه لایه‌های ستاره‌ای با هم چشمک بزنن (البته بهتره این کار رو روی یک لایه خاص یا با تکنیک‌های پیشرفته‌تر انجام داد تا طبیعی‌تر باشه).
/* فرض می‌کنیم یک div جداگانه برای ستاره‌ها داریم */
.twinkling-stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background:
radial-gradient(1px 1px at 30% 20%, #fff, rgba(255,255,255,0)),
radial-gradient(1.5px 1.5px at 70% 80%, #eee, rgba(238,238,238,0));
background-size: 100px 100px;
animation: twinkle 2s ease-in-out infinite alternate;
}
@keyframes twinkle {
0% { opacity: 0.7; }
50% { opacity: 1; }
100% { opacity: 0.7; }
}
برای طبیعی‌تر شدن این افکت، میتونی چندین لایه `twinkling-stars` بسازی و به هر کدوم `animation-delay`های متفاوت بدی تا ستاره‌ها به صورت نامنظم چشمک بزنن.
ترکیب چندین انیمیشن برای جلوه پیچیده‌تر (Combining Multiple Animations)
جذابیت واقعی زمانی اتفاق می‌افته که چندین انیمیشن رو با هم ترکیب کنی. مثلاً یه لایه از ستاره‌ها به آرومی از راست به چپ حرکت کنه، یه لایه دیگه از بالا به پایین، و یه لایه هم چشمک بزنه.
.galaxy-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background:
/* لایه 1: ستاره‌های ریزتر - حرکت سریع‌تر */
radial-gradient(1px 1px at 20% 30%, #fff, rgba(255,255,255,0)),
radial-gradient(1px 1px at 70% 80%, #eee, rgba(238,238,238,0)),
/* لایه 2: ستاره‌های متوسط - حرکت متوسط */
radial-gradient(2px 2px at 50% 50%, #ddd, rgba(221,221,221,0)),
radial-gradient(2px 2px at 10% 90%, #ccc, rgba(204,204,204,0)),
/* لایه 3: ستاره‌های درشت‌تر - حرکت آهسته‌تر */
radial-gradient(3px 3px at 80% 20%, #bbb, rgba(187,187,187,0)),
radial-gradient(3px 3px at 30% 60%, #aaa, rgba(170,170,170,0)),
/* لایه 4: ابرهای کهکشانی رنگی */
radial-gradient(circle 300px at 60% 40%, rgba(100, 100, 255, 0.15), rgba(0,0,0,0)),
radial-gradient(circle 200px at 40% 70%, rgba(255, 100, 100, 0.15), rgba(0,0,0,0)),
#000; /* پس‌زمینه اصلی */
background-size: 150px 150px, 150px 150px, /* لایه 1 */
250px 250px, 250px 250px, /* لایه 2 */
400px 400px, 400px 400px, /* لایه 3 */
100% 100%, 100% 100%, /* لایه 4 و پس‌زمینه اصلی */
100% 100%;
animation: moveStars1 100s linear infinite,
moveStars2 180s linear infinite,
moveStars3 250s linear infinite,
pulseNebula 60s ease-in-out infinite alternate;
}
/* انیمیشن برای لایه 1 */
@keyframes moveStars1 {
from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
to { background-position: 150px 150px, -150px -150px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
}
/* انیمیشن برای لایه 2 */
@keyframes moveStars2 {
from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
to { background-position: 0 0, 0 0, -250px 250px, 250px -250px, 0 0, 0 0, 0 0, 0 0, 0 0; }
}
/* انیمیشن برای لایه 3 */
@keyframes moveStars3 {
from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
to { background-position: 0 0, 0 0, 0 0, 0 0, 400px -400px, -400px 400px, 0 0, 0 0, 0 0; }
}
/* انیمیشن برای ابرهای کهکشانی (لایه 4) - تغییر موقعیت و شفافیت */
@keyframes pulseNebula {
0% {
background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; /*همه لایه‌های قبلی ثابت می‌مانند*/
/* فقط لایه‌های گرادیان تغییر می‌کنند (لایه 7 و 8) */
background-image:
radial-gradient(1px 1px at 20% 30%, #fff, rgba(255,255,255,0)),
radial-gradient(1px 1px at 70% 80%, #eee, rgba(238,238,238,0)),
radial-gradient(2px 2px at 50% 50%, #ddd, rgba(221,221,221,0)),
radial-gradient(2px 2px at 10% 90%, #ccc, rgba(204,204,204,0)),
radial-gradient(3px 3px at 80% 20%, #bbb, rgba(187,187,187,0)),
radial-gradient(3px 3px at 30% 60%, #aaa, rgba(170,170,170,0)),
radial-gradient(circle 300px at 60% 40%, rgba(100, 100, 255, 0.15), rgba(0,0,0,0)),
radial-gradient(circle 200px at 40% 70%, rgba(255, 100, 100, 0.15), rgba(0,0,0,0)),
#000;
background-size: 150px 150px, 150px 150px, 250px 250px, 250px 250px, 400px 400px, 400px 400px, 100% 100%, 100% 100%, 100% 100%;
}
50% {
background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 10% 10%, -10% -10%, 0 0; /* فقط گرادیان‌ها حرکت می‌کنند */
background-image:
radial-gradient(1px 1px at 20% 30%, #fff, rgba(255,255,255,0)),
radial-gradient(1px 1px at 70% 80%, #eee, rgba(238,238,238,0)),
radial-gradient(2px 2px at 50% 50%, #ddd, rgba(221,221,221,0)),
radial-gradient(2px 2px at 10% 90%, #ccc, rgba(204,204,204,0)),
radial-gradient(3px 3px at 80% 20%, #bbb, rgba(187,187,187,0)),
radial-gradient(3px 3px at 30% 60%, #aaa, rgba(170,170,170,0)),
radial-gradient(circle 350px at 55% 45%, rgba(120, 120, 255, 0.2), rgba(0,0,0,0)), /* تغییر در سایز و opacity */
radial-gradient(circle 250px at 35% 75%, rgba(255, 120, 120, 0.2), rgba(0,0,0,0)),
#000;
background-size: 150px 150px, 150px 150px, 250px 250px, 250px 250px, 400px 400px, 400px 400px, 100% 100%, 100% 100%, 100% 100%;
}
100% {
background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; /* بازگشت به حالت اولیه */
background-image:
radial-gradient(1px 1px at 20% 30%, #fff, rgba(255,255,255,0)),
radial-gradient(1px 1px at 70% 80%, #eee, rgba(238,238,238,0)),
radial-gradient(2px 2px at 50% 50%, #ddd, rgba(221,221,221,0)),
radial-gradient(2px 2px at 10% 90%, #ccc, rgba(204,204,204,0)),
radial-gradient(3px 3px at 80% 20%, #bbb, rgba(187,187,187,0)),
radial-gradient(3px 3px at 30% 60%, #aaa, rgba(170,170,170,0)),
radial-gradient(circle 300px at 60% 40%, rgba(100, 100, 255, 0.15), rgba(0,0,0,0)),
radial-gradient(circle 200px at 40% 70%, rgba(255, 100, 100, 0.15), rgba(0,0,0,0)),
#000;
background-size: 150px 150px, 150px 150px, 250px 250px, 250px 250px, 400px 400px, 400px 400px, 100% 100%, 100% 100%, 100% 100%;
}
}
نکته مهم در این بخش، مدیریت `background-position` برای هر لایه در `keyframes` است. شما باید تمام مقادیر `background-position` را برای هر لایه، حتی اگر ثابت هستند، در هر فریم کلیدی مشخص کنید تا تنها لایه‌های مورد نظر شما حرکت کنند. این کار کمی پیچیده است اما قدرت زیادی به شما می‌دهد.
برای ساده‌تر شدن و جلوگیری از تداخل، میتونی از چند `div` برای هر لایه استفاده کنی و هر `div` رو با انیمیشن‌های مخصوص خودش، متحرک کنی. این کار `maintenance` کد رو هم راحت‌تر می‌کنه.
رسپانسیو کردن پس‌زمینه کهکشانی (Making it Responsive)
وب‌سایت شما قراره روی انواع دستگاه‌ها، از موبایل‌های کوچیک گرفته تا تلویزیون‌های بزرگ، دیده بشه. پس باید پس‌زمینه‌تون هم روی همه‌شون خوب و درست نمایش داده بشه.
استفاده از `vw` و `vh` و `@media` queries
به جای `px` برای `background-size` و `background-position`، بهتره از واحدهای `vw` (viewport width) و `vh` (viewport height) استفاده کنی. این واحدها به نسبت عرض و ارتفاع صفحه نمایش تغییر می‌کنن و باعث میشن پس‌زمینه به صورت خودکار خودش رو با سایز صفحه وفق بده.
.galaxy-background {
/* ... استایل‌های اصلی ... */
background-size: 30vw 30vh, 50vw 50vh, 80vw 80vh, 100% 100%, 100% 100%; /* استفاده از vw و vh */
/* مثال برای @media query */
@media (max-width: 768px) { /* برای موبایل و تبلت‌های کوچک */
background-size: 50vw 50vh, 80vw 80vh, 120vw 120vh, 100% 100%, 100% 100%; /* ستاره‌ها بزرگتر میشن */
animation-duration: 70s, 120s, 200s, 80s; /* سرعت انیمیشن‌ها رو هم میشه تغییر داد */
}
@media (min-width: 1920px) { /* برای نمایشگرهای بزرگ (مثل تلویزیون) */
background-size: 20vw 20vh, 40vw 40vh, 60vw 60vh, 100% 100%, 100% 100%; /* ستاره‌ها کمی کوچکتر میشن */
animation-duration: 120s, 200s, 300s, 90s;
}
}
/* @keyframes هم باید با واحدهای vw/vh تنظیم شوند: */
@keyframes moveStars1 {
from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
to { background-position: 15vw 15vh, -15vw -15vh, 0 0, 0 0, 0 0; }
}
اینجا یه جدول آموزشی در مورد واحدهای رسپانسیو می‌ذارم که بهت کمک می‌کنه بهتر تصمیم بگیری از کدوم واحد استفاده کنی:
| واحد | توضیحات و کاربرد |
|---|---|
| `px` (پیکسل) |
ثابت و غیررسپانسیو. برای اندازه‌گیری‌های دقیق و ثابت کاربرد دارد. مثال: `width: 200px;` |
| `%` (درصد) |
رسپانسیو نسبت به والد. برای عناصر داخلی که باید نسبت به عنصر حاوی خودشان اندازه بگیرند. مثال: `width: 50%;` |
| `em` (بر اساس فونت والد) |
رسپانسیو نسبت به اندازه فونت. برای اندازه‌گیری فونت‌ها و فاصله‌گذاری‌ها. مثال: `font-size: 1.2em;` |
| `rem` (بر اساس فونت ریشه) |
رسپانسیو نسبت به فونت اصلی (root). برای حفظ یکپارچگی اندازه‌ها در کل سایت. مثال: `margin-top: 1rem;` |
| `vw` (viewport width) |
رسپانسیو نسبت به عرض viewport. 1vw = 1% از عرض صفحه. عالی برای پس‌زمینه‌ها و متن‌های بزرگ. مثال: `font-size: 5vw;` |
| `vh` (viewport height) |
رسپانسیو نسبت به ارتفاع viewport. 1vh = 1% از ارتفاع صفحه. مثال: `height: 100vh;` |
نکات پیشرفته و بهینه‌سازی عملکرد (Advanced Tips & Performance Optimization)
ساخت یه پس‌زمینه متحرک جذاب یک طرفه، اینکه سایتت کُند نشه و تجربه کاربری خوبی داشته باشه هم طرف دیگه ماجراست. اینجا چندتا نکته پیشرفته برای بهینه‌سازی داریم:
* **`will-change` property:** این خاصیت به مرورگر می‌گه که قراره چه ویژگی‌هایی از یک عنصر در آینده تغییر کنه. مرورگر با دونستن این موضوع، میتونه قبل از شروع انیمیشن، منابع لازم رو آماده کنه و باعث بهبود عملکرد بشه.
.galaxy-background {
will-change: background-position, transform, opacity; /* به مرورگر می‌گیم اینها قراره تغییر کنن */
}
ولی حواست باشه که بیش از حد ازش استفاده نکنی، چون خودش میتونه منجر به مصرف منابع بیشتر بشه اگه درست استفاده نشه.
* **`transform` vs `background-position`:** اگه می‌خوای یه عنصر رو حرکت بدی، همیشه از `transform: translate()` به جای تغییر `top`, `left`, `margin`, یا حتی `background-position` (در صورتی که کل عنصر رو جابجا کنی) استفاده کن. دلیلش اینه که `transform` از GPU استفاده می‌کنه و انیمیشن‌ها رو بسیار روان‌تر اجرا می‌کنه. اما برای پس‌زمینه‌های کهکشانی که فقط `background-position` رو تغییر میدن، `background-position` هم کاملاً کار راه انداز و بهینه هست، فقط دقت کن که مقادیر `pixel` نباشن و از `vw` یا `vh` استفاده کنی.
* **Minimizing repaint/reflow:** تغییرات در `background-position` و `opacity` معمولاً باعث `repaint` (بازنقاشی) میشن اما `reflow` (بازچینی) نمی‌کنن که بهینه‌تره. سعی کن از تغییر ویژگی‌هایی که `reflow` ایجاد می‌کنن (مثل `width`, `height`, `margin`, `padding` روی عناصر متحرک) برای انیمیشن‌های پس‌زمینه خودداری کنی.
* **استفاده از `::before` و `::after`:** برای ایجاد لایه‌های بیشتر بدون اضافه کردن تگ‌های HTML جدید، میتونی از شبه‌عناصر `::before` و `::after` استفاده کنی. این کار باعث میشه HTML تمیز و مرتب بمونه.
.galaxy-background {
position: relative; /* برای اینکه ::before و ::after بهش وابسته باشن */
/* ... استایل‌های پس‌زمینه اصلی ... */
}
.galaxy-background::before,
.galaxy-background::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: /* اینجا لایه‌های گرادیان یا ستاره‌های اضافی را تعریف کنید */;
animation: /* انیمیشن‌های مخصوص این لایه‌ها */;
z-index: -2; /* یا هر z-index مناسب */
}
.galaxy-background::before {
background: radial-gradient(circle 250px at 20% 80%, rgba(100, 200, 255, 0.1), rgba(0,0,0,0));
animation: moveLayerBefore 120s linear infinite;
}
.galaxy-background::after {
background: radial-gradient(circle 350px at 70% 30%, rgba(255, 150, 100, 0.1), rgba(0,0,0,0));
animation: moveLayerAfter 160s linear infinite reverse;
}
عیب‌یابی سریع (Troubleshooting)
رفیق، کار با CSS و انیمیشن همیشه هم آسون نیست و ممکنه به مشکلاتی بربخوری. اینجا چندتا از مشکلات رایج و راه‌حلشون رو برات آوردم:
* انیمیشن اجرا نمیشه یا گیر می‌کنه:
* راه‌حل: اول از همه چک کن که اسم `animation-name` تو CSS با اسم `keyframes` دقیقاً یکی باشه. بعد، مطمئن شو که `animation-duration` رو صفر نذاشتی! همچنین، چک کن که `z-index` عنصر `galaxy-background` به درستی تنظیم شده باشه و محتوای دیگه روش قرار نگرفته باشه. بعضی وقتا هم مشکل از `overflow: hidden;` روی عنصر `body` یا `html` میتونه باشه که حرکت عناصر رو محدود می‌کنه.
* پس‌زمینه اصلاً نمایش داده نمیشه:
* راه‌حل: مطمئن شو که مسیر تصاویر `url()` در `background-image` درسته. اگه از گرادیان استفاده می‌کنی، چک کن که ترکیب رنگ‌ها و مقادیرش `اصولیئ` باشن. همچنین، `width` و `height` عنصر `galaxy-background` رو چک کن. باید 100% باشن یا مقادیر ثابت و معقول داشته باشن. `z-index: -1;` هم لازمه تا پشت محتوای اصلی قرار بگیره.
* انیمیشن روی موبایل یا تبلت کند اجرا میشه:
* راه‌حل: این یه مشکل رایجه! اول از همه، سعی کن تعداد لایه‌ها و پیچیدگی گرادیان‌ها رو کمتر کنی. از واحدهای `vw` و `vh` به جای `px` برای `background-size` و `background-position` در `keyframes` استفاده کن. خاصیت `will-change: background-position;` رو به عنصر متحرکت اضافه کن. تصاویر پس‌زمینه رو به فرمت‌های بهینه مثل `WebP` تبدیل کن و مطمئن شو سایزشون کوچیکه. میتونی تو `@media` query برای دستگاه‌های کوچیک‌تر، انیمیشن‌های ساده‌تری رو تعریف کنی یا حتی کلاً انیمیشن رو غیرفعال کنی.
* ستاره‌ها یا جزئیات پس‌زمینه خیلی تکراری به نظر میان:
* راه‌حل: این یعنی `background-size` برای لایه‌های تکرار شونده‌ات خیلی کوچیکه. مقادیر `background-size` رو بزرگتر کن. از چند لایه با `background-size`های متفاوت و `background-position`های مختلف استفاده کن تا تصادفی‌تر به نظر بیان. اگه از تصاویر استفاده می‌کنی، مطمئن شو تصویر ستاره‌ات یه الگوی مشخص و قابل تشخیص نداره.
* انیمیشن‌ها تو مرورگرهای قدیمی کار نمی‌کنن:
* راه‌حل: مرورگرهای قدیمی ممکنه از بعضی خصوصیات CSS جدید پشتیبانی نکنن. برای `keyframes` و `animation` میتونی از `vendor prefixes` مثل `-webkit-`، `-moz-`، `-o-` استفاده کنی، اگرچه امروزه اکثر مرورگرها نیازی به این پیشوندها ندارن. اگه واقعاً نیازه که تو مرورگرهای خیلی قدیمی هم کار کنه، شاید باید به فکر راه‌حل‌های `JavaScript` باشی، اما این دیگه از حوزه CSS خارج میشه.
نتیجه‌گیری
خب رفیق، تا اینجا با هم دیدیم که چطور میشه با استفاده از CSS و چندتا تکنیک ساده، یه پس‌زمینه کهکشانی متحرک و بی‌نظیر برای سایت یا اپلیکیشنت بسازی. از گرادیان‌های چندگانه و تصاویر ستاره گرفته تا انیمیشن‌های جابجایی و چشمک‌زن، همه رو بررسی کردیم. یاد گرفتیم چطور کد رو رسپانسیو کنیم تا روی هر صفحه‌ای عالی به نظر بیاد و چطور عملکردش رو بهینه کنیم تا تجربه کاربری همیشه روان و سریع باشه.
یادت باشه، خلاقیت حد و مرزی نداره. این کدهای آماده فقط نقطه شروع تو هستن. تو میتونی با تغییر رنگ‌ها، سرعت انیمیشن‌ها، تعداد لایه‌ها و حتی نوع گرادیان‌ها، بی‌نهایت ترکیب جدید و منحصر به فرد بسازی و کهکشان اختصاصی خودت رو خلق کنی. با این `تجهیزت`، دیگه هیچ محدودیتی نداری!
اگه این مقاله برات مفید بود و دوست داشتی بازم آموزش‌های خفن و ابزارهای کاربردی رو ببینی، حتماً به [صفحه اصلی سایت ما](https://fa-tools.ir/) سر بزن. اگه هم سوالی داشتی یا نیاز به مشاوره برای پروژه‌های پیچیده‌تر داشتی، میتونی همین الان [با تیم فنی ما تماس بگیری](https://fa-tools.ir/contact/). ما همیشه آماده‌ایم تا تو این مسیر، کنارت باشیم.
—
سوالات متداول (FAQ)
آیا استفاده از پس‌زمینه‌های کهکشانی متحرک باعث کاهش سرعت سایت می‌شود؟
اگر به درستی بهینه‌سازی نشوند، بله ممکن است. اما با استفاده از تکنیک‌هایی مانند `will-change`، بهینه‌سازی تعداد لایه‌ها، استفاده از واحدهای `vw`/`vh` و کاهش پیچیدگی انیمیشن‌ها، می‌توان تأثیر آن را بر عملکرد به حداقل رساند. همیشه تست عملکرد را روی دستگاه‌های مختلف فراموش نکنید.
آیا این کدها با تمامی مرورگرها سازگار هستند؟
اکثر مرورگرهای مدرن (Chrome, Firefox, Edge, Safari) به طور کامل از `CSS @keyframes` و گرادیان‌ها پشتیبانی می‌کنند. برای سازگاری با نسخه‌های بسیار قدیمی مرورگرها، ممکن است نیاز به استفاده از `vendor prefixes` یا راه‌حل‌های جایگزین باشد، اما برای کاربران امروزی، این کدها به خوبی کار می‌کنند.
چگونه می‌توانم رنگ پس‌زمینه کهکشانی را تغییر دهم؟
برای تغییر رنگ‌ها، کافی است مقادیر رنگی در `radial-gradient`ها و همچنین رنگ پایه `#000` (سیاه) در انتهای ویژگی `background` را دستکاری کنید. می‌توانید از رنگ‌های آبی، بنفش، صورتی یا هر ترکیب رنگی که حس فضایی و کهکشانی می‌دهد، استفاده کنید و میزان شفافیت (آلفا) را نیز تغییر دهید.
آیا می‌توانم از تصاویر واقعی کهکشان به جای گرادیان استفاده کنم؟
بله، قطعاً! می‌توانید از تصاویر با کیفیت بالا از کهکشان‌ها یا ستاره‌ها به عنوان یکی از لایه‌های `background-image` استفاده کنید و آن را با گرادیان‌ها و انیمیشن‌ها ترکیب کنید. فقط مطمئن شوید که تصاویر بهینه شده (کم حجم) و با فرمت مناسب (مثل WebP) باشند تا سرعت لود سایت پایین نیاید.
چگونه می‌توانم انیمیشن‌ها را متوقف یا کنترل کنم (مثلاً با دکمه)?
برای کنترل انیمیشن‌ها به صورت پویا (مثلاً توقف با کلیک دکمه)، باید از جاوااسکریپت استفاده کنید. می‌توانید با جاوااسکریپت کلاس‌های CSS را اضافه یا حذف کنید که شامل ویژگی `animation-play-state: paused;` یا `animation: none;` باشند. این روش به شما اجازه می‌دهد تا کنترل کاملی روی وضعیت پخش انیمیشن‌ها داشته باشید.
function copyCode(button) {
const codeBlock = button.nextElementSibling.querySelector(‘code’);
const range = document.createRange();
range.selectNode(codeBlock);
window.getSelection().removeAllRanges(); // Clear current selection
window.getSelection().addRange(range); // Select the code block
document.execCommand(‘copy’); // Copy to clipboard
window.getSelection().removeAllRanges(); // Deselect
button.textContent = ‘کپی شد!’;
setTimeout(() => {
button.textContent = ‘کپی کد’;
}, 2000);
}
مطالب مرتبط:
- طراحی پاپآپهای (Popup) خروج از صفحه با انیمیشن‌های ورود جذاب و بدون پرش
- طراحی آکاردئونهای بازشونده نرم با CSS بدون نیاز به توابع جاوااسکریپت
- بهینه‌سازی کدهای CSS برای چاپ برگه (Print Style Sheet) ( کدهای CSS برای پرینت صفحه)
- بهترین اسنیپتها برای نمایش کدهای برنامه نویسی در سایت با Syntax Highlight
- چگونه حجم کدهای CSS خود را با ابزارهای Purge تا ۹۰٪ کاهش دهیم؟
- ۱۰ اسنیپت CSS برای طراحی پس‌زمینه‌های متحرک و گرادینت
- برگه نمونه