600 West

Scrolljack: Angled Background 

<div class="fixed-l top0 pa500 px800-l w-100p z1 bg--neutral-100">
    <a class="dib" href="/" title="Sprout Social">
        <span class="u-text-screenreader">Sprout Social</span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 341.6 68" height="40" width="196">
            <g class="SiteHeader-logo-leaf">
                <path fill="#59cb59" d="M23.4 0C10.5 0 0 10.5 0 23.4v43.1c0 1.4 1.7 2.1 2.6 1.1l12.7-12.7h16.1c12.9 0 23.4-10.5 23.4-23.4V0H23.4z"></path>
                <path fill="#0ca750" d="M15.4 54.9H3.7l7.3 4.4z"></path>
                <path fill="#2bb656" d="M54.9 0H23.4v31.5z"></path>
                <path fill="#0ca750" d="M23.4 0C10.5 0 0 10.5 0 23.4v31.5l23.4-23.4V0z"></path>
                <path fill="#75dd66" d="M54.9 0L23.4 31.5h31.5z"></path>
            </g>
            <g fill="#364141" class="SiteHeader-logo-word">
                <path d="M83.5 44.8c-.8-.5-1.4-1.3-1.4-2.4 0-1.6 1.2-2.8 2.8-2.8.5 0 1 .1 1.4.4 2.4 1.5 4.8 2.2 6.8 2.2 2.1 0 3-.7 3-1.9v-.1c0-1.5-2.4-2.1-5.2-2.9-3.5-1-7.5-2.7-7.5-7.5v-.1c0-5.1 4.1-8 9.2-8 2.6 0 5.3.7 7.8 1.9 1 .5 1.7 1.5 1.7 2.7 0 1.6-1.3 2.8-2.9 2.8-.5 0-.8-.1-1.3-.3-2-1-3.9-1.6-5.4-1.6-1.7 0-2.6.8-2.6 1.7v.1c0 1.4 2.4 2.1 5.1 3 3.5 1.2 7.6 2.9 7.6 7.4v.1c0 5.6-4.2 8.1-9.6 8.1-3.1.1-6.4-.8-9.5-2.8zM125 34.7c0-4.3-2.8-7-6.1-7s-6.1 2.8-6.1 6.9v.1c0 4.2 2.8 6.9 6.1 6.9 3.3.1 6.1-2.7 6.1-6.9zm-19.2-9.3c0-2 1.6-3.6 3.6-3.6s3.6 1.6 3.6 3.6v.3c1.7-2.3 4.1-4.1 7.8-4.1 5.9 0 11.4 4.6 11.4 13v.1c0 8.4-5.5 13-11.4 13-3.8 0-6.1-1.7-7.8-3.7v7.5c0 2-1.6 3.6-3.6 3.6s-3.6-1.6-3.6-3.6V25.4zM172.7 34.8c0-3.8-2.7-7-6.6-7-4.1 0-6.5 3.1-6.5 6.8v.1c0 3.7 2.7 6.9 6.6 6.9 4 .1 6.5-3.1 6.5-6.8zm-20.2 0c0-7.3 5.8-13.2 13.6-13.2s13.5 5.8 13.5 13v.1c0 7.2-5.8 13.1-13.6 13.1-7.7 0-13.5-5.8-13.5-13zM205.9 44c0 2-1.6 3.6-3.6 3.6s-3.6-1.6-3.6-3.6v-.3c-1.6 2.1-3.7 4-7.4 4-5.4 0-8.5-3.6-8.5-9.3v-13c0-2 1.6-3.6 3.6-3.6s3.6 1.6 3.6 3.6v10.7c0 3.4 1.6 5.1 4.3 5.1 2.7 0 4.5-1.7 4.5-5.1V25.4c0-2 1.6-3.6 3.6-3.6s3.6 1.6 3.6 3.6V44h-.1zM209.5 40.1V19c0-2 1.6-3.6 3.6-3.6s3.6 1.6 3.6 3.6v3.1h3.1c1.7 0 3 1.4 3 3 0 1.7-1.4 3-3 3h-3.1v10.7c0 1.6.7 2.4 2.3 2.4h.8c1.6 0 3 1.3 3 3 0 1.3-.8 2.3-1.8 2.7-1.3.5-2.5.7-4.1.7-4.4.1-7.4-1.7-7.4-7.5zM237.6 47.7c-3.5 0-7.3-1.4-10-3.6l1.8-2.6c2.6 2 5.5 3.1 8.4 3.1 2.9 0 5-1.5 5-3.8v-.1c0-2.4-2.9-3.4-6-4.3-3.8-1.1-8-2.4-8-6.8v-.1c0-4.2 3.5-6.9 8.2-6.9 3 0 6.2 1 8.7 2.7l-1.6 2.7c-2.2-1.5-4.8-2.3-7.2-2.3-2.9 0-4.7 1.5-4.7 3.5v.1c0 2.3 3 3.2 6.2 4.2 3.7 1.1 7.8 2.6 7.8 6.9v.1c0 4.5-3.8 7.2-8.6 7.2zM261.7 25.7c-5.3 0-8.9 4.2-8.9 9.4 0 5.3 3.8 9.5 8.9 9.5 5.2 0 8.9-4.2 8.9-9.4 0-5.3-3.8-9.5-8.9-9.5zm0 22.1c-7.3 0-12.6-5.7-12.6-12.6 0-6.9 5.3-12.7 12.7-12.7 7.3 0 12.6 5.7 12.6 12.6 0 6.9-5.4 12.7-12.7 12.7zM289.4 47.8c-7.1 0-12.4-5.8-12.4-12.6 0-6.9 5.3-12.7 12.4-12.7 4.6 0 7.5 1.9 9.7 4.3l-2.4 2.5c-1.9-2-4.1-3.7-7.4-3.7-4.9 0-8.7 4.2-8.7 9.4 0 5.3 3.8 9.5 8.9 9.5 3.1 0 5.5-1.5 7.4-3.6l2.3 2.2c-2.3 2.7-5.2 4.7-9.8 4.7zM303.3 47.2V23h3.6v24.2h-3.6zm-.3-29.5v-4h4.1v4H303zM314.7 40c0 3.1 2.8 4.9 6.1 4.9 4.5 0 8.1-2.7 8.1-6.6V36c-1.8-.5-4.2-1-7.1-1-4.5 0-7.1 1.9-7.1 5zm-.4-12.4l-1.1-3c2.7-1.2 5.3-2 8.8-2 6.6 0 10.3 3.4 10.3 9.7v14.8h-3.5v-3.7c-1.7 2.2-4.5 4.2-8.8 4.2-4.5 0-9-2.5-9-7.6 0-5.2 4.2-7.9 10.4-7.9 3.1 0 5.3.4 7.5 1v-.8c0-4.4-2.7-6.6-7.2-6.6-2.9.2-5.1.9-7.4 1.9zM338 47.2V13h3.6v34.2H338zM155.1 19.7s-3.1 1.4-5.8 1.3c-2.6-.1-3.9 1.3-3.9 1.3-1.1.8-2 2.2-2.7 3.7v-.7c0-2-1.6-3.6-3.6-3.6s-3.6 1.6-3.6 3.6V44c0 2 1.6 3.6 3.6 3.6s3.6-1.6 3.6-3.6v-8.8c.5-3.8 2.4-5.9 5.5-6.6.2 0 .3-.1.5-.2 7.2-2.1 6.4-8.7 6.4-8.7z"></path>
            </g>
        </svg>
    </a>
</div>

<div class="fixed top0 bg--neutral-100 w-100p h-25vh h-75vh-l u-angled-bottomUp-0 z-1"></div>

<main role="main" class="overflow-visible has-intersection " data-controller="scrolljack" data-reverse="true" data-show-nav="true" data-show-arrow="">
    <div class="sticky fixed-l top500 top700-l mx-auto w-100p w-50p-l z1 h-25vh h-50vh-l right0-l center-y-l">
        <img class="db mx-auto absolute left-800 right0 top-500 h-100p z-1" alt="" src="https://media.sproutsocial.com/uploads/gradient-background-laptop.svg">

        <svg width="770" height="440" viewBox="0 0 910 520" width="910" xmlns="http://www.w3.org/2000/svg" class="absolute top0 h-100p w-auto left0 right0 left700-l right-auto-l Image--shadow db mx-auto w-auto" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true">
            <path d="M123.1,519A38.2,38.2,0,0,1,85,480.8V39.2A38.2,38.2,0,0,1,123.1,1H786.9A38.2,38.2,0,0,1,825,39.2V480.8A38.2,38.2,0,0,1,786.9,519Z"
                fill="#fff"></path>
            <path d="M786.9,2A37.2,37.2,0,0,1,824,39.2V480.8A37.2,37.2,0,0,1,786.9,518H123.1A37.2,37.2,0,0,1,86,480.8V39.2A37.2,37.2,0,0,1,123.1,2H786.9m0-2H123.1A39.2,39.2,0,0,0,84,39.2V480.8A39.2,39.2,0,0,0,123.1,520H786.9A39.2,39.2,0,0,0,826,480.8V39.2A39.2,39.2,0,0,0,786.9,0Z"
                fill="#f3f4f4"></path>
            <path d="M910,502.8H0a4.7,4.7,0,0,0,1.2,3H908.7A4.5,4.5,0,0,0,910,502.8Z" fill="#f3f4f4"></path>
            <path d="M1.3,505.8c6.4,7.9,38.4,14,89.2,14h729c50.9,0,82.9-6,89.2-14Z" fill="#dee1e1"></path>
            <rect x="114.5" y="36.5" width="681" height="443" rx="4.5" ry="4.5" fill="#dee1e1"></rect>
            <path d="M791,37a4,4,0,0,1,4,4V475a4,4,0,0,1-4,4H119a4,4,0,0,1-4-4V41a4,4,0,0,1,4-4H791m0-1H119a5,5,0,0,0-5,5V475a5,5,0,0,0,5,5H791a5,5,0,0,0,5-5V41a5,5,0,0,0-5-5Z"
                fill="#dee1e1"></path>
            <g data-target="scrolljack.content">
                <image class="fade-in" width="800" height="520" transform="translate(115 37) scale(0.85)" xlink:href="https://media.sproutsocial.com/uploads/agency-solution-screen-tasks@2x-1.png"></image>
                <image class="fade-in" width="800" height="520" transform="translate(115 37) scale(0.85)" xlink:href="https://media.sproutsocial.com/uploads/agency-solution-screen-instagram-export2.png"></image>
                <image class="fade-in" width="800" height="520" transform="translate(115 37) scale(0.85)" xlink:href="https://media.sproutsocial.com/uploads/social-media-marketing-asset-library@2x.png"></image>
                <image class="fade-in" width="800" height="520" transform="translate(115 37) scale(0.85)" xlink:href="https://media.sproutsocial.com/uploads/social-media-marketing-asset-library@2x.png"></image>
            </g>
        </svg>
    </div>

    <section class="flex min-h-100vh justify-start" data-target="scrolljack.section">
        <div class="flex flex-column justify-start justify-center-l items-start w-50p-l mw700 px500 pl700 pl800-l">
            <h2 class="f900-ns">Tap Into Facebook Insights</h2>
            <p class="f500 mt400 mt500-l">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta, vel. Expedita odio, neque illo sit dolorum officiis dignissimos consectetur rerum.</p>
            <div class="dib tc">
                <a href="/pricing" class="button _large">Start Your Free Trial</a>
                <p class="c--neutral-500 f200 fw-semibold mt300">No credit card required. No software to install.</p>
            </div>
        </div>
    </section>
    <section class="flex min-h-100vh justify-start" data-target="scrolljack.section">
        <div class="flex flex-column justify-start justify-center-l items-start w-50p-l mw700 px500 pl700 pl800-l">
            <h2 class="f900-ns">Identify Your Best Twitter Content</h2>
            <p class="f500 mt400 mt500-l">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta, vel. Expedita odio, neque illo sit dolorum officiis dignissimos consectetur rerum.</p>
            <div class="dib tc">
                <a href="/pricing" class="button _large">Start Your Free Trial</a>
                <p class="c--neutral-500 f200 fw-semibold mt300">No credit card required. No software to install.</p>
            </div>
        </div>
    </section>
    <section class="flex min-h-100vh justify-start" data-target="scrolljack.section">
        <div class="flex flex-column justify-start justify-center-l items-start w-50p-l mw700 px500 pl700 pl800-l">
            <h2 class="f900-ns">Powerful Instagram Analytics Tools</h2>
            <p class="f500 mt400 mt500-l">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta, vel. Expedita odio, neque illo sit dolorum officiis dignissimos consectetur rerum.</p>
            <div class="dib tc">
                <a href="/pricing" class="button _large">Start Your Free Trial</a>
                <p class="c--neutral-500 f200 fw-semibold mt300">No credit card required. No software to install.</p>
            </div>
        </div>
    </section>
    <section class="flex min-h-100vh justify-start" data-target="scrolljack.section">
        <div class="flex flex-column justify-start justify-center-l items-start w-50p-l mw700 px500 pl700 pl800-l">
            <h2 class="f900-ns">Gain Insight Into LinkedIn Analytics</h2>
            <p class="f500 mt400 mt500-l">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta, vel. Expedita odio, neque illo sit dolorum officiis dignissimos consectetur rerum.</p>
            <div class="dib tc">
                <a href="/pricing" class="button _large">Start Your Free Trial</a>
                <p class="c--neutral-500 f200 fw-semibold mt300">No credit card required. No software to install.</p>
            </div>
        </div>
    </section>

    <div class="dn center-y fixed flex flex-column left400 left600-l right400 right600-l">
        <span class="br--round bw500 db ma200 bg--main b--main"></span>
        <span class="bg--neutral-1000 b--neutral-1000 br--round bw500 db ma200"></span>
    </div>

</main>

<div class="bg--background f200 c--neutral-600 tc py600 px400">
    © Copyright 2018 Sprout Social, Inc. All rights reserved. • <a href="/terms/">Terms of Service</a> • <a href="/privacy-policy/">Privacy Policy</a> • <a href="/responsible-disclosure-policy/">Disclosure Policy</a>
</div>
 
<div class="fixed-l top0 pa500 px800-l w-100p z1 {{#if angled}}bg--neutral-100{{/if}}">
    <a class="dib" href="/" title="Sprout Social">
        <span class="u-text-screenreader">Sprout Social</span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 341.6 68" height="40" width="196">
            <g class="SiteHeader-logo-leaf">
                <path fill="#59cb59" d="M23.4 0C10.5 0 0 10.5 0 23.4v43.1c0 1.4 1.7 2.1 2.6 1.1l12.7-12.7h16.1c12.9 0 23.4-10.5 23.4-23.4V0H23.4z"></path>
                <path fill="#0ca750" d="M15.4 54.9H3.7l7.3 4.4z"></path>
                <path fill="#2bb656" d="M54.9 0H23.4v31.5z"></path>
                <path fill="#0ca750" d="M23.4 0C10.5 0 0 10.5 0 23.4v31.5l23.4-23.4V0z"></path>
                <path fill="#75dd66" d="M54.9 0L23.4 31.5h31.5z"></path>
            </g>
            <g fill="#364141" class="SiteHeader-logo-word">
                <path d="M83.5 44.8c-.8-.5-1.4-1.3-1.4-2.4 0-1.6 1.2-2.8 2.8-2.8.5 0 1 .1 1.4.4 2.4 1.5 4.8 2.2 6.8 2.2 2.1 0 3-.7 3-1.9v-.1c0-1.5-2.4-2.1-5.2-2.9-3.5-1-7.5-2.7-7.5-7.5v-.1c0-5.1 4.1-8 9.2-8 2.6 0 5.3.7 7.8 1.9 1 .5 1.7 1.5 1.7 2.7 0 1.6-1.3 2.8-2.9 2.8-.5 0-.8-.1-1.3-.3-2-1-3.9-1.6-5.4-1.6-1.7 0-2.6.8-2.6 1.7v.1c0 1.4 2.4 2.1 5.1 3 3.5 1.2 7.6 2.9 7.6 7.4v.1c0 5.6-4.2 8.1-9.6 8.1-3.1.1-6.4-.8-9.5-2.8zM125 34.7c0-4.3-2.8-7-6.1-7s-6.1 2.8-6.1 6.9v.1c0 4.2 2.8 6.9 6.1 6.9 3.3.1 6.1-2.7 6.1-6.9zm-19.2-9.3c0-2 1.6-3.6 3.6-3.6s3.6 1.6 3.6 3.6v.3c1.7-2.3 4.1-4.1 7.8-4.1 5.9 0 11.4 4.6 11.4 13v.1c0 8.4-5.5 13-11.4 13-3.8 0-6.1-1.7-7.8-3.7v7.5c0 2-1.6 3.6-3.6 3.6s-3.6-1.6-3.6-3.6V25.4zM172.7 34.8c0-3.8-2.7-7-6.6-7-4.1 0-6.5 3.1-6.5 6.8v.1c0 3.7 2.7 6.9 6.6 6.9 4 .1 6.5-3.1 6.5-6.8zm-20.2 0c0-7.3 5.8-13.2 13.6-13.2s13.5 5.8 13.5 13v.1c0 7.2-5.8 13.1-13.6 13.1-7.7 0-13.5-5.8-13.5-13zM205.9 44c0 2-1.6 3.6-3.6 3.6s-3.6-1.6-3.6-3.6v-.3c-1.6 2.1-3.7 4-7.4 4-5.4 0-8.5-3.6-8.5-9.3v-13c0-2 1.6-3.6 3.6-3.6s3.6 1.6 3.6 3.6v10.7c0 3.4 1.6 5.1 4.3 5.1 2.7 0 4.5-1.7 4.5-5.1V25.4c0-2 1.6-3.6 3.6-3.6s3.6 1.6 3.6 3.6V44h-.1zM209.5 40.1V19c0-2 1.6-3.6 3.6-3.6s3.6 1.6 3.6 3.6v3.1h3.1c1.7 0 3 1.4 3 3 0 1.7-1.4 3-3 3h-3.1v10.7c0 1.6.7 2.4 2.3 2.4h.8c1.6 0 3 1.3 3 3 0 1.3-.8 2.3-1.8 2.7-1.3.5-2.5.7-4.1.7-4.4.1-7.4-1.7-7.4-7.5zM237.6 47.7c-3.5 0-7.3-1.4-10-3.6l1.8-2.6c2.6 2 5.5 3.1 8.4 3.1 2.9 0 5-1.5 5-3.8v-.1c0-2.4-2.9-3.4-6-4.3-3.8-1.1-8-2.4-8-6.8v-.1c0-4.2 3.5-6.9 8.2-6.9 3 0 6.2 1 8.7 2.7l-1.6 2.7c-2.2-1.5-4.8-2.3-7.2-2.3-2.9 0-4.7 1.5-4.7 3.5v.1c0 2.3 3 3.2 6.2 4.2 3.7 1.1 7.8 2.6 7.8 6.9v.1c0 4.5-3.8 7.2-8.6 7.2zM261.7 25.7c-5.3 0-8.9 4.2-8.9 9.4 0 5.3 3.8 9.5 8.9 9.5 5.2 0 8.9-4.2 8.9-9.4 0-5.3-3.8-9.5-8.9-9.5zm0 22.1c-7.3 0-12.6-5.7-12.6-12.6 0-6.9 5.3-12.7 12.7-12.7 7.3 0 12.6 5.7 12.6 12.6 0 6.9-5.4 12.7-12.7 12.7zM289.4 47.8c-7.1 0-12.4-5.8-12.4-12.6 0-6.9 5.3-12.7 12.4-12.7 4.6 0 7.5 1.9 9.7 4.3l-2.4 2.5c-1.9-2-4.1-3.7-7.4-3.7-4.9 0-8.7 4.2-8.7 9.4 0 5.3 3.8 9.5 8.9 9.5 3.1 0 5.5-1.5 7.4-3.6l2.3 2.2c-2.3 2.7-5.2 4.7-9.8 4.7zM303.3 47.2V23h3.6v24.2h-3.6zm-.3-29.5v-4h4.1v4H303zM314.7 40c0 3.1 2.8 4.9 6.1 4.9 4.5 0 8.1-2.7 8.1-6.6V36c-1.8-.5-4.2-1-7.1-1-4.5 0-7.1 1.9-7.1 5zm-.4-12.4l-1.1-3c2.7-1.2 5.3-2 8.8-2 6.6 0 10.3 3.4 10.3 9.7v14.8h-3.5v-3.7c-1.7 2.2-4.5 4.2-8.8 4.2-4.5 0-9-2.5-9-7.6 0-5.2 4.2-7.9 10.4-7.9 3.1 0 5.3.4 7.5 1v-.8c0-4.4-2.7-6.6-7.2-6.6-2.9.2-5.1.9-7.4 1.9zM338 47.2V13h3.6v34.2H338zM155.1 19.7s-3.1 1.4-5.8 1.3c-2.6-.1-3.9 1.3-3.9 1.3-1.1.8-2 2.2-2.7 3.7v-.7c0-2-1.6-3.6-3.6-3.6s-3.6 1.6-3.6 3.6V44c0 2 1.6 3.6 3.6 3.6s3.6-1.6 3.6-3.6v-8.8c.5-3.8 2.4-5.9 5.5-6.6.2 0 .3-.1.5-.2 7.2-2.1 6.4-8.7 6.4-8.7z"></path>
            </g>
        </svg>
    </a>
</div>

{{#if angled}}
<div class="fixed top0 bg--neutral-100 w-100p h-25vh h-75vh-l u-angled-bottomUp-0 z-1"></div>
{{/if}}

<main
    role="main"
    class="overflow-visible has-intersection {{modifier}}"
    data-controller="scrolljack"
    data-reverse="{{reverse}}"
    data-show-nav="{{shownav}}"
    data-show-arrow="{{showarrow}}"
>
    <div class="sticky fixed-l top500 top700-l mx-auto w-100p w-50p-l z1 h-25vh h-50vh-l {{#if reverse}}right0-l{{else}}left0-l{{/if}} center-y-l">
        {{#if shapes}}
            <img
                class="db mx-auto absolute left-800 right0 top-500 h-100p z-1"
                alt=""
                src="https://media.sproutsocial.com/uploads/gradient-background-laptop.svg"
            >
        {{/if}}

        <svg width="770" height="440" viewBox="0 0 910 520" width="910" xmlns="http://www.w3.org/2000/svg" class="absolute top0 h-100p w-auto left0 right0 {{#unless reverse}}right500-l left-auto-l{{else}}left700-l right-auto-l{{/unless}} Image--shadow db mx-auto w-auto" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true">
            <path d="M123.1,519A38.2,38.2,0,0,1,85,480.8V39.2A38.2,38.2,0,0,1,123.1,1H786.9A38.2,38.2,0,0,1,825,39.2V480.8A38.2,38.2,0,0,1,786.9,519Z"
                fill="#fff"></path>
            <path d="M786.9,2A37.2,37.2,0,0,1,824,39.2V480.8A37.2,37.2,0,0,1,786.9,518H123.1A37.2,37.2,0,0,1,86,480.8V39.2A37.2,37.2,0,0,1,123.1,2H786.9m0-2H123.1A39.2,39.2,0,0,0,84,39.2V480.8A39.2,39.2,0,0,0,123.1,520H786.9A39.2,39.2,0,0,0,826,480.8V39.2A39.2,39.2,0,0,0,786.9,0Z"
                fill="#f3f4f4"></path>
            <path d="M910,502.8H0a4.7,4.7,0,0,0,1.2,3H908.7A4.5,4.5,0,0,0,910,502.8Z" fill="#f3f4f4"></path>
            <path d="M1.3,505.8c6.4,7.9,38.4,14,89.2,14h729c50.9,0,82.9-6,89.2-14Z" fill="#dee1e1"></path>
            <rect x="114.5" y="36.5" width="681" height="443" rx="4.5" ry="4.5" fill="#dee1e1"></rect>
            <path d="M791,37a4,4,0,0,1,4,4V475a4,4,0,0,1-4,4H119a4,4,0,0,1-4-4V41a4,4,0,0,1,4-4H791m0-1H119a5,5,0,0,0-5,5V475a5,5,0,0,0,5,5H791a5,5,0,0,0,5-5V41a5,5,0,0,0-5-5Z"
                fill="#dee1e1"></path>
            <g data-target="scrolljack.content">
                {{#each sections}}
                <image class="fade-in" width="800" height="520" transform="translate(115 37) scale(0.85)" xlink:href="{{imageurl}}"></image>
                {{/each}}
            </g>
        </svg>
    </div>

    {{#each sections}}
    <section class="flex min-h-100vh {{#if ../reverse}}justify-start{{else}}justify-end{{/if}}"
        data-target="scrolljack.section">
        <div class="flex flex-column justify-start justify-center-l items-start w-50p-l mw700 px500 {{#if ../reverse}}pl700 pl800-l{{else}}pr700 pr800-l{{/if}}">
            <h2 class="f900-ns">{{{heading}}}</h2>
            <p class="f500 mt400 mt500-l">{{{text}}}</p>
            <div class="dib tc">
                <a href="{{ctaurl}}" class="button _large">{{{ctatext}}}</a>
                <p class="c--neutral-500 f200 fw-semibold mt300">No credit card required. No software to install.</p>
            </div>
        </div>
    </section>
    {{/each}}

    {{#if shownav}}
    {{! Putting this hidden element here for UnCSS }}
    <div class="dn center-y fixed flex flex-column left400 left600-l right400 right600-l">
        <span class="br--round bw500 db ma200 bg--main b--main"></span>
        <span class="bg--neutral-1000 b--neutral-1000 br--round bw500 db ma200"></span>
    </div>
    {{/if}}

    {{#if showarrow}}
    {{! Putting this hidden element here for UnCSS }}
    <span class="dn center-x fixed bottom500 db"></span>
    {{/if}}
</main>

<div class="bg--background f200 c--neutral-600 tc py600 px400">
    © Copyright 2018 Sprout Social, Inc. All rights reserved. • <a href="/terms/">Terms of Service</a> • <a href="/privacy-policy/">Privacy Policy</a> • <a href="/responsible-disclosure-policy/">Disclosure Policy</a>
</div>
 
{
  "angled": true,
  "reverse": true,
  "shapes": true,
  "shownav": true,
  "showarrow": null,
  "sections": [
    {
      "imageurl": "https://media.sproutsocial.com/uploads/agency-solution-screen-tasks@2x-1.png",
      "heading": "Tap Into Facebook Insights",
      "text": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta, vel. Expedita odio, neque illo sit dolorum officiis dignissimos consectetur rerum.",
      "ctatext": "Start Your Free Trial",
      "ctaurl": "/pricing"
    },
    {
      "imageurl": "https://media.sproutsocial.com/uploads/agency-solution-screen-instagram-export2.png",
      "heading": "Identify Your Best Twitter Content",
      "text": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta, vel. Expedita odio, neque illo sit dolorum officiis dignissimos consectetur rerum.",
      "ctatext": "Start Your Free Trial",
      "ctaurl": "/pricing"
    },
    {
      "imageurl": "https://media.sproutsocial.com/uploads/social-media-marketing-asset-library@2x.png",
      "heading": "Powerful Instagram Analytics Tools",
      "text": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta, vel. Expedita odio, neque illo sit dolorum officiis dignissimos consectetur rerum.",
      "ctatext": "Start Your Free Trial",
      "ctaurl": "/pricing"
    },
    {
      "imageurl": "https://media.sproutsocial.com/uploads/social-media-marketing-asset-library@2x.png",
      "heading": "Gain Insight Into LinkedIn Analytics",
      "text": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta, vel. Expedita odio, neque illo sit dolorum officiis dignissimos consectetur rerum.",
      "ctatext": "Start Your Free Trial",
      "ctaurl": "/pricing"
    }
  ]
}
  • Content: 
    @import "../../utils/media-query";
.has-intersection {
    [data-target="scrolljack.section"] > * > * {
        max-width: 100%; // Fix for IE11
        opacity: 0;
        transition-property: opacity, transform;
        transition-duration: $transition-time-200;
        transition-timing-function: $transition-out-default;
        transform: translateY(20%);
    }
    [data-target="scrolljack.section"].is-active > * > * {
        opacity: 1;
        transition-duration: $transition-time-default;
        transition-timing-function: $transition-in-default;
        transition-delay: $transition-time-200;
        transform: translateY(0);
        &:nth-child(2) {
            transition-delay: $transition-time-default;
        }
        &:nth-child(3) {
            transition-delay: $transition-time-500;
        }
    }
}

/**
 * IE11 can't center things in a flex column, so this padding
 * prevents the content from going under the logo at the top.
 */
@media #{$breakpoint-large} {
    [data-target="scrolljack.section"] > * {
        padding-top: Space(900);
    }
}
@supports (display: flex) {
    [data-target="scrolljack.section"] > * {
        padding-top: 0; // To undo padding for IE11
    }
}

/**
 * Safari is currently the only browser that supports scroll-snap-align.
 * It really provides the nicest experience, so we check support it first.
 */
@supports (scroll-snap-align: start) {
    body {
        scroll-snap-type: mandatory;
    }
    [data-target="scrolljack.section"] {
        scroll-snap-align: start;
    }
    [data-target="scrolljack.section"]:first-of-type {
        margin-top: calc(-25vh - #{Space(500)});
    }
    [data-target="scrolljack.section"] > * {
        padding-top: calc(25vh + #{Space(600)} + #{Space(500)});
    }
    @media #{$breakpoint-large} {
        [data-target="scrolljack.section"]:first-of-type {
            margin-top: 0;
        }
        [data-target="scrolljack.section"] > .center-y-l {
            transform: none;
        }
    }
}

/**
 * The fallback for most browsers is position: sticky. It's not ideal,
 * but it beats scrolljacking.
 */
@supports (not (scroll-snap-align: start)) and (position: sticky) {
    [data-target="scrolljack.section"] {
        height: 150vh;
    }
    [data-target="scrolljack.section"] > * {
        position: sticky;
        top: calc(25vh + #{Space(600) + Space(500)});
        height: 100vh;
    }
    [data-target="scrolljack.section"]:first-of-type {
        margin-top: Space(500);
    }
    @media #{$breakpoint-large} {
        [data-target="scrolljack.section"]:first-of-type {
            margin-top: 0;
        }
        [data-target="scrolljack.section"] > * {
            top: 0;
        }
    }
}
  • URL: /components/raw/scrolljack/Scrolljack.scss
  • Filesystem Path: components/templates/Scrolljack/Scrolljack.scss
  • Size: 2.7 KB

There are no notes for this item.