/easybanking-app

A landing page of an online banking system known as easybanking...

Primary LanguageJavaScript

Frontend Mentor - Easybank landing page solution

Table of contents

Overview

Screenshot

Links

My process

Built with

  • React
  • SCSS
  • Flexbox
  • CSS Grid
  • Laptop-first workflow

What I learned

I finally had a good grasp of intersection observer api. I used it to create a stick header and reveal sections as i scroll.

.featureItem {
  margin-bottom: 2rem;

  @media only screen and (max-width: $bp-smallest) {
    margin-bottom: 0;
    margin: 2rem 3rem;
  }

  & h3 {
    font-size: 2rem;
    font-weight: 300;
    margin-top: 2rem;
    color: $color-primary-1;
    animation-name: titleAnimation;
    animation-timing-function: ease-in-out;
    animation-duration: 6s;
    animation-fill-mode: forwards;
  }
  & p {
    width: 100%;
  }
useEffect(() => {
    const current = containerRef.current;
    const observer = new IntersectionObserver(callBackFn, options);

    if (current) observer.observe(current);

    return () => {
      if (current) {
        observer.unobserve(current);
        console.log(current);
      }
    };
  }, [containerRef]);
};

Continued development

I would love to do more with the intersection observer api. I also would want to practice http request, ajax and asynchronous javascript.

Author