feat: add parallax

Author: Blackman99

.changeset/poor-geese-mix.md

@@ -0,0 +1,5 @@
+---
+'@casual-ui/svelte': minor
+---
+
+feat: add parallax

packages/docs/config/sidebar.ts

@@ -133,6 +133,10 @@ export default {
           title: 'Skeleton',
           to: '/features/components/interact/skeleton/',
         },
+        {
+          title: 'Parallax',
+          to: '/features/components/interact/parallax/',
+        },
       ],
     },
     {

packages/docs/src/routes/features/components/interact/parallax/+page.md

@@ -0,0 +1,59 @@
+---
+title: Parallax
+componentName: CParallax
+---
+
+## Basic usage
+
+```svelte live
+<script>
+  import { CParallax } from '@casual-ui/svelte'
+
+</script>
+
+<CParallax src="/rabbit.jpg">
+<div class="text-white text-6xl absolute inset-0 flex items-center justify-center">
+    Rabbit
+  </div>
+
+</CParallax>
+```
+
+
+## Custom height & speed
+
+```svelte live
+<script>
+  import { CParallax } from '@casual-ui/svelte'
+
+</script>
+
+<CParallax src="/sunset.png" speed={0.5} height="300px">
+   <div class="text-white text-6xl absolute inset-0 flex items-center justify-center">
+    Sunset
+  </div>
+</CParallax>
+```
+
+## Using video with slots
+
+```svelte live
+<script>
+  import { CParallax } from '@casual-ui/svelte'
+
+</script>
+
+<CParallax src="/rabbit.jpg" speed={0.2} height="300px">
+  <div class="text-white text-6xl absolute inset-0 flex items-center justify-center">
+    Cats playing
+  </div>
+  <video slot="bg" width="100%" height="800" autoplay loop muted>
+    <source type="video/mp4" src="/cat.mp4">
+  </video>
+</CParallax>
+
+<style>
+  video {
+  }
+</style>
+```

packages/docs/static/cat.mp4

@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=http://static.simpledesktops.com/uploads/desktops/2015/03/02/mountains-on-mars.png
+HostUrl=http://static.simpledesktops.com/uploads/desktops/2015/03/02/mountains-on-mars.png

packages/docs/static/cat.mp4:Zone.Identifier

@@ -0,0 +1,88 @@
+<script>
+  import { onMount } from 'svelte'
+  import bem from '../utils/bem'
+
+  /**
+   * The background image
+   * @type {string}
+   */
+  export let src
+
+  /**
+   * The height of container.
+   * @type {string}
+   */
+  export let height = '400px'
+
+  /**
+   * The background scroll speed. Value between 0 and 1
+   * @type {number}
+   */
+  export let speed = 1
+
+  /**
+   * @type {HTMLDivElement}
+   */
+  let container
+
+  /**
+   * @type {HTMLDivElement}
+   */
+  let imageContainer
+
+  let top = '0'
+
+  const classPrefix = bem('parallax')
+
+  onMount(() => {
+    if (!container || !imageContainer) return
+    let isIntersecting = false
+    const observer = new IntersectionObserver(
+      entires => {
+        const [target] = entires
+        isIntersecting = target.isIntersecting
+      },
+      {
+        root: null,
+        rootMargin: '0px',
+        threshold: [0, 1],
+      }
+    )
+
+    observer.observe(container)
+
+    const scrollHandler = () => {
+      if (!isIntersecting) return
+      const imageHeight = imageContainer.offsetHeight
+      const containerHeight = container.offsetHeight
+      const total = imageHeight - containerHeight
+      const next = (speed * document.documentElement.scrollTop) / total
+      top = `-${next > 1 ? total : next * total}px`
+    }
+
+    window.addEventListener('scroll', scrollHandler)
+
+    return () => {
+      window.removeEventListener('scroll', scrollHandler)
+      observer.unobserve(container)
+      observer.disconnect()
+    }
+  })
+</script>
+
+<div
+  class={classPrefix}
+  style:height
+  bind:this={container}
+  style:--c-parallax-top={top}
+>
+  <div bind:this={imageContainer} class={`${classPrefix}--image`}>
+    <!-- Customize the bg content -->
+    <slot name="bg">
+      <img {src} alt="" />
+    </slot>
+  </div>
+  <div class={`${classPrefix}--front`}>
+    <slot />
+  </div>
+</div>

packages/docs/static/rabbit.jpg

@@ -51,13 +51,15 @@ import CCarousel from './components/carousel/CCarousel.svelte'
 import CCarouselSlider from './components/carousel/CCarouselSlider.svelte'
 import CTree from './components/tree/CTree.svelte'
 import CSkeleton from './components/skeleton/CSkeleton.svelte'
+import CParallax from './components/CParallax.svelte'
 import { attributeAtom } from './utils/attributeAtom'
 
 export { useFormProps } from './hooks/useForm'
 
 export {
   attributeAtom,
   CTree,
+  CParallax,
   CAjaxBar,
   CSkeleton,
   CCarouselSlider,