-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
63 lines (49 loc) · 3.4 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
<html>
<head>
<title>scrolly-photos - a horizontally scrolling photo gallery custom element</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
border-top: 10px solid #ED9E00;
font-family: 'Source Sans Pro';
margin: 0;
}
main {
margin: 1rem auto;
max-width: 800px;
padding: .25rem 1rem;
}
code pre {
overflow-x: scroll;
}
</style>
</head>
<body>
<main>
<h1><code>scrolly-photos</code></h1>
<em>A photo gallery that scrolls horizontally as a reader scrolls vertically that weighs 6.7kb with dependencies</em>
<p>A <code><scrolly-photos></code> custom element that wraps any number of <code><img></code> elements and converts them into a horizontal scrolling gallery that is tied to the user's scroll position. Falls back to vertically stacking
the images when Javascript is not available.</p>
<p>This element uses <a href="https://pudding.cool/process/introducing-scrollama/"><code>scrollama</code></a> by Russell Samora to handle scroll management.</p>
<p>Here's an example. The code below creates the horizontally scrolling set of photos beneath.</p>
<p>PS: Remember to always include <code>alt</code> text with images.</p>
<code>
<pre>
<scrolly-photos>
<img src="https://calmatters.org/wp-content/uploads/2022/06/112222-Mobile-Home-Parks-in-Stockton-RL-CM-03.jpg" alt="Mattresses lay on top of each other in a makeshift playground at Stockton Park Village in Stockton on Nov. 22, 2022. Bob Riley, 87, lives in the area where he states that the owner let the park go and garbage hasn't been picked up for months. Photo by Rahul Lal, CalMatters">
<img src="https://calmatters.org/wp-content/uploads/2022/06/112222-Mobile-Home-Parks-in-Stockton-RL-CM-16.jpg" alt="Garbage piles at Stockton Park Village in Stockton on Nov. 22, 2022. Photo by Rahul Lal, CalMatters.">
<img src="https://calmatters.org/wp-content/uploads/2022/06/112222-Mobile-Home-Parks-in-Stockton-RL-CM-34.jpg" alt="Trash and debris at Stockton Park village on Nov. 22, 2022. Photo by Rahul Lal, CalMatters">
</scrolly-photos>
</pre>
</code>
</main>
<scrolly-photos>
<img src="https://calmatters.org/wp-content/uploads/2022/06/112222-Mobile-Home-Parks-in-Stockton-RL-CM-03.jpg" alt="Mattresses lay on top of each other in a makeshift playground at Stockton Park Village in Stockton on Nov. 22, 2022. Bob Riley, 87, lives in the area where he states that the owner let the park go and garbage hasn't been picked up for months. Photo by Rahul Lal, CalMatters">
<img src="https://calmatters.org/wp-content/uploads/2022/06/112222-Mobile-Home-Parks-in-Stockton-RL-CM-16.jpg" alt="Garbage piles at Stockton Park Village in Stockton on Nov. 22, 2022. Photo by Rahul Lal, CalMatters.">
<img src="https://calmatters.org/wp-content/uploads/2022/06/112222-Mobile-Home-Parks-in-Stockton-RL-CM-34.jpg" alt="Trash and debris at Stockton Park village on Nov. 22, 2022. Photo by Rahul Lal, CalMatters">
</scrolly-photos>
<script src="scrolly-photos.js" type="module"></script>
</body>
</html>