basic acceleration for mobile, doesn't work everywhere yet sadly

Author: goldst

blocks/card/card--projects__background/card--projects__background.css

@@ -31,7 +31,11 @@
 
 @media screen and (orientation: portrait) {
     .card--projects__background {
-        --_pos: 0 0;
+        --_projects--orientation-a: calc(var(--projects--orientation-a, 0) * 50px);
+        --_projects--orientation-b: calc(var(--projects--orientation-b, 0) * 50px);
+        --_projects--orientation-c: calc(var(--projects--orientation-c, 0) * 50px);
+
+        --_pos: var(--_projects--orientation-a) var(--_projects--orientation-b);
     }
 }
 

blocks/projects/projects.js

@@ -1,25 +1,22 @@
-/*import TransformationController
-    from '../../js/transformation/TransformationController.js';
-import TF
-    from '../../js/transformation/TransformationFunctions.js';
-import LA from '../../js/math/LinearAlgebra.js';*/
-
 export default () => {
     //mousemoveTransformations();
-    startScrollPositionUpdater();
+    startPositionUpdater();
 };
 
 /**
  * @todo i don't know what is happening here. Check it and update
  *   documentation. The whole file is a big mess.
  * @returns {void}
  */
-function startScrollPositionUpdater() {
+function startPositionUpdater() {
     document.querySelector('.projects__inner')
         .addEventListener("scroll", onScroll);
 
     document.querySelector('.projects')
         .addEventListener("scroll", onScroll);
+    
+    window
+        .addEventListener('devicemotion', onOrientationChange, true);
 }
 
 /**
@@ -32,58 +29,17 @@ function onScroll(e) {
     document.querySelector('.projects').style
         .setProperty('--projects--scroll-top', e.target.scrollTop + 'px');
 }
-/*
-function mousemoveTransformations() {
-    const tc = new TransformationController(
-        document.querySelector('.projects__inner')
-    );
-
-    tc.mousemoveEventTransform(
-        combined3dRot,
-        '.project-card__inner',
-        setParentBackground
-    );
-}
 
-function combined3dRot(absoluteOrigin, mousePosition) {
-    const rotAxis = LA.vector(absoluteOrigin, mousePosition),
-        rotation = TF.advBellCurve(
-                absoluteOrigin, mousePosition, 0, 1, 2
-            ) - 1,
+function onOrientationChange(e) {
+    const
+        a = 1 * e.accelerationIncludingGravity.x,
+        b = 1 * e.accelerationIncludingGravity.y,
+        c = 1 * e.accelerationIncludingGravity.z;
 
-        invRotAxis = [
-            rotAxis[1],
-            -rotAxis[0]
-        ];
-
-    return `perspective(2000px) ` +
-           `translateX(calc(0.5 * var(--h) - 0.5 * var(--w))) ` +
-           `translateY(calc(0.5 * var(--w) - 0.5 * var(--h))) ` +
-           `rotate(90deg) ` +
-           `rotate3d(${invRotAxis[0]}, ` +
-           `${invRotAxis[1]}, 0, ${rotation}rad) ` +
-           `scale(${TF
-               .advBellCurve(absoluteOrigin, mousePosition,
-                   0.9, 1, 2)}) ` +
-           'translateZ(0) ';
-}
-
-function setParentBackground(event, element) {
-    const parent = element.domElement.parentElement,
-        background = element.surroundingBackground(
-            'var(--c0)',
-            [
-                parent.offsetWidth,
-                parent.offsetHeight
-            ],
-            'transparent',
-            5
-        );
-    parent.style.setProperty(
-        'background',
-        background +
-        ', 0 var(--projects--scroll-top, 0) ' +
-        'repeating-linear-gradient(45deg, var(--c1) 0px, ' +
-        'var(--c0) 40px, var(--c1) 80px)');
+    document.querySelector('.projects').style
+        .setProperty('--projects--orientation-a', a);
+    document.querySelector('.projects').style
+        .setProperty('--projects--orientation-b', -b);
+    document.querySelector('.projects').style
+        .setProperty('--projects--orientation-c', c);
 }
-*/