---
title: "ParallaxHero — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Hamim Reza · Sections. Scroll parallax with blend text"
canonical: "https://framer.elliotli.dev/component/parallaxhero"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/ParallaxHero

# ParallaxHero

Scroll parallax with blend text

[View on Framer](https://framer.com/marketplace/components/parallaxhero/?via=elliot-li)

![ParallaxHero preview image 1](https://framer.elliotli.dev/og/component/parallaxhero/a29400b7894d64f5/1600x1200.jpg)

## Summary

Scroll parallax with blend text

## Description

A full-screen parallax hero section where the background image scrolls at a different speed than the foreground text, creating natural depth. Text uses mix-blend-mode difference to stay visible against any background color. Built for landing pages, portfolio showcases, and brand introduction sections that need an elegant scroll experience.

### Features

-   Background image parallax — moves slower than scroll speed
    
-   Configurable parallax strength (0–50%)
    
-   Dual text areas — top right-aligned and bottom left-aligned
    
-   Mix-blend-mode difference ensures text contrast on any background
    
-   Grayscale toggle for background image
    
-   Independent font controls for top and bottom text
    
-   Text color control for both text elements
    
-   Border radius control (0–100px)
    
-   Responsive image handling with object-fit cover
    
-   Framer Motion useScroll and useTransform for smooth parallax
    
-   No dependencies
    

### Property Controls

**Content** — top text · bottom text · background image

**Styling** — text color · border radius · grayscale toggle

**Parallax** — parallax strength (0–50%)

**Typography** — top text font · bottom text font · size, weight, spacing, line height

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-q5wpjyq4-vaysJm0plC1CH4YNoWVzKvG6K4zUro)

### Technical Details

-   Framer Motion useScroll and useTransform for parallax calculation
    
-   Fixed positioning with clip-path for correct scroll behavior
    
-   mix-blend-mode difference on text for universal contrast
    
-   Responsive image with object-fit cover
    

### Use Cases

Landing page heroes · Portfolio showcases · Product feature sections · Brand introductions · Storytelling sections · Editorial layouts · Agency homepages

**SEO Keywords**

framer parallax hero · framer scroll parallax · framer hero section · framer parallax component · framer hero background · framer scroll effect · framer parallax section · framer landing page hero · framer hero component · framer scroll component · framer code component · framer parallax background

## Rank history [How rankings work →](/terms#rankings)

-   All · #2226

## Details

- **Author**: Hamim Reza
- **Price**: $10.00
- **Published**: 2026-05-12
- **Updated**: 2026-06-28
- **Added**: 2026-04-28
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove