moving-shadow 1.1.2 → 1.1.5

package/README.md

@@ -3,13 +3,15 @@
 
 A JavaScript module, which creates a responsive text shadow based on mouse position (desktop) or device orientation (mobile).
 
+As of iOS 12.2, Safari has disabled `window.getDeviceOrientation`. Until a fix is put in place, moving-shadow will not work on iOS devices.
+
 ## Examples
-* [Flat text with moving shadow](https://mister-blanket.github.io/moving-shadow/examples/shadow) - ([source](https://github.com/mister-blanket/moving-shadow/blob/master/examples/shadow.html))
-* [Fixed raised text with moving shadow](https://mister-blanket.github.io/moving-shadow/examples/shadow-raised) - ([source](https://github.com/mister-blanket/moving-shadow/blob/master/examples/shadow-raised.html))
-* [Moving perspective text and box](https://mister-blanket.github.io/moving-shadow/examples/perspective) - ([source](https://github.com/mister-blanket/moving-shadow/blob/master/examples/perspective.html))
-* [Moving perspective text with moving shadow](https://mister-blanket.github.io/moving-shadow/examples/perspective-shadow) - ([source](https://github.com/mister-blanket/moving-shadow/blob/master/examples/perspective-shadow.html))
-* [Moving perspective box with moving shadow](https://mister-blanket.github.io/moving-shadow/examples/perspective-shadow) - ([source](https://github.com/mister-blanket/moving-shadow/blob/master/examples/perspective-box-shadow.html))
-* [Drop shadow](https://mister-blanket.github.io/moving-shadow/examples/drop-shadow) - ([source](https://github.com/mister-blanket/moving-shadow/blob/master/examples/drop-shadow.html))
+* [Flat text with moving shadow](https://oh-kay-blanket.github.io/moving-shadow/examples/shadow) - ([source](https://github.com/oh-kay-blanket/moving-shadow/blob/master/examples/shadow.html))
+* [Fixed raised text with moving shadow](https://oh-kay-blanket.github.io/moving-shadow/examples/shadow-raised) - ([source](https://github.com/oh-kay-blanket/moving-shadow/blob/master/examples/shadow-raised.html))
+* [Moving perspective text and box](https://oh-kay-blanket.github.io/moving-shadow/examples/perspective) - ([source](https://github.com/oh-kay-blanket/moving-shadow/blob/master/examples/perspective.html))
+* [Moving perspective text with moving shadow](https://oh-kay-blanket.github.io/moving-shadow/examples/perspective-shadow) - ([source](https://github.com/oh-kay-blanket/moving-shadow/blob/master/examples/perspective-shadow.html))
+* [Moving perspective box with moving shadow](https://oh-kay-blanket.github.io/moving-shadow/examples/perspective-box-shadow) - ([source](https://github.com/oh-kay-blanket/moving-shadow/blob/master/examples/perspective-box-shadow.html))
+* [Drop shadow](https://oh-kay-blanket.github.io/moving-shadow/examples/drop-shadow) - ([source](https://github.com/oh-kay-blanket/moving-shadow/blob/master/examples/drop-shadow.html))
 
 
 ## Quick Start
@@ -28,9 +30,11 @@ const settings = {
   shadowType:   "shadow",    // "shadow", "perspective","perspective-shadow", "dropShadow"
   selector:     "h1, h2",    // tag, class, or id to apply shadow to
   angle:        20,          // height of view source. Should be between 10 - 100
+  relativeAngle:false,       // false. desktop only, allows for each element to move relative to the mouse
   diffusion:    0,           // blur-radius
   color:        "#333333CC", // shadow-color or perspective color
-  color2:        "#333333CC", // shadow-color (for perspective shadow only)
+  altColor:     "#333333CC", // shadow-color (perspective-shadow only)
+  shineColor:   "#fff3",     // reflected light (perspective-shadow only)
   fixedShadow:  null,        // "5px 5px #555" to include an optional fixed shadow
   xOffset:      0,           // X offset value, set to max fixedShadow x offset
   yOffset:      0            // Y offset value, set to max fixedShadow y offset

package/examples/{shadow-raised-two.html → perspective-box-shadow.html}

@@ -4,17 +4,17 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:display=swap" rel="stylesheet">
   <!-- <script src="../movingShadow.js"></script> -->
    <script src="https://unpkg.com/moving-shadow"></script>
   <title>Shadow Example | Moving Shadow</title>
 </head>
 <body>
   <div class="container">
-    <h1>vinyl bar</h1>
+    <h1>wapor vave</h1>
     <div class="in-out">
-      <h4>out</h4>
-      <h4>in</h4>
+      <button>exit</button>
+      <button>enter</button>
     </div>
   </div>
 </body>
@@ -35,8 +35,8 @@ html, body {
   justify-content: center;
   align-items: center;
   height: 100%;
-  background-color: #b89714;
-  color: #e6e1cb;
+  background-color: #222;
+  color: #222;
   font-size: 4rem;
 }
 
@@ -60,39 +60,40 @@ h1 {
   display: flex;
   justify-content: space-around;
   align-items: center;
-  width: 80%;
+  width: 60%;
+}
+@min(width: 768px) {
+  .in-out {
+    width: 30%;
+  }
 }
 
-.in-out h4 {
-  opacity: 1;
-  transition: color 0.35s;
+button {
+  background-color: #222;
+  color: #44f;
+  transition: color .35s;
+  border: none;
+  border-radius: 10px;
+  padding: 12px;
+  font-size: 1.2rem;
 }
 
-.in-out h4:hover {
-  color: #b89714;
-  transition: color 0.35s;
-  cursor: pointer;
+button:hover {
+  color: #f2c;
+  transition: color .35s;
 }
 
 </style>
 
 <script>
-const fixedColor = "#665200";
 const settings = {
-  selector: "h1, h4", // targets class or id
-  color: "#997a00", // shadow-color
-  xOffset: 8, // X offset value
-  yOffset: 8, // Y offset value
-  fixedShadow: `
-    0px 0px ${fixedColor},
-    1px 1px ${fixedColor},
-    2px 2px ${fixedColor},
-    3px 3px ${fixedColor},
-    4px 4px ${fixedColor},
-    5px 5px ${fixedColor},
-    6px 6px ${fixedColor},
-    7px 7px ${fixedColor},
-    8px 8px ${fixedColor}`// "5px 5px #555" if you want to includ an optional fixed shadow
+  selector: "h1, button", // targets class or id
+  shadowType: "perspective-shadow",
+  angle: 80,
+  color: "#f22", // shadow
+  altColor: "#0003", // shadow
+  shineColor:   "#44f",
+  fixedShadow: `0px 0px 10px #44fc`
 }
 
 movingShadow(settings);

package/examples/perspective-shadow.html

@@ -59,10 +59,10 @@ p {
 const settings = {
   selector: "h1, h3", // targets class or id
   shadowType: "perspective-shadow", // "shadow", "dropShadow", "perspective"
-  angle: 36, // Sets height of light source. Should be > 10 && < 100. Default 20.
+  angle: 60, // Sets height of light source. Should be > 10 && < 100. Default 20.
   diffusion: 0, // blur-radius
   color: "white", // shadow-color
-  color2: "#f1bf8e",
+  altColor: "#eeb377",
 }
 
 movingShadow(settings);

package/examples/perspective.html

@@ -109,7 +109,7 @@ const settings = [
     shadowType: "perspective",
     angle: 80,
     color: fixedColor, // shadow-color
-    color2: `${fixedColor}22`, // shadow-color
+    altColor: `${fixedColor}22`, // shadow-color
   },
 ]
 

package/movingShadow.js

@@ -66,10 +66,10 @@
     }
   };
 
-  const getElePos = element => {
+  const getElePos = (element, relativeAngle) => {
 
     // Use same shadow for mobile
-    if (event.type === 'deviceorientation') {
+    if (event.type === 'deviceorientation' || !relativeAngle) {
       // Get device window specs
       const rect = {
         centerX: Math.round(window.innerWidth/2),
@@ -87,12 +87,12 @@
     }
   };
 
-  const calculateDistance = (element, viewPos, { angle=20 } = {}) => {
+  const calculateDistance = (element, viewPos, { angle=20, relativeAngle=false } = {}) => {
 
     let distance = {};
 
     // Get element position
-    const elePos = getElePos(element);
+    const elePos = getElePos(element, relativeAngle);
 
     // Find difference between view position & element
     distance.x = Math.round(viewPos.x - elePos.centerX)/angle;
@@ -121,7 +121,8 @@
       angle = 20,
       diffusion = 0,
       color = "#333c",
-      color2 = "#33333311",
+      altColor = "#333c",
+      shineColor = "#fff3",
       fixedShadow,
       xOffset = 0,
       yOffset = 0
@@ -146,7 +147,7 @@
     if (shadowType === "shadow") {
 
       // Build stacked shadow until farthestPoint
-      for (let i = 1; i < farthestPoint; i+=jumpAmount) {
+      for (let i = 1; i < farthestPoint; i+=1) {
         shadowArr.push(`
         ${i/farthestPoint*(-distance.x)+xOffset}px
         ${i/farthestPoint*(-distance.y)+yOffset}px
@@ -159,36 +160,33 @@
     } else if (shadowType === "perspective-shadow") {
 
       // Perspective
-      for (let i = 1; i < farthestPoint; i+=jumpAmount) {
+      for (let i = 1; i < farthestPoint; i+=1) {
         shadowArr.push(`
         ${i/farthestPoint*(distance.x)+xOffset}px
         ${i/farthestPoint*(distance.y)+yOffset}px
-        ${diffusion}px
         ${color}
       `);
       }
 
       // Normal shadow
-      for (let i = 1; i < farthestPoint; i+=jumpAmount) {
+      for (let i = 1; i < (farthestPoint/1.5); i+=1) {
         shadowArr.push(`
-        ${i/farthestPoint*(-distance.x*1)+xOffset}px
-        ${i/farthestPoint*(-distance.y*1)+yOffset}px
-        0px
-        ${color2}
+        ${i/(farthestPoint/1.5)*(-distance.x*1)+xOffset}px
+        ${i/(farthestPoint/1.5)*(-distance.y*1)+yOffset}px
+        ${diffusion}px
+        ${altColor}
       `);
       }
 
 
 
       // Reflecting light
-      for (let i = 1; i < farthestPoint; i+=4) {
-        shadowArr.push(`
-        ${i/farthestPoint*(distance.x*2)+xOffset}px
-        ${i/farthestPoint*(distance.y*2)+yOffset}px
-        10px
-        #fff2
-      `);
-      }
+      shadowArr.push(`
+      ${(distance.x)+xOffset}px
+      ${(distance.y)+yOffset}px
+      3px
+      ${shineColor}
+    `);
 
       // Shift element
       element.style.left = `${(-distance.x)+xOffset}px`;
@@ -202,7 +200,6 @@
         shadowArr.push(`
         ${i/farthestPoint*(distance.x)+xOffset}px
         ${i/farthestPoint*(distance.y)+yOffset}px
-        ${diffusion}px
         ${color}
       `);
       }
@@ -242,7 +239,7 @@
     // Function to parse settings and apply default values
     const processSettings = (settings) => {
       // Default settings if no params passed
-      settings = settings ? settings : {selector:"h1,h2", shadowType:"shadow", inset:false};
+      settings = settings ? settings : {selector:"h1,h2", shadowType:"shadow", inset: false};
       settings.selector = settings.selector ? settings.selector : "h1,h2";
       settings.shadowType = settings.shadowType ? settings.shadowType : "shadow";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "moving-shadow",
-  "version": "1.1.2",
+  "version": "1.1.5",
   "description": "A JavaScript module, which creates a responsive text shadow based on mouse position (desktop) or device orientation (mobile)",
   "main": "movingShadow.js",
   "directories": {
@@ -12,7 +12,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/mister-blanket/moving-shadow.git"
+    "url": "git+https://github.com/oh-kay-blanket/moving-shadow.git"
   },
   "keywords": [
     "text-shadow",
@@ -27,7 +27,7 @@
   "author": "gaijinbrandybuck",
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/mister-blanket/moving-shadow/issues"
+    "url": "https://github.com/oh-kay-blanket/moving-shadow/issues"
   },
-  "homepage": "https://github.com/mister-blanket/moving-shadow#readme"
+  "homepage": "https://github.com/oh-kay-blanket/moving-shadow#readme"
 }

package/src/calculateDistance.js

@@ -1,11 +1,11 @@
 import getElePos from "./getElePos";
 
-const calculateDistance = (element, viewPos, { angle=20 } = {}) => {
+const calculateDistance = (element, viewPos, { angle=20, relativeAngle=false } = {}) => {
 
   let distance = {};
 
   // Get element position
-  const elePos = getElePos(element);
+  const elePos = getElePos(element, relativeAngle);
 
   // Find difference between view position & element
   distance.x = Math.round(viewPos.x - elePos.centerX)/angle;

package/src/getElePos.js

@@ -1,7 +1,7 @@
-const getElePos = element => {
+const getElePos = (element, relativeAngle) => {
 
   // Use same shadow for mobile
-  if (event.type === 'deviceorientation') {
+  if (event.type === 'deviceorientation' || !relativeAngle) {
     // Get device window specs
     const rect = {
       centerX: Math.round(window.innerWidth/2),

package/src/main.js

@@ -9,7 +9,7 @@ const movingShadow = settings => {
   // Function to parse settings and apply default values
   const processSettings = (settings) => {
     // Default settings if no params passed
-    settings = settings ? settings : {selector:"h1,h2", shadowType:"shadow", inset:false};
+    settings = settings ? settings : {selector:"h1,h2", shadowType:"shadow", inset: false};
     settings.selector = settings.selector ? settings.selector : "h1,h2";
     settings.shadowType = settings.shadowType ? settings.shadowType : "shadow";
 

package/src/makeShadow.js

@@ -4,7 +4,8 @@ const makeShadow = (element, distance, {
     angle = 20,
     diffusion = 0,
     color = "#333c",
-    color2 = "#33333311",
+    altColor = "#333c",
+    shineColor = "#fff3",
     fixedShadow,
     xOffset = 0,
     yOffset = 0
@@ -29,7 +30,7 @@ const makeShadow = (element, distance, {
   if (shadowType === "shadow") {
 
     // Build stacked shadow until farthestPoint
-    for (let i = 1; i < farthestPoint; i+=jumpAmount) {
+    for (let i = 1; i < farthestPoint; i+=1) {
       shadowArr.push(`
         ${i/farthestPoint*(-distance.x)+xOffset}px
         ${i/farthestPoint*(-distance.y)+yOffset}px
@@ -42,36 +43,33 @@ const makeShadow = (element, distance, {
   } else if (shadowType === "perspective-shadow") {
 
     // Perspective
-    for (let i = 1; i < farthestPoint; i+=jumpAmount) {
+    for (let i = 1; i < farthestPoint; i+=1) {
       shadowArr.push(`
         ${i/farthestPoint*(distance.x)+xOffset}px
         ${i/farthestPoint*(distance.y)+yOffset}px
-        ${diffusion}px
         ${color}
       `);
     }
 
     // Normal shadow
-    for (let i = 1; i < farthestPoint; i+=jumpAmount) {
+    for (let i = 1; i < (farthestPoint/1.5); i+=1) {
       shadowArr.push(`
-        ${i/farthestPoint*(-distance.x*1)+xOffset}px
-        ${i/farthestPoint*(-distance.y*1)+yOffset}px
-        0px
-        ${color2}
+        ${i/(farthestPoint/1.5)*(-distance.x*1)+xOffset}px
+        ${i/(farthestPoint/1.5)*(-distance.y*1)+yOffset}px
+        ${diffusion}px
+        ${altColor}
       `);
     }
 
 
 
     // Reflecting light
-    for (let i = 1; i < farthestPoint; i+=4) {
-      shadowArr.push(`
-        ${i/farthestPoint*(distance.x*2)+xOffset}px
-        ${i/farthestPoint*(distance.y*2)+yOffset}px
-        10px
-        #fff2
-      `);
-    }
+    shadowArr.push(`
+      ${(distance.x)+xOffset}px
+      ${(distance.y)+yOffset}px
+      3px
+      ${shineColor}
+    `);
 
     // Shift element
     element.style.left = `${(-distance.x)+xOffset}px`;
@@ -85,7 +83,6 @@ const makeShadow = (element, distance, {
       shadowArr.push(`
         ${i/farthestPoint*(distance.x)+xOffset}px
         ${i/farthestPoint*(distance.y)+yOffset}px
-        ${diffusion}px
         ${color}
       `);
     }

package/examples/shadow-two.html

@@ -1,73 +0,0 @@
-<!DOCTYPE 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">
-  <!-- <script src="../movingShadow.js"></script> -->
-   <script src="https://unpkg.com/moving-shadow"></script>
-  <title>Shadow Example | Moving Shadow</title>
-</head>
-<body>
-  <div class="container"></div>
-</body>
-</html>
-
-<style>
-html, body {
-  margin: 0;
-  overflow-x: hidden;
-  overflow-y: hidden;
-  height: 100vh;
-}
-
-.container {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: center;
-  height: 100%;
-  background-color: #f8f8f8;
-  color: #222;
-  font-size: 2rem;
-}
-
-@media (max-width: 600px) {
-  .container {
-    font-size: 1rem;
-  }
-}
-
-.container > div {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  width: 100%;
-}
-</style>
-
-<script>
-
-const text = "One ring to rule them all, One ring to find them, One ring to bring them all, And in the darkness bind them."
-const textBreaks = text.split(',');
-let fullHTML = [];
-textBreaks.forEach(line => {
-  let elements = [];
-  elements.push("<div>");
-  const words = line.split(" ");
-  words.forEach(word => {
-    elements.push(`<h4>${word}</h4>`);
-  })
-  elements.push("</div>");
-  fullHTML.push(elements.join(""));
-})
-
-document.querySelector(".container").insertAdjacentHTML('afterbegin', fullHTML.join(""));
-
-const settings = {
-  selector: "h4",
-  color: "#790606", // shadow-color
-}
-
-movingShadow(settings);
-</script>