STICKY FOOTERS WITH HTML CSS

[{"selector":"#anim-c1e03e15-e0f8-4fcd-9eed-dc890181c6f7","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fd2ad844-e51b-476d-8ada-b9e931085a8c","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-10819776-ae9b-4eee-b594-c3f3bd0f2881","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4cb06eb6-6e0b-4fef-b79b-874f4f19175d","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-dc4395eb-9dc5-45d6-a9c2-dd89f68a7382","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3d87397a-bca3-40c7-aeb3-2c76d7efcb63","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-9a83aea8-1f18-45b9-991a-8fdfb93bf70b","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-93921837-bd13-4da8-b2d0-3c4f9cfa7f96","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-02217185-b038-4141-9268-7938afc5a7c9","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-aa671849-97f9-4b8f-9fc3-169f612340c8","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-134838cc-20f9-497d-a2f2-c70aa94f908f","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-e98c7651-d228-438d-a975-bcae4eb6bfe1","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7ca7cbb1-2c68-4722-8185-63753481316d","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-86d81699-a975-474c-9a08-0d22a91275d7","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-9e38baf2-4de6-4635-8b00-d9db09188d21","keyframes":{"opacity":[0,1]},"delay":0,"duration":500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-6913acf0-9816-40f0-92a6-c031bdf81f2e","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-8b832e16-c0b0-4d91-b10d-a3d28cf426d2","keyframes":{"opacity":[1,1]},"delay":0,"duration":500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-ba7dccf9-e04e-4995-a5b9-26d0dc3fda48","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-7a8cffc3-cb8f-4371-a8ed-beebce159073","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-da78401d-9238-468f-b4d8-c3db5f64f8d9","keyframes":{"opacity":[0,1]},"delay":2000,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b1dc0e5d-08e7-4a14-8113-a14bfcbdb57b","keyframes":{"opacity":[0,1]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b6bfbdf0-5472-4b49-8ac4-da62ed7ca750","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-cf12823d-151d-43cd-bdec-a8a5974817de","keyframes":{"opacity":[0,1]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e735897b-5180-430b-90cf-1834d1541d92","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-8a88cf63-6d5d-469c-9ef8-685ab7eeb3b3","keyframes":{"opacity":[0,1]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5873c577-c195-46c4-a784-777742ac309d","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-311726c6-1c84-44c1-8a17-0666a8962d12","keyframes":{"opacity":[0,1]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-935385d4-d4ed-4781-a26e-b2f62c63bcdd","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-e75cfd79-3143-43e6-9b6a-a63d7bf71fc9 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-4.665192251743079%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}]