Etkileşimli İçerik Gösterme

CSS maskeleri ve kayıtlı özel özelliklerle sitenize yüksek performanslı, etkileşimli açığa çıkarma efektleri ekleyin. Maske olarak dairesel renk geçişi kullanıp durma değerlerini kaydederek giriş ve çıkışta sorunsuz bir geçiş sağlayabilir, aynı zamanda minimum JavaScript ile kullanıcının işaretçisini takip edebiliriz.

Uygulama

1. Özel Özellikleri Kaydetme

Gradyan durak değerlerinin düzgün bir şekilde interpolasyonunu etkinleştirmek için değişkenleri @property kullanarak kaydetmeniz gerekir. Bu, tarayıcının motorunu veri türü hakkında bilgilendirerek güncellemeler sırasında değerler arasında geçiş yapmasına olanak tanır.

/* Register the spotlight inner and outer sizes to enable interpolation */
 @property --inner-size{
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --outer-size{
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}

İşaretçi konumunu izleyen özel özelliklerin taşınması gerekmediğinden bunları kaydetmeniz gerekmez.

2. Maskeleme katmanını tanımlama

mask-image öğesini, göstermek istediğiniz öğeye uygulayın. Kayıtlı mülklere referans veren bir radial-gradient kullanın.

.reveal-layer {
  /* Only transition the size properties, NOT the position variables */
  transition: --inner-size 0.2s ease-in-out, --outer-size 0.2s ease-in-out;  

  /* The spotlight is defined by the transparent center of the mask */
  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    black var(--inner-size, 0%),
    transparent var(--outer-size, 0%)
  );

  /* Ensure the mask doesn't repeat if the element is large */
  mask-repeat: no-repeat;

  /* Make the mask layer non-interactive */
  pointer-events: none;
}

/* Update the gradients stops on interaction */
.reveal-layer:hover {
  --inner-size: 100px;
  --outer-size: 120px;
}  

3. JavaScript ile koordinatları güncelleme

İşaretçi konumunu izleyin ve CSS değişkenlerini güncelleyin. Özellikler kayıtlı olduğundan ve transition tanımlandığından, işaretçi etkinlikleri seyrek olsa bile spot sorunsuz bir şekilde hareket eder.

const container = document.querySelector('.container');
// Store the container's bounding rect
let rect = container.getBoundingClientRect();
// Update the rect when the container is resized
const resizeObserver = new ResizeObserver(()=>{
  rect = container.getBoundingClientRect();
})
resizeObserver.observe(container);

container.addEventListener('pointermove', (e) => {
  // Calculate position as a percentage of the container.
  const x = ((e.clientX - rect.left) / rect.width) * 100;
  const y = ((e.clientY - rect.top) / rect.height) * 100;

  // Update the registered properties
  container.style.setProperty('--mouse-x', `${x}%`);
  container.style.setProperty('--mouse-y', `${y}%`);
});

4. Erişilebilirlik ve Etkileşim

ZORUNLU Erişilebilirlik Garantisi: Bu kalıp, görsel bir spotu göstermek için işaretçi etkileşimlerini kullanır. Spot ışığı katmanını yalnızca işaretçi kullanıcıları için gerekli olmayan bir görsel geliştirme olarak kullanarak, temel alınan tüm içeriğin varsayılan olarak temel düzende tamamen görünür, okunabilir ve klavyeyle bağımsız olarak erişilebilir kalmasını sağlamanız GEREKİR. Bu efekti hiçbir zaman yalnızca klavye veya yardımcı teknoloji kullanan kullanıcılardan önemli içerikleri gizlemek ya da engellemek için kullanmayın.

• İşaretçi Etkinlikleri: Standart tıklama ve dokunma etkileşimlerinin alttaki kontrollere geçmesine izin vermek için maske yer paylaşımı katmanında pointer-events: none değerini ayarlayın.
• İndirgenmiş Hareket Geçersiz Kılma: İndirgenmiş hareket isteyen kullanıcılar için yumuşak geçiş interpolasyonunu devre dışı bırakın.

/* MANDATORY Copy-Paste Safety: Disable transition scaling for motion-sensitive users */
@media (prefers-reduced-motion: reduce) {
  .reveal-layer {
    transition: none !important;
  }
}

Yedek stratejiler

Kayıtlı Olmayan Mülk Yedeği

mask-image özelliğini destekleyen ancak @property özelliğini desteklemeyen tarayıcılar, spot ışığını göstermeye devam eder ancak radial-gradient içindeki değerleri enterpole edemedikleri için hareket, açık ve kapalı durumlar arasında geçiş yapar. var() kullanırken yedek değerler sağlayın.

.reveal-layer {
  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    /* Use fallback values when using the `var()` function for browsers that don't get an initial value from the @property registration. */
    black var(--inner-size, 0%),
    transparent var(--outer-size, 0%)
  );
}

Temel Maske Desteği

CSS maskelemeyi hiç desteklemeyen tarayıcılar için:

1. Önekli özellik: Daha geniş tarayıcı desteği için -webkit-mask-image önekli özelliği kullanın.
2. Progresif geliştirme: Kullanıcı arayüzünün temel durumunu, gösterim efekti olmadan tamamen işlevsel ve okunaklı olacak şekilde tasarlayın. Bu, efektin yalnızca görsel bir hava kattığı ve içeriği okumak için gerekli olmadığı durumlarda kullanışlıdır.