ویژگی zoom در CSS برای کنترل سطح بزرگنمایی عناصر مفید است.
zoom یک ویژگی غیر استاندارد در CSS است و توصیه می‌شود برای به دست آوردن نتایج مشابه از تابع transform: scale() استفاده شود.
مقادیر ممکن:
- normal: مشخص می‌کند که عنصر باید به اندازه معمول خود نمایش داده شود.
- reset: مشخص می‌کند که عنصر نباید بزرگنمایی یا کوچکنمایی شود، مگر اینکه کاربر بدون استفاده از زومینگ مبتنی بر پینچ عمل کند. این مقدار توصیه نمی‌شود، به جای آن از مقدار unset استفاده کنید.
- <percentage>: هر مقدار درصدی که فاکتور زوم نامیده می‌شود.
- مقدار برابر با 100% نرمال است.
- مقدار بیشتر از 100% به معنی بزرگنمایی عنصر است.
- مقدار کمتر از 100% به معنی کوچکنمایی عنصر است.
- <number>: هر مقدار عددی که معادل یک مقدار درصدی است. برای مثال: 1.0 = 100% = نرمال.
- مقدار برابر با 1.0 نرمال است.
- مقدار بیشتر از 1.0 به معنی بزرگنمایی عنصر است.
- مقدار کمتر از 1.0 به معنی کوچکنمایی عنصر است.
اعمال به: تمام عناصر HTML.
سینتکس DOM:
object.style.zoom = "normal | reset | | "; normal Value
ویژگی zoom در CSS برای کنترل سطح بزرگنمایی یک المان مفید است. مقدار normal این ویژگی مشخص می‌کند که المان باید با اندازه عادی خود نمایش داده شود.
در مثال زیر، چند المان با استفاده از مقدار zoom:normal نمایش داده شده‌اند:
<html>
<head>
<style>
p.normal {
zoom: normal;
}
</style>
</head>
<body>
<p class="normal">Normal size</p>
</body>
</html>در این مثال، المان p با کلاس normal با استفاده از ویژگی zoom:normal نمایش داده می‌شود و به اندازه عادی خود در مرورگر نمایش داده می‌شود.
percentage Value
در CSS، مقدار <percentage> برای ویژگی zoom، نشان دهنده سطح بزرگنمایی المان به اندازه مشخص شده به صورت درصدی است. در مثال زیر، اندازه المان‌ها با استفاده از مقادیر <percentage> مختلف برای ویژگی zoom تغییر می‌یابد:
<html>
<head>
<style>
div.box {
height: 50px;
width: 50px;
display: inline-block;
padding: 5px;
border: 1px solid black;
}
div#m {
background-color: orange;
zoom: 200%;
}
div#n {
background-color: lavender;
zoom: 1.5;
}
div#o {
background-color: palevioletred;
zoom: normal;
}
</style>
</head>
<body>
<div id="m" class="box"></div>
<div id="n" class="box"></div>
<div id="o" class="box"></div>
</body>
</html>- المان با
id="m"به اندازه 200% بزرگنمایی می‌شود. - المان با
id="n"به اندازه 1.5 برابر بزرگنمایی می‌شود. - المان با
id="o"به اندازه عادی خود بزرگنمایی می‌شود.
With number Value
در CSS، مقدار <number> برای ویژگی zoom نشان‌دهنده سطح بزرگنمایی المان به اندازه مشخص شده به صورت عددی است. در مثال زیر، ویژگی zoom برای المان h1 در حالت hover با استفاده از مقدار <number> تنظیم شده است:
<html>
<head>
<style>
p {
border: 1px solid red;
}
p.percent {
zoom: 170%;
}
p.number {
zoom: 4;
}
h1:hover {
zoom: 250%;
text-decoration-line: underline;
}
</style>
</head>
<body>
<h1>Hover to Zoom</h1>
<p class="percent">Zoom in percentage</p>
<p class="number">Zoom in number</p>
</body>
</html>وقتی که موس کاربر روی عنوان h1 حرکت می‌کند، سطح بزرگنمایی عنوان با استفاده از مقدار 4 برابر می‌شود، همچنین خط زیر خط زیرخطی شده و ایجاد یک اثر تحت‌خط بر روی عنوان ایجاد می‌کند.
With Animation
این کد نمونه ای از استفاده از ویژگی zoom در CSS را نشان می دهد که همراه با انیمیشن بر روی وقوع حالت hover استفاده شده است:
<html>
<head>
<style>
div.box {
width: 25px;
height: 25px;
vertical-align: middle;
display: inline-block;
transition: transform .5s; /* اضافه کردن انیمیشن بر روی تغییر اندازه */
padding: 10px;
}
div#a {
background-color: rgb(58, 220, 22);
zoom: normal;
}
div#b {
background-color: rgb(239, 86, 137);
zoom: 200%;
}
div#c {
background-color: rgb(223, 217, 44);
zoom: 2.9;
}
div.box:hover {
transform: scale(1.5); /* اعمال تغییر اندازه در حالت hover */
}
</style>
</head>
<body>
<h1>Animation added on hover</h1>
<div id="a" class="box"></div>
<div id="b" class="box"></div>
<div id="c" class="box"></div>
</body>
</html>وقتی که موس کاربر روی هر کدام از مربع‌های div حرکت می‌کند، آن مربع به اندازه 1.5 برابر اندازه اصلی خود تغییر اندازه می‌دهد، همچنین از انیمیشن استفاده شده که تغییرات را به طور نرم و صاف نشان می‌دهد.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام