Logo OdynDev
Back to Projects

Nature-Themed Website Parallax Effect

Immersive Parallax Scrolling Experience Inspired by Nature

Project Overview

A sleek, responsive photo gallery built with a modern aesthetic. This project showcases optimized image loading, smooth transitions, and an intuitive lightbox experience. Designed for photographers, designers, and anyone looking to present visual content with clarity and elegance.

Key Features

  • Multi-layer parallax scroll animations
  • Nature-inspired design with deep visuals
  • Fully responsive one-page layout
  • Lightweight structure with minimal assets
  • Smooth scroll and fade-in effects
  • Optimized for performance and load speed
  • Framer Motion or GSAP animation integration
  • Simple and clear content sections
  • Ideal for product, event, or portfolio intro
  • Keyboard and touch scroll compatibility
  • Custom SVG or image backgrounds
  • Call-to-action buttons with visual feedback
  • Thematic consistency and visual storytelling
  • Easy to adapt for other design themes

Tech Stack

Next.js

Enables fast page rendering and built-in image optimization for better performance and SEO

React

JavaScript library used to build interactive and modular components for the gallery layout and lightbox experience

HTML & CSS / Tailwind CSS

Tailwind used for layout and styling with responsive design in mind.

JavaScript

Handles scroll behavior and user interaction logic.

Framer Motion

Used to create layered parallax animation and smooth scroll transitions.

Hashnode & Code

React | Page.tsx

  import { useState, useEffect } from 'react';
import Image from 'next/image';

export default function NaturePage() {
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <main className="relative">
      {/* Hero Section with Parallax */}
      <section className="h-screen relative overflow-hidden">
        <div className="absolute inset-0 z-0" style={{ transform: 'translateY(${scrollY * 0.3}px)' }}>
          <Image src="/mountain.jpg" alt="Mountains" fill style={{ objectFit: 'cover' }} />
        </div>
        <div className="relative z-10 h-full flex flex-col justify-center items-center text-white bg-black/30">
          <h1 className="text-5xl font-bold">Discover the Beauty of Nature</h1>
          <p className="mt-4">Harmony, Peace, and Inspiration</p>
        </div>
      </section>

      {/* About Section */}
      <section className="p-6 bg-white">
        <h2 className="text-3xl font-bold mb-4">About Nature</h2>
        <p>
          We promote the beauty of forests, mountains, and oceans. Our goal is to educate and inspire people to protect the environment.
        </p>
      </section>

      {/* Contact Section */}
      <section className="p-6 bg-gray-100">
        <h2 className="text-3xl font-bold mb-4">Contact Us</h2>
        <form className="space-y-4 max-w-md">
          <input type="text" placeholder="Name" className="w-full p-2 rounded border" required />
          <input type="email" placeholder="Email" className="w-full p-2 rounded border" required />
          <textarea placeholder="Message" rows={5} className="w-full p-2 rounded border" required />
          <button type="submit" className="bg-green-600 text-white px-4 py-2 rounded">Send</button>
        </form>
      </section>

      <footer className="text-center text-gray-400 py-4">2025 Natura by OdynDev</footer>
    </main>
  );
}

Interested in This Project?

Want to know how this Parallax Landing Page was made or have a creative idea of your own? I'm happy to help or talk through your vision!

Contact Me
Previous Project
Professional Portfolio Website