Merge pull request #101 from cherylli/feature/reveal-sections-scrolling

Feature/reveal sections scrolling

Author: cherylli

CHANGELOG.md

@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - footer copyright
 - Header.js component
 - reCAPTCHA
+- useIntersect Hook, Reveal container for scrolling using intersection API
 
 ### Fixed
 

components/RevealContentContainer.js

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+import { useIntersect } from '../hooks/useIntersect';
+import styles from '../styles/RevealContainer.module.scss';
+
+const RevealContentContainer = ({ children }) => {
+  const [ref, entry] = useIntersect({ threshold: 0.15 });
+  const [firstLoad, setFirstLoad] = useState(true);
+  const [hiddenStyle, setHiddenStyle] = useState('section__hidden');
+
+  useEffect(() => {
+    if (entry.isIntersecting && firstLoad) {
+      setHiddenStyle('');
+      setFirstLoad(false);
+    }
+  }, [entry.isIntersecting]);
+
+  return (
+    <div ref={ref} className={`${styles.wrapper} ${styles[hiddenStyle]}`}>
+      {children}
+    </div>
+  );
+};
+
+export default RevealContentContainer;

hooks/useIntersect.js

@@ -0,0 +1,29 @@
+import { useState, useEffect, useRef } from 'react';
+
+export const useIntersect = ({ root = null, rootMargin, threshold = 0 }) => {
+  const [entry, setEntry] = useState({});
+  const [node, setNode] = useState(null);
+
+  const observer = useRef(null);
+
+  useEffect(() => {
+    observer = new window.IntersectionObserver(
+      ([entry]) => {
+        setEntry(entry);
+      },
+      { root, rootMargin, threshold }
+    );
+
+    if (node) {
+      observer.observe(node);
+    }
+    return () => {
+      observer.disconnect();
+      if (node) {
+        observer.unobserve(node);
+      }
+    };
+  }, [node, root, rootMargin, threshold]);
+
+  return [setNode, entry];
+};

pages/index.js

@@ -4,56 +4,64 @@ import TwoColumn from '../components/TwoColumn';
 import CardsColumns from '../components/CardsColumns';
 import styles from '../styles/Home.module.scss';
 import { white, primary } from '../styles/TwoColumn.module.scss';
+import RevealContentContainer from '../components/RevealContentContainer';
 
 export default function Home() {
   return (
     <>
-      <TwoColumn
-        title="Let's grow together."
-        image="/images/join-us.jpg"
-        content="The Web Dev Path is a team of professional developers project that aims to provide a comprehensive path for people who seek to begin their web development journey."
-        link="/about"
-        customBtnClass="inverted-grey"
-      />
+      <RevealContentContainer>
+        <TwoColumn
+          title="Let's grow together."
+          image="/images/join-us.jpg"
+          content="The Web Dev Path is a team of professional developers project that aims to provide a comprehensive path for people who seek to begin their web development journey."
+          link="/about"
+          customBtnClass="inverted-grey"
+        />
+      </RevealContentContainer>
 
-      <Bracket className={styles.bracket} />
+      <RevealContentContainer>
+        <Bracket className={styles.bracket} />
+        <TwoColumn
+          title="Get involved."
+          content="Web Dev Path runs on volunteers. Here are the ways you can get involved with us:"
+          rowOrder="row-reverse"
+          customInnerClass="get-involved"
+          bgColor={white}
+        />
+      </RevealContentContainer>
 
-      <TwoColumn
-        title="Get involved."
-        content="Web Dev Path runs on volunteers. Here are the ways you can get involved with us:"
-        rowOrder="row-reverse"
-        customInnerClass="get-involved"
-        bgColor={white}
-      />
+      <RevealContentContainer>
+        <CardsColumns
+          titles={['Join us', 'Volunteer', 'Become a mentor']}
+          images={[
+            '/images/join-us.jpg',
+            '/images/volunteer.jpg',
+            '/images/mentor.jpg',
+          ]}
+          altTags={['Join us', 'Volunteer', 'Become a mentor']}
+          content={[
+            'Are you learning web development and need mentorship? Are you a web dev looking for help or a code buddy for a project? ',
+            'Would you like to volunteer? For roles other than mentor/mentee, please get in touch.',
+            'Are you an experienced web dev who wants to become a mentor? Welcome!',
+          ]}
+          links={['/about', '/contact', '/about']}
+          linkText={['Learn more', 'Contact us', 'Learn more']}
+        />
+      </RevealContentContainer>
 
-      <CardsColumns
-        titles={['Join us', 'Volunteer', 'Become a mentor']}
-        images={[
-          '/images/join-us.jpg',
-          '/images/volunteer.jpg',
-          '/images/mentor.jpg',
-        ]}
-        altTags={['Join us', 'Volunteer', 'Become a mentor']}
-        content={[
-          'Are you learning web development and need mentorship? Are you a web dev looking for help or a code buddy for a project? ',
-          'Would you like to volunteer? For roles other than mentor/mentee, please get in touch.',
-          'Are you an experienced web dev who wants to become a mentor? Welcome!',
-        ]}
-        links={['/about', '/contact', '/about']}
-        linkText={['Learn more', 'Contact us', 'Learn more']}
-      />
+      <RevealContentContainer>
+        <Stick className={styles.stick} />
 
-      <Stick className={styles.stick} />
-
-      <TwoColumn
-        title="Nonprofit?"
-        content="Web Dev Path can help your nonprofit with web projects of various sizes. Connect with us to find out how."
-        color={white}
-        bgColor={primary}
-        link="/about"
-        customInnerClass="non-profit"
-        customBtnClass="inverted-white"
-      />
+        <TwoColumn
+          title="Nonprofit?"
+          content="Web Dev Path can help your nonprofit with web projects of various sizes. Connect with us to find out how."
+          color={white}
+          bgColor={primary}
+          link="/about"
+          customInnerClass="non-profit"
+          customBtnClass="inverted-white"
+        />
+      </RevealContentContainer>
     </>
   );
 }

styles/RevealContainer.module.scss

@@ -0,0 +1,11 @@
+@use './variables' as *;
+@use './mixins' as *;
+
+.section__hidden {
+  opacity: 0;
+  transform: translateY(8rem);
+}
+
+.wrapper {
+  transition: transform 1s, opacity 1s;
+}