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

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

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