The latest articles on DEV Community by kimyanna (@kimyanna). https://dev.to/kimyanna https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F572448%2F095f3b1c-62de-471d-b285-225421ed182e.png https://dev.to/kimyanna en kimyanna Tue, 02 Feb 2021 23:52:26 +0000 https://dev.to/kimyanna/freebie-animated-website-header-generator-31ki https://dev.to/kimyanna/freebie-animated-website-header-generator-31ki <p>Hi Everyone, I put together a <a href="https://www.finisher.co/lab/header" rel="noopener noreferrer">tool</a> that lets you quickly create animated website headers. It was inspired by the very cool Stripe.com header, but the page I'm sharing can produce countless header combinations. It's entirely free and the JS script itself is lightweight (2Kb gzipped), so feel free to use it for you own projects. No attribution is needed, but backlink is always appreciated:) Enjoy!</p> <p><a href="https://www.finisher.co/lab/header" rel="noopener noreferrer">https://www.finisher.co/lab/header</a></p> <h4> Below are examples of what kind of headers the page can generate </h4> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fwgcqeyvsw4iklae49md2.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fwgcqeyvsw4iklae49md2.png" alt="Alt Text"></a><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fmz7nfd28d4v3ug443v55.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fmz7nfd28d4v3ug443v55.png" alt="Alt Text"></a><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F0fpulv2m58n7hs9m8zg1.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F0fpulv2m58n7hs9m8zg1.png" alt="Alt Text"></a><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fhlsgozidknbvo0ipyns7.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fhlsgozidknbvo0ipyns7.png" alt="Alt Text"></a><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Flqc3dzytf2upl173msaf.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Flqc3dzytf2upl173msaf.png" alt="Alt Text"></a><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fl4zc3zlnu8gy58gok18x.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fl4zc3zlnu8gy58gok18x.png" alt="Alt Text"></a></p> javascript html webdev design