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.........完整代码请登录后点击上方下载按钮下载查看