-
Notifications
You must be signed in to change notification settings - Fork 17
/
index3.html
96 lines (96 loc) · 8 KB
/
index3.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
<!doctype html>
<html lang="en" data-loading class="[--color-bg:#2a2a2a] isolate before:-z-20 before:absolute before:inset-0 before:w-full before:h-full before:bg-noise 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/demo3.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="min-h-screen relative flex flex-col overflow-clip" style="timeline-scope: --scroller, --slide-1, --slide-2, --slide-3, --slide-4, --slide-5, --slide-6; --slides: 6; --item-aspect: 335/511;">
<div class="absolute bg-[#C09E6F] -z-30 inset-0 h-full w-full animate-fade" style="animation-timeline: --slide-2"></div>
<div class="absolute bg-[#B4806A] -z-30 inset-0 h-full w-full animate-fade" style="animation-timeline: --slide-3"></div>
<div class="absolute bg-[#68432D] -z-30 inset-0 h-full w-full animate-fade" style="animation-timeline: --slide-4"></div>
<div class="absolute bg-[#3B626E] -z-30 inset-0 h-full w-full animate-fade" style="animation-timeline: --slide-5"></div>
<div class="absolute bg-[#2E423D] -z-30 inset-0 h-full w-full animate-fade" style="animation-timeline: --slide-6"></div>
<header class="frame relative z-50 mx-7 flex max-lg:flex-col justify-between py-6 gap-2">
<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">Demo 2</a>
<a href="index3.html" aria-current="page">Demo 3</a>
</nav>
</header>
<div class="flex-1 hidden supports-sda:flex min-h-[300px] items-stretch">
<div class="@container-[size] relative w-full">
<div class="absolute inset-0 h-full w-full overflow-y-auto snap-mandatory scroll-smooth snap-x scrollbar-hidden" style="scroll-timeline: --scroller x; --item-width: calc(min(100cqh, 1000px) * var(--item-aspect))">
<div class="grid grid-flow-col px-[--inset-x] auto-cols-[--item-width] h-full w-fit" style="--inset-x: calc(50cqw - var(--item-width)/2)">
<div role="none" class="snap-center" style="view-timeline: --slide-1 x; view-timeline-inset: var(--inset-x)"></div>
<div role="none" class="snap-center" style="view-timeline: --slide-2 x; view-timeline-inset: var(--inset-x)"></div>
<div role="none" class="snap-center" style="view-timeline: --slide-3 x; view-timeline-inset: var(--inset-x)"></div>
<div role="none" class="snap-center" style="view-timeline: --slide-4 x; view-timeline-inset: var(--inset-x)"></div>
<div role="none" class="snap-center" style="view-timeline: --slide-5 x; view-timeline-inset: var(--inset-x)"></div>
<div role="none" class="snap-center" style="view-timeline: --slide-6 x; view-timeline-inset: var(--inset-x)"></div>
</div>
</div>
<!-- Photos -->
<div class="inset-x-0 inset-y-[7.5cqh] absolute overlap isolate items-center justify-center pointer-events-none">
<img class="h-full gbgbgb max-h-[1000px]" style="animation: first auto linear both, fade-out auto linear both; animation-timeline: --slide-1; animation-composition: add, replace;" src="img/3/fashion.jpg" alt="fashion" />
<img class="h-full max-h-[1000px] -z-[1]" style="animation: second auto linear both, first auto linear both, fade-out auto linear both; animation-timeline: --slide-1, --slide-2, --slide-2; animation-composition: add, add, replace;" src="img/3/art.jpg" alt="artwork" />
<img class="h-full max-h-[1000px] -z-[2]" style="animation: third auto linear both, second auto linear both, first auto linear both, fade-out auto linear both; animation-timeline: --slide-1, --slide-2, --slide-3, --slide-3; animation-composition: add, add, add, replace;" src="img/3/woman.jpg" alt="photography" />
<img class="h-full max-h-[1000px] -z-[3]" style="animation: fourth auto linear both, third auto linear both, second auto linear both, first auto linear both, fade-out auto linear both; animation-timeline: --slide-1, --slide-2, --slide-3, --slide-4, --slide-4; animation-composition: add, add, add, add, replace;" src="img/3/sunglasses.jpg" alt="photography" />
<img class="h-full max-h-[1000px] -z-[4]" style="animation: fifth auto linear both, fourth auto linear both, third auto linear both, second auto linear both, first auto linear both, fade-out auto linear both; animation-timeline: --slide-1, --slide-2, --slide-3, --slide-4, --slide-5, --slide-5; animation-composition: add, add, add, add, add, replace;" src="img/3/pockets.jpg" alt="photography" />
<img class="h-full max-h-[1000px] -z-[5]" style="animation: sixth auto linear both, fifth auto linear both, fourth auto linear both, third auto linear both, second auto linear both, first auto linear both; animation-timeline: --slide-1, --slide-2, --slide-3, --slide-4, --slide-5, --slide-6; animation-composition: add;" src="img/3/lights.jpg" alt="photography" />
</div>
</div>
<!-- Indicator -->
<div class="[@media(max-aspect-ratio:335/511)]:hidden flex flex-col gap-2 items-center font-medium absolute top-1/2 -translate-y-1/2 left-7">
<span class="overflow-y-clip">
<span class="animate-indicator overlap justify-items-center" 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 class="translate-y-[300%]">04</span>
<span class="translate-y-[400%]">05</span>
<span class="translate-y-[500%]">06</span>
</span>
</span>
<div class="bg-white/20">
<div class="bg-white w-0.5 h-32 animate-progress origin-top" style="animation-timeline: --scroller;"></div>
</div>
06
</div>
<a href="https://tympanus.net/Tutorials/Velvette/" class="max-lg:hidden [writing-mode:vertical-lr] absolute z-50 top-1/2 -translate-y-1/2 right-7 pointer-events-auto">Previous Demo</a>
</div>
<!-- Captions -->
<div class="h-[0.65em] hidden supports-sda:block animate-scroll-pos [clip-path:inset(0.05em_0_0)] overflow-clip text-[min(15.625rem,20vh)]/[1.2] font-serif select-none" style="animation-timeline: --scroller;">
<div class="flex flex-col whitespace-nowrap items-center opacity-50 w-fit translate-x-[calc(50vw-50%)] animate-captions *:scale-y-[calc(var(--scroll-velocity-abs)*2+1)] *:translate-y-[calc(var(--scroll-velocity)*-100%)]" style="animation-timeline: --scroller; animation-composition: add; transition: --scroll-position-delayed 0.15s linear; --scroll-velocity: calc(var(--scroll-position) - var(--scroll-position-delayed)); --scroll-velocity-abs: max(var(--scroll-velocity), -1*var(--scroll-velocity))">
<span>Fashion</span>
<span>Artworks</span>
<span>Portraits</span>
<span>Still Life</span>
<span>Lifestyle</span>
<span>Wedding</span>
</div>
</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>