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 🦀