ویژگی کوتاه‌نویس offset در CSS، امکان انیمیشن‌دهی به عناصر را در امتداد یک مسیر مشخص را فراهم می‌کند. این ویژگی دارای ویژگی‌های متعددی است که به هم پیوسته یک تبدیل offset را تشکیل می‌دهند.
با این تبدیل، یک نقطه مشخص داخل المان (offset-anchor) به یک موقعیت مشخص در مسیر (offset-position) در نقاط مختلف از طول مسیر (offset-distance) تطبیق داده می‌شود.
همچنین، این امکان را فراهم می‌کند که عنصر به صورت اختیاری دوران داده شود (offset-rotate) تا به جهت مسیر دنبال شود.
ویژگی offset یک کوتاه‌نویس برای ویژگی‌های CSS زیر است:
-
offset-anchor: مشخص می‌کند که کدام نقطه داخلی از المان باید با مسیر همگام شود. این نقطه می‌تواند نسبت به عنصر مختصاتی باشد که نسبت به آن نقطه مشخص می‌شود.
-
offset-distance: مشخص می‌کند که المان باید در چه فاصله‌ای از مسیر قرار گیرد. این فاصله می‌تواند به عنوان یک مقدار ثابت یا به عنوان یک درصد از طول کل مسیر مشخص شود.
-
offset-path: مشخص می‌کند که مسیری که المان باید در امتداد آن حرکت کند، چه شکلی دارد. این مسیر می‌تواند یک مسیر مستقیم یا یک مسیر منحنی مثل یک دایره یا یک خط بی‌نهایت باشد.
-
offset-position: مشخص می‌کند که المان باید در کجا نسبت به مسیر قرار گیرد. این مقدار می‌تواند با استفاده از کلیدواژه‌های مختلفی مانند top، right، bottom و left مشخص شود.
-
offset-rotate: مشخص می‌کند که المان چه مقدار باید دوران داده شود تا به جهت مسیر دنبال شود. این مقدار می‌تواند به عنوان یک زاویه به رادیان یا به صورت normal بیان شود که به معنای دوران طبیعی المان به جهت مسیر است.
مقادیر ممکن برای ویژگی کوتاه‌نویس offset عبارتند از:
-
offset-anchor: این ویژگی مقداری را تعیین می‌کند که نقطه‌ای داخل المان با موقعیت آفست (offset position) در مسیر همگام شود. مقدار این ویژگی می‌تواند مختصاتی نسبت به المان یا کلیدواژه‌هایی مانند top، right، bottom و left باشد.
-
offset-path: این ویژگی مسیری را تعیین می‌کند که در امتداد آن المان حرکت می‌کند. مقدار این ویژگی می‌تواند یک مسیر SVG باشد یا با استفاده از توابعی مانند path() و none مشخص شود.
-
offset-distance: این ویژگی مشخص می‌کند که المان در چه فاصله‌ای از آغاز مسیر قرار می‌گیرد. مقدار این ویژگی می‌تواند به عنوان یک مقدار ثابت (مانند px) یا یک مقدار نسبی (مانند درصد از طول کل مسیر) مشخص شود.
-
offset-rotate: این ویژگی به صورت اختیاری المان را دوران می‌دهد تا با جهت مسیر همگام شود. مقدار این ویژگی می‌تواند به عنوان یک زاویه به رادیان مشخص شود یا از کلیدواژه normal استفاده شود که به معنای دوران طبیعی المان به جهت مسیر است.
-
auto: این مقدار باعث بازنشانی تمامی ویژگی‌های offset به مقادیر پیش‌فرض آن‌ها می‌شود.
path value
این کد نمونه از استفاده از ویژگی offset به صورت کوتاه با مقدار path است. این ویژگی‌ها به کاربر اجازه می‌دهند تا یک المان را در امتداد یک مسیر مشخص حرکت دهند.
در این مثال، یک کلیدواژه @keyframes به نام slide تعریف شده است که یک حرکت انیمیشنی را تعیین می‌کند. این انیمیشن در طول ۶ ثانیه از نقطه شروع تا پایان اجرا می‌شود.
سپس یک المان با کلاس .container تعریف شده است که یک محیط مستطیلی با حاشیه، رنگ پس‌زمینه، و سایه دارد.
در داخل .container، یک متن با کلاس .text تعریف شده است که موقعیت نسبی دارد و به عنوان یک متن با اندازه و رنگ مشخص نمایش داده می‌شود. این متن نیز یک انیمیشن با استفاده از slide دارد و به طور مستقیم به مسیری که توسط کلیدواژه path مشخص شده است، متصل می‌شود.
مسیر مشخص شده در اینجا یک مسیر خطی می‌باشد که با استفاده از دستورات مختلف M (انتقال به) و Q (کوادراتیک) تعریف شده است. این مسیر از نقطه اول شروع می‌شود و سپس به نقطه دوم می‌رود و از آنجا به نقطه سوم، و به همین ترتیب ادامه می‌یابد.
<html>
<head>
<style>
@keyframes slide {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
.container {
width: 400px;
height: 200px;
border: 2px solid #3498db;
border-radius: 10px;
position: relative;
overflow: hidden;
background-color: #f0f0f0;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}
.text {
position: absolute;
font-size: 28px;
color: #3954cc;
animation: slide 6s ease-in-out infinite alternate;
offset: path('M 10 100 Q 50 50 90 100 T 170 100 T 250 100');
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}
</style>
</head>
<body>
<div class="container">
<div class="text">This is Sliding Text</div>
</div>
</body>
</html>path and auto value
این کد نمونه از استفاده از ویژگی offset به صورت کوتاه با مقدار path و auto است. این ویژگی‌ها به کاربر اجازه می‌دهند تا یک المان را در امتداد یک مسیر مشخص حرکت دهند و همچنین ویژگی‌ها را به طور خودکار تنظیم کنند.
در این مثال، یک کلیدواژه @keyframes به نام orbit تعریف شده است که یک حرکت چرخشی بر روی مسیر مشخص را تعیین می‌کند. این انیمیشن در طول ۶ ثانیه از نقطه شروع تا پایان با سرعت خطی اجرا می‌شود.
سپس دو المان به نام‌های #planet و #sun تعریف شده‌اند. المان #planet یک مدار به دور مسیری انجام می‌دهد که با استفاده از کلیدواژه path مشخص شده است. علاوه بر این، این المان به عنوان یک دایره آبی رنگ نمایش داده می‌شود که با استفاده از انیمیشن orbit دوران می‌کند. همچنین، تنظیماتی مانند عرض، ارتفاع، و موقعیت مطلق نیز برای المان #sun تعریف شده است.
<html>
<head>
<style>
@keyframes orbit {
0% {
offset-distance: 0%;
offset-rotate: 0deg;
}
100% {
offset-distance: 100%;
offset-rotate: 360deg;
}
}
#planet {
width: 60px;
height: 60px;
background-color: #0000A0;
border-radius: 50%;
position: absolute;
animation: orbit 6s linear infinite;
offset: path('M 200 200 m -100, 0 a 100,100 0 1,0 200,0 a 100,100 0 1,0 -200,0') auto;
}
#sun {
width: 100px;
height: 100px;
background-color: #ffd700;
border-radius: 50%;
position: absolute;
left: 28%;
top: 33%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="sun"></div>
<div id="planet"></div>
</body>
</html>Related Properties
این جدول ویژگی‌های مرتبط با ویژگی offset را نشان می‌دهد و توضیحی مختصر از هر یک ارائه می‌دهد:
| ویژگی | توضیح |
|---|---|
| offset-anchor | موقعیت داخلی درون جعبه یک المان را که به عنوان مسیر افست عمل می‌کند مشخص می‌کند. |
| offset-distance | مشخص می‌کند که المان باید در کجا قرار گیرد. |
| offset-path | مسیر المان داخل کانتینر والد خود را مشخص می‌کند. |
| offset-rotate | جهت یا جهت المان را در حالی که در طول مسیر افست مشخص شده حرکت می‌کند، مشخص می‌کند. |
| offset-position | مکان شروع المان را در طول یک مسیر ارائه می‌دهد. |
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام