Parallax Ipad Scroll
Rust UI component that displays a parallax effect on an iPad.
parallaxscroll
use leptos::prelude::*; use leptos_meta::Stylesheet; // TODO. Hydration issue. // Define a struct to represent each gallery image #[derive(Clone)] struct GalleryImage { src: String, alt: String, } impl GalleryImage { fn new(src: &str, alt: &str) -> Self { Self { src: src.to_string(), alt: alt.to_string(), } } } // Function to generate the gallery images fn get_gallery_images() -> Vec<GalleryImage> { vec![ // row 1 GalleryImage::new( "https://images.unsplash.com/photo-1548802673-380ab8ebc7b7?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0MjgwNTR8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1586042091284-bd35c8c1d917?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0Mjk0NzV8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1524641234638-4c303747c310?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0Mjk2NDh8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1591160690555-5debfba289f0?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0Mjk2ODd8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1507629221898-576a56b530bb?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0Mjk3OTN8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), // row 2 GalleryImage::new( "https://images.unsplash.com/photo-1599940824399-b87987ceb72a?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0Mjk3OTN8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1531379115628-32ab7454986c?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0Mjk3OTN8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1454372182658-c712e4c5a1db?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0Mjk3OTN8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1445998559126-132150395033?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0Mjk3OTN8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1530044702134-fb72deb2b3ce?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0MzAyOTF8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), // row 3 GalleryImage::new( "https://images.unsplash.com/photo-1722898614949-c9a315e35209?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MjQzNzAyNzl8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1562450234-cbab56e5df31?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0MzAzMzB8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1547448415-e9f5b28e570d?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0MzAzNDB8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1523980077198-60824a7b2148?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0MzAzNjR8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1565804970157-19c1ade2403f?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0MzA5ODB8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), // row 4 GalleryImage::new( "https://images.unsplash.com/photo-1518893883800-45cd0954574b?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0MzExMjJ8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1492563817904-5f1dc687974f?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0MzEwNTR8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1548802673-380ab8ebc7b7?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0MjgwNTR8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1586042091284-bd35c8c1d917?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0Mjk0NzV8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1524641234638-4c303747c310?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0Mjk2NDh8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), // row 5 GalleryImage::new( "https://images.unsplash.com/photo-1591160690555-5debfba289f0?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0Mjk2ODd8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1507629221898-576a56b530bb?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0Mjk3OTN8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1599940824399-b87987ceb72a?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0Mjk3OTN8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1531379115628-32ab7454986c?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0Mjk3OTN8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1454372182658-c712e4c5a1db?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0Mjk3OTN8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), // row 6 GalleryImage::new( "https://images.unsplash.com/photo-1445998559126-132150395033?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0Mjk3OTN8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1530044702134-fb72deb2b3ce?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0MzAyOTF8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1722898614949-c9a315e35209?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MjQzNzAyNzl8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1562450234-cbab56e5df31?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0MzAzMzB8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1547448415-e9f5b28e570d?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0MzAzNDB8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), // row 7 GalleryImage::new( "https://images.unsplash.com/photo-1523980077198-60824a7b2148?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0MzAzNjR8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1565804970157-19c1ade2403f?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0MzA5ODB8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1518893883800-45cd0954574b?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0MzExMjJ8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1492563817904-5f1dc687974f?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0MzEwNTR8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), GalleryImage::new( "https://images.unsplash.com/photo-1548802673-380ab8ebc7b7?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg0MjgwNTR8&ixlib=rb-4.0.3&q=85&w=200&h=300", "Gallery image", ), ] } #[component] pub fn DemoParallaxIpadScroll() -> impl IntoView { // Get all the gallery images let images = get_gallery_images(); let image_views = images .into_iter() .map(|image| { let src = image.src; let alt = image.alt; view! { <div class="col"> <img src=src alt=alt /> </div> } }) .collect::<Vec<_>>(); view! { <Stylesheet href="/components/parallax_ipad_scroll.css" /> <section id="ipad__wrapper" class="flex flex-col items-center justify-center overflow-hidden bg-black" > <div id="my__ipad" class="mb-8"> <div id="ipad__border" class="w-min h-min p-0.5 rounded-3xl"> <div id="ipad__bezel"> <div id="ipad__screen" class="p-3 overflow-hidden bg-black rounded-lg"> <div id="ipad__images">{image_views}</div> </div> </div> </div> </div> </section> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script> <script src="/components/parallax_ipad_scroll.js"></script> } }
Installation
# Coming soon :)
Usage
// Coming soon 🦀