6. Hero section with mouse movement parallax effect

Requirements

• Add hero section at the top of your page with at least one title as text content, one image behind it and call to action button
• Loosely follow the design but feel free to style, add or remove any extra elements as you please
• Add parallax effect to one or more elements of the hero section
• Add at least one h1 title to the page
• Add at least one h2 title to the page
• Add at least three paragraph texts to the page
• ⭐ Use mouse position for your parallax effect

Design preview

Resources

• 3d parallax effect by moving mouse using html/css
• Free images

Learn more

• prefers-reduced-motion
• 3d game menu

Discussion topics

• Hero content fixed positions
• Reset position state
• Stretching the hero image effect
• Scaling texts
• Changing image aspect ration when stretching
• Font family differences and fallbacks
• Links with onClick redirects
• CSS filters