지성 사냥터

Create Scroll Animations with just CSS <meta name="title" content="Create Scroll Animations with just CSS"> <meta name="description" content="Optimize animations using no JS code"> <!-- Open Graph / Facebook --> <meta property="og:type" content="website"> <meta property="og:url" content="https://blog.openreplay.com/create-scroll-animations-with-just-css/"> <meta property="og:title" content="Create Scroll Animations with just CSS"> <meta property="og:description" content="Optimize animations using no JS code"> <meta property="og:image" content="https://blog.openreplay.com/images/create-scroll-animations-with-just-css/images/hero.png"> <!-- Twitter --> <meta property="twitter:card" content="summary_large_image"> <meta property="twitter:url" content="https://blog.openreplay.com/create-scroll-animations-with-just-css/"> <meta property="twitter:title" content="Create Scroll Animations with just CSS"> <meta property="twitter:description" content="Optimize animations using no JS code"> <meta property="twitter:image" content="https://blog.openreplay.com/images/create-scroll-animations-with-just-css/images/hero.png"> <!-- Apple Touch Icons --> <link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png"> <link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png"> <link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png"> <link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png"> <link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png"> <link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png"> <link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png"> <link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png"> <!-- Pinterest Tag --> <meta name="p:domain_verify" content="db67feb604387517701cc8bb2cc55359"> <!-- Prism CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-tomorrow.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/toolbar/prism-toolbar.min.css"> <!-- Fonts --> <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&Barlow:wght@500;600;700&family=Figtree:wght@400;500;600;700&display=swap" rel="stylesheet"> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script> <!-- GitHub Likes --> <script async defer src="https://buttons.github.io/buttons.js"></script> <!-- OpenReplay Tracking Code for OpenReplay Blog --> <script type="module">var p={projectKey:"HMVhQIGg8Cq3SiyyhjSB",ingestPoint:"https://ee.openreplay.tools/ingest",defaultInputMode:2,obscureTextNumbers:!1,obscureTextEmails:!0},c={userID:""};(function(o,n,f,i,u,e){e=window.OpenReplay=[u,e,i,[n-1,u]],n=document.createElement("script"),n.src=o,n.async=!0,document.getElementsByTagName("head")[0].appendChild(n),e.start=function(t){e.push([0])},e.stop=function(t){e.push([1])},e.setUserID=function(t){e.push([2,t])},e.setUserAnonymousID=function(t){e.push([3,t])},e.setMetadata=function(t,s){e.push([4,t,s])},e.event=function(t,s,a){e.push([5,t,s,a])},e.issue=function(t,s){e.push([6,t,s])},e.isActive=function(){return!1},e.getSessionToken=function(){}})("//static.openreplay.com/latest/openreplay-assist.js",1,0,p,c);</script> <!-- Ahref Web Analytics snippet Code for OpenReplay Blog --> <script src="https://analytics.ahrefs.com/analytics.js" data-key="N40pbG2qgLKkor1XrWThkg" async></script> <!-- Self-referencing hreflang --> <link rel="alternate" hreflang="en" href="https://blog.openreplay.com/create-scroll-animations-with-just-css/"> <!-- x-default hreflang --> <link rel="alternate" hreflang="x-default" href="https://blog.openreplay.com/create-scroll-animations-with-just-css/">