add folder for assets used by example page

Recidvst · Oct 17, 2023 · 5dc72d0 · 5dc72d0
1 parent dcdea6f
commit 5dc72d0
Show file tree

Hide file tree

Showing 10 changed files with 526 additions and 59 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,41 +1,31 @@
 {
   "presets": [
-      [
+    [
       "@babel/preset-env",
-        {
-          "targets": {
-            "node": "current",
-            "browsers": [
-              "last 5 versions",
-              "not ie <= 8"
-            ]
-          },
-          "modules": false
-        }
-      ]
-  ],
-  "plugins": [
-    "add-module-exports"
+      {
+        "targets": {
+          "node": "current",
+          "browsers": ["last 5 versions", "not ie <= 8"]
+        },
+        "modules": false
+      }
+    ]
   ],
+  "plugins": ["add-module-exports"],
   "env": {
     "test": {
       "presets": [
-          [
+        [
           "@babel/preset-env",
-            {
-              "targets": {
-                "node": "current",
-                "browsers": [
-                  "last 5 versions",
-                  "not ie <= 8"
-                ]
-              }
+          {
+            "targets": {
+              "node": "current",
+              "browsers": ["last 5 versions", "not ie <= 8"]
             }
-          ]
+          }
+        ]
       ],
-      "plugins": [
-        "add-module-exports"
-      ]
+      "plugins": ["add-module-exports"]
     }
   }
-}
+}
diff --git a/README.md b/README.md
@@ -18,29 +18,37 @@ A lightweight javascript library that lets you 'scrub' transition between two im
 ### Install
 
 #### JS
+
 Either import the JS as a module:
+
 ```bash
 npm install scrub-slider
 ```
+
 ```js
 import Scrub from "scrub-slider";
 ```
 
 Or consume the module as UMD/IIFE
+
 ```html
 <script src="dist/scrub.iife.js"></script>
 ```
 
 #### CS
+
 Either import the CSS into your JS/CSS:
+
 ```js
-import 'scrub-slider/dist/css/scrub.css';
+import "scrub-slider/dist/css/scrub.css";
 ```
+
 ```scss
-@import 'scrub-slider/dist/css/scrub.css';
+@import "scrub-slider/dist/css/scrub.css";
 ```
 
 Or include it the old fashioned way:
+
 ```html
 <link href="dist/css/scrub.css" rel="stylesheet" />
 ```

diff --git a/example/css/example.css b/example/css/example.css
@@ -0,0 +1,117 @@
+* {
+  box-sizing: border-box;
+  font-family: Montserrat, monospace;
+}
+* li,
+* p {
+  font-family: sans-serif;
+}
+* a {
+  font-weight: 700;
+  color: #c71585;
+}
+* a:hover {
+  color: #ba55d3;
+}
+* .violet {
+  color: #c71585;
+}
+* .text-center {
+  text-align: center;
+}
+h1 {
+  color: #cd5c5c;
+  font-size: 4rem;
+}
+h2 {
+  color: #cd5c5c;
+  font-size: 3rem;
+}
+h3 {
+  font-size: 2rem;
+}
+[class*="example-slider"] {
+  display: block;
+  border: 5px solid #000;
+}
+.example-slider-50 {
+  width: 50%;
+  margin: 30px auto;
+}
+.example-slider-75 {
+  width: 75%;
+  margin: 30px auto;
+}
+.example-slider-full {
+  margin: 30px auto;
+}
+@media (max-width: 797px) {
+  .example-slider-50,
+  .example-slider-75 {
+    width: 100%;
+  }
+}
+section {
+  margin-bottom: 30px;
+  margin-top: 30px;
+}
+.why-scrub p {
+  font-size: 1.5rem;
+  font-family: "Ubuntu Mono", monospace;
+  padding: 10px;
+  font-weight: 700;
+}
+.how-to .options h4 {
+  color: #cd5c5c;
+  margin-bottom: 10px;
+}
+.how-to .options li {
+  text-align: left;
+}
+pre {
+  display: block;
+  background: #000;
+  color: #ba55d3;
+  line-height: 1.5;
+  padding: 10px;
+  overflow: scroll;
+}
+pre span {
+  color: #c71585;
+}
+.btn {
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  padding: 15px 30px;
+  margin: 10px;
+  border: 3px solid #cd5c5c;
+  color: #cd5c5c;
+  font-size: 1.5rem;
+  font-family: sans-serif;
+  text-decoration: none;
+  transition: all 0.2s ease-in-out;
+}
+.btn:after {
+  content: "";
+  position: absolute;
+  height: 0%;
+  left: 50%;
+  top: 50%;
+  width: 150%;
+  z-index: -1;
+  transition: all 0.75s ease 0s;
+  transform: translateX(-50%) translateY(-50%) rotate(25deg);
+  background: #cd5c5c;
+}
+.btn:hover {
+  color: #fff;
+}
+.btn:hover:after {
+  height: 450%;
+}
+@media (max-width: 797px) {
+  .btn {
+    width: 100%;
+  }
+}
diff --git a/example/css/scrub.css b/example/css/scrub.css
@@ -0,0 +1,78 @@
+.scrub-slider {
+  position: relative;
+  max-width: 100%;
+  max-height: 100vw;
+  height: 500px;
+  overflow: hidden;
+}
+.scrub-slider:hover {
+  cursor: pointer;
+}
+.scrub-slider .scrub-content {
+  display: block;
+  position: absolute;
+  top: 0;
+  overflow: hidden;
+  height: 100%;
+  width: 100vw;
+}
+.scrub-slider .scrub-content.scrub-left {
+  left: 0;
+}
+.scrub-slider .scrub-content.scrub-left > div {
+  left: 0;
+}
+.scrub-slider .scrub-content.scrub-right {
+  right: 0;
+}
+.scrub-slider .scrub-content.scrub-right > div {
+  right: 0;
+}
+.scrub-slider .scrub-content > div {
+  position: absolute;
+  height: 100%;
+  width: 100vw;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+.scrub-slider .sliding {
+  position: absolute;
+  left: 50%;
+  height: 100%;
+  width: 3px;
+  z-index: 2;
+  background: white;
+}
+.scrub-slider .sliding.handleOn:before {
+  content: "";
+  width: 40px;
+  padding-bottom: 40px;
+  position: absolute;
+  display: block;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border: 3px solid #fff;
+  border-radius: 100%;
+  box-shadow: 0 0 2px 1px #000;
+  z-index: 2;
+}
+.scrub-slider .sliding.handleOn span[class*="sliding-"] {
+  width: 0;
+  height: 0;
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  position: absolute;
+  top: 50%;
+}
+.scrub-slider .sliding.handleOn span[class*="sliding-"][class*="left"] {
+  left: 50%;
+  transform: translate(-150%, -50%);
+  border-right: 10px solid #000;
+}
+.scrub-slider .sliding.handleOn span[class*="sliding-"][class*="right"] {
+  right: 50%;
+  transform: translate(140%, -50%);
+  border-left: 10px solid #000;
+}
diff --git a/example/example.js b/example/example.js
@@ -0,0 +1,26 @@
+// import Scrub from "../../dist/scrub.esm";
+
+// setting height for hero example.
+var a = document.getElementById("slider1");
+if (a.offsetTop < window.innerHeight) {
+  var b = window.innerHeight - a.offsetTop + "px";
+}
+
+// different methods of initiating a slider
+Scrub({
+  target: "#slider1",
+  height: b,
+  handle: true,
+  src: [
+    "https://raw.github.com/Recidvst/recidvst-images/master/mustang-old-min.jpg",
+    "https://raw.github.com/Recidvst/recidvst-images/master/mustang-old-inverted-min.jpg",
+  ],
+  alt: ["Image number 1 alt", "Image number 2 alt"],
+});
+Scrub("#slider2");
+Scrub({
+  target: ".slider3",
+  height: "800px",
+});
+
+// Scrub('nonexistent');