-
Notifications
You must be signed in to change notification settings - Fork 17
/
index.html
90 lines (90 loc) · 6.48 KB
/
index.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
<!doctype html>
<html lang="en" data-loading class="[--color-bg:theme(colors.black)] text-white 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="stylesheet" href="css/demo1.css" />
<link rel="shortcut icon" href="favicon.ico">
<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 gap-8 supports-sda:pointer-events-none overflow-clip" style="timeline-scope: --scroller, --slide-1, --slide-2, --slide-3; --slides: 3;">
<img class="absolute hidden supports-sda:block -z-20 inset-0 h-full w-full object-cover animate-grow" style="animation-timeline: --slide-1" src="img/1/biker.jpg" />
<img class="absolute hidden supports-sda:block -z-20 inset-0 h-full w-full object-cover animate-grow" style="animation-timeline: --slide-2" src="img/1/bottle.jpg" />
<img class="absolute hidden supports-sda:block -z-20 inset-0 h-full w-full object-cover animate-grow" style="animation-timeline: --slide-3" src="img/1/helmet.jpg" />
<div class="absolute hidden supports-sda:block -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-[70cqw] pr-[30cqw] h-full w-fit">
<div role="none" id="slide-1" class="snap-start" style="view-timeline: --slide-1 x;"></div>
<div role="none" id="slide-2" class="snap-start" style="view-timeline: --slide-2 x;"></div>
<div role="none" id="slide-3" class="snap-start" style="view-timeline: --slide-3 x;"></div>
</div>
</div>
<header class="frame relative z-50 mx-7 flex max-lg:flex-col justify-between py-6 border-b gap-2 border-white/60 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" aria-current="page">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
</nav>
</header>
<div class="flex-1 px-7 relative hidden supports-sda:flex flex-col gap-[inherit]">
<!-- Slides -->
<div class="overlap w-[17rem]">
<p class="animate-text translate-y-[50%] skew-y-[1.5deg]" style="animation-timeline: --slide-1; animation-range-start: 30cqw;">
Move around your city safely and comfortably, while reducing your carbon footprint and helping to keep the air we breathe clean.
</p>
<p class="animate-text translate-y-[50%] skew-y-[1.5deg]" style="animation-timeline: --slide-2; animation-range-start: 30cqw;">
Let’s do it responsibly and avoid having more plastic in the sea than fish. Take your refillable bottle with you and say no to plastic when drinking water.
</p>
<p class="animate-text translate-y-[50%] skew-y-[1.5deg]" style="animation-timeline: --slide-3; animation-range-start: 30cqw;">
The Reflective Helmet seamlessly integrates reflective technology, ensuring visibility without drawing unnecessary attention. The perfect choice for the mindful cyclist.
</p>
</div>
<!-- Indicator -->
<div class="w-60 my-auto">
<nav class="flex font-medium text-sm gap-5">
<a href="#slide-1" class="animate-page !text-white pointer-events-auto" style="animation-timeline: --slide-1; animation-range-start: 30cqw;">01</a>
<a href="#slide-2" class="animate-page !text-white pointer-events-auto" style="animation-timeline: --slide-2; animation-range-start: 30cqw;">02</a>
<a href="#slide-3" class="animate-page !text-white pointer-events-auto" style="animation-timeline: --slide-3; animation-range-start: 30cqw;">03</a>
</nav>
<div class="bg-white/60 mt-2">
<div class="bg-white h-0.5 animate-progress origin-left" style="animation-timeline: --scroller;"></div>
</div>
</div>
<!-- Captions -->
<div class="overlap items-end w-[31rem]">
<div>
<span class="block overflow-clip"><span class="block uppercase font-medium tracking-widest mb-4 animate-text-up" style="animation-timeline: --slide-1; animation-range-start: 30cqw;">Commuter Helmet</span></span>
<p class="pb-7 font-serif text-8xl animate-text translate-y-[205%] skew-y-6" style="animation-timeline: --slide-1; animation-range-start: 30cqw;">Perfect for urban <em>riders</em></p>
</div>
<div>
<span class="block overflow-clip"><span class="block uppercase font-medium tracking-widest mb-4 animate-text-up" style="animation-timeline: --slide-2; animation-range-start: 30cqw;">Smart bottle</span></span>
<p class="pb-7 font-serif text-8xl animate-text translate-y-[205%] skew-y-6" style="animation-timeline: --slide-2; animation-range-start: 30cqw;">We're all <em>connected</em></p>
</div>
<div>
<span class="block overflow-clip"><span class="block uppercase font-medium tracking-widest mb-4 animate-text-up" style="animation-timeline: --slide-3; animation-range-start: 30cqw;">Reflective Helmet</span></span>
<p class="pb-7 font-serif text-8xl animate-text translate-y-[205%] skew-y-6" style="animation-timeline: --slide-3; animation-range-start: 30cqw;">Ready for <em>late nights</em></p>
</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>
</div>
<div class="supports-sda:hidden px-7 pb-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>