gsap+underscore实现页面滚动圆点段落标识效果代码-html代码-BFW代码库

代码语言：html

代码描述：gsap+underscore实现页面滚动圆点段落标识效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>

@import url('https://fonts.googleapis.com/css2?family=Almendra+Display&family=Amarante&family=Bellefair&display=swap');html {
scroll-behavior: smooth
}

html,body {
background-color: #EDEBEE
}

#content {
position: relative;
width: 80%;
margin: auto
}

article {
margin: 4em 0;
padding: 1em 0
}

h1,.indicator-tooltip {
margin-top: 0;
-webkit-font-smoothing: antialiased;
font-family: "Amarante",serif;
font-weight: 100
}

h1 {
font-size: 5em;
color: #523441
}

p {
font-family: georgia,serif;
line-height: 1.5em;
margin-bottom: 1.5em
}

article p:first-of-type::first-letter {
float: left;
font-size: 5em;
margin-right: 10px;
line-height: 1;
font-family: "Almendra Display",serif;
font-weight: bold;
font-style: normal;
color: #523441;
opacity: .5;
position: relative
}

.indicator {
display: inline-block;
right: 1em;
padding: 1em;
background: #523441;
border-radius: 50%;
opacity: .5;
transition: opacity .5s
}

.indicator--passed,.indicator--upcoming {
position: fixed
}

.indicator--passed {
top: 0!important
}

.indicator--upcoming {
bottom: 0!important
}

.indicator--active {
position: absolute
}

.indicator--viewing,.indicator:hover {
opacity: 1
}

.indicator-tooltip {
position: absolute;
right: 2em;
width: 0;
margin-top: -1em;
background-color: #806973;
color: #FFF;
white-space: nowrap;
border-radius: 3px;
overflow: hidden;
z-index: -1
}

.indicator-tooltip:after {
display: block;
content: '';
position: absolute;
right: -0.9em;
top: 50%;
width: 0;
height: 0;
margin-top: -0.4em;
border: .4em solid transparent;
border-left: .5em solid #806973
}

.indicator:hover .indicator-tooltip {
width: auto;
padding: .5em;
overflow: visible;
z-index: 1
}

</style>
</head>
<body>

<div id="content">
<article id="sf">
<h1>An Unexpected Party</h1>
<p>In a hole in the ground there lived a hobbit. Not a nasty,dirty,wet hole,filled with the ends of worms and an oozy smell,nor yet a dry,bare,sandy hole with nothing in it to sit down on or to eat:it was a hobbit-hole,and that means comfort. It had a perfectly round door like a porthole,painted green,with a shiny yellow brass knob in the exact middle. The door opened on to a tube-shaped hall like a tunnel:a very comfortable tunnel without smoke,with panelled walls,and floors tiled and carpeted,provided with polished chairs,and lots and lots of pegs for hats and coats—the hobbit was fond of visitors. The tunnel wound on and on,going fairly but not quite straight into the side of the hill—The Hill,as all the people for many miles round called it—and many little round doors opened out of it,first on one side and then on another. No going upstairs for the hobbit:bedrooms,bathrooms,cellars,pantries(lots of these),wardrobes(he had whole rooms devoted to clothes),kitchens,dining-rooms,all were on the same floor,and indeed on the same passage. The best rooms were all on the left-hand side(going in),for these were the only ones to have windows,deep-set round windows looking over his garden,and meadows beyond,sloping down to the river. This hobbit was a very well-to-do hobbit,and his name was Baggins. The Bagginses had lived in the neighbourhood of The Hill for time out of mind,and people considered them very respectable,not only because most of them were rich,but also because they never had any adventures or did anything unexpected:you could tell what a Baggins would say on any question without the bother of asking him. This is a story of how a Baggins had an adventure,and found himself doing and saying things altogether unexpected. He may have lost the neighbours’ respect,but he gained—well,you will see whether he gained anything in the end.</p>
<p>The mother of our particular hobbit—what is a hobbit? I suppose hobbits need some description nowadays,since they have become rare and shy of the Big People,as they call us. They are(or were) a little people,about half our height,and smaller than the bearded Dwarves. Hobbits have no beards. There is little or no magic about them,except the ordinary everyday sort which helps them to disappear quietly and quickly when large stupid folk like you and me come blundering along,making a noise like elephants which they can hear a mile off. They are inclined to be fat in the stomach;they dress in bright colours(chiefly green and yellow);wear no shoes,because their feet grow natural leathery soles and thick warm brown hair like the stuff on their heads(which is curly);have long clever brown fingers,good-natured faces,and laugh deep fruity laughs(especially after dinner,which they have twice a day when they can get it). Now you know enough to go on with.</p>
<p>As I was saying,the mother of this hobbit—of Bilbo Baggins,that is—was the famous Belladonna Took,one of the three remarkable daughters of the Old Took,head of the hobbits who lived across The Water,the small river that ran at the foot of The Hill. It was often said(in other families) that long ago one of the Took ancestors must have taken a fairy wife. That was,of course,absurd,but certainly there was still something not entirely hobbitlike about them,and once in a while members of the Took-clan would go and have adventures. They discreetly disappeared,and the family hushed it up;but the fact remained that the Tooks were not as respectable as the Bagginses,though they were undoubtedly richer.</p>
<p>Not that Belladonna Took ever had any adventures after she became Mrs. Bungo Baggins. Bungo,that was Bilbo’s father,built the most luxurious hobbit-hole for her(and partly with her money) that was to be found either under The Hill or over The Hill or across The Water,and there they remained to the end of their days. Still it is probable that Bilbo,her only son,although he looked and behaved exactly like a second edition of his solid and comfortable father,got something a bit queer in his make-up from the Took side,something that only waited for a chance to come out. The chance never arrived,until Bilbo Baggins was grown up,being about fifty years old or so,and living in the beautiful hobbithole built by his father,which I have just described for you,until he had in fact apparently settled down immovably. By some curious chance one morning long ago in the quiet of the world,when there was less noise and more green,and the hobbits were still numerous and prosperous,and Bilbo Baggins was standing at his door after breakfast smoking an enormous long wooden pipe that reached nearly down to his woolly toes(neatly brushed)—Gandalf came by. Gandalf!If you had heard only a quarter of what I have heard about him,and I have only heard very little of all there is to hear,you would be prepared for any sort of remarkable tale. Tales and adventures sprouted up all over the place wherever he went,in the most extraordinary fashion. He had not been down that way under The Hill for ages and ages,not since his friend the Old Took died,in fact,and the hobbits had almost forgotten what he looked like. He had been away over The Hill and across The Water on businesses of his own since they were all small hobbit-boys and hobbitgirls. All that the unsuspecting Bilbo saw that morning was an old man with a staff. He had a tall pointed blue hat,a long grey cloak,a silver scarf over which his long white beard hung down below his waist,and immense black boots.</p>
</article>
<article id="nyc">
<h1>Roast Mutton</h1>
<p>Up jumped Bilbo,and putting on his dressing-gown went into the dining-room. There he saw nobody,but all the signs of a large and hurried breakfast. There was a fearful mess in the room,and piles of unwashed crocks in the kitchen. Nearly every pot and pan he possessed seemed to have been used. The washing-up was so dismally real that Bilbo was forced to believe the party of the night before had not been part of his bad dreams,as he had rather hoped. Indeed he was really relieved after all to think that they had all gone without him,and without bothering to wake him up(“but with never a thank-you” he thought);and yet in a way he could not help feeling just a trifle disappointed. The feeling surprised him.</p>
<p>“Don’t be a fool,Bilbo Baggins!” he said to himself,“thinking of dragons and all that outlandish nonsense at your age!” So he put on an apron,lit fires,boiled water,and washed up. Then he had a nice little breakfast in the kitchen before turning out the dining-room. By that time the sun was shining;and the front door was open,letting in a warm spring breeze. Bilbo began to whistle loudly and to forget about the night before. In fact he was just sitting down to a nice little second breakfast in the diningroom by the open window,when in walked Gandalf. “My dear fellow,” said he,“whenever are you going to come? What about an early start?—and here you are having breakfast,or whatever you call it,at half past ten!They left you the message,because they could not wait.” “What message?” said poor Mr. Baggins all in a fluster. “Great Elephants!” said Gandalf,“you are not at all yourself this morning—you have never dusted the mantelpiece!” “What’s that got to do with it? I have had enough to do with washing up for fourteen!” “If you had dusted the mantelpiece,you would have found this just under the clock,” said Gandalf,handing Bilbo a note(written,of course,on his own note-paper).</p>
<p>They had not been riding very long,when up came Gandalf very splendid on a white horse. He had brought a lot of pocket-handkerchiefs,and Bilbo’s pipe and tobacco. So after that the party went along very merrily,and they told stories or sang songs as they rode forward all day,except of course when they stopped for meals. These didn’t come quite as often as Bilbo would have liked them,but still he began to feel that adventures were not so bad after all. At first they had passed through hobbit-lands,a wide respectable country inhabited by decent folk,with good roads,an inn or two,and now and then a dwarf or a farmer ambling by on business. Then they came to lands where people spoke strangely,and sang songs Bilbo had never heard before. Now they had gone on far into the Lone-lands,where there were no people left,no inns,and the roads grew steadily worse. Not far ahead were dreary hills,rising higher and higher,dark with trees. On some of them were old castles with an evil look,as if they had been built by wicked people. Everything seemed gloomy,for the weather that day had taken a nasty turn. Mostly it had been as good as May can be,can be,even in merry tales,but now it was cold and wet. In the Lone-lands they had been obliged to camp when they could,but at least it had been dry.</p>
<p>“To think it will soon be June!” grumbled Bilbo,as he splashed along behind the others in a very muddy track. It was after tea-time;it was pouring with rain,and had been all day;his hood was dripping into his eyes,his cloak was full of water;the pony was tired and stumbled on stones;the others were too grumpy to talk. “And I’m sure the rain has got into the dry clothes and into the food-bags,” thought Bilbo. “Bother burgling and everything to do with it!I wish I was at home in my nice hole by the fire,with the kettle just beginning to sing!” It was not the last time that he wished that!Still the dwarves jogged on,never turning round or taking any notice of the hobbit. Somewhere behind the grey clouds the sun must have gone down,for it began to get dark as they went down into a deep valley with a river at the bottom. Wind got up,and willows along its banks bent and sighed. Fortunately the road went over an ancient stone bridge,for the river,swollen with the rains,came rushing down from the hills and mountains in the north.</p>
</article>
<article id="dc">
<h1>Over Hill and Under Hill</h1>
<p>There were many paths that led up into those mountains,and many passes over them. But most of the paths were cheats and deceptions and led nowhere or to bad ends;and most of the passes were infested by evil things and dreadful dangers. The dwarves and the hobbit,helped by the wise advice of Elrond and the knowledge and memory of Gandalf,took the right road to the right pass. Long days after they had climbed out of the valley and left the Last Homely House miles behind,they were still going up and up and up. It was a hard path and a dangerous path,a crooked way and a lonely and a long. Now they could look back over the lands they had left,laid out behind them far below. Far,far away in the West,where things were blue and faint,Bilbo knew there lay his own country of safe and comfortable things,and his little hobbit-hole. He shivered. It was getting bitter cold up here,and the wind came shrill among the rocks. Boulders,too,at times came galloping down the mountain-sides,let loose by mid-day sun upon the snow,and passed among them(which was lucky),or over their heads(which was alarming). The nights were comfortless and chill,and they did not dare to sing or talk too loud,for the echoes were uncanny,and the silence seemed to dislike being broken—except by the noise of water and the wail of wind and the crack of stone.</p>
<p>“The summer is getting on down below,” thought Bilbo,“and haymaking is going on and picnics. They will be harvesting and blackberrying,before we even begin to go down the other side at this rate.” And the others were thinking equally gloomy thoughts,although when they had said good-bye to Elrond in the high hope of a midsummer morning,they had spoken gaily of the passage of the mountains,and of riding swift across the lands beyond. They had thought of coming to the secret door in the Lonely Mountain,perhaps that very next last moon of Autumn—“and perhaps it will be Durin’s Day” they had said. Only Gandalf had shaken his head and said nothing. Dwarves had not passed that way for many years,but Gandalf had,and he knew how evil and danger had grown and thriven in the Wild,since the dragons had driven men from the lands,and the goblins had spread in secret after the battle of the Mines of Moria. Even the good plans of wise wizards like Gandalf and of good friends like Elrond go astray sometimes when you are off on dangerous adventures over the Edge of the Wild;and Gandalf was a wise enough wizard to know it.</p>
<p>He knew that something unexpected might happen,and he hardly dared to hope that they would pass without fearful adventure over those great tall mountains with lonely peaks and valleys where no king ruled. They did not. All was well,until one day they met a thunderstorm —more than a thunderstorm,a thunder-battle. You know how terrific a really big thunderstorm can be down in the land and in a river-valley;especially at times when two great thunderstorms meet and clash. More terrible still are thunder and lightning in the mountains at night,when storms come up from East and West and make war. The lightning splinters on the peaks,and rocks shiver,and great crashes split the air and go rolling and tumbling into every cave and hollow;and the darkness is filled with overwhelming noise and sudden light. Bilbo had never seen or imagined anything of the kind. They were high up in a narrow place,with a dreadful fall into a dim valley at one side of them. There they were sheltering under a hanging rock for the night,and he lay beneath a blanket and shook from head to toe. When he peeped out in the lightning-flashes,he saw that across the valley the stone-giants were.........完整代码请登录后点击上方下载按钮下载查看