创建＆＃34;下划线以圈出＆＃34;滚动时的动画

Question

我试图创建一个这样的动画：

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

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

我创建了一个标题，其中包含文字和汉堡包的position:absolute; div：

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

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

这甚至可能吗？

---

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

Answer 1

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

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>

Answer 2

我原本以为你最好的选择是制作两部动画。

1. 最终完全消失的水平线

2. 从无到有的圆圈

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

请注意，圆圈的原点是默认情况下最右边的点，因此如果您将旋转变换应用于圆圈以使其开始/结束位于底部，则会使您的生活更轻松。