d3mo/scrollama.html at main · kaizer1v/d3mo · GitHub

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
<html>
<head>
<link rel="stylesheet" href="styles/scrollama.css" />
</head>
<body>

<div class="bg-svg">
  <svg xmlns="http://www.w3.org/2000/svg">
    <!-- <g><path stroke="none" id="mypath" d="m.51.03s-5,89,203,89,395,56,323,106-279-71-354,17-26,193,93,191,199-207,265-126-208,148-168,240,95,5,148,111" style="fill: #fff; stroke: #000; stroke-miterlimit: 10;"/></g> -->
    <g transform="translate(50, 10)"><path id="mypath" stroke-width="3" d="m.5.01s1.41,51.62,51.62,51.62S98.08-7.06,135.56,13.45s42.43-1.41,60.81,48.08,24.75,40.31,14.14,73.54-38.89,50.2-12.02,96.87,65.76,21.92,94.05,47.38c28.28,25.46,22.63,70.71,96.87,137.89s57.98,124.45,104.65,195.16c46.67,70.71,36.06,77.07,57.98,89.1s44.55,149.2,39.6,172.53c-4.95,23.33,46.67,35.36-26.87,91.92-73.54,56.57-112.15,115.02-117.59,120.44" style="fill: none; stroke: #000; stroke-miterlimit: 10;"/>
    <g id="myrect">
      <rect width="20" height="50" x="0" y="0" startOffset="20%"></rect>
    </g>
  </svg>
</div>

<main>
  <section id="intro">
    <h1 class="intro__hed">A ride to the Bangalore Airport</h1>
    <p class="intro__dek">and how it feels like...</p>
  </section>

  <!-- <section id="eta">
    <h1 class="intro__hed">A clock showing ETA</h1>
    <p class="intro__dek">how to spend time?</p>
  </section> -->

  <section id="scrolly">
    <article>
      <div class="step is-active" data-step="1" data-scrollama-index="0">
        <h2>The anxiety and the planning</h2>
        <p>It takes a lot of planning and information</p>
      </div>
      <div class="step" data-step="2" data-scrollama-index="1">
        <p>STEP 2</p>
        <p>Lalbaug junction, illustration</p>
        <p>traffic</p>
      </div>
      <div class="step" data-step="3" data-scrollama-index="2">
        <p>STEP 3</p>
        <p>Race cource bangalore, illustration + planetarium</p>
        <p>majestic railway station</p>
      </div>

      <div class="step" data-step="4" data-scrollama-index="3">
        <h2>Here are information that might help you</h2>
        <p>bangalore palace, illustration</p>
        <p>traffic</p>
        <ul>
          <li>Bengawalk's BMTC KIA bus route</li>
          <li>App based cabs vs Train vs Buses vs Taxis</li>
          <li></li>
        </ul>
      </div>

      <div class="step" data-step="5"  data-scrollama-index="4">
        <h2>Here are information that might help you</h2>
        <p>hebbal railway station, illustration</p>
      </div>
    </article>

    <figure>
      <p>0</p>
    </figure>

  </section>

  <section id="outro"></section>
</main>

<section>
  <h2>Feedback</h2>
  <p>Let me know in the replies to this tweet, about your experience to bangalore airport. Hope you dont have to go through same pain as I did, see references</p>
</section>

<footer>
  <p>© 2025 kaizer1v - this was built on the way to Bangalore airport ;)</p>
</footer>

<script src="./dist/bundle.js"></script>
</body>
</html>