试图将滚动动画添加到我的网站

我试图将此动画（在codepen上）添加到网站。我似乎可以让它出现。单独它工作正常，但当我尝试将其添加到我的网站它不会显示。我希望它位于背景图像底部的中间位置。试图将滚动动画添加到我的网站

这里是codepen

这里是我的fiddle

<div class="scroll-downs"> 
<div class="mousey"> 
<div class="scroller"></div> 
</div> 
</div>

我想我的问题可能是在那里我把HTML代码动画的位置，但我想无处不在，不能得到它的工作。

我添加了一个网站的背景图片，以便大家可以看到。

来源

2017-12-03 Warren Breedlove

看样子你忘记在相关CSS类复制的小提琴。你将需要html和css代码来使这个动画工作。 – WalterB

这似乎居中[示例]（https://jsfiddle.net/rbLwv3cn/#&togetherjs=p6ftdJFh45） – iSZ

我没有把它添加到小提琴，因为我无法得到它的工作。并不知道你的意思@iSZ –

您可以再补充fixed的覆盖，以保持滚动图标到位，也许隐藏在滚动

.scroll-downs { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    margin: auto; 
 
    width :34px; 
 
    height: 55px; 
 
} 
 
.mousey { 
 
    width: 3px; 
 
    padding: 10px 15px; 
 
    height: 35px; 
 
    border: 2px solid #000; 
 
    border-radius: 25px; 
 
    opacity: 0.75; 
 
    box-sizing: content-box; 
 
} 
 
.scroller { 
 
    width: 3px; 
 
    height: 10px; 
 
    border-radius: 25%; 
 
    background-color: #000; 
 
    animation-name: scroll; 
 
    animation-duration: 2.2s; 
 
    animation-timing-function: cubic-bezier(.15,.41,.69,.94); 
 
    animation-iteration-count: infinite; 
 
} 
 
@keyframes scroll { 
 
    0% { opacity: 0; } 
 
    10% { transform: translateY(0); opacity: 1; } 
 
    100% { transform: translateY(15px); opacity: 0;} 
 
}

<div class="scroll-downs"> 
 
    <div class="mousey"> 
 
    <div class="scroller"></div> 
 
    </div> 
 
</div>

来源

2017-12-03 07:51:59 iSZ

试图将滚动动画添加到我的网站

回答

相关问题