我想向我的網站添加預加載器，我有以下代碼：<div class="loader" ></div><script>document.addEventListener('DOMContentLoaded', function() {jQuery(function($){$('.loader').fadeOut('slow');}); });</script><style>.elementor-element-edit-mode .loader{display: none;}.loader {position: fixed;left: 0px;top: 0px;width: 100%;height: 100%;z-index: 9999;background: url('http://ibiza-bar.co.il/wp-content/uploads/2020/04/ibiza-logo.png') 50% 50% no-repeat #fff;}</style>我希望它看起來像窗簾關閉，而不是這種簡單的淡出效果，就像下面的示例一樣：https://i.stack.imgur.com/3eo6y.gif 知道如何根據我的代碼實現這種獨特的淡出效果嗎？
1 回答
慕俠2389804
TA貢獻1719條經驗 獲得超6個贊
用居中的白色框覆蓋背景并使其折疊至 0 寬度。
setTimeout(() => {
$("#loader .logo").animate({ opacity: 0 }, 1000);
$("#loader .cover").animate({ width: "0%" }, 1000, () => {
$("#loader").hide(); // When animation is complete hide the element.
});
}, 1500);
#bg {
background: url('http://placekitten.com/630/195');
width: 630px;
height: 195px;
position: absolute;
}
#loader {
position: fixed;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#loader .logo {
background: url('http://ibiza-bar.co.il/wp-content/uploads/2020/04/ibiza-logo.png');
background-repeat: no-repeat;
background-size: contain;
position: absolute;
width: 150px;
height: 150px;
}
#loader .cover {
background: #fff;
width: 100%;
height: 100%;
position: absolute;
}
body { margin: 0 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bg"></div>
<div id="loader">
<div class="cover"></div>
<div class="logo"></div>
</div>
- 1 回答
- 0 關注
- 131 瀏覽
添加回答
舉報
0/150
提交
取消