♻️ 💄 Animatios hook

Author: YuneVK

components/home/connection/Connection.jsx

@@ -1,10 +1,33 @@
+/* eslint-disable @next/next/no-img-element */
+import { useRef } from 'react'
+import { getLiteral } from '../../../common/i18n'
 import * as ROUTES from '../../../common/routes'
+import useInnerParallax from '../../../hooks/useInnerParallax'
 
 import ButtonLink from '../../button-link/ButtonLink'
 
 const Connection = ({ title, buttonText }) => {
+  const imageRef = useRef(null)
+  const backgroundRef = useRef(null)
+
+  const { translateY: imageTranslateY } = useInnerParallax(
+    backgroundRef,
+    imageRef,
+  )
+
   return (
     <div className="connection">
+      <div className="connection__background" ref={backgroundRef}>
+        <img
+          className="connection__image"
+          ref={imageRef}
+          style={{
+            transform: `scale(1.1) translateY(${imageTranslateY}%)`,
+          }}
+          src="/images/footer.jpg"
+          alt={getLiteral('connection:image-description')}
+        />
+      </div>
       <div className="connection__content">
         <h2 className="connection__title">{title}</h2>
 

components/home/connection/connection.scss

@@ -3,10 +3,6 @@
   position: relative;
   z-index: $index-footer-image-content;
 
-  background-image: linear-gradient(177.63deg, rgba(10, 3, 214, 0) 1.99%, rgba(107, 0, 207, 0.354) 64.04%, rgba(227, 46, 64, 0.6) 109.9%), url('/images/footer.jpg');
-  background-position: center;
-  background-size: cover;
-
   padding: spacing(5) spacing(2) spacing(5) spacing(5);
   margin: 0 spacing(2);
 
@@ -28,13 +24,44 @@
     min-height: calc(100vh - $footer-height);
   }
 
+  &__background {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+
+    overflow: hidden;
+
+    &::after {
+      content: '';
+
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      height: 100%;
+      width: 100%;
+
+      background-image: linear-gradient(177.63deg, rgba(10, 3, 214, 0) 1.99%, rgba(107, 0, 207, 0.354) 64.04%, rgba(227, 46, 64, 0.6) 109.9%);
+    }
+  }
+
+  &__image {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+
+    transform: scale(1.025);
+    transform-origin: bottom center;
+  }
+
   &__content {
     @extend %grid;
     align-items: center;
 
   }
 
   &__title {
+    position: relative;
     margin-bottom: spacing(4);
     grid-column: 1 / 5;
 

components/home/get-involved/ExampleCard.jsx

@@ -0,0 +1,23 @@
+/* eslint-disable @next/next/no-img-element */
+import { useRef } from 'react'
+
+import useParallax from '../../../hooks/useParallax'
+
+const ExampleCard = ({ image, imageDescription, title }) => {
+  const ref = useRef(null)
+
+  const { translateY: backgroundTranslateY } = useParallax(ref, 0.02)
+
+  return (
+    <div
+      className="get-involved__example"
+      ref={ref}
+      style={{ transform: `translateY(-${backgroundTranslateY}px)` }}
+    >
+      <img className="get-involved__image" src={image} alt={imageDescription} />
+      <p>{title}</p>
+    </div>
+  )
+}
+
+export default ExampleCard

components/home/get-involved/GetInvolved.jsx

@@ -1,5 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import md from 'markdown-it'
+import ExampleCard from './ExampleCard'
 
 const GetInvolved = ({ title, examplesTitle, examples, content }) => {
   return (
@@ -19,14 +20,12 @@ const GetInvolved = ({ title, examplesTitle, examples, content }) => {
 
           <div className="get-involved__list">
             {examples.map(({ title, image, imageDescription }) => (
-              <div key={`example-${title}`} className="get-involved__example">
-                <img
-                  className="get-involved__image"
-                  src={image}
-                  alt={imageDescription}
-                />
-                <p>{title}</p>
-              </div>
+              <ExampleCard
+                key={`example-${title}`}
+                image={image}
+                imageDescription={imageDescription}
+                title={title}
+              />
             ))}
           </div>
         </div>

components/home/get-involved/get-involved.scss

@@ -142,6 +142,8 @@
     @extend %header-4;
     text-align: center;
 
+    transition: transform 1s $bezier-default;
+
     &:not(:last-child) {
       margin-bottom: spacing(1);
     }

components/home/hero/Hero.jsx

@@ -1,54 +1,22 @@
 /* eslint-disable @next/next/no-img-element */
-import { useRef, useEffect, useState } from 'react'
+import { useRef } from 'react'
 
 import ButtonLink from '../../button-link/ButtonLink'
 
 import * as ROUTES from '../../../common/routes'
 import { getLiteral } from '../../../common/i18n'
+import useParallax from '../../../hooks/useParallax'
+import useInnerParallax from '../../../hooks/useInnerParallax'
 
 const Hero = ({ date, title, buttonText }) => {
   const imageRef = useRef(null)
   const backgroundRef = useRef(null)
 
-  const [imageTranslateY, setImageTraslateY] = useState(0)
-  const [backgroundTranslateY, setBackgroundTraslateY] = useState(0)
-
-  useEffect(() => {
-    const background = backgroundRef.current
-    const image = imageRef.current
-
-    if (!background || !image) {
-      return
-    }
-
-    const handleScroll = () => {
-      const callback = () => {
-        const backgroundTop = background.getBoundingClientRect().top
-        const backgroundBottom = background.getBoundingClientRect().bottom
-
-        if (backgroundTop < window.innerHeight && backgroundBottom > 0) {
-          const distance = window.scrollY * 0.1
-
-          const scaleDistance = (
-            ((backgroundBottom * 100) / window.innerHeight) *
-            0.025
-          ).toFixed(2)
-
-          setBackgroundTraslateY(distance)
-          setImageTraslateY(scaleDistance)
-        }
-      }
-
-      requestAnimationFrame(callback)
-    }
-
-    handleScroll()
-    window.addEventListener('scroll', handleScroll)
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll)
-    }
-  }, [backgroundRef])
+  const { translateY: backgroundTranslateY } = useParallax(backgroundRef)
+  const { translateY: imageTranslateY } = useInnerParallax(
+    backgroundRef,
+    imageRef,
+  )
 
   return (
     <section className="hero">

components/home/hero/hero.scss

@@ -62,7 +62,6 @@
 
     transform: scale(1.025);
     transform-origin: bottom center;
-
   }
 
   &__content {

content/commons.json

@@ -7,6 +7,8 @@
     "anchor-nav:events": "Schedule",
     "anchor-nav:connection": "Connection",
 
+    "connection:image-description": "Connection illustration",
+
     "event-type:podcast": "Podcast",
     "event-type:stream": "Stream",
     "event-type:talk": "Talk",
@@ -15,7 +17,6 @@
     "event-type:conference": "Conference",
     "event-type:misc": "Misc",
 
-    "footer:image-description": "Footer illustration",
     "footer:copyright": "Made with ♥︎️ by GitHub",
     "footer:privacy-title": "Privacy terms and conditions",
     "footer:privacy-url": "https://docs.github.com/es/site-policy/privacy-policies/github-privacy-statement",

hooks/useInnerParallax.js

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react'
+
+const useInnerParallax = (elementRef, wrapperRef, factor = 0.025) => {
+  const [translateY, setImageTraslateY] = useState(0)
+
+  useEffect(() => {
+    const background = elementRef.current
+    const image = wrapperRef.current
+
+    if (!background || !image) {
+      return
+    }
+
+    const handleScroll = () => {
+      const callback = () => {
+        const top = background.getBoundingClientRect().top
+        const bottom = background.getBoundingClientRect().bottom
+
+        if (top < window.innerHeight && bottom > 0) {
+          const scaleDistance = (
+            ((bottom * 100) / window.innerHeight) *
+            factor
+          ).toFixed(2)
+
+          setImageTraslateY(scaleDistance)
+        }
+      }
+
+      requestAnimationFrame(callback)
+    }
+
+    handleScroll()
+    window.addEventListener('scroll', handleScroll)
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [elementRef, factor, wrapperRef])
+
+  return { translateY }
+}
+
+export default useInnerParallax

hooks/useParallax.js

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react'
+
+const useParallax = (ref, factor = 0.1) => {
+  const [translateY, setTranslateY] = useState(0)
+
+  useEffect(() => {
+    const background = ref.current
+
+    if (!background) {
+      return
+    }
+
+    const handleScroll = () => {
+      const callback = () => {
+        const top = background.getBoundingClientRect().top
+        const bottom = background.getBoundingClientRect().bottom
+
+        if (top < window.innerHeight && bottom > 0) {
+          const distance = window.scrollY * factor
+
+          setTranslateY(distance)
+        }
+      }
+
+      requestAnimationFrame(callback)
+    }
+
+    handleScroll()
+    window.addEventListener('scroll', handleScroll)
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [factor, ref])
+
+  return { translateY }
+}
+
+export default useParallax