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)';

автор: Bond правити

Порада

Використовуйте 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);

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.clip

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Підтримка: серверні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

<img id="imageElement" src="/img/logo.svg" width="200" alt="Лого">

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);

<p id="textElement">Довгий рядок тексту, який поступово відкривається і закривається</p>

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

let right = 100;
let direction = 1;

function animateClip() {
    if (right >= 300 || right <= 100) {
        direction *= -1;
    }

    right += 2 * direction;
    textElement.style.clip = `rect(0px, ${right}px, 40px, 0px)`;
    requestAnimationFrame(animateClip);
}

requestAnimationFrame(animateClip);