STICKY FOOTERS WITH HTML CSS

[{"selector":"#anim-2e702871-b5b4-46de-9d32-c71ca2be1c92","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-13ae630c-b7dc-4c15-b78b-8ebfac6400f3","keyframes":{"transform":["translate3d(0px, 139.15628%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f20d5e5e-3880-4272-b143-521297f5d42c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-97ac97ae-fb8c-43f7-9001-690b48089808","keyframes":{"transform":["translate3d(0px, -1311.72896%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-32da30b1-fe46-49c6-9ea3-102ae116b567","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e81b32eb-3678-4cb3-a0dd-15243372dae9","keyframes":{"transform":["translate3d(0px, 294.07400%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] HTML CSS (real quick examples)

THE HTML

[{"selector":"#anim-0933e805-6398-4617-8c1a-5236b7dae3e7","keyframes":{"transform":["rotate(-540deg) scale(0.1)","none"],"opacity":[0,1]},"delay":0,"duration":1000,"fill":"both","iterations":1}] <header id="head">My Site</header> <main id="main">Contents</main> <nav id="nav">Bottom Nav</nav> <footer id="foot">Footer</footer>

FIXED HEADER

[{"selector":"#anim-a0d70ef3-66f6-4c21-b188-d627c30f3a78","keyframes":{"transform":["translate3d(-115.50632%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-33bdab62-0497-4adf-9f81-5010a0d92be7","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-876de849-951a-41cb-8b69-acdf520c386e","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-c9145457-c91c-468f-b0cb-f7bfb22d501d","keyframes":{"transform":["translate3d(114.55696%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e6e17b9a-1881-4df6-a4ae-bd0029afb8aa","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-acf84781-214f-40ef-9169-38d0a872d406","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] FIX AT BOTTOM #foot { position: fixed; bottom: 0; z-index: 9; width: 100%; height: 40px; } PREVENT CONTENT FROM BEING COVERED #main { padding-bottom: 40px }

STICKY HEADER

[{"selector":"#anim-96b4a9c4-c623-43cd-af84-b7d791c2900c","keyframes":{"transform":["rotate(-540deg) scale(0.1)","none"],"opacity":[0,1]},"delay":0,"duration":1000,"fill":"both","iterations":1}] #nav { position: sticky; bottom: 0; z-index: 9; }

FLEX BOTTOM FOOTER

[{"selector":"#anim-080b7a7b-645d-47e4-b857-357db71d180d","keyframes":{"opacity":[0,1]},"delay":0,"duration":500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-17ebc8d3-3c2e-4932-9568-ec543d48cad7","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-45e930e4-d291-467e-bf8f-a0b92f8ffd51","keyframes":{"opacity":[1,1]},"delay":0,"duration":500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-b9719e8a-f7c9-4bbd-a751-a84f193fbaf6","keyframes":{"transform":["scale(3)","scale(1)"]},"delay":0,"duration":500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] FLEX COLUMN LAYOUT body { display: flex; flex-direction: column; min-height: 100vh; } ALLOW CONTENT AREA TO FILL HEIGHT #main { flex-grow: 1; }

GRID BOTTOM FOOTER

[{"selector":"#anim-044fb173-c455-4ea4-93a1-41297167444c","keyframes":{"transform":["rotate(-540deg) scale(0.1)","none"],"opacity":[0,1]},"delay":0,"duration":1000,"fill":"both","iterations":1}] body { display: grid; min-height: 100vh; grid-template-rows: auto 1fr auto; }

VISIT & FOLLOW

[{"selector":"#anim-a16b471f-e1bd-485e-8d0a-8b58dc1014de","keyframes":{"opacity":[0,1]},"delay":2000,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fa476192-000c-4472-b235-05cef3a4e538","keyframes":{"opacity":[0,1]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0f2c0b1d-c8d5-4462-8a03-4dcf6b8b5a53","keyframes":{"transform":["translate3d(-128.43511%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b09a3d3b-b768-4e95-9931-ce98314429c5","keyframes":{"opacity":[0,1]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0d9ade72-0dfb-4b67-9d06-5bc34348c040","keyframes":{"transform":["translate3d(-151.73267%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ee4fa914-2c0f-4b05-91d1-f98e3b511bb1","keyframes":{"opacity":[0,1]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ee2f30e9-585b-4e76-b7bf-820b85fa24a2","keyframes":{"transform":["translate3d(-151.23154%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ae3de79c-603c-435d-807c-b4c768205c05","keyframes":{"opacity":[0,1]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-93a18b38-f9fa-455b-94ad-03868a6264f1","keyframes":{"transform":["translate3d(-170.88234%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6205e211-c87e-4357-8a5a-8023b7ee60c0 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(20.250939014149093%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}]