jquery - 滚动时创建 "underline to circle"动画

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>