index.html 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="stylesheet" href="../resources/css/base.css" />
  5. </head>
  6. <body>
  7. <div class="scroll">
  8. <p>For a long time after the course of the steamer <em>Sofala</em> had been
  9. altered for the land, the low swampy coast had retained its appearance
  10. of a mere smudge of darkness beyond a belt of glitter. The sunrays
  11. seemed to fall violently upon the calm sea--seemed to shatter themselves
  12. upon an adamantine surface into sparkling dust, into a dazzling vapor
  13. of light that blinded the eye and wearied the brain with its unsteady
  14. brightness.</p>
  15. <p>Captain Whalley did not look at it. When his Serang, approaching the
  16. roomy cane arm-chair which he filled capably, had informed him in a low
  17. voice that the course was to be altered, he had risen at once and had
  18. remained on his feet, face forward, while the head of his ship swung
  19. through a quarter of a circle. He had not uttered a single word, not
  20. even the word to steady the helm. It was the Serang, an elderly, alert,
  21. little Malay, with a very dark skin, who murmured the order to the
  22. helmsman. And then slowly Captain Whalley sat down again in the
  23. arm-chair on the bridge and fixed his eyes on the deck between his feet.</p>
  24. <p>He could not hope to see anything new upon this lane of the sea. He had
  25. been on these coasts for the last three years. From Low Cape to Malantan
  26. the distance was fifty miles, six hours' steaming for the old ship with
  27. the tide, or seven against. Then you steered straight for the land, and
  28. by-and-by three palms would appear on the sky, tall and slim, and with
  29. their disheveled heads in a bunch, as if in confidential criticism of
  30. the dark mangroves. The Sofala would be headed towards the somber
  31. strip of the coast, which at a given moment, as the ship closed with
  32. it obliquely, would show several clean shining fractures--the brimful
  33. estuary of a river. Then on through a brown liquid, three parts water
  34. and one part black earth, on and on between the low shores, three parts
  35. black earth and one part brackish water, the Sofala would plow her way
  36. up-stream, as she had done once every month for these seven years or
  37. more, long before he was aware of her existence, long before he had ever
  38. thought of having anything to do with her and her invariable voyages.
  39. The old ship ought to have known the road better than her men, who had
  40. not been kept so long at it without a change; better than the faithful
  41. Serang, whom he had brought over from his last ship to keep the
  42. captain's watch; better than he himself, who had been her captain for
  43. the last three years only. She could always be depended upon to make her
  44. courses. Her compasses were never out. She was no trouble at all to
  45. take about, as if her great age had given her knowledge, wisdom, and
  46. steadiness. She made her landfalls to a degree of the bearing, and
  47. almost to a minute of her allowed time. At any moment, as he sat on
  48. the bridge without looking up, or lay sleepless in his bed, simply by
  49. reckoning the days and the hours he could tell where he was--the precise
  50. spot of the beat. He knew it well too, this monotonous huckster's
  51. round, up and down the Straits; he knew its order and its sights and its
  52. people. Malacca to begin with, in at daylight and out at dusk, to cross
  53. over with a rigid phosphorescent wake this highway of the Far East.
  54. Darkness and gleams on the water, clear stars on a black sky, perhaps
  55. the lights of a home steamer keeping her unswerving course in the
  56. middle, or maybe the elusive shadow of a native craft with her mat sails
  57. flitting by silently--and the low land on the other side in sight
  58. at daylight. At noon the three palms of the next place of call, up a
  59. sluggish river. The only white man residing there was a retired young
  60. sailor, with whom he had become friendly in the course of many voyages.
  61. Sixty miles farther on there was another place of call, a deep bay with
  62. only a couple of houses on the beach. And so on, in and out, picking
  63. up coastwise cargo here and there, and finishing with a hundred miles'
  64. steady steaming through the maze of an archipelago of small islands up
  65. to a large native town at the end of the beat. There was a three days'
  66. rest for the old ship before he started her again in inverse order,
  67. seeing the same shores from another bearing, hearing the same voices
  68. in the same places, back again to the Sofala's port of registry on
  69. the great highway to the East, where he would take up a berth nearly
  70. opposite the big stone pile of the harbor office till it was time to
  71. start again on the old round of 1600 miles and thirty days. Not a very
  72. enterprising life, this, for Captain Whalley, Henry Whalley, otherwise
  73. Dare-devil Harry--Whalley of the Condor, a famous clipper in her day.
  74. No. Not a very enterprising life for a man who had served famous firms,
  75. who had sailed famous ships (more than one or two of them his own); who
  76. had made famous passages, had been the pioneer of new routes and new
  77. trades; who had steered across the unsurveyed tracts of the South Seas,
  78. and had seen the sun rise on uncharted islands. Fifty years at sea, and
  79. forty out in the East ("a pretty thorough apprenticeship," he used
  80. to remark smilingly), had made him honorably known to a generation of
  81. shipowners and merchants in all the ports from Bombay clear over to
  82. where the East merges into the West upon the coast of the two Americas.
  83. His fame remained writ, not very large but plain enough, on the
  84. Admiralty charts. Was there not somewhere between Australia and China a
  85. Whalley Island and a Condor Reef? On that dangerous coral formation the
  86. celebrated clipper had hung stranded for three days, her captain and
  87. crew throwing her cargo overboard with one hand and with the other, as
  88. it were, keeping off her a flotilla of savage war-canoes. At that time
  89. neither the island nor the reef had any official existence. Later the
  90. officers of her Majesty's steam vessel Fusilier, dispatched to make a
  91. survey of the route, recognized in the adoption of these two names the
  92. enterprise of the man and the solidity of the ship. Besides, as anyone
  93. who cares may see, the "General Directory," vol. ii. p. 410, begins the
  94. description of the "Malotu or Whalley Passage" with the words: "This
  95. advantageous route, first discovered in 1850 by Captain Whalley in the
  96. ship Condor," &amp;c., and ends by recommending it warmly to sailing vessels
  97. leaving the China ports for the south in the months from December to
  98. April inclusive.</p>
  99. <p>This was the clearest gain he had out of life. Nothing could rob him
  100. of this kind of fame. The piercing of the Isthmus of Suez, like the
  101. breaking of a dam, had let in upon the East a flood of new ships, new
  102. men, new methods of trade. It had changed the face of the Eastern seas
  103. and the very spirit of their life; so that his early experiences meant
  104. nothing whatever to the new generation of seamen.</p>
  105. <p>In those bygone days he had handled many thousands of pounds of his
  106. employers' money and of his own; he had attended faithfully, as by law
  107. a shipmaster is expected to do, to the conflicting interests of owners,
  108. charterers, and underwriters. He had never lost a ship or consented to
  109. a shady transaction; and he had lasted well, outlasting in the end the
  110. conditions that had gone to the making of his name. He had buried his
  111. wife (in the Gulf of Petchili), had married off his daughter to the man
  112. of her unlucky choice, and had lost more than an ample competence in the
  113. crash of the notorious Travancore and Deccan Banking Corporation, whose
  114. downfall had shaken the East like an earthquake. And he was sixty-five
  115. years old.</p>
  116. <p>His age sat lightly enough on him; and of his ruin he was not ashamed.
  117. He had not been alone to believe in the stability of the Banking
  118. Corporation. Men whose judgment in matters of finance was as expert as
  119. his seamanship had commended the prudence of his investments, and had
  120. themselves lost much money in the great failure. The only difference
  121. between him and them was that he had lost his all. And yet not his all.
  122. There had remained to him from his lost fortune a very pretty little
  123. bark, Fair Maid, which he had bought to occupy his leisure of a retired
  124. sailor--"to play with," as he expressed it himself.</p>
  125. <p>He had formally declared himself tired of the sea the year preceding his
  126. daughter's marriage. But after the young couple had gone to settle in
  127. Melbourne he found out that he could not make himself happy on shore. He
  128. was too much of a merchant sea-captain for mere yachting to satisfy him.
  129. He wanted the illusion of affairs; and his acquisition of the Fair
  130. Maid preserved the continuity of his life. He introduced her to his
  131. acquaintances in various ports as "my last command." When he grew too
  132. old to be trusted with a ship, he would lay her up and go ashore to be
  133. buried, leaving directions in his will to have the bark towed out and
  134. scuttled decently in deep water on the day of the funeral. His daughter
  135. would not grudge him the satisfaction of knowing that no stranger would
  136. handle his last command after him. With the fortune he was able to leave
  137. her, the value of a 500-ton bark was neither here nor there. All this
  138. would be said with a jocular twinkle in his eye: the vigorous old man
  139. had too much vitality for the sentimentalism of regret; and a little
  140. wistfully withal, because he was at home in life, taking a genuine
  141. pleasure in its feelings and its possessions; in the dignity of his
  142. reputation and his wealth, in his love for his daughter, and in his
  143. satisfaction with the ship--the plaything of his lonely leisure.</p>
  144. <p>He had the cabin arranged in accordance with his simple ideal of comfort
  145. at sea. A big bookcase (he was a great reader) occupied one side of his
  146. stateroom; the portrait of his late wife, a flat bituminous oil-painting
  147. representing the profile and one long black ringlet of a young woman,
  148. faced his bed-place. Three chronometers ticked him to sleep and greeted
  149. him on waking with the tiny competition of their beats. He rose at five
  150. every day. The officer of the morning watch, drinking his early cup
  151. of coffee aft by the wheel, would hear through the wide orifice of the
  152. copper ventilators all the splashings, blowings, and splutterings of
  153. his captain's toilet. These noises would be followed by a sustained
  154. deep murmur of the Lord's Prayer recited in a loud earnest voice. Five
  155. minutes afterwards the head and shoulders of Captain Whalley emerged
  156. out of the companion-hatchway. Invariably he paused for a while on the
  157. stairs, looking all round at the horizon; upwards at the trim of the
  158. sails; inhaling deep draughts of the fresh air. Only then he would step
  159. out on the poop, acknowledging the hand raised to the peak of the cap
  160. with a majestic and benign "Good morning to you." He walked the deck
  161. till eight scrupulously. Sometimes, not above twice a year, he had to
  162. use a thick cudgel-like stick on account of a stiffness in the hip--a
  163. slight touch of rheumatism, he supposed. Otherwise he knew nothing of
  164. the ills of the flesh. At the ringing of the breakfast bell he went
  165. below to feed his canaries, wind up the chronometers, and take the
  166. head of the table. From there he had before his eyes the big carbon
  167. photographs of his daughter, her husband, and two fat-legged babies
  168. --his grandchildren--set in black frames into the maplewood bulkheads
  169. of the cuddy. After breakfast he dusted the glass over these portraits
  170. himself with a cloth, and brushed the oil painting of his wife with a
  171. plumate kept suspended from a small brass hook by the side of the heavy
  172. gold frame. Then with the door of his stateroom shut, he would sit down
  173. on the couch under the portrait to read a chapter out of a thick pocket
  174. Bible--her Bible. But on some days he only sat there for half an hour
  175. with his finger between the leaves and the closed book resting on his
  176. knees. Perhaps he had remembered suddenly how fond of boat-sailing she
  177. used to be.</p>
  178. <p>She had been a real shipmate and a true woman too. It was like an
  179. article of faith with him that there never had been, and never could be,
  180. a brighter, cheerier home anywhere afloat or ashore than his home under
  181. the poop-deck of the Condor, with the big main cabin all white and gold,
  182. garlanded as if for a perpetual festival with an unfading wreath. She
  183. had decorated the center of every panel with a cluster of home flowers.
  184. It took her a twelvemonth to go round the cuddy with this labor of love.
  185. To him it had remained a marvel of painting, the highest achievement of
  186. taste and skill; and as to old Swinburne, his mate, every time he
  187. came down to his meals he stood transfixed with admiration before the
  188. progress of the work. You could almost smell these roses, he declared,
  189. sniffing the faint flavor of turpentine which at that time pervaded the
  190. saloon, and (as he confessed afterwards) made him somewhat less hearty
  191. than usual in tackling his food. But there was nothing of the sort to
  192. interfere with his enjoyment of her singing. "Mrs. Whalley is a regular
  193. out-and-out nightingale, sir," he would pronounce with a judicial air
  194. after listening profoundly over the skylight to the very end of the
  195. piece. In fine weather, in the second dog-watch, the two men could hear
  196. her trills and roulades going on to the accompaniment of the piano in
  197. the cabin. On the very day they got engaged he had written to London
  198. for the instrument; but they had been married for over a year before it
  199. reached them, coming out round the Cape. The big case made part of the
  200. first direct general cargo landed in Hong-kong harbor--an event that to
  201. the men who walked the busy quays of to-day seemed as hazily remote as
  202. the dark ages of history. But Captain Whalley could in a half hour of
  203. solitude live again all his life, with its romance, its idyl, and its
  204. sorrow. He had to close her eyes himself. She went away from under the
  205. ensign like a sailor's wife, a sailor herself at heart. He had read
  206. the service over her, out of her own prayer-book, without a break in his
  207. voice. When he raised his eyes he could see old Swinburne facing him
  208. with his cap pressed to his breast, and his rugged, weather-beaten,
  209. impassive face streaming with drops of water like a lump of chipped red
  210. granite in a shower. It was all very well for that old sea-dog to cry.
  211. He had to read on to the end; but after the splash he did not remember
  212. much of what happened for the next few days. An elderly sailor of the
  213. crew, deft at needlework, put together a mourning frock for the child
  214. out of one of her black skirts.</p>
  215. <p>He was not likely to forget; but you cannot dam up life like a sluggish
  216. stream. It will break out and flow over a man's troubles, it will close
  217. upon a sorrow like the sea upon a dead body, no matter how much love has
  218. gone to the bottom. And the world is not bad. People had been very
  219. kind to him; especially Mrs. Gardner, the wife of the senior partner
  220. in Gardner, Patteson, &amp; Co., the owners of the Condor. It was she who
  221. volunteered to look after the little one, and in due course took her to
  222. England (something of a journey in those days, even by the overland
  223. mail route) with her own girls to finish her education. It was ten years
  224. before he saw her again.</p>
  225. <p>As a little child she had never been frightened of bad weather; she
  226. would beg to be taken up on deck in the bosom of his oilskin coat to
  227. watch the big seas hurling themselves upon the Condor. The swirl and
  228. crash of the waves seemed to fill her small soul with a breathless
  229. delight. "A good boy spoiled," he used to say of her in joke. He had
  230. named her Ivy because of the sound of the word, and obscurely fascinated
  231. by a vague association of ideas. She had twined herself tightly round
  232. his heart, and he intended her to cling close to her father as to a
  233. tower of strength; forgetting, while she was little, that in the nature
  234. of things she would probably elect to cling to someone else. But
  235. he loved life well enough for even that event to give him a certain
  236. satisfaction, apart from his more intimate feeling of loss.</p>
  237. <p>After he had purchased the Fair Maid to occupy his loneliness, he
  238. hastened to accept a rather unprofitable freight to Australia simply for
  239. the opportunity of seeing his daughter in her own home. What made him
  240. dissatisfied there was not to see that she clung now to somebody else,
  241. but that the prop she had selected seemed on closer examination "a
  242. rather poor stick"--even in the matter of health. He disliked his
  243. son-in-law's studied civility perhaps more than his method of
  244. handling the sum of money he had given Ivy at her marriage. But of his
  245. apprehensions he said nothing. Only on the day of his departure, with
  246. the hall-door open already, holding her hands and looking steadily into
  247. her eyes, he had said, "You know, my dear, all I have is for you and the
  248. chicks. Mind you write to me openly." She had answered him by an almost
  249. imperceptible movement of her head. She resembled her mother in
  250. the color of her eyes, and in character--and also in this, that she
  251. understood him without many words.</p>
  252. <p>Sure enough she had to write; and some of these letters made Captain
  253. Whalley lift his white eye-brows. For the rest he considered he was
  254. reaping the true reward of his life by being thus able to produce on
  255. demand whatever was needed. He had not enjoyed himself so much in a
  256. way since his wife had died. Characteristically enough his son-in-law's
  257. punctuality in failure caused him at a distance to feel a sort of
  258. kindness towards the man. The fellow was so perpetually being jammed on
  259. a lee shore that to charge it all to his reckless navigation would be
  260. manifestly unfair. No, no! He knew well what that meant. It was bad
  261. luck. His own had been simply marvelous, but he had seen in his life too
  262. many good men--seamen and others--go under with the sheer weight of bad
  263. luck not to recognize the fatal signs. For all that, he was cogitating
  264. on the best way of tying up very strictly every penny he had to leave,
  265. when, with a preliminary rumble of rumors (whose first sound reached
  266. him in Shanghai as it happened), the shock of the big failure came;
  267. and, after passing through the phases of stupor, of incredulity, of
  268. indignation, he had to accept the fact that he had nothing to speak of
  269. to leave.</p>
  270. <p>Upon that, as if he had only waited for this catastrophe, the unlucky
  271. man, away there in Melbourne, gave up his unprofitable game, and sat
  272. down--in an invalid's bath-chair at that too. "He will never walk
  273. again," wrote the wife. For the first time in his life Captain Whalley
  274. was a bit staggered.</p>
  275. <p>The Fair Maid had to go to work in bitter earnest now. It was no longer
  276. a matter of preserving alive the memory of Dare-devil Harry Whalley in
  277. the Eastern Seas, or of keeping an old man in pocket-money and clothes,
  278. with, perhaps, a bill for a few hundred first-class cigars thrown in at
  279. the end of the year. He would have to buckle-to, and keep her going hard
  280. on a scant allowance of gilt for the ginger-bread scrolls at her stem
  281. and stern.</p>
  282. <p>This necessity opened his eyes to the fundamental changes of the world.
  283. Of his past only the familiar names remained, here and there, but
  284. the things and the men, as he had known them, were gone. The name of
  285. Gardner, Patteson, &amp; Co. was still displayed on the walls of warehouses
  286. by the waterside, on the brass plates and window-panes in the business
  287. quarters of more than one Eastern port, but there was no longer a
  288. Gardner or a Patteson in the firm. There was no longer for Captain
  289. Whalley an arm-chair and a welcome in the private office, with a bit of
  290. business ready to be put in the way of an old friend, for the sake of
  291. bygone services. The husbands of the Gardner girls sat behind the desks
  292. in that room where, long after he had left the employ, he had kept his
  293. right of entrance in the old man's time. Their ships now had yellow
  294. funnels with black tops, and a time-table of appointed routes like a
  295. confounded service of tramways. The winds of December and June were all
  296. one to them; their captains (excellent young men he doubted not) were,
  297. to be sure, familiar with Whalley Island, because of late years the
  298. Government had established a white fixed light on the north end (with
  299. a red danger sector over the Condor Reef), but most of them would have
  300. been extremely surprised to hear that a flesh-and-blood Whalley still
  301. existed--an old man going about the world trying to pick up a cargo here
  302. and there for his little bark.</p>
  303. <p>And everywhere it was the same. Departed the men who would have nodded
  304. appreciatively at the mention of his name, and would have thought
  305. themselves bound in honor to do something for Dare-devil Harry Whalley.
  306. Departed the opportunities which he would have known how to seize; and
  307. gone with them the white-winged flock of clippers that lived in the
  308. boisterous uncertain life of the winds, skimming big fortunes out of
  309. the foam of the sea. In a world that pared down the profits to an
  310. irreducible minimum, in a world that was able to count its disengaged
  311. tonnage twice over every day, and in which lean charters were snapped up
  312. by cable three months in advance, there were no chances of fortune for
  313. an individual wandering haphazard with a little bark--hardly indeed any
  314. room to exist.</p>
  315. <p>He found it more difficult from year to year. He suffered greatly from
  316. the smallness of remittances he was able to send his daughter. Meantime
  317. he had given up good cigars, and even in the matter of inferior cheroots
  318. limited himself to six a day. He never told her of his difficulties, and
  319. she never enlarged upon her struggle to live. Their confidence in each
  320. other needed no explanations, and their perfect understanding endured
  321. without protestations of gratitude or regret. He would have been shocked
  322. if she had taken it into her head to thank him in so many words, but
  323. he found it perfectly natural that she should tell him she needed two
  324. hundred pounds.</p>
  325. <p>He had come in with the Fair Maid in ballast to look for a freight in
  326. the Sofala's port of registry, and her letter met him there. Its tenor
  327. was that it was no use mincing matters. Her only resource was in opening
  328. a boarding-house, for which the prospects, she judged, were good. Good
  329. enough, at any rate, to make her tell him frankly that with two hundred
  330. pounds she could make a start. He had torn the envelope open, hastily,
  331. on deck, where it was handed to him by the ship-chandler's runner, who
  332. had brought his mail at the moment of anchoring. For the second time
  333. in his life he was appalled, and remained stock-still at the cabin door
  334. with the paper trembling between his fingers. Open a boarding-house! Two
  335. hundred pounds for a start! The only resource! And he did not know where
  336. to lay his hands on two hundred pence.</p>
  337. <p>All that night Captain Whalley walked the poop of his anchored ship, as
  338. though he had been about to close with the land in thick weather, and
  339. uncertain of his position after a run of many gray days without a sight
  340. of sun, moon, or stars. The black night twinkled with the guiding lights
  341. of seamen and the steady straight lines of lights on shore; and all
  342. around the Fair Maid the riding lights of ships cast trembling trails
  343. upon the water of the roadstead. Captain Whalley saw not a gleam
  344. anywhere till the dawn broke and he found out that his clothing was
  345. soaked through with the heavy dew.</p>
  346. <p>His ship was awake. He stopped short, stroked his wet beard, and
  347. descended the poop ladder backwards, with tired feet. At the sight
  348. of him the chief officer, lounging about sleepily on the quarterdeck,
  349. remained open-mouthed in the middle of a great early-morning yawn.</p>
  350. <p>"Good morning to you," pronounced Captain Whalley solemnly, passing into
  351. the cabin. But he checked himself in the doorway, and without looking
  352. back, "By the bye," he said, "there should be an empty wooden case put
  353. away in the lazarette. It has not been broken up--has it?"</p>
  354. <p>The mate shut his mouth, and then asked as if dazed, "What empty case,
  355. sir?"</p>
  356. <p>"A big flat packing-case belonging to that painting in my room. Let it
  357. be taken up on deck and tell the carpenter to look it over. I may want
  358. to use it before long."</p>
  359. <p>The chief officer did not stir a limb till he had heard the door of the
  360. captain's state-room slam within the cuddy. Then he beckoned aft the
  361. second mate with his forefinger to tell him that there was something "in
  362. the wind."</p>
  363. <p>When the bell rang Captain Whalley's authoritative voice boomed out
  364. through a closed door, "Sit down and don't wait for me." And his
  365. impressed officers took their places, exchanging looks and whispers
  366. across the table. What! No breakfast? And after apparently knocking
  367. about all night on deck, too! Clearly, there was something in the wind.
  368. In the skylight above their heads, bowed earnestly over the plates,
  369. three wire cages rocked and rattled to the restless jumping of the
  370. hungry canaries; and they could detect the sounds of their "old
  371. man's" deliberate movements within his state-room. Captain Whalley was
  372. methodically winding up the chronometers, dusting the portrait of
  373. his late wife, getting a clean white shirt out of the drawers, making
  374. himself ready in his punctilious unhurried manner to go ashore. He could
  375. not have swallowed a single mouthful of food that morning. He had made
  376. up his mind to sell the Fair Maid.</p>
  377. </div>
  378. <div class="pointer"></div>
  379. <style>
  380. body {
  381. cursor: pointer;
  382. }
  383. .scroll {
  384. height: 80vh;
  385. width: 80vw;
  386. max-height: 600px;
  387. position: fixed;
  388. top: 5em;
  389. left: 10vw;
  390. overflow-y: scroll;
  391. padding: 4em;
  392. box-sizing: border-box;
  393. line-height: 1.2;
  394. }
  395. .scroll::-webkit-scrollbar, .scroll::-webkit-scrollbar-track, .scroll::-webkit-scrollbar-thumb {
  396. display: none;
  397. }
  398. .pointer {
  399. height: 3.6em;
  400. width: 77vw;
  401. border: 5px solid #CCC;
  402. border-radius: 15px;
  403. background-color: rgba(0, 0, 0, 0.05);
  404. pointer-events: none;
  405. }
  406. .highlight {
  407. background-color: rgba(255, 255, 0, 0.3);
  408. }
  409. .hover {
  410. background-color: rgba(0, 255, 255, 0.2);
  411. }
  412. </style>
  413. <script src="//github.hubspot.com/tether/dist/js/tether.js"></script>
  414. <script>
  415. var pointer = document.querySelector('.pointer');
  416. var scroll = document.querySelector('.scroll');
  417. // This creates the pointer tether and links it up
  418. // with the scroll handle
  419. new Tether({
  420. element: pointer,
  421. target: scroll,
  422. attachment: 'middle right',
  423. targetAttachment: 'middle left',
  424. targetModifier: 'scroll-handle'
  425. });
  426. // Everything after this is for the highlighting effect
  427. var paras = document.querySelectorAll('p');
  428. for(var i=paras.length; i--;){
  429. var sents = paras[i].innerHTML.split('.');
  430. for (var j=sents.length; j--;){
  431. if (sents[j].trim().length)
  432. sents[j] = '<span>' + sents[j] + '.</span>';
  433. }
  434. paras[i].innerHTML = sents.join('');
  435. }
  436. var spans = document.querySelectorAll('p span');
  437. function highlight(){
  438. if (!spans) return;
  439. var bar = pointer.getBoundingClientRect();
  440. for (var i=spans.length; i--;){
  441. var coord = spans[i].getBoundingClientRect();
  442. if (bar.top < coord.top && bar.bottom > coord.top){
  443. spans[i].classList.add('hover');
  444. } else if (spans[i].classList.contains('hover')) {
  445. spans[i].classList.remove('hover');
  446. }
  447. }
  448. requestAnimationFrame(highlight);
  449. }
  450. highlight();
  451. document.body.addEventListener('click', function(){
  452. var els = document.querySelectorAll('.hover');
  453. for (var i=els.length; i--;)
  454. els[i].classList.toggle('highlight');
  455. });
  456. </script>
  457. </body>
  458. </html>