Add fade animation
Browse files- index.html +38 -2
- src/driver.ts +2 -2
- src/style.css +14 -0
index.html
CHANGED
|
@@ -25,6 +25,8 @@
|
|
| 25 |
align-items: center;
|
| 26 |
justify-content: center;
|
| 27 |
height: 100vh;
|
|
|
|
|
|
|
| 28 |
}
|
| 29 |
|
| 30 |
h1 {
|
|
@@ -50,6 +52,21 @@
|
|
| 50 |
content: "•";
|
| 51 |
margin-right: 10px;
|
| 52 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 53 |
</style>
|
| 54 |
</head>
|
| 55 |
<body>
|
|
@@ -57,6 +74,12 @@
|
|
| 57 |
<h1>driver.js <sup>next</sup></h1>
|
| 58 |
<p>Rewritten and enhanced version of driver.js</p>
|
| 59 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 60 |
<ul>
|
| 61 |
<li>Written in TypeScript</li>
|
| 62 |
<li>Lightweight — only 5kb gzipped</li>
|
|
@@ -69,9 +92,22 @@
|
|
| 69 |
|
| 70 |
const driverObj = driver();
|
| 71 |
|
| 72 |
-
|
| 73 |
-
|
|
|
|
|
|
|
| 74 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 75 |
</script>
|
| 76 |
</body>
|
| 77 |
</html>
|
|
|
|
| 25 |
align-items: center;
|
| 26 |
justify-content: center;
|
| 27 |
height: 100vh;
|
| 28 |
+
max-width: 1200px;
|
| 29 |
+
margin: 0 auto;
|
| 30 |
}
|
| 31 |
|
| 32 |
h1 {
|
|
|
|
| 52 |
content: "•";
|
| 53 |
margin-right: 10px;
|
| 54 |
}
|
| 55 |
+
|
| 56 |
+
.buttons {
|
| 57 |
+
display: flex;
|
| 58 |
+
margin-top: 20px;
|
| 59 |
+
gap: 10px;
|
| 60 |
+
}
|
| 61 |
+
|
| 62 |
+
button {
|
| 63 |
+
all: unset;
|
| 64 |
+
border: 1px solid #ccc;
|
| 65 |
+
padding: 5px 15px;
|
| 66 |
+
border-radius: 5px;
|
| 67 |
+
display: block;
|
| 68 |
+
cursor: pointer;
|
| 69 |
+
}
|
| 70 |
</style>
|
| 71 |
</head>
|
| 72 |
<body>
|
|
|
|
| 74 |
<h1>driver.js <sup>next</sup></h1>
|
| 75 |
<p>Rewritten and enhanced version of driver.js</p>
|
| 76 |
|
| 77 |
+
<div class="buttons">
|
| 78 |
+
<button id="highlight-btn">Simple Highlight</button>
|
| 79 |
+
<button id="tour-btn">Start Tour</button>
|
| 80 |
+
<button id="highlight-destroy">Destroy after 2s</button>
|
| 81 |
+
</div>
|
| 82 |
+
|
| 83 |
<ul>
|
| 84 |
<li>Written in TypeScript</li>
|
| 85 |
<li>Lightweight — only 5kb gzipped</li>
|
|
|
|
| 92 |
|
| 93 |
const driverObj = driver();
|
| 94 |
|
| 95 |
+
document.getElementById("highlight-btn").addEventListener("click", () => {
|
| 96 |
+
driverObj.highlight({
|
| 97 |
+
element: "h1",
|
| 98 |
+
});
|
| 99 |
});
|
| 100 |
+
|
| 101 |
+
document
|
| 102 |
+
.getElementById("highlight-destroy")
|
| 103 |
+
.addEventListener("click", () => {
|
| 104 |
+
driverObj.highlight({
|
| 105 |
+
element: "h1",
|
| 106 |
+
});
|
| 107 |
+
setTimeout(() => {
|
| 108 |
+
driverObj.destroy();
|
| 109 |
+
}, 2000);
|
| 110 |
+
});
|
| 111 |
</script>
|
| 112 |
</body>
|
| 113 |
</html>
|
src/driver.ts
CHANGED
|
@@ -9,13 +9,13 @@ export type DriveStep = {
|
|
| 9 |
|
| 10 |
export function driver() {
|
| 11 |
function init() {
|
| 12 |
-
document.body.classList.add("driver-active");
|
| 13 |
|
| 14 |
initEvents();
|
| 15 |
}
|
| 16 |
|
| 17 |
function destroy() {
|
| 18 |
-
document.body.classList.remove("driver-active");
|
| 19 |
|
| 20 |
destroyEvents();
|
| 21 |
destroyHighlight();
|
|
|
|
| 9 |
|
| 10 |
export function driver() {
|
| 11 |
function init() {
|
| 12 |
+
document.body.classList.add("driver-active", "driver-fade");
|
| 13 |
|
| 14 |
initEvents();
|
| 15 |
}
|
| 16 |
|
| 17 |
function destroy() {
|
| 18 |
+
document.body.classList.remove("driver-active", "driver-fade");
|
| 19 |
|
| 20 |
destroyEvents();
|
| 21 |
destroyHighlight();
|
src/style.css
CHANGED
|
@@ -11,3 +11,17 @@
|
|
| 11 |
pointer-events: auto;
|
| 12 |
cursor: auto;
|
| 13 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 11 |
pointer-events: auto;
|
| 12 |
cursor: auto;
|
| 13 |
}
|
| 14 |
+
|
| 15 |
+
@keyframes animate-fade-in {
|
| 16 |
+
0% {
|
| 17 |
+
opacity: 0;
|
| 18 |
+
}
|
| 19 |
+
|
| 20 |
+
to {
|
| 21 |
+
opacity: 1;
|
| 22 |
+
}
|
| 23 |
+
}
|
| 24 |
+
|
| 25 |
+
.driver-fade .driver-stage {
|
| 26 |
+
animation: animate-fade-in 100ms ease-in-out;
|
| 27 |
+
}
|