Resonate Digital

One-page digital agency site featuring video, parallax and various CSS transitions.

Live demo: https://resonate-digital.netlify.app/

Technologies

• HTML
• CSS
• Vanilla JavaScript
• Google Fonts
• Font Awesome
• RellaxJS parallax library (https://dixonandmoe.com/rellax/)

Key Features

• Mobile-first design.
• CSS Flexbox for layout and structure.
• CSS transitions for hamburger menu (triggered on click using JavaScript), navigation and links (hover).
• Full viewport HTML video hero background.
• Parallax effect on scroll utilising RellaxJS library (seen on hero text and services section) at varying speeds.
• Fade- and slide-in transitions using JavaScript's built-in Intersection Observer API to reference scroll position.
• Full viewport background image for services section.
• CSS clip-path for angled structure on services.