https://github.com/matt-goldman/parallaxcollection
Demo showing parallax scrolling in .NET MAUI apps
https://github.com/matt-goldman/parallaxcollection
android dotnet dotnetmaui ios mauiuijuly mobile mobile-app mobile-development parallax parallax-scrolling ui
Last synced: about 1 month ago
JSON representation
Demo showing parallax scrolling in .NET MAUI apps
- Host: GitHub
- URL: https://github.com/matt-goldman/parallaxcollection
- Owner: matt-goldman
- Created: 2023-12-03T20:36:05.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-30T19:55:30.000Z (almost 2 years ago)
- Last Synced: 2025-10-06T22:40:30.085Z (8 months ago)
- Topics: android, dotnet, dotnetmaui, ios, mauiuijuly, mobile, mobile-app, mobile-development, parallax, parallax-scrolling, ui
- Language: C#
- Homepage: https://goforgoldman.com
- Size: 1.96 MB
- Stars: 7
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Parallax CollectionView
## About
This repository contains a sample demonstrating how to implement a parallax scrolling effect in a modified `CollectionView` in a .NET MAUI app. This project is part of [MAUI UI July 2024](https://goforgoldman.com/posts/mauiuijuly-24/).
Parallax is the appearance of things closer moving faster than things further away. In 2D games and UI design, it gives the illusion of depth and can make your apps come alive!
Feel free to explore the code, and for a full walkthrough of this implementation, check out the [blog post](https://goforgoldman.com/posts/parallax-collection/).
## Features
- **Parallax Scrolling Effect:** Adds a dynamic and visually appealing depth to your app's UI.
- **.NET MAUI ParallaxCollectionView:** Demonstrates the modification and extension of `CollectionView` into a `ParallaxCollectionView` control.
- **Cross-Platform:** Compatible with both Android and iOS.
## Usage
Replace an instance of `CollectionView` with `ParallaxCollectionView` (it's a subclass so you can do a straight substitution). In your `DataTemplate` use view that subclasses `ParallaxItemView` (this in turn subclasses `ContentView`). Override the `OnScrolled` method and set the `TranslationY` property of your foreground element to `ParallaxOffsetY`. This gets recalculated every time hte collection is scrolled.
---
Part of [MAUI UI July 2024](https://goforgoldman.com/posts/mauiuijuly-24/).
---
Cheers! 🍻