add animation

ubc-library-rc · Aug 20, 2024 · ca354d7 · ca354d7
1 parent 055c51d
commit ca354d7
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/slides/highlight.js b/slides/highlight.js
@@ -1,9 +1,17 @@
 document.addEventListener('DOMContentLoaded', function() {
     Reveal.on('slidechanged', function(event) {
-        if (event.indexh === YOUR_SLIDE_INDEX) {
-            document.getElementById('highlight-square').classList.add('active');
-        } else {
-            document.getElementById('highlight-square').classList.remove('active');
+        const square1 = document.getElementById('highlight-square-1');
+        const square2 = document.getElementById('highlight-square-2');
+
+        // Clear all highlights
+        square1.classList.remove('show');
+        square2.classList.remove('show');
+
+        // Highlight based on slide index
+        if (event.indexh === 0) { // Example: Highlight first square on the first slide
+            square1.classList.add('show');
+        } else if (event.indexh === 1) { // Example: Highlight second square on the second slide
+            square2.classList.add('show');
         }
     });
 });
diff --git a/slides/introduction.html b/slides/introduction.html
@@ -2,6 +2,7 @@
 <html lang="en">
 
 <head>
+  <script src="highlight.js"></script>
   <style>
 	.highlight {
 		position: absolute;
@@ -24,7 +25,7 @@
 	/* Add more highlight styles as needed */
   </style>
 
-  <script src="highlight.js"></script>
+
 
   <meta charset="utf-8">
 
@@ -219,8 +220,8 @@ <h3>Architecture of a typical LLM</h3>
 			<div class="container">
 				<div class="container">
 					<img height="500px" src="llm_architecture.jpeg" alt="LLM Architecture">
-					<div class="highlight highlight-1"></div>
-					<div class="highlight highlight-2"></div>
+					<div id="highlight-square-1" class="highlight highlight-1"></div>
+					<div id="highlight-square-1" class="highlight highlight-2"></div>
 					<!-- Add more highlight divs as needed -->
 				  </div>
 				  <p style="color:blue;font-size:11px;">From https://magazine.sebastianraschka.com/p/understanding-encoder-and-decoder</p>