jquery - 如何为我的 CSS 网格使用网格加载动画脚本 (GridLoaderFx)
问题描述
我正在尝试使用来自http://yanshi.sucaihuo.com/jquery/17/1725/demo/的“网格加载动画”
我的网格不是用 jQuery 构建的,但我只使用了 CSS。我很想为我的网格使用这些动画之一。在演示中,动画仅在您单击效果时播放。
我需要的是立即加载图像,同时使用这些动画之一(最好是“Shu”)。我在演示站点或 github 上找不到有关如何实现此目的的示例。动画是否也有可能在滚动时加载?我在我的网站上使用 scrollreveal.js。
非常感谢您的帮助
https://codepen.io/Jaxxie/pen/pKKjPG
/* ---- grid ---- */
img.grid__img {
object-fit: cover;
width: 100%;
height: 100%;
border-radius: 3px;
}
.grid-layout {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
grid-gap: 10px;
grid-auto-rows: minmax(280px, auto);
grid-auto-flow: dense;
padding: 10px;
}
.grid-item {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
color: #929796;
background-color: #333;
border-radius: 5px;
&:nth-child(odd) {
background-color: #424242;
}
}
.span-2 {
grid-column-end: span 2;
grid-row-end: span 2;
}
.span-3 {
grid-column-end: span 3;
grid-row-end: span 2;
}
.span-4 {
grid-column-end: span 2;
grid-row-end: span 1;
}
.span-5 {
grid-column-end: span 1;
grid-row-end: span 2;
}
.grid--hidden {
position: fixed !important;
z-index: 1;
top: 0;
left: 0;
width: 100%;
pointer-events: none;
opacity: 0;
}
.js .grid--loading::before,
.js .grid--loading::after {
content: '';
z-index: 1000;
}
.js .grid--loading::before {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #2c2d31;
}
.js .grid--loading::after {
position: absolute;
top: calc(25vh - 20px);
left: 50%;
width: 40px;
height: 40px;
margin: 0 0 0 -20px;
border: 8px solid #383a41;
border-bottom-color: #565963;
border-radius: 50%;
animation: animLoader 0.8s linear forwards infinite;
}
<html lang="en" class="no-js">
<head>
<script>
document.documentElement.className = 'js';
</script>
</head>
<body class="">
<div class="grid grid-layout">
<div class="grid-item span-5 grid-item-1"><img class="grid__img" src="https://www.dierendokters.com/images/Katten/kitten.jpg" alt="Some image" /></div>
<div class="grid-item grid-item-2"><img class="grid__img" src="https://www.dierendokters.com/images/Katten/kitten.jpg" alt="Some image" /></div>
<div class="grid-item span-4 grid-item-3"><img class="grid__img" src="https://www.dierendokters.com/images/Katten/kitten.jpg" alt="Some image" /></div>
<div class="grid-item grid-item-4"><img class="grid__img" src="https://www.dierendokters.com/images/Katten/kitten.jpg" alt="Some image" /></div>
<div class="grid-item span-2 grid-item-5"><img class="grid__img" src="https://www.dierendokters.com/images/Katten/kitten.jpg" alt="Some image" /></div>
<div class="grid-item grid-item-6"><img class="grid__img" src="https://www.dierendokters.com/images/Katten/kitten.jpg" alt="Some image" /></div>
<div class="grid-item grid-item-7"><img class="grid__img" src="https://www.dierendokters.com/images/Katten/kitten.jpg" alt="Some image" /></div>
</div>
<script src="https://yanshi.sucaihuo.com/jquery/17/1725/demo/js/imagesloaded.pkgd.min.js"></script>
<script src="https://yanshi.sucaihuo.com/jquery/17/1725/demo/js/masonry.pkgd.min.js"></script>
<script src="https://yanshi.sucaihuo.com/jquery/17/1725/demo/js/anime.min.js"></script>
<script src="https://yanshi.sucaihuo.com/jquery/17/1725/demo/js/main.js"></script>
</body>
</html>
解决方案
你可以在没有 js 的情况下实现这一点。简单的 css 解决方案是将加载 gif 图像添加到“.grid-item{}”作为背景图像。所以加载器将是可见的,直到图像加载完成。
推荐阅读
- pytorch - 在没有 .data 的情况下更新 net.parameters()
- c# - 调用 DELETE api 在 Postman 上不起作用
- python - 生成器函数是否可以返回其他类型而不是生成器?
- python - 海象运算符:NameError:在封闭范围内赋值之前引用了自由变量“it”
- postgresql - 在类似 WHERE NOT IN 的子句中使用数组变量
- java - 如何同时运行两个 selenium python 程序
- javascript - 从 html 调用的 setInterval() 函数的返回值
- python - 用正则表达式替换多行
- node.js - 在 ES6 node.js 项目单元测试中为 express 中间件创建存根函数
- embedded - 在 Nucleo-F446RE 上通过 CANBUS 进行引导加载程序访问