docs: start scroll effects example doc

Author: jscottsmith

documentation/docs/examples/advanced-banners.mdx

@@ -1,7 +1,7 @@
 ---
 hide_title: true
 title: Advanced Banners
-sidebar_position: 3
+sidebar_position: 4
 ---
 
 import { AdvancedBannerTop } from '/src/components/advanced-banner-top';

documentation/docs/examples/banners.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 2
+sidebar_position: 3
 ---
 
 import { ParallaxBannerImages } from '/src/components/parallax-banner-images';

documentation/docs/examples/easing.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 4
+sidebar_position: 5
 ---
 
 import { EasingDemo } from '/src/components/easing-demo';

documentation/docs/examples/scroll-effects.mdx

@@ -0,0 +1,59 @@
+---
+sidebar_position: 2
+---
+
+import { ExampleRotation } from '/src/components/example-rotation';
+import { RotationAxis } from '/src/components/rotation-axis';
+
+# Scroll Effects
+
+More than just translate effects are possible. Here's some examples of the various effects possible.
+
+## Rotation
+
+You can spin an element around it's axis using the [rotate props](/docs/usage/parallax-props#available-css-effects).
+
+### Around the default axis (z-axis)
+
+Use the `rotate` prop to rotate an element around the z-axis. You can pass the `start` and `end` values as `deg` or `turns`. Numbers default to `deg`.
+
+```tsx
+const Component = () => {
+  const parallax = useParallax<HTMLDivElement>({
+    rotate: [0, 360],
+  });
+  return (
+    <div ref={parallax.ref} className="spinner">
+      😵‍💫
+      <div className="diamond">💎</div>
+      <div className="clown">🤡</div>
+      <div className="money">💰</div>
+      <div className="hand">👌🏻</div>
+    </div>
+  );
+};
+```
+
+<ExampleRotation />
+
+### Around the y-axis
+
+Rotations can be applied to any axis, `x`, `y`, or `z`. Here's an example of a rotation around the `y-axis` for perspective:
+
+```tsx
+const Component = () => {
+  const parallax = useParallax<HTMLDivElement>({
+    rotateY: [0, 360],
+  });
+  return (
+    <div ref={parallax.ref} className="spinner">
+      <div className="thumbsup">👍🏻</div>
+      <div className="clap">👏🏻</div>
+      <div className="handsup">🙌🏻</div>
+      <div className="thumbsdown">👎🏻</div>
+    </div>
+  );
+};
+```
+
+<RotationAxis />

documentation/src/components/bg-container/index.tsx

@@ -5,7 +5,11 @@ export const BgContainer = (props: PropsWithChildren<{}>) => {
   return (
     <div className="relative my-2xl bg-gray-900 px-lg py-96 w-full rounded-md px-bg text-black overflow-hidden">
       {/* <div className="h-screen" /> */}
-      <div className="flex flex-row items-center justify-evenly w-full">
+
+      <div
+        className="flex flex-row items-center justify-evenly w-full"
+        style={{ perspective: '250px' }}
+      >
         {props.children}
       </div>
       {/* <div className="h-screen" /> */}

documentation/src/components/example-rotation/index.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import cx from 'classnames';
+import { useParallax } from 'react-scroll-parallax';
+import { BgContainer } from '../bg-container';
+
+const shared =
+  'absolute bg-blue-100 border-2 border-blue-500 border-solid rounded-lg h-14 w-14 flex items-center justify-center';
+
+export const ExampleRotation = () => {
+  const parallax = useParallax<HTMLDivElement>({
+    rotate: [0, 360],
+    shouldAlwaysCompleteAnimation: true,
+  });
+  return (
+    <BgContainer>
+      <div
+        ref={parallax.ref}
+        className="relative border-4 border-red-200 border-solid h-48 md:h-96 w-48 md:w-96 rounded-full flex items-center justify-center text-4xl"
+      >
+        😵‍💫
+        <div
+          className={cx(
+            shared,
+            'top-0 left-1/2 -translate-y-1/2 -translate-x-1/2'
+          )}
+        >
+          💎
+        </div>
+        <div
+          className={cx(
+            shared,
+            'right-0 top-1/2 -translate-y-1/2 translate-x-1/2'
+          )}
+        >
+          🤡
+        </div>
+        <div
+          className={cx(
+            shared,
+            'bottom-0 left-1/2 translate-y-1/2 -translate-x-1/2'
+          )}
+        >
+          💰
+        </div>
+        <div
+          className={cx(
+            shared,
+            'top-1/2 left-0 -translate-y-1/2 -translate-x-1/2'
+          )}
+        >
+          👌🏻
+        </div>
+      </div>
+    </BgContainer>
+  );
+};

documentation/src/components/rotation-axis/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import cx from 'classnames';
+import { useParallax } from 'react-scroll-parallax';
+import { BgContainer } from '../bg-container';
+
+const shared =
+  'bg-blue-100 border-2 border-blue-500 border-solid rounded-lg h-14 w-14 flex items-center justify-center';
+
+export const RotationAxis = () => {
+  const parallax = useParallax<HTMLDivElement>({
+    rotateY: [0, 360],
+    shouldAlwaysCompleteAnimation: true,
+  });
+  return (
+    <BgContainer>
+      <div
+        ref={parallax.ref}
+        className="flex items-center gap-sm md:gap-lg justify-center text-4xl"
+      >
+        <div className={cx(shared)}>👍🏻</div>
+        <div className={cx(shared)}>👏🏻</div>
+        <div className={cx(shared)}>🙌🏻</div>
+        <div className={cx(shared)}>👎🏻</div>
+      </div>
+    </BgContainer>
+  );
+};