Spotlight, animasyonu CSS/jQuery ile sayfanın ortasından gösteriyor mu?

Question

Dairesel bir 'açığa vurma' efekti oluşturabileceğimi bilen var mı? Böylece, DOM öğelerinim sayfa ortalamasından daha büyük ve daha büyük olan bir daireyle gösteriliyor.

Answer 1

Saydam arka planı ve sayfanın tamamını kapsayan büyük box-shadow olan bir mask div ile içeriği "gizleme" deneyebilirsiniz.

$('body').on("click", function() { 
 
\t $(this).toggleClass('reveal'); 
 
})

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    padding: 2em; 
 
    font-family: sans-serif; 
 
    line-height: 1.5; 
 
    background: hotpink; 
 
    color: #FFF; 
 
    box-sizing: border-box; 
 
} 
 

 
h1 { 
 
    color: yellow; 
 
} 
 

 
/* the mask */ 
 

 
#mask { 
 
    position: fixed; top:50%; left: 0; right: 0; margin: auto; 
 
    width:0px; height:0px; border-radius: 100%; z-index: 99; 
 
    transform:translateY(-50%) scale(1); 
 
    box-shadow: 0 0 0 60em #FFF; /* big shadow */ 
 
    transition:1s; 
 
} 
 

 
.reveal #mask { 
 
    width:100vw; height:100vw; 
 
    transform:translateY(-50%) scale(1.5); 
 
    pointer-events: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="mask"></div> 
 

 
<h1>Masking</h1> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam maiores, placeat. Est unde provident placeat deleniti, modi ea. Corporis iste dolorem ullam culpa. Asperiores illum harum, possimus cum ad doloribus.</p> 
 
<p>Ab soluta quidem quibusdam ullam error sapiente officiis, dolorum unde dolore corporis maiores delectus voluptate assumenda veniam? Nostrum eius ad sequi, nemo eos porro libero, nam, magni, perspiciatis fuga soluta!</p> 
 
<p>Blanditiis maxime unde perspiciatis repudiandae ipsum, in nihil possimus officiis? Minus, perferendis debitis doloribus sint repellendus accusamus recusandae pariatur quisquam asperiores temporibus optio in. Quia quas nihil fugiat omnis hic?</p> 
 
<p>Error cum tenetur cupiditate dolore, possimus vitae. Optio fuga ipsam sit amet modi unde, officia quo, tempore obcaecati quis, nihil. Natus, ducimus deserunt, minus consequuntur accusamus minima mollitia voluptatum optio.</p> 
 
<p>Quibusdam, dolor deserunt. Quia quo, deleniti saepe perspiciatis. Delectus dolorum labore quidem debitis excepturi facilis assumenda magni ex. Architecto illum tenetur, harum nulla consequatur debitis aut sint officiis praesentium similique.</p>

jsFiddle: border-radius:100% ile bir daire olduğunu garanti edebiliyor https://jsfiddle.net/azizn/7o3jcsbt/

animasyon eylem görmek için, bir sınıf geçiş yoluyla çalışır açığa, herhangi bir yeri tıklayın sayfa içeriği "açığa çıkar" (jQuery geçişi).

Not: Bu, oluşturduğum ve bir üretim ortamında uygulamadan önce bazı sınava ihtiyaç duyabileceğimiz bir temel deneme amaçlı demodur.