mirror of
https://github.com/adlerosn/20171_comercioeletronico_atividade01.git
synced 2024-06-25 20:30:12 +00:00
500 lines
29 KiB
HTML
500 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="../resources/css/base.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<div class="scroll">
|
|
<p>For a long time after the course of the steamer <em>Sofala</em> had been
|
|
altered for the land, the low swampy coast had retained its appearance
|
|
of a mere smudge of darkness beyond a belt of glitter. The sunrays
|
|
seemed to fall violently upon the calm sea--seemed to shatter themselves
|
|
upon an adamantine surface into sparkling dust, into a dazzling vapor
|
|
of light that blinded the eye and wearied the brain with its unsteady
|
|
brightness.</p>
|
|
|
|
<p>Captain Whalley did not look at it. When his Serang, approaching the
|
|
roomy cane arm-chair which he filled capably, had informed him in a low
|
|
voice that the course was to be altered, he had risen at once and had
|
|
remained on his feet, face forward, while the head of his ship swung
|
|
through a quarter of a circle. He had not uttered a single word, not
|
|
even the word to steady the helm. It was the Serang, an elderly, alert,
|
|
little Malay, with a very dark skin, who murmured the order to the
|
|
helmsman. And then slowly Captain Whalley sat down again in the
|
|
arm-chair on the bridge and fixed his eyes on the deck between his feet.</p>
|
|
|
|
<p>He could not hope to see anything new upon this lane of the sea. He had
|
|
been on these coasts for the last three years. From Low Cape to Malantan
|
|
the distance was fifty miles, six hours' steaming for the old ship with
|
|
the tide, or seven against. Then you steered straight for the land, and
|
|
by-and-by three palms would appear on the sky, tall and slim, and with
|
|
their disheveled heads in a bunch, as if in confidential criticism of
|
|
the dark mangroves. The Sofala would be headed towards the somber
|
|
strip of the coast, which at a given moment, as the ship closed with
|
|
it obliquely, would show several clean shining fractures--the brimful
|
|
estuary of a river. Then on through a brown liquid, three parts water
|
|
and one part black earth, on and on between the low shores, three parts
|
|
black earth and one part brackish water, the Sofala would plow her way
|
|
up-stream, as she had done once every month for these seven years or
|
|
more, long before he was aware of her existence, long before he had ever
|
|
thought of having anything to do with her and her invariable voyages.
|
|
The old ship ought to have known the road better than her men, who had
|
|
not been kept so long at it without a change; better than the faithful
|
|
Serang, whom he had brought over from his last ship to keep the
|
|
captain's watch; better than he himself, who had been her captain for
|
|
the last three years only. She could always be depended upon to make her
|
|
courses. Her compasses were never out. She was no trouble at all to
|
|
take about, as if her great age had given her knowledge, wisdom, and
|
|
steadiness. She made her landfalls to a degree of the bearing, and
|
|
almost to a minute of her allowed time. At any moment, as he sat on
|
|
the bridge without looking up, or lay sleepless in his bed, simply by
|
|
reckoning the days and the hours he could tell where he was--the precise
|
|
spot of the beat. He knew it well too, this monotonous huckster's
|
|
round, up and down the Straits; he knew its order and its sights and its
|
|
people. Malacca to begin with, in at daylight and out at dusk, to cross
|
|
over with a rigid phosphorescent wake this highway of the Far East.
|
|
Darkness and gleams on the water, clear stars on a black sky, perhaps
|
|
the lights of a home steamer keeping her unswerving course in the
|
|
middle, or maybe the elusive shadow of a native craft with her mat sails
|
|
flitting by silently--and the low land on the other side in sight
|
|
at daylight. At noon the three palms of the next place of call, up a
|
|
sluggish river. The only white man residing there was a retired young
|
|
sailor, with whom he had become friendly in the course of many voyages.
|
|
Sixty miles farther on there was another place of call, a deep bay with
|
|
only a couple of houses on the beach. And so on, in and out, picking
|
|
up coastwise cargo here and there, and finishing with a hundred miles'
|
|
steady steaming through the maze of an archipelago of small islands up
|
|
to a large native town at the end of the beat. There was a three days'
|
|
rest for the old ship before he started her again in inverse order,
|
|
seeing the same shores from another bearing, hearing the same voices
|
|
in the same places, back again to the Sofala's port of registry on
|
|
the great highway to the East, where he would take up a berth nearly
|
|
opposite the big stone pile of the harbor office till it was time to
|
|
start again on the old round of 1600 miles and thirty days. Not a very
|
|
enterprising life, this, for Captain Whalley, Henry Whalley, otherwise
|
|
Dare-devil Harry--Whalley of the Condor, a famous clipper in her day.
|
|
No. Not a very enterprising life for a man who had served famous firms,
|
|
who had sailed famous ships (more than one or two of them his own); who
|
|
had made famous passages, had been the pioneer of new routes and new
|
|
trades; who had steered across the unsurveyed tracts of the South Seas,
|
|
and had seen the sun rise on uncharted islands. Fifty years at sea, and
|
|
forty out in the East ("a pretty thorough apprenticeship," he used
|
|
to remark smilingly), had made him honorably known to a generation of
|
|
shipowners and merchants in all the ports from Bombay clear over to
|
|
where the East merges into the West upon the coast of the two Americas.
|
|
His fame remained writ, not very large but plain enough, on the
|
|
Admiralty charts. Was there not somewhere between Australia and China a
|
|
Whalley Island and a Condor Reef? On that dangerous coral formation the
|
|
celebrated clipper had hung stranded for three days, her captain and
|
|
crew throwing her cargo overboard with one hand and with the other, as
|
|
it were, keeping off her a flotilla of savage war-canoes. At that time
|
|
neither the island nor the reef had any official existence. Later the
|
|
officers of her Majesty's steam vessel Fusilier, dispatched to make a
|
|
survey of the route, recognized in the adoption of these two names the
|
|
enterprise of the man and the solidity of the ship. Besides, as anyone
|
|
who cares may see, the "General Directory," vol. ii. p. 410, begins the
|
|
description of the "Malotu or Whalley Passage" with the words: "This
|
|
advantageous route, first discovered in 1850 by Captain Whalley in the
|
|
ship Condor," &c., and ends by recommending it warmly to sailing vessels
|
|
leaving the China ports for the south in the months from December to
|
|
April inclusive.</p>
|
|
|
|
<p>This was the clearest gain he had out of life. Nothing could rob him
|
|
of this kind of fame. The piercing of the Isthmus of Suez, like the
|
|
breaking of a dam, had let in upon the East a flood of new ships, new
|
|
men, new methods of trade. It had changed the face of the Eastern seas
|
|
and the very spirit of their life; so that his early experiences meant
|
|
nothing whatever to the new generation of seamen.</p>
|
|
|
|
<p>In those bygone days he had handled many thousands of pounds of his
|
|
employers' money and of his own; he had attended faithfully, as by law
|
|
a shipmaster is expected to do, to the conflicting interests of owners,
|
|
charterers, and underwriters. He had never lost a ship or consented to
|
|
a shady transaction; and he had lasted well, outlasting in the end the
|
|
conditions that had gone to the making of his name. He had buried his
|
|
wife (in the Gulf of Petchili), had married off his daughter to the man
|
|
of her unlucky choice, and had lost more than an ample competence in the
|
|
crash of the notorious Travancore and Deccan Banking Corporation, whose
|
|
downfall had shaken the East like an earthquake. And he was sixty-five
|
|
years old.</p>
|
|
|
|
<p>His age sat lightly enough on him; and of his ruin he was not ashamed.
|
|
He had not been alone to believe in the stability of the Banking
|
|
Corporation. Men whose judgment in matters of finance was as expert as
|
|
his seamanship had commended the prudence of his investments, and had
|
|
themselves lost much money in the great failure. The only difference
|
|
between him and them was that he had lost his all. And yet not his all.
|
|
There had remained to him from his lost fortune a very pretty little
|
|
bark, Fair Maid, which he had bought to occupy his leisure of a retired
|
|
sailor--"to play with," as he expressed it himself.</p>
|
|
|
|
<p>He had formally declared himself tired of the sea the year preceding his
|
|
daughter's marriage. But after the young couple had gone to settle in
|
|
Melbourne he found out that he could not make himself happy on shore. He
|
|
was too much of a merchant sea-captain for mere yachting to satisfy him.
|
|
He wanted the illusion of affairs; and his acquisition of the Fair
|
|
Maid preserved the continuity of his life. He introduced her to his
|
|
acquaintances in various ports as "my last command." When he grew too
|
|
old to be trusted with a ship, he would lay her up and go ashore to be
|
|
buried, leaving directions in his will to have the bark towed out and
|
|
scuttled decently in deep water on the day of the funeral. His daughter
|
|
would not grudge him the satisfaction of knowing that no stranger would
|
|
handle his last command after him. With the fortune he was able to leave
|
|
her, the value of a 500-ton bark was neither here nor there. All this
|
|
would be said with a jocular twinkle in his eye: the vigorous old man
|
|
had too much vitality for the sentimentalism of regret; and a little
|
|
wistfully withal, because he was at home in life, taking a genuine
|
|
pleasure in its feelings and its possessions; in the dignity of his
|
|
reputation and his wealth, in his love for his daughter, and in his
|
|
satisfaction with the ship--the plaything of his lonely leisure.</p>
|
|
|
|
<p>He had the cabin arranged in accordance with his simple ideal of comfort
|
|
at sea. A big bookcase (he was a great reader) occupied one side of his
|
|
stateroom; the portrait of his late wife, a flat bituminous oil-painting
|
|
representing the profile and one long black ringlet of a young woman,
|
|
faced his bed-place. Three chronometers ticked him to sleep and greeted
|
|
him on waking with the tiny competition of their beats. He rose at five
|
|
every day. The officer of the morning watch, drinking his early cup
|
|
of coffee aft by the wheel, would hear through the wide orifice of the
|
|
copper ventilators all the splashings, blowings, and splutterings of
|
|
his captain's toilet. These noises would be followed by a sustained
|
|
deep murmur of the Lord's Prayer recited in a loud earnest voice. Five
|
|
minutes afterwards the head and shoulders of Captain Whalley emerged
|
|
out of the companion-hatchway. Invariably he paused for a while on the
|
|
stairs, looking all round at the horizon; upwards at the trim of the
|
|
sails; inhaling deep draughts of the fresh air. Only then he would step
|
|
out on the poop, acknowledging the hand raised to the peak of the cap
|
|
with a majestic and benign "Good morning to you." He walked the deck
|
|
till eight scrupulously. Sometimes, not above twice a year, he had to
|
|
use a thick cudgel-like stick on account of a stiffness in the hip--a
|
|
slight touch of rheumatism, he supposed. Otherwise he knew nothing of
|
|
the ills of the flesh. At the ringing of the breakfast bell he went
|
|
below to feed his canaries, wind up the chronometers, and take the
|
|
head of the table. From there he had before his eyes the big carbon
|
|
photographs of his daughter, her husband, and two fat-legged babies
|
|
--his grandchildren--set in black frames into the maplewood bulkheads
|
|
of the cuddy. After breakfast he dusted the glass over these portraits
|
|
himself with a cloth, and brushed the oil painting of his wife with a
|
|
plumate kept suspended from a small brass hook by the side of the heavy
|
|
gold frame. Then with the door of his stateroom shut, he would sit down
|
|
on the couch under the portrait to read a chapter out of a thick pocket
|
|
Bible--her Bible. But on some days he only sat there for half an hour
|
|
with his finger between the leaves and the closed book resting on his
|
|
knees. Perhaps he had remembered suddenly how fond of boat-sailing she
|
|
used to be.</p>
|
|
|
|
<p>She had been a real shipmate and a true woman too. It was like an
|
|
article of faith with him that there never had been, and never could be,
|
|
a brighter, cheerier home anywhere afloat or ashore than his home under
|
|
the poop-deck of the Condor, with the big main cabin all white and gold,
|
|
garlanded as if for a perpetual festival with an unfading wreath. She
|
|
had decorated the center of every panel with a cluster of home flowers.
|
|
It took her a twelvemonth to go round the cuddy with this labor of love.
|
|
To him it had remained a marvel of painting, the highest achievement of
|
|
taste and skill; and as to old Swinburne, his mate, every time he
|
|
came down to his meals he stood transfixed with admiration before the
|
|
progress of the work. You could almost smell these roses, he declared,
|
|
sniffing the faint flavor of turpentine which at that time pervaded the
|
|
saloon, and (as he confessed afterwards) made him somewhat less hearty
|
|
than usual in tackling his food. But there was nothing of the sort to
|
|
interfere with his enjoyment of her singing. "Mrs. Whalley is a regular
|
|
out-and-out nightingale, sir," he would pronounce with a judicial air
|
|
after listening profoundly over the skylight to the very end of the
|
|
piece. In fine weather, in the second dog-watch, the two men could hear
|
|
her trills and roulades going on to the accompaniment of the piano in
|
|
the cabin. On the very day they got engaged he had written to London
|
|
for the instrument; but they had been married for over a year before it
|
|
reached them, coming out round the Cape. The big case made part of the
|
|
first direct general cargo landed in Hong-kong harbor--an event that to
|
|
the men who walked the busy quays of to-day seemed as hazily remote as
|
|
the dark ages of history. But Captain Whalley could in a half hour of
|
|
solitude live again all his life, with its romance, its idyl, and its
|
|
sorrow. He had to close her eyes himself. She went away from under the
|
|
ensign like a sailor's wife, a sailor herself at heart. He had read
|
|
the service over her, out of her own prayer-book, without a break in his
|
|
voice. When he raised his eyes he could see old Swinburne facing him
|
|
with his cap pressed to his breast, and his rugged, weather-beaten,
|
|
impassive face streaming with drops of water like a lump of chipped red
|
|
granite in a shower. It was all very well for that old sea-dog to cry.
|
|
He had to read on to the end; but after the splash he did not remember
|
|
much of what happened for the next few days. An elderly sailor of the
|
|
crew, deft at needlework, put together a mourning frock for the child
|
|
out of one of her black skirts.</p>
|
|
|
|
<p>He was not likely to forget; but you cannot dam up life like a sluggish
|
|
stream. It will break out and flow over a man's troubles, it will close
|
|
upon a sorrow like the sea upon a dead body, no matter how much love has
|
|
gone to the bottom. And the world is not bad. People had been very
|
|
kind to him; especially Mrs. Gardner, the wife of the senior partner
|
|
in Gardner, Patteson, & Co., the owners of the Condor. It was she who
|
|
volunteered to look after the little one, and in due course took her to
|
|
England (something of a journey in those days, even by the overland
|
|
mail route) with her own girls to finish her education. It was ten years
|
|
before he saw her again.</p>
|
|
|
|
<p>As a little child she had never been frightened of bad weather; she
|
|
would beg to be taken up on deck in the bosom of his oilskin coat to
|
|
watch the big seas hurling themselves upon the Condor. The swirl and
|
|
crash of the waves seemed to fill her small soul with a breathless
|
|
delight. "A good boy spoiled," he used to say of her in joke. He had
|
|
named her Ivy because of the sound of the word, and obscurely fascinated
|
|
by a vague association of ideas. She had twined herself tightly round
|
|
his heart, and he intended her to cling close to her father as to a
|
|
tower of strength; forgetting, while she was little, that in the nature
|
|
of things she would probably elect to cling to someone else. But
|
|
he loved life well enough for even that event to give him a certain
|
|
satisfaction, apart from his more intimate feeling of loss.</p>
|
|
|
|
<p>After he had purchased the Fair Maid to occupy his loneliness, he
|
|
hastened to accept a rather unprofitable freight to Australia simply for
|
|
the opportunity of seeing his daughter in her own home. What made him
|
|
dissatisfied there was not to see that she clung now to somebody else,
|
|
but that the prop she had selected seemed on closer examination "a
|
|
rather poor stick"--even in the matter of health. He disliked his
|
|
son-in-law's studied civility perhaps more than his method of
|
|
handling the sum of money he had given Ivy at her marriage. But of his
|
|
apprehensions he said nothing. Only on the day of his departure, with
|
|
the hall-door open already, holding her hands and looking steadily into
|
|
her eyes, he had said, "You know, my dear, all I have is for you and the
|
|
chicks. Mind you write to me openly." She had answered him by an almost
|
|
imperceptible movement of her head. She resembled her mother in
|
|
the color of her eyes, and in character--and also in this, that she
|
|
understood him without many words.</p>
|
|
|
|
<p>Sure enough she had to write; and some of these letters made Captain
|
|
Whalley lift his white eye-brows. For the rest he considered he was
|
|
reaping the true reward of his life by being thus able to produce on
|
|
demand whatever was needed. He had not enjoyed himself so much in a
|
|
way since his wife had died. Characteristically enough his son-in-law's
|
|
punctuality in failure caused him at a distance to feel a sort of
|
|
kindness towards the man. The fellow was so perpetually being jammed on
|
|
a lee shore that to charge it all to his reckless navigation would be
|
|
manifestly unfair. No, no! He knew well what that meant. It was bad
|
|
luck. His own had been simply marvelous, but he had seen in his life too
|
|
many good men--seamen and others--go under with the sheer weight of bad
|
|
luck not to recognize the fatal signs. For all that, he was cogitating
|
|
on the best way of tying up very strictly every penny he had to leave,
|
|
when, with a preliminary rumble of rumors (whose first sound reached
|
|
him in Shanghai as it happened), the shock of the big failure came;
|
|
and, after passing through the phases of stupor, of incredulity, of
|
|
indignation, he had to accept the fact that he had nothing to speak of
|
|
to leave.</p>
|
|
|
|
<p>Upon that, as if he had only waited for this catastrophe, the unlucky
|
|
man, away there in Melbourne, gave up his unprofitable game, and sat
|
|
down--in an invalid's bath-chair at that too. "He will never walk
|
|
again," wrote the wife. For the first time in his life Captain Whalley
|
|
was a bit staggered.</p>
|
|
|
|
<p>The Fair Maid had to go to work in bitter earnest now. It was no longer
|
|
a matter of preserving alive the memory of Dare-devil Harry Whalley in
|
|
the Eastern Seas, or of keeping an old man in pocket-money and clothes,
|
|
with, perhaps, a bill for a few hundred first-class cigars thrown in at
|
|
the end of the year. He would have to buckle-to, and keep her going hard
|
|
on a scant allowance of gilt for the ginger-bread scrolls at her stem
|
|
and stern.</p>
|
|
|
|
<p>This necessity opened his eyes to the fundamental changes of the world.
|
|
Of his past only the familiar names remained, here and there, but
|
|
the things and the men, as he had known them, were gone. The name of
|
|
Gardner, Patteson, & Co. was still displayed on the walls of warehouses
|
|
by the waterside, on the brass plates and window-panes in the business
|
|
quarters of more than one Eastern port, but there was no longer a
|
|
Gardner or a Patteson in the firm. There was no longer for Captain
|
|
Whalley an arm-chair and a welcome in the private office, with a bit of
|
|
business ready to be put in the way of an old friend, for the sake of
|
|
bygone services. The husbands of the Gardner girls sat behind the desks
|
|
in that room where, long after he had left the employ, he had kept his
|
|
right of entrance in the old man's time. Their ships now had yellow
|
|
funnels with black tops, and a time-table of appointed routes like a
|
|
confounded service of tramways. The winds of December and June were all
|
|
one to them; their captains (excellent young men he doubted not) were,
|
|
to be sure, familiar with Whalley Island, because of late years the
|
|
Government had established a white fixed light on the north end (with
|
|
a red danger sector over the Condor Reef), but most of them would have
|
|
been extremely surprised to hear that a flesh-and-blood Whalley still
|
|
existed--an old man going about the world trying to pick up a cargo here
|
|
and there for his little bark.</p>
|
|
|
|
<p>And everywhere it was the same. Departed the men who would have nodded
|
|
appreciatively at the mention of his name, and would have thought
|
|
themselves bound in honor to do something for Dare-devil Harry Whalley.
|
|
Departed the opportunities which he would have known how to seize; and
|
|
gone with them the white-winged flock of clippers that lived in the
|
|
boisterous uncertain life of the winds, skimming big fortunes out of
|
|
the foam of the sea. In a world that pared down the profits to an
|
|
irreducible minimum, in a world that was able to count its disengaged
|
|
tonnage twice over every day, and in which lean charters were snapped up
|
|
by cable three months in advance, there were no chances of fortune for
|
|
an individual wandering haphazard with a little bark--hardly indeed any
|
|
room to exist.</p>
|
|
|
|
<p>He found it more difficult from year to year. He suffered greatly from
|
|
the smallness of remittances he was able to send his daughter. Meantime
|
|
he had given up good cigars, and even in the matter of inferior cheroots
|
|
limited himself to six a day. He never told her of his difficulties, and
|
|
she never enlarged upon her struggle to live. Their confidence in each
|
|
other needed no explanations, and their perfect understanding endured
|
|
without protestations of gratitude or regret. He would have been shocked
|
|
if she had taken it into her head to thank him in so many words, but
|
|
he found it perfectly natural that she should tell him she needed two
|
|
hundred pounds.</p>
|
|
|
|
<p>He had come in with the Fair Maid in ballast to look for a freight in
|
|
the Sofala's port of registry, and her letter met him there. Its tenor
|
|
was that it was no use mincing matters. Her only resource was in opening
|
|
a boarding-house, for which the prospects, she judged, were good. Good
|
|
enough, at any rate, to make her tell him frankly that with two hundred
|
|
pounds she could make a start. He had torn the envelope open, hastily,
|
|
on deck, where it was handed to him by the ship-chandler's runner, who
|
|
had brought his mail at the moment of anchoring. For the second time
|
|
in his life he was appalled, and remained stock-still at the cabin door
|
|
with the paper trembling between his fingers. Open a boarding-house! Two
|
|
hundred pounds for a start! The only resource! And he did not know where
|
|
to lay his hands on two hundred pence.</p>
|
|
|
|
<p>All that night Captain Whalley walked the poop of his anchored ship, as
|
|
though he had been about to close with the land in thick weather, and
|
|
uncertain of his position after a run of many gray days without a sight
|
|
of sun, moon, or stars. The black night twinkled with the guiding lights
|
|
of seamen and the steady straight lines of lights on shore; and all
|
|
around the Fair Maid the riding lights of ships cast trembling trails
|
|
upon the water of the roadstead. Captain Whalley saw not a gleam
|
|
anywhere till the dawn broke and he found out that his clothing was
|
|
soaked through with the heavy dew.</p>
|
|
|
|
<p>His ship was awake. He stopped short, stroked his wet beard, and
|
|
descended the poop ladder backwards, with tired feet. At the sight
|
|
of him the chief officer, lounging about sleepily on the quarterdeck,
|
|
remained open-mouthed in the middle of a great early-morning yawn.</p>
|
|
|
|
<p>"Good morning to you," pronounced Captain Whalley solemnly, passing into
|
|
the cabin. But he checked himself in the doorway, and without looking
|
|
back, "By the bye," he said, "there should be an empty wooden case put
|
|
away in the lazarette. It has not been broken up--has it?"</p>
|
|
|
|
<p>The mate shut his mouth, and then asked as if dazed, "What empty case,
|
|
sir?"</p>
|
|
|
|
<p>"A big flat packing-case belonging to that painting in my room. Let it
|
|
be taken up on deck and tell the carpenter to look it over. I may want
|
|
to use it before long."</p>
|
|
|
|
<p>The chief officer did not stir a limb till he had heard the door of the
|
|
captain's state-room slam within the cuddy. Then he beckoned aft the
|
|
second mate with his forefinger to tell him that there was something "in
|
|
the wind."</p>
|
|
|
|
<p>When the bell rang Captain Whalley's authoritative voice boomed out
|
|
through a closed door, "Sit down and don't wait for me." And his
|
|
impressed officers took their places, exchanging looks and whispers
|
|
across the table. What! No breakfast? And after apparently knocking
|
|
about all night on deck, too! Clearly, there was something in the wind.
|
|
In the skylight above their heads, bowed earnestly over the plates,
|
|
three wire cages rocked and rattled to the restless jumping of the
|
|
hungry canaries; and they could detect the sounds of their "old
|
|
man's" deliberate movements within his state-room. Captain Whalley was
|
|
methodically winding up the chronometers, dusting the portrait of
|
|
his late wife, getting a clean white shirt out of the drawers, making
|
|
himself ready in his punctilious unhurried manner to go ashore. He could
|
|
not have swallowed a single mouthful of food that morning. He had made
|
|
up his mind to sell the Fair Maid.</p>
|
|
</div>
|
|
|
|
<div class="pointer"></div>
|
|
|
|
<style>
|
|
body {
|
|
cursor: pointer;
|
|
}
|
|
.scroll {
|
|
height: 80vh;
|
|
width: 80vw;
|
|
max-height: 600px;
|
|
position: fixed;
|
|
top: 5em;
|
|
left: 10vw;
|
|
|
|
overflow-y: scroll;
|
|
padding: 4em;
|
|
box-sizing: border-box;
|
|
line-height: 1.2;
|
|
}
|
|
.scroll::-webkit-scrollbar, .scroll::-webkit-scrollbar-track, .scroll::-webkit-scrollbar-thumb {
|
|
display: none;
|
|
}
|
|
|
|
.pointer {
|
|
height: 3.6em;
|
|
width: 77vw;
|
|
border: 5px solid #CCC;
|
|
border-radius: 15px;
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
pointer-events: none;
|
|
}
|
|
.highlight {
|
|
background-color: rgba(255, 255, 0, 0.3);
|
|
}
|
|
.hover {
|
|
background-color: rgba(0, 255, 255, 0.2);
|
|
}
|
|
</style>
|
|
|
|
<script src="//github.hubspot.com/tether/dist/js/tether.js"></script>
|
|
<script>
|
|
var pointer = document.querySelector('.pointer');
|
|
var scroll = document.querySelector('.scroll');
|
|
|
|
// This creates the pointer tether and links it up
|
|
// with the scroll handle
|
|
new Tether({
|
|
element: pointer,
|
|
target: scroll,
|
|
attachment: 'middle right',
|
|
targetAttachment: 'middle left',
|
|
targetModifier: 'scroll-handle'
|
|
});
|
|
|
|
// Everything after this is for the highlighting effect
|
|
var paras = document.querySelectorAll('p');
|
|
for(var i=paras.length; i--;){
|
|
var sents = paras[i].innerHTML.split('.');
|
|
for (var j=sents.length; j--;){
|
|
if (sents[j].trim().length)
|
|
sents[j] = '<span>' + sents[j] + '.</span>';
|
|
}
|
|
paras[i].innerHTML = sents.join('');
|
|
}
|
|
|
|
var spans = document.querySelectorAll('p span');
|
|
|
|
function highlight(){
|
|
if (!spans) return;
|
|
|
|
var bar = pointer.getBoundingClientRect();
|
|
|
|
for (var i=spans.length; i--;){
|
|
var coord = spans[i].getBoundingClientRect();
|
|
|
|
if (bar.top < coord.top && bar.bottom > coord.top){
|
|
spans[i].classList.add('hover');
|
|
} else if (spans[i].classList.contains('hover')) {
|
|
spans[i].classList.remove('hover');
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(highlight);
|
|
}
|
|
|
|
highlight();
|
|
|
|
document.body.addEventListener('click', function(){
|
|
var els = document.querySelectorAll('.hover');
|
|
for (var i=els.length; i--;)
|
|
els[i].classList.toggle('highlight');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|