Sticky Card
Sticky card animation
Introduction to Web Design
Web design involves creating visually appealing and functional websites that enhance user experience.
Key Elements of Web Design
Essential components include layout, typography, color schemes, and imagery to create an engaging interface.
Responsive & Mobile-Friendly Design
Ensuring a website adapts to different screen sizes using flexible grids and media queries.
Modern Web Design Trends
Popular trends include minimalism, dark mode, 3D elements, and microinteractions.
Copy source code
Dependencies
1npx shadcn@latest init
2npx shadcn@latest add buttonDependencies
1 npm install framer-motionSticky.tsx
1
2"use client";
3import { useEffect, useRef, useState } from "react";
4import { motion, useScroll, useTransform } from "framer-motion";
5import { CodeBlock } from "@/components/ui/code-block";
6import { framermotion } from "../code/DependenciesCli";
7import { Button } from "@/components/ui/button";
8import { MoveRight } from "lucide-react";
9import Image from "next/image";
10
11const cards = [
12 {
13 color: "bg-gradient-to-bl from-blue-200 to-slate-50",
14 heading: "Introduction to Web Design",
15 description: "Web design involves creating visually appealing and functional websites that enhance user experience.",
16 img: "https://cdn.dribbble.com/userupload/11396400/file/original-36525481ebbd26e39ecec38ad3d1525a.png?resize=1200x853&vertical=center"
17 },
18 {
19 color: "bg-gradient-to-bl from-yellow-200 to-slate-50",
20 heading: "Key Elements of Web Design",
21 description: "Essential components include layout, typography, color schemes, and imagery to create an engaging interface.",
22 img: "https://cdn.dribbble.com/userupload/6229050/file/original-ab85a9126311f2bd169eb230ab3ec915.png?resize=1200x900&vertical=center"
23 },
24 {
25 color: "bg-gradient-to-bl from-pink-200 to-slate-50",
26 heading: "Responsive & Mobile-Friendly Design",
27 description: "Ensuring a website adapts to different screen sizes using flexible grids and media queries.",
28 img: "https://cdn.dribbble.com/users/95333/screenshots/20140701/media/beef29cb3a3fe12cb485a2eab53ce0fb.png?resize=1000x750&vertical=center"
29 },
30 {
31 color: "bg-gradient-to-bl from-cyan-200 to-slate-50",
32 heading: "Modern Web Design Trends",
33 description: "Popular trends include minimalism, dark mode, 3D elements, and microinteractions.",
34 img: "https://cdn.dribbble.com/userupload/15353952/file/original-bde182d5c960ad1b1258d5c2c7de4992.png?resize=1200x900&vertical=center"
35 }
36];
37
38const StickyCardsSummary = () => {
39 const containerRef = useRef(null);
40 const { scrollYProgress } = useScroll({
41 target: containerRef,
42 offset: ["start end", "end start"],
43 });
44
45 const scale = useTransform(scrollYProgress, [0, 1], [1, 0.8]);
46 const blur = useTransform(scrollYProgress, [0, 1], ["0px", "20px"]);
47
48 return (
49 <section ref={containerRef} className="relative w-full h-[300vh] flex flex-col rounded-2xl mt-12">
50 {cards.map((item, index) => (
51 <motion.div
52 key={index}
53 className="sticky top-28 w-full h-[70vh] flex items-center justify-center rounded-3xl bg-white p-2"
54 style={{ scale, filter: `blur(${blur})` }}
55 >
56 <div className={`${item.color} w-full h-full rounded-2xl p-5 flex flex-col md:flex-row`}>
57 <div className="text-black p-3 text-left">
58 <h1 className="text-5xl max-w-xl font-semibold text-neutral-700">{item.heading}</h1>
59 <p className="text-xl text-neutral-700 mt-6 max-w-xl">{item.description}</p>
60 <Button className="mt-6 text-lg p-8 rounded-xl shadow-xl group">
61 Get Started <span className="group-hover:-rotate-45 transition-rotate duration-300"><MoveRight/></span>
62 </Button>
63 </div>
64 <div className="p-3 relative">
65 <Image src={item.img} width={1000} height={1000} alt="img" className="w-[500px] h-[450px] object-cover rounded-xl" />
66 </div>
67 </div>
68 </motion.div>
69 ))}
70 </section>
71 );
72};
73
74export default StickyCardsSummary;
75