snipe-it/bower_components/tether/examples/element-scroll/index.html
2017-01-11 03:05:06 -08:00

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," &amp;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, &amp; 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, &amp; 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>