JS властивість CSSStyleDeclaration.clip

Загальний опис

element.style.clip - це властивість CSS, яка дозволяє обрізати видиму область елемента. Значення цієї властивості визначається за допомогою функції rect(), яка приймає чотири параметри: верхнє, праве, нижнє та ліве значення, що встановлюють прямокутник обрізання.

element.style.clip використовується для створення масок або для обмеження області відображення елемента. Це може бути корисно для створення складних візуальних ефектів або для приховування частин елемента, що виходять за межі необхідної області. Наприклад, можна створити цікаву анімацію, де частини елемента поступово з'являються на екрані.

Ось приклад використання властивості clip для обрізання елемента:

let element = document.getElementById('clippedElement');
element.style.clip = 'rect(0px, 100px, 100px, 0px)';

У цьому прикладі елемент буде обрізаний до прямокутника з верхнім лівим кутом у точці (0, 0) та нижнім правим кутом у точці (100, 100). Все, що знаходиться за межами цього прямокутника, буде приховано.

Важливо зазначити, що властивість clip застосовується тільки до елементів з абсолютним або фіксованим позиціонуванням (position: absolute або position: fixed). Інакше властивість не має ефекту. Наприклад:

let element = document.getElementById('clippedElement');
element.style.position = 'absolute';
element.style.clip = 'rect(0px, 50px, 50px, 0px)';

Це гарантує, що clip працюватиме належним чином.

Для створення анімацій можна динамічно змінювати значення властивості clip. Наприклад, за допомогою функції setInterval можна поступово змінювати значення, щоб створити ефект поступового відкриття елемента:

let element = document.getElementById('animatedElement');
element.style.position = 'absolute';
let top = 0;
let interval = setInterval(function() {
  if (top >= 100) {
    clearInterval(interval);
  } else {
    top += 1;
    element.style.clip = rect(${top}px, 100px, 100px, 0px);
  }
}, 10);

У цьому прикладі верхня межа обрізання top поступово збільшується, поки не досягне 100 пікселів, створюючи ефект руху.

Ще одним корисним застосуванням властивості clip є створення масок для контенту. Наприклад, можна показувати тільки певну частину зображення або відео. Це дозволяє створювати інтерактивні ефекти без використання додаткових елементів або складних структур коду.

Таким чином, властивість element.style.clip є потужним інструментом для управління видимістю елементів на сторінці. Вона дозволяє створювати різноманітні візуальні ефекти і забезпечувати більш гнучке управління контентом, що робить її корисною для веб-дизайнерів та розробників.

Порада:

Пам'ятайте, що властивість clip застаріла і була замінена властивістю clip-path. Вона надає більше можливостей для управління видимими областями елементів, включаючи складні форми. Проте clip все ще підтримується у багатьох браузерах, і може бути корисною для простих випадків. Будьте обережні з кросбраузерною сумісністю і розгляньте можливість переходу на clip-path:

let element = document.getElementById('clippedElement');
element.style.clipPath = 'inset(10px 10px 10px 10px)';

Порада:

Використовуйте element.style.clip для створення цікавих візуальних ефектів, зокрема для маскування частин елемента або тексту. Наприклад, можна створити ефект машини, що друкує текст, поступово відкриваючи його:

let textElement = document.getElementById('textElement');
textElement.style.position = 'absolute';
let left = 0;
function revealText() {
  if (left >= 200) return;
  left += 2;
  textElement.style.clip = rect(0px, ${left}px, 20px, 0px);
  requestAnimationFrame(revealText);
}
requestAnimationFrame(revealText);

Синтаксис

element.style.clip

Значення

Return

Переглядачі

Переглядач
	1	1	3	8	12

Переглядач
	4.4	18	4	1

Переглядач
	-	-

Приклади

Цей приклад дозволяє користувачам взаємодіяти з зображенням, обрізаючи його частини за допомогою кнопок. Кожна кнопка змінює значення властивості clip, щоб обрізати верхню, праву, нижню або ліву частину зображення. Користувачі також можуть скинути обрізання до початкового стану, натиснувши кнопку "Reset Clip". Це демонструє принцип роботи властивості clip і її використання для надання елементам динамічних візуальних ефектів.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/RwmyyOx">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми створюємо анімацію, яка поступово відкриває зображення з лівого боку. Змінюючи значення правого параметра в clip, ми поступово збільшуємо видиму область зображення, що створює ефект плавної появи. Це корисно для інтерактивних веб-додатків, де потрібно привернути увагу користувача до певного зображення або елементу.

let imageElement = document.getElementById('imageElement');
imageElement.style.position = 'absolute';
imageElement.style.clip = 'rect(0px, 0px, 100px, 0px)';

let width = 0;
function expandClip() {
  if (width >= 200) return;
  width += 2;
  imageElement.style.clip = rect(0px, ${width}px, 100px, 0px);
  requestAnimationFrame(expandClip);
}
requestAnimationFrame(expandClip);

Цей приклад демонструє динамічне маскування тексту, де текст обрізається з правого боку і створюється ефект "рухомого вікна". Властивість clip анімується для зміни видимої області тексту, дозволяючи створювати інтерактивні ефекти. Це може бути корисно для створення анімованих заголовків або текстових ефектів, що привертають увагу користувача.

let textElement = document.getElementById('textElement');
textElement.style.position = 'absolute';
textElement.style.clip = 'rect(0px, 100px, 20px, 0px)';
let direction = 1;

function animateClip() {
  let currentClip = textElement.style.clip.match(/(d+)px/g).map(Number);
  let right = currentClip[1];
  
  if (right >= 200 || right <= 100) {
    direction *= -1;
  }
  
  right += 2 * direction;
  textElement.style.clip = rect(0px, ${right}px, 20px, 0px);
  requestAnimationFrame(animateClip);
}
requestAnimationFrame(animateClip);

JS довідник

JavaScript

Наповнення JS розділу