どのように循環的な「暴露」効果を生み出すか知っている人はいますか?私のDOM要素は、円が大きくなっているページセンターから明らかになっています。SpotlightはCSS/jQueryでページの中心からアニメーションを表示しますか?
-2
A
答えて
0
透明な背景とページ全体をカバーする大きなbox-shadow
のマスクdivを使用してコンテンツを「隠す」ことができます。
$('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%
を使用すると、円であることを確認することができますhttps://jsfiddle.net/azizn/7o3jcsbt/
アニメーションがアクションでそれを見るために、クラス遷移を介して動作を明らかに任意の場所をクリックしますjQueryのトグル)を表示します。
注:これは私が作成した基本的な実験デモであり、運用環境で実装する前にいくつかのテストが必要な場合があります。
+0
Fantastic !!!ありがとう! – lombrozo
関連する問題
- 1. 中心から端まで拡大するアニメーション、下のparentViewを表示
- 2. ホバリングの中心からアニメーションのサイズを変更します
- 3. SVGアニメーション:中心から線を描く
- 4. jqueryで中心から左にアニメーションを付けます
- 5. divをアニメーション化して中心から展開する
- 6. Firefoxでホバー上の中心からアニメーションのサイズを変更
- 7. 親の幅をアニメーションしながら画像を中心にしますか?
- 8. ページを更新してもアニメーションが表示されますか?
- 9. 進捗ダイアログのアニメーション化された円の中心を表示することは可能ですか?
- 10. onclickは、ドーナツチャートの情報を中心に表示します
- 11. このドロップダウンを中心にして親を強調表示できますか?
- 12. ボトムナビゲーションサポートライブラリv25.0.0アニメーションで表示しますか?
- 13. 左から中央ではなく中心から回転します
- 14. イメージは中央ページの後ろにありますか?中心ページの
- 15. WKWebViewインスタンスは、ロード中にWebページを表示できますか?
- 16. jQuery - 中心からアニメーションへdivを拡大
- 17. css/htmlを使用して、shopifyページの行内に中心ロゴ画像を表示しますか?
- 18. スライドテキストを中心としたdivのアニメーション
- 19. jQueryと中心点のアニメーション
- 20. アニメーション中のUIViewの中心位置
- 21. ページの中央にテキストを表示し、そのテキストをスライダの後にアニメーション表示する方法は?
- 22. cssの入力フォーカスで、ページ中心からページ上部に入力ボックスをアニメーション化する方法はありますか?
- 23. は、アニメーションの中心部との角度
- 24. Spotlightインポータが別のSpotlightインポータを呼び出すことはできますか?
- 25. jqueryでdivの中心から画面の中心までの直接(対角)距離を計算します
- 26. 地図の中心にドットを表示
- 27. リーフレット付きサークルの中心を表示
- 28. 中心からのオフセットdiv
- 29. NSDictionaryの中からNSArrayリストを表示していますか?
- 30. CSSアニメーションを使用して中央からテキストを表示し、最後にテキストを表示し続ける
ようこそ、より多くの情報と多分スキーム/図面を提供して、正確に達成したいことを理解することができますか? – Kyle