1.0.0-beta.2 release

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+# [1.0.0-beta.2](https://github.com/nolimits4web/atropos/compare/v1.0.0-beta.1...v1.0.0-beta.2) (2021-10-15)
+
+### Features
+
+- "always active" functionality, `stretchZ` and `commonOrigin` ([78c177c](https://github.com/nolimits4web/atropos/commit/78c177c054504b122116d317c4d7306ab7ce57ad))
+  - new `alwaysActive` parameter to keep Atropos "activated"/"entered" all the time
+  - new `stretchZ` parameter to set `translateZ` offset for multiple Atropos elements in same container (with same `eventsEl`)
+  - new `commonOrigin` parameter for multiple Atropos elements in same container (with same `eventsEl`)
+
 # [1.0.0-beta.1](https://github.com/nolimits4web/atropos/compare/v0.11.2...v1.0.0-beta.1) (2021-10-15)
 
 ### Features

package.json

@@ -1,6 +1,6 @@
 {
   "name": "atropos-src",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "description": "Touch-friendly 3D parallax hover effects",
   "scripts": {
     "/*============ Build ============*/": "============",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atropos",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "description": "Touch-friendly 3D parallax hover effects",
   "types": "atropos.d.ts",
   "type": "module",

playground/react/App.jsx

@@ -3,16 +3,34 @@ import Atropos from '../../build/react';
 
 const App = () => {
   return (
-    <div className="container">
-      <Atropos className="atropos-banner" highlight={false} onEnter={() => console.log('enter')}>
-        <img className="atropos-banner-spacer" src="./i/atropos-bg.svg" alt="" />
-        <img data-atropos-offset="-4.5" src="./i/atropos-bg.svg" alt="" />
-        <img data-atropos-offset="-2.5" src="./i/atropos-mountains.svg" alt="" />
-        <img data-atropos-offset="0" src="./i/atropos-forest-back.svg" alt="" />
-        <img data-atropos-offset="2" src="./i/atropos-forest-mid.svg" alt="" />
-        <img data-atropos-offset="4" src="./i/atropos-forest-front.svg" alt="" />
-        <img data-atropos-offset="5" src="./i/atropos-logo-en.svg" alt="" />
-      </Atropos>
+    <div className={`atropos-multiple`}>
+      {Array.from({ length: 9 }).map((_, index) => {
+        const row = Math.floor(index / 3);
+        const col = index - row * 3;
+        return (
+          <Atropos
+            // eslint-disable-next-line
+            key={index}
+            eventsEl=".atropos-multiple"
+            rotateTouch="scroll-y"
+            rotateXMax={10}
+            rotateYMax={10}
+            shadowOffset={100}
+            rotateXInvert={true}
+            rotateYInvert={true}
+            stretchX={20}
+            stretchY={30}
+            duration={400}
+            data-index={index}
+          >
+            <div
+              data-atropos-offset="8"
+              className="atropos-multiple-bg"
+              style={{ backgroundPosition: `${-col * 105}% ${-row * 105}%` }}
+            />
+          </Atropos>
+        );
+      })}
     </div>
   );
 };

playground/react/main.css

@@ -8,7 +8,8 @@ body {
   min-height: 100vh;
 }
 body {
-  background-image: linear-gradient(to bottom, #ad3ef5, #5814a2);
+  /* background-image: linear-gradient(to bottom, #ad3ef5, #5814a2); */
+  background: #444;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -69,3 +70,36 @@ body {
 }
 .atropos-active .atropos-banner-text {
 }
+
+.atropos-multiple {
+  --cell-width: 320px;
+  --cell-height: 200px;
+  --cell-gap: 16px;
+  width: calc(var(--cell-width) * 3 + var(--cell-gap) * 6);
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+  perspective: 1200px;
+}
+
+.atropos {
+  width: var(--cell-width);
+  height: var(--cell-height);
+  margin: var(--cell-gap);
+  perspective: none !important;
+  transform-style: preserve-3d !important;
+}
+.atropos-multiple-bg {
+  display: flex;
+  width: 120%;
+  height: 120%;
+  background-image: url(/i/justice-league.jpg);
+  background-size: 283% 333%;
+
+  position: absolute;
+  left: -10%;
+  top: -10%;
+}