Update syntax and Add visible

2020-07-22 19:31:19 +02:00
parent 3fc6ff1c78
commit 5b06ffd174
9 changed files with 282 additions and 102 deletions
--- a/test/is-visible.html
+++ b/test/is-visible.html
@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8"/>
+        <title>Test is-visible</title>
+        <script src="../dist/ffnm.min.js"></script>
+        <link href="https://unpkg.com/spectre.css/dist/spectre.min.css" rel="stylesheet"/>
+        <style>
+         .image-1 {
+             transition: 1s;
+             transform: translateY(-2rem);
+             opacity: 0;
+         }
+
+         .image-2 {
+             transform: scale(.5);
+             transition: 1s;
+             opacity: 0;
+         }
+
+         .show {
+             transform: scale(1) translateY(0);
+             opacity: 1;
+         }
+        </style>
+    </head>
+    <body>
+        <div class="hero hero-lg">
+            <div class="hero-body">
+                <h1 class="text-center">Please scroll down</h1>
+            </div>
+        </div>
+
+        <p class="text-center">
+            <img is-visible="class:add('show')" class="image-1" src="https://source.unsplash.com/random/500x300?cat" alt="Image 1">
+        </p>
+
+        <p class="text-center">
+            <img is-visible="class:add('show')" is-not-visible="class:remove('show')" class="image-2" src="https://source.unsplash.com/random/500x300?dog" alt="Image 2">
+        </p>
+
+        <p class="text-center">
+            <img is-visible="class:add('show')" is-not-visible="class:remove('show')" class="image-1" src="https://source.unsplash.com/random/500x300?koala" alt="Image 1">
+        </p>
+
+    </body>
+</html>