html - 滚动时，将元素从屏幕底部转换到屏幕中心并保持居中，直到该部分的底部接触视口的底部

Question

我想使用 CSS 为已经 tranlateY 到 400% 的滚动元素设置动画，现在当用户滚动到该部分时，它将滚动到10%，当它到达页面中心时，它保持居中直到该部分已完成滚动。

在这个小提琴中，您可以看到 svg 图像代码，但它无法正常工作我同时想要圆形和 svg 动画我已经评论了小提琴 url

$(window).scroll(function() {
    inViewport();
});
$(window).resize(function() {
    inViewport();
});
function getCurrentScroll() {
    return window.pageYOffset - $('section.section2').offset().top;
    };
function inViewport() {
    $('section.section2').each(function() {
        var divPos = $(this).offset().top;
        var divHeight = $(this).height() * 1.4;
        
        var topOfWindow = $(window).scrollTop();
        if (divPos < topOfWindow + 50) {
            var scrolls = getCurrentScroll() / 4;
            $(this).find('.circle').css('width',scrolls+'%');
            $(this).find('.circle').css('height',scrolls*2+'%');
            $(this).find('.img-box').css('transform','translateY('+(topOfWindow / (15))+'%)');
        }
        if (divPos + 100 < topOfWindow ) { 
            $(this).find('.desc').css('transform','translateY('+(-topOfWindow / (10))+'%)');
            $(this).find('.img-box').css('transform','translateY('+(topOfWindow / (10))+'%)');
        }
            
    });
}

section.section1{
    height:500px;
    width:100%
}
section.section2 {
    padding: 150px 0;
    position: relative;
    height: 170vh;
    overflow: hidden;
}
section.section2 .circle{
    position: fixed;
    height: 0%;
    width: 0%;
    left: -50%;
    top: 0;
    bottom: 0;
    right: -50%;
    margin:auto;
    background:#000;
    border-radius: 100%;
    transition:ease all 0.25s;
    margin:auto;
    z-index:-1
}
section.section2 .desc p {
    max-width: 50%;
    margin: auto;
    font-size: 16px;
    font-family: arial,sans-serif;
    color: rgb(70, 70, 70);
    line-height: 1.563;
    text-align: center;
}
section.section2 .desc{
    transition: ease all 0.25s;    
}
section.section2 .img-box {
    text-align: center;
    margin-top: 50px;
    margin-bottom: -110px;
    transition: ease all 0.25s;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    transform:translateY(400%);
}
section.section2 .img-box svg {
    width: 100px;
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<section class="section1">
    
</section>
<section class="section2">
    <div class="container">
        <div class="desc">
            <p>This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed. These words are here to the reader.</p>
        </div>
        <div class="img-box">
            <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 195.8 190" viewBox="0 0 195.8 190">
                <path
                    d="m68.7 111.3v-35h3.5l16.3 29.2v-29.2h2.5v35h-3.5l-16.3-29v29zm40.3-23.9c-.4 1-.9 1.9-1.5 2.7-.6.7-1.4 1.3-2.4 1.8-.9.5-1.9.7-2.9.7s-2.1-.2-2.9-.7-1.8-1.2-2.3-1.8c-.7-.9-1.2-1.8-1.6-2.7-.4-1.1-.6-2.2-.6-3.4s.2-2.3.6-3.4c.4-.9.9-1.8 1.6-2.7.5-.8 1.4-1.4 2.3-1.8.9-.5 1.9-.6 2.9-.6 1.1 0 2.1.2 2.9.6.9.5 1.8 1.1 2.4 1.8.6.8 1.2 1.7 1.5 2.7.4 1.1.6 2.2.6 3.4s-.2 2.3-.6 3.4zm-13.4 12.9v-2.8h13.4v2.8zm2.2-16.3c0 2 .4 3.4 1.2 4.4.9 1 1.9 1.5 3.2 1.5s2.4-.5 3.2-1.6c.8-1 1.2-2.5 1.2-4.5s-.4-3.5-1.2-4.5c-.8-1.1-1.9-1.6-3.2-1.6s-2.4.5-3.1 1.5c-.8 1-1.2 2.5-1.2 4.4z"
                    fill="#fff" />
                <path d="m123.7 76.3v35h-3.8v-30.3c-2 1.8-4.3 3.6-6.2 5.3l-1.1-2.1 8.7-7.8z" fill="#fff" />
                <g fill="none" stroke="#fff" stroke-miterlimit="10">
                    <path d="m0 85.8h36.3" />
                    <path d="m0 102.9h36.3" />
                    <path d="m159.5 85.8h36.3" />
                    <path d="m159.5 102.9h36.3" />
                </g>
                <g fill="#fff">
                    <path d="m162.8 96.6h1.6v-4.5c0-.2 0-.4 0-.4s-.1.2-.3.4l-.7.6-.6-.6 1.7-1.6h.9v6.2h1.5v.9h-4.1z" />
                    <path
                        d="m170.3 96.5c.2.1.6.2 1 .2 1.3 0 2-1.2 2.1-2.4-.3.4-.9.7-1.6.7-1.3 0-2.2-1-2.2-2.3 0-1.4.9-2.4 2.3-2.4 1.5 0 2.6 1.3 2.6 3.3 0 1.8-1 4-3.2 4-.5 0-.9-.1-1.4-.3zm3.2-3.3c0-.9-.7-1.9-1.6-1.9-.8 0-1.3.6-1.3 1.4 0 .9.5 1.5 1.4 1.5s1.5-.5 1.5-1z" />
                    <path
                        d="m178.3 96.5c.2.1.6.2 1 .2 1.3 0 2-1.2 2.1-2.4-.3.4-.9.7-1.6.7-1.3 0-2.2-1-2.2-2.3 0-1.4.9-2.4 2.3-2.4 1.5 0 2.6 1.3 2.6 3.3 0 1.8-1 4-3.2 4-.5 0-.9-.1-1.4-.3zm3.2-3.3c0-.9-.7-1.9-1.6-1.9-.8 0-1.3.6-1.3 1.4 0 .9.5 1.5 1.4 1.5.8 0 1.5-.5 1.5-1z" />
                    <path
                        d="m186.3 96.5c.2.1.6.2 1 .2 1.3 0 2-1.2 2.1-2.4-.3.4-.9.7-1.6.7-1.3 0-2.2-1-2.2-2.3 0-1.4.9-2.4 2.3-2.4 1.5 0 2.6 1.3 2.6 3.3 0 1.8-1 4-3.2 4-.5 0-.9-.1-1.4-.3zm3.2-3.3c0-.9-.7-1.9-1.6-1.9-.8 0-1.3.6-1.3 1.4 0 .9.5 1.5 1.4 1.5.8 0 1.5-.5 1.5-1z" />
                    <path d="m5.6 90.4h4.1v.9h-3.1v2.2h2.5v.9h-2.5v2.3h3.3v.9h-4.3z" />
                    <path
                        d="m13.3 95.9c.4.4 1.1.8 1.8.8s1.2-.4 1.2-1c0-1.6-3.4-1.2-3.4-3.4 0-1.2 1-2 2.3-2 .7 0 1.4.2 2 .7l-.4.8c-.4-.4-1-.6-1.6-.6-.7 0-1.3.4-1.3 1 0 1.5 3.4 1.1 3.4 3.4 0 1.1-.8 2-2.2 2-.8 0-1.7-.3-2.3-.9z" />
                    <path d="m22.3 91.3h-2.4v-.9h5.8v.9h-2.4v6.2h-1z" />
                    <path d="m28 96.5h1v1h-1z" />
                    <path d="m33.3 146 1.7 2-10.8 9.2-1.7-2z" />
                    <path
                        d="m39.3 152.9 2 1.7-1.2 9.7c-.1 1-.5 2.4-.5 2.4s.8-1.1 1.3-1.8l5.3-6.3 2 1.7-9.2 10.9-2-1.7 1.2-9.7c.1-1 .5-2.4.5-2.4s-.8 1.1-1.3 1.8l-5.3 6.2-2-1.7z" />
                    <path
                        d="m53.4 163.9 2.3 1.2.9 9.8c.1 1 0 2.5 0 2.5s.5-1.3.9-2l3.8-7.3 2.3 1.2-6.6 12.6-2.3-1.2-1-9.7c-.1-1 0-2.5 0-2.5s-.5 1.3-.9 2l-3.8 7.2-2.3-1.2z" />
                    <path
                        d="m75.8 173c4.2 1.1 6.3 4.9 5.3 8.9-1.1 4-4.8 6.4-9 5.3s-6.3-5-5.2-9.1c1-3.8 4.7-6.1 8.9-5.1zm-3.1 12c2.6.7 5.1-.9 5.8-3.7.7-2.7-.7-5.2-3.3-5.9s-5.1.9-5.8 3.5c-.7 2.7.6 5.4 3.3 6.1z" />
                    <path d="m86.3 175.5 2.8.1 2.7 9.4c.2.8.5 2.1.5 2.1s.3-1.2.6-2.1l3.6-9.1 2.7.1-5.7 14-2.7-.1z" />
                    <path
                        d="m106.6 175.2 2.7-.4 7 13.3-2.6.4-1.7-3.4-4.9.7-.7 3.8-2.6.4zm4.4 8-1.8-3.6c-.4-.8-.9-2.1-.9-2.1s-.1 1.4-.2 2.3l-.7 3.9z" />
                    <path d="m121.6 174.2-4.4 1.5-.7-2.1 11.3-3.8.7 2.1-4.4 1.5 3.8 11.4-2.4.8z" />
                    <path d="m132.4 167.5 2.3-1.2 6.5 12.6-2.3 1.2z" />
                    <path
                        d="m145.4 159.1c3.4-2.6 7.8-1.9 10.2 1.3 2.5 3.3 2.1 7.8-1.3 10.4s-7.8 1.9-10.3-1.5c-2.5-3.2-2-7.6 1.4-10.2zm7.5 9.8c2.2-1.7 2.4-4.6.6-6.9-1.7-2.2-4.5-2.7-6.7-1-2.2 1.6-2.4 4.5-.8 6.7 1.8 2.3 4.7 2.8 6.9 1.2z" />
                    <path
                        d="m155.2 151 1.6-2 9.7 1.1c1 .1 2.4.5 2.4.5s-1.1-.8-1.8-1.3l-6.3-5.2 1.6-2 10.9 9.1-1.6 2-9.7-1.1c-1-.1-2.4-.5-2.4-.5s1.1.8 1.8 1.3l6.3 5.2-1.6 2z" />
                    <path d="m23.1 39.1-2.9 3.7-1.8-1.4 7.3-9.4 1.8 1.4-2.8 3.6 9.4 7.4-1.6 2z" />
                    <path
                        d="m30.6 27 6.3-5.7 1.5 1.7-4.3 4 2.5 2.8 3.6-3.2 1.5 1.7-3.7 3.1 2.5 2.8 4.7-4.2 1.5 1.7-6.6 5.9z" />
                    <path
                        d="m48.5 13.2c1.6-1 3.6-1.5 5.5-1.1l-.1 2.3c-1.3-.2-2.9 0-4.1.7-2.7 1.6-2.9 4.4-1.5 6.6 1.4 2.3 4.1 3.5 6.7 1.9 1.3-.8 2.2-2.2 2.6-3.7l2.1.9c-.4 1.7-1.4 3.5-3.6 4.9-3.8 2.3-7.9 1-10.1-2.5-2.1-3.5-1.2-7.8 2.5-10z" />
                    <path
                        d="m60.3 7.4 2.4-.8 2 5.7 6.1-2.1-2-5.7 2.4-.8 4.7 13.3-2.4.8-1.9-5.6-6.1 2.1 1.9 5.6-2.4.8z" />
                    <path
                        d="m79.9 1.7 2.6-.3 6.3 7.5c.6.8 1.4 2.1 1.4 2.1s-.3-1.3-.4-2.2l-.9-8.1 2.5-.3 1.6 14-2.5.3-6.3-7.5c-.6-.8-1.4-2.1-1.4-2.1s.3 1.3.4 2.2l.9 8.1-2.6.3z" />
                    <path
                        d="m106.8.7c4.3.5 7 4 6.5 8-.5 4.2-3.8 7.1-8.1 6.6s-6.9-4-6.5-8.2c.5-4 3.8-6.9 8.1-6.4zm-1.3 12.3c2.7.3 4.9-1.7 5.2-4.5.3-2.7-1.4-5.1-4.1-5.4s-4.9 1.6-5.2 4.3c-.3 2.9 1.4 5.3 4.1 5.6z" />
                    <path d="m121.6 3.7 2.5.8-3.6 11.4 5.9 1.9-.7 2.1-8.3-2.6z" />
                    <path
                        d="m141.9 11.7c3.8 2.1 4.9 6.3 3 9.9-2 3.7-6.2 5.1-10 3s-4.9-6.4-2.9-10.1c1.9-3.5 6.1-4.9 9.9-2.8zm-6 10.8c2.4 1.3 5.2.3 6.5-2.2 1.3-2.4.6-5.2-1.8-6.5s-5.1-.4-6.5 2c-1.2 2.5-.6 5.4 1.8 6.7z" />
                    <path
                        d="m159.7 24.4c1.4 1.2 2.5 2.9 2.8 4.9l-2.2.6c-.1-1.2-.9-2.6-1.9-3.5-2.4-2.1-5.1-1.6-6.9.4-2 2.3-1.8 5.2.2 7 1 .9 2.3 1.3 3.6 1.3l1.1-1.2-1.6-1.4 1.5-1.7 3.4 3-5 5.6-1.6-1.5.5-.5c.2-.2.4-.4.4-.4-1.3.1-2.9-.5-4.1-1.6-2.8-2.5-3.3-6.8-.3-10.1 2.5-3.4 6.9-3.7 10.1-.9z" />
                    <path
                        d="m164.2 41.6 3.7-8.8 1.8 2.3-2 4.3c-.4.9-1 1.8-1 1.8s1.1-.3 2-.5l4.7-.8 1.8 2.3-9.4 1.2-4.7 3.6-1.6-2z" />
                </g>
            </svg>
        </div>
        <div class="circle">

        </div>
    </div>
</section>

标签： htmljquerycsslogic