滚动时创建“下划线到圆圈”动画答案

【问题标题】：Create "underline to circle" animation while scrolling滚动时创建“下划线到圆圈”动画
【发布时间】：2014-12-04 10:02:24
【问题描述】：

我尝试制作这样的动画：

您可以看到这 3 个步骤，我想在滚动时为它们设置动画 - 所以标题下的线应该移动到汉堡包并创建一个圆圈。

GIF 示例：https://dribbble.com/shots/1746065-Floating-burger-2-0

我在position:absolute;为汉堡创建了一个标题，该标题与文本一起滚动：

jsFiddle：http://jsfiddle.net/zzcjtx5a/

还发现了类似的动画：http://codepen.io/sreucherand/pen/gHDaI 但老实说，我不知道我应该如何开始。

这可能吗？

最终结果：http://jsfiddle.net/eegrsdxc/1/

【问题讨论】：

标签： jquery html css animation svg

【解决方案1】：

我原以为最好的办法是有两个动画。

最后完全消失的水平线
一个从无到有的圆圈

在这两种情况下，您都可以操作 stroke-dasharray 属性以将线条从完全描边变为完全不可见。

请注意，默认情况下，圆的原点是最右边的点，因此如果您对圆应用旋转变换以使其起点/终点位于底部，这将使您的生活更轻松。

【讨论】：

【解决方案2】：

这很奇怪！今天登录我的笔时发现：

The Exact same Animation - click to see!

<div class="content">

    <h2>Scroll to see the magic.</h2>

    <div class="header__fake">

        <div class="icn__wrap">
            <i class="icn__hamburger"></i>
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="58px" height="58px" viewBox="0 0 16 16" preserveAspectRatio="none">
                <circle cx="8" cy="8" r="6.215" transform="rotate(90 8 8)"></circle>
            </svg>
        </div>
        <i class="btm__border"></i>

    </div>


    <h1>Tah-da!<span>Now scroll back up.</span></h1>

</div>

【讨论】：