Discover the best moving-background websites created by professional designers. Get inspired and start planning your perfect moving-background web design today!

Moving Background Gradient with dark theme inspired by Webflow Community hero section

Moving Gradient Background

This cloneable includes a moving background image grid. Have fun cloning!

Moving Background Images Grid

This cloneable includes a scroll into view interaction built to highlight text that is at the centre of the viewport. Inspired by: https://one-is.com/

Feel free to clone this and use on your projects.

Highlight Text on Scroll

Random dump of unfinished things made in 2021 that for one reason or another have never seen the light. 1/∞

Testing realtime refraction in WebGl with moving background (tricky part). Text animation is bad and definitely not to be seen on mobile. Might not work and could definitely use a preloader.

Click and drag to navigate.

👀

glass-cube

Realtime Refraction (WebGl)

FlowRocket

Experimenting with clipping text and then moving the text and updating the background as it moves with the mouse.

The issue: Clipped text that is moved by default does not get its background position updated if it is clipped. When moved the background stays the same based on the original position.

This solution uses Webflow text clip and some Javascript to update the clipped background image position when the mouse moves.

Also see this alternative with clipped text and instead of moving the text, the text stays still but the background updates.

https://webflow.com/website/Clipped-Text-with-Moving-background

Clipped Text Moving with Background

Moving text with clipped Background

Experimenting with clipping text and then moving the Background when the mouse moves.

The effect is you can see the background move through the text with the mouse

Clipped Text with moving background

Clipped Text with Moving background

Webflow CMS Grid Plugin

Build complex grid layouts in Webflow with ease!

A Simple way to create complex CMS Grid Layouts. Define a layout for any item in the grid. Make it span 3 columns and 2 rows for example just like you can normally.

You can also set columns and rows to nth items as well as odd and even items.

Gridder - CMS Grid

gridder-cms-grid

Copy of Flagship Designer | Random Design

Moving Video Background

Full website recently launched can be seen here:

https://webflow.com/website/Global-Press-Organization-Website

Annual Report for Global Press.

I recently found out this page won a Clarion award.

Awarded for "excellence in strategic, effective, and meaningful communication." Awards include Best User Experience and Best Non-Profit Website (2020 Annual Report) and Best News Website and Best Website Redesign (Global Press Journal).

Copy of Global Press 2020 Annual Report

Global Press Annual Report (Non profit website)

Nice and easy flowing colors. Learn how to build it at: https://youtu.be/gnODWXmucy0

Moving Gradient Background v2

Moving Gradient Background v2 (Easy)

Just a simple Page Loader Transition that runs a sequence before revealing the page.

Feel free to clone as needed. Likes would be much appreciated if you do :D

Page Transition Loader

pds-loader-1

Animation showcase using principles learned from Joseph Berry!

Animation Demo

Learn how I made it: https://youtu.be/kW7GPzWyXlE

GSAP FLIP Tutorial

Animated Logo with GSAP Flip

Aries

Aries Blog Template

New website for GlobalPress just launched.

https://www.globalpress.co

It’s an international non profit news organization with operations in 27 countries.

Discover moving background websites built by the Webflow community

Discover moving background websites built by the Webflow community