add advanced usage

Author: jscottsmith

documentation/docs/usage/advanced.md

@@ -2,4 +2,48 @@
 sidebar_position: 2
 ---
 
-# Advanced
+# Advanced Usage
+
+There are a few ways to change how the scroll progress of an element is calculated.
+
+## Setting Scroll Top Values
+
+You can set `startScroll` and `startScroll` representing the `scrollTop` values to animate between.
+
+```ts
+const props = { startScroll: 0, endScroll: 1000 };
+
+controller.createElement({
+  elOuter: document.getElementById('outer'),
+  elInner: document.getElementById('inner'),
+  props,
+});
+```
+
+## Using a Target Element
+
+A different element can also be used to track scroll progress. Assign a `targetElement` when creating a new parallax element.
+
+```ts
+const props = { targetElement: document.getElementById('target') };
+
+controller.createElement({
+  elOuter: document.getElementById('outer'),
+  elInner: document.getElementById('inner'),
+  props,
+});
+```
+
+## Increase Scroll Bounds
+
+You can add a `rootMargin` that will adjust the bounds that determine when an element is in view.
+
+```ts
+const props = { rootMargin: { top: 100, right: 100, bottom: 100, left: 100 } };
+
+controller.createElement({
+  elOuter: document.getElementById('outer'),
+  elInner: document.getElementById('inner'),
+  props,
+});
+```

documentation/docs/usage/basic-usage.md

@@ -10,7 +10,7 @@ Create the parallax controller first:
 const controller = ParallaxController.init();
 ```
 
-Then create an element with animation effects as props:
+Then create an element with [animation effects](./props) as props:
 
 ```ts
 controller.createElement({

documentation/docs/usage/props.md

@@ -1,3 +1,7 @@
+---
+sidebar_position: 3
+---
+
 # Props
 
 All available options for scroll effect animation configurations of a parallax element are defined in the `props` option.

documentation/src/css/custom.css

@@ -6,12 +6,12 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #4d58f1;
-  --ifm-color-primary-dark: #404ada;
-  --ifm-color-primary-darker: #363fbe;
+  --ifm-color-primary: #6c75fa;
+  --ifm-color-primary-dark: #5f68e9;
+  --ifm-color-primary-darker: #414aca;
   --ifm-color-primary-darkest: #2d338a;
-  --ifm-color-primary-light: #5b66f5;
-  --ifm-color-primary-lighter: #717af1;
+  --ifm-color-primary-light: #737cf8;
+  --ifm-color-primary-lighter: #8b92f7;
   --ifm-color-primary-lightest: #969df5;
   --ifm-code-font-size: 95%;
 }