tattica
Version:
Tactical and adaptive asset loading library
82 lines (79 loc) • 3.21 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tattica Demo</title>
<script type="module" src="../src/_withBlocks/tatticaBlocks.mjs"></script>
</head>
<body>
<div class="wrapper">
<h1>Tattica testing <code>block</code> feature</h1>
<div class="container">
<!-- <img data-flag data-src="https://source.unsplash.com/900x900/?pc" alt="0"> -->
<img src="https://source.unsplash.com/900x900/?pc" alt="0">
</div>
<div class="container">
<img
data-flag
data-src="https://source.unsplash.com/900x900/?nature"
data-fall="https://source.unsplash.com/900x900/?nature"
onerror="this.src='https://source.unsplash.com/900x900/?nature'"
alt="1">
</div>
<div class="container">
<img data-flag data-src="https://source.unsplash.com/900x900/?water" alt="2">
</div>
<div class="container">
<img data-flag data-src="https://source.unsplash.com/900x900/?car" alt="3">
</div>
<div class="container">
<img data-flag data-src="https://source.unsplash.com/900x900/?nature" alt="1">
</div>
<div class="container">
<img data-flag data-src="https://source.unsplash.com/900x900/?water" alt="2">
</div>
<div class="container">
<img data-flag data-src="https://source.unsplash.com/900x900/?viola" alt="3" data-block="1">
</div>
<div class="container">
<img data-flag data-src="https://source.unsplash.com/900x900/?neve" alt="1" data-block="1">
</div>
<div class="container">
<img data-flag data-src="https://source.unsplash.com/900x900/?pioggia" alt="2" data-block="1">
</div>
<div class="container">
<img data-flag data-src="https://source.unsplash.com/900x900/?montagna" alt="3" data-block="1">
</div>
<div class="container">
<img data-flag data-src="https://source.unsplash.com/900x900/?na" alt="1">
</div>
<div class="container">
<img data-flag data-src="https://source.unsplash.com/900x900/?wa" alt="2">
</div>
<div class="container">
<img data-flag data-src="https://source.unsplash.com/900x900/?ca" alt="3">
</div>
<div class="container">
<img data-flag data-src="https://source.unsplash.com/900x900/?n" alt="1">
</div>
<div class="container">
<img data-flag data-src="https://source.unsplash.com/900x900/?w" alt="2">
</div>
<div class="container">
<img data-flag data-src="https://source.unsplash.com/900x900/?c" alt="3">
</div>
</div>
<style>
.container {
min-height: 100vh;
height: 110vh;
}
/* img[data-flag] {
background: #888;
} */
</style>
<!-- <script type="module" src="../src/tattica.mjs"></script> -->
</body>
</html>