-
Notifications
You must be signed in to change notification settings - Fork 17
/
index2.html
119 lines (119 loc) · 9.3 KB
/
index2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!doctype html>
<html lang="en" data-loading class="[--color-bg:#E9DFCF] text-neutral-750 antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS-Only Carousels | Codrops</title>
<meta name="description" content="Highly-experimental CSS-only carousel variations that use the new scroll-driven animation properties" />
<meta name="keywords" content="CSS animations, scroll-driven animations, CSS on-scroll animations" />
<meta name="author" content="Maxwell Barvian for Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/demo2.css" />
<script>
document.documentElement.setAttribute('data-js', '')
window.addEventListener('load', () => document.documentElement.removeAttribute('data-loading'))
</script>
</head>
<body>
<div class="@container min-h-screen relative isolate flex flex-col supports-sda:pointer-events-none overflow-clip" style="timeline-scope: --scroller, --slide-1, --slide-2, --slide-3; --slides: 3;">
<div class="absolute bg-[#EDC089] -z-20 inset-0 h-full w-full animate-fade" style="animation-timeline: --slide-2"></div>
<div class="absolute bg-[#B6D6C9] -z-20 inset-0 h-full w-full animate-fade" style="animation-timeline: --slide-3"></div>
<header class="frame mx-7 relative z-50 flex max-lg:flex-col justify-between py-6 border-b gap-2 border-black/20 pointer-events-auto">
<div class="whitespace-nowrap">
<h1 class="font-bold inline align-middle">CSS-Only Carousels</h1>
<a title="Read the article" href="https://tympanus.net/codrops/?p=75188">
<svg class="h-3 ml-0.5 inline-block align-middle" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.00006 0.25H11.7501V11H10.2501V2.81066L1.53039 11.5303L0.469727 10.4697L9.1894 1.75H1.00006V0.25Z" fill="currentColor"/>
</svg>
</a>
</div>
<nav class="flex items-center gap-10">
<a href="index.html">Demo 1</a>
<a href="index2.html" aria-current="page">Demo 2</a>
<a href="index3.html">Demo 3</a>
</nav>
</header>
<main class="lg:max-h-[1000px] hidden supports-sda:flex flex-1 py-14 lg:pb-9 relative flex-col">
<div class="max-lg:relative lg:contents">
<div class="rounded-full -z-10 absolute top-0 lg:top-14 left-1/2 -translate-x-1/2 h-3/4 aspect-[3/4] overflow-clip">
<img class="object-cover animate-bg -left-[25%] -top-[25%] absolute size-[150%] max-w-none" style="animation-timeline: --slide-1" src="img/2/beach.jpg" role="presentation" alt="" />
<img class="object-cover object-left-top animate-bg -left-[25%] -top-[25%] absolute size-[150%] max-w-none" style="animation-timeline: --slide-2" src="img/2/savanna.jpg" role="presentation" alt="" />
<img class="object-cover animate-bg object-top -left-[25%] -top-[25%] absolute size-[150%] max-w-none" style="animation-timeline: --slide-3" src="img/2/glacier.jpg" role="presentation" alt="" />
</div>
<div class="lg:absolute -z-10 inset-0 h-full w-full overflow-x-auto snap-mandatory scroll-smooth snap-x scrollbar-hidden pointer-events-auto" style="scroll-timeline: --scroller x;">
<div class="grid grid-flow-col auto-cols-[50cqw] px-[25cqw] lg:h-full w-fit">
<div class="snap-center overflow-hidden max-lg:pb-[3rem] flex items-center justify-center" style="view-timeline: --slide-1 x; view-timeline-inset: 25cqw">
<img class="animate-bottle lg:h-4/5 object-contain" style="animation-timeline: --slide-1;" src="img/2/abyss.png" alt="White water bottle" />
</div>
<div class="snap-center overflow-hidden max-lg:pb-[3rem] flex items-center justify-center" style="view-timeline: --slide-2 x; view-timeline-inset: 25cqw">
<img class="animate-bottle lg:h-4/5 object-contain" style="animation-timeline: --slide-2;" src="img/2/black.png" alt="White water bottle" />
</div>
<div class="snap-center overflow-hidden max-lg:pb-[3rem] flex items-center justify-center" style="view-timeline: --slide-3 x; view-timeline-inset: 25cqw">
<img class="animate-bottle lg:h-4/5 object-contain" style="animation-timeline: --slide-3;" src="img/2/white.png" alt="White water bottle" />
</div>
</div>
</div>
</div>
<!-- Indicator -->
<span class="flex font-semibold absolute top-14 right-7">
<span class="overflow-y-clip mr-[0.5em]">
<span class="animate-progress overlap justify-items-end" aria-hidden="true" style="animation-timeline: --scroller">
<span>01</span>
<span class="translate-y-[100%]">02</span>
<span class="translate-y-[200%]">03</span>
</span>
</span>
/
03
</span>
<!-- Text -->
<div class="px-7 max-lg:mt-10 flex flex-col items-center lg:items-start flex-1 max-lg:text-center lg:w-[29rem]">
<h2 class="uppercase font-semibold tracking-widest mb-6 whitespace-nowrap">Closca Bottle Wave</h1>
<!-- Slides -->
<div class="overlap flex-1 max-lg:items-start max-lg:justify-center max-lg:max-w-[36rem] lg:max-xl:max-w-[25cqw]">
<div class="flex flex-col items-center lg:items-start">
<h3 class="animate-text font-serif text-7xl lg:text-9xl w-fit" style="animation-timeline: --slide-1;">Abyss</h3>
<p class="animate-text font-serif text-4xl lg:text-5xl mt-2 mb-auto w-3/4" style="animation-timeline: --slide-1;">$39.90</p>
<p class="max-lg:hidden font-serif text-3xl italic animate-text my-4" style="animation-timeline: --slide-1;">By 2050, there could be more plastic in our oceans than fish.</p>
<p class="max-lg:hidden animate-text text-pr" style="animation-timeline: --slide-1;">Plastic pollution injures more than 100,000 marine animals every year. It takes around 450 years for one plastic bottle to decompose.</p>
<a href="https://closca.com" class="animate-text group pointer-events-auto inline-flex gap-4 items-center !text-current mt-6" style="animation-timeline: --slide-1;">
<span class="font-semibold">Shop Now</span>
<svg class="w-6 group-hover:translate-x-1 transition-transform" viewBox="0 0 24 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 0.469727L23.5607 5.50006L18.5303 10.5304L17.4697 9.46973L20.6893 6.25006H0.5V4.75006H20.6893L17.4697 1.53039L18.5303 0.469727Z" fill="currentColor"/>
</svg>
</a>
</div>
<div class="flex flex-col items-center lg:items-start">
<h3 class="animate-text font-serif text-7xl lg:text-9xl w-fit" style="animation-timeline: --slide-2;">Black</h3>
<p class="animate-text font-serif text-4xl lg:text-5xl mt-2 mb-auto w-3/4" style="animation-timeline: --slide-2;">$39.90</p>
<p class="max-lg:hidden font-serif text-3xl italic animate-text my-4" style="animation-timeline: --slide-2;">The area affected by desertification is approx 11x India's size.</p>
<p class="max-lg:hidden animate-text text-pretty" style="animation-timeline: --slide-2;">Every minute, over a million plastic bottles are manufactured, and only 9% of them will have a second life.</p>
<a href="https://closca.com" class="animate-text group pointer-events-auto inline-flex gap-4 items-center !text-current mt-6" style="animation-timeline: --slide-2;">
<span class="font-semibold">Shop Now</span>
<svg class="w-6 group-hover:translate-x-1 transition-transform" viewBox="0 0 24 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 0.469727L23.5607 5.50006L18.5303 10.5304L17.4697 9.46973L20.6893 6.25006H0.5V4.75006H20.6893L17.4697 1.53039L18.5303 0.469727Z" fill="currentColor"/>
</svg>
</a>
</div>
<div class="flex flex-col items-center lg:items-start">
<h3 class="animate-text font-serif text-7xl lg:text-9xl w-fit" style="animation-timeline: --slide-3;">White</h3>
<p class="animate-text font-serif text-4xl lg:text-5xl mt-2 mb-auto w-3/4" style="animation-timeline: --slide-3;">$39.90</p>
<p class="max-lg:hidden font-serif text-3xl italic animate-text my-4" style="animation-timeline: --slide-3;">By 2050, there could be more plastic in our oceans than fish.</p>
<p class="max-lg:hidden animate-text text-pretty" style="animation-timeline: --slide-3;">Every time you fill your bottle, you save 82.8 grams of CO2 and 12 grams of plastic.</p>
<a href="https://closca.com" class="animate-text group pointer-events-auto inline-flex gap-4 items-center !text-current mt-6" style="animation-timeline: --slide-3;">
<span class="font-semibold">Shop Now</span>
<svg class="w-6 group-hover:translate-x-1 transition-transform" viewBox="0 0 24 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 0.469727L23.5607 5.50006L18.5303 10.5304L17.4697 9.46973L20.6893 6.25006H0.5V4.75006H20.6893L17.4697 1.53039L18.5303 0.469727Z" fill="currentColor"/>
</svg>
</a>
</div>
</div>
</div>
<a href="https://tympanus.net/Tutorials/Velvette/" class="max-lg:hidden absolute z-50 bottom-7 right-7 pointer-events-auto">Previous Demo</a>
</main>
<div class="supports-sda:hidden p-7">
Your browser does not support scroll-driven animations. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations">MDN</a> for browser compatibility tables.
</div>
</div>
</body>
</html>