Animated UI Dashboard Using HTML CSS And Javascript
Hello friends, all you developers are welcome in today’s great blog post. Today we have created an animated UI dashboard for you which looks very beautiful. In this, we have used some amazing animation which makes this UI dashboard look very good and great. We have created this UI with the help of HTML CSS.
Friends, when we open this UI dashboard, it has a very good animation which is very fun to watch. Then we have put some images in it and we have also used animation on those images which you can see in the code below.
National Geographic Channel Header HTML Code
National Geographic Channel Header CSS Code
:root {
--black: rgb(0 0 0);
--white: rgb(255 255 255);
--yellow: rgb(255 213 28);
--light-yellow: rgb(255 209 98 / 60%);
--gray: rgb(167 167 167 / 30%);
--logo-dimensions: 18rem;
--icon-dimensions: 3rem;
--full-w: 100%;
--full-h: 100%;
--default-font: -apple-system, BlinkMacSystemFont, Roboto, helvetica neue,
sans-serif;
--marvin: "Marvin Visions Variable";
--h1-clamp: clamp(10.5rem, 15vw, 30rem);
--default-font-size: 1.8rem;
--default-heading-size: 4.5rem;
--duration: 0.5s;
--short-duration: 350ms;
--gap: 0.4rem;
--default-padding: 1.2rem;
--z-20: 20;
--z-30: 30;
}
@font-face {
font-family: "Marvin Visions Variable";
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/756881/MarvinVisionsTrial-Variable.ttf");
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::selection {
-webkit-background-clip: text;
-webkit-box-direction: clone;
-webkit-text-fill-color: var(--yellow);
background-color: var(--gray);
color: var(--yellow);
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--black);
font-family: var(--marvin), var(--default-font);
font-size: 62.5%;
text-transform: uppercase;
text-rendering: optimizelegibility;
}
body {
display: grid;
grid-template-rows: 5rem calc(100vh - 5rem);
min-height: 100vh;
min-height: -webkit-fill-available;
}
.gradient-text {
-webkit-background-clip: text;
-webkit-box-direction: clone;
-webkit-text-fill-color: rgb(0 0 0 / 0);
background-image: linear-gradient(
to bottom,
var(--yellow),
var(--light-yellow)
);
}
.fill {
fill: var(--white);
}
h1 {
align-self: flex-end;
display: inline-flex;
flex-flow: row;
font-size: var(--h1-clamp);
line-height: 0.75;
margin: 0 auto 6rem auto;
position: relative;
text-align: center;
z-index: var(--z-30);
}
img {
display: block;
max-width: var(--full-w);
object-fit: cover;
width: var(--full-w);
}
a {
color: var(--white);
cursor: pointer;
font-size: var(--default-font-size);
text-decoration: none;
touch-action: manipulation;
}
nav {
background-color: var(--black);
box-shadow: 0 0.8rem 2.4rem var(--shadow-color),
0 1.6rem 5.6rem var(--shadow-color), 0 2.4rem 8rem var(--shadow-color);
display: flex;
flex-flow: row nowrap;
grid-row: 1;
padding: var(--default-padding);
width: var(--full-w);
ul {
display: flex;
flex-flow: row nowrap;
&:nth-of-type(2) {
align-items: center;
gap: var(--default-padding);
justify-content: center;
width: var(--full-w);
li {
align-items: center;
&:nth-child(-n + 3) {
display: none;
border-bottom: 0.4rem solid transparent;
height: var(--full-h);
padding: 0 var(--default-padding);
transition: border var(--short-duration) ease-in;
}
&:first-of-type,
&:last-of-type {
margin-left: auto;
}
&:hover {
border-color: var(--light-yellow);
a {
color: var(--yellow);
}
}
}
}
}
svg {
width: calc(var(--logo-dimensions) / 2);
}
a {
transition: color var(--short-duration) ease-in;
}
}
.cta {
border: 0.2rem solid transparent;
color: var(--light-yellow);
overflow: hidden;
padding: var(--default-padding);
position: relative;
&:hover,
&:focus {
border-color: var(--yellow);
color: var(--black);
box-shadow: 0 0.5rem 0.5rem -0.4rem var(--yellow);
transform: translateY(-0.25rem);
}
}
section {
display: flex;
flex-flow: column wrap;
grid-row: 2;
overflow: hidden;
}
article {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: var(--full-h);
position: relative;
width: var(--full-w);
> * {
grid-column: 1;
grid-row: 1;
}
}
.panels {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18.5rem, 1fr));
z-index: var(--z-20);
}
.panel {
animation: scale-in-ver-center var(--duration)
cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
opacity: 0;
position: relative;
a {
font-size: var(--default-heading-size);
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 0;
}
img {
filter: brightness(0.33);
height: var(--full-h);
}
span {
align-items: center;
display: flex;
flex-flow: row wrap;
height: fit-content;
justify-content: space-evenly;
opacity: 0;
padding: var(--default-padding) var(--gap);
position: relative;
width: var(--full-w);
z-index: var(--z-30);
&::before {
background-color: var(--gray);
bottom: 0;
content: "";
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
transform: scaleY(0);
transform-origin: bottom left;
transition: transform var(--short-duration) ease-in-out;
z-index: -1;
}
}
&:nth-of-type(1) {
span {
animation: slide-in-top var(--duration)
cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
}
&:nth-of-type(2) {
span {
animation: slide-in-top var(--duration)
cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
}
&:nth-of-type(3) {
span {
animation: slide-in-left var(--duration)
cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
}
&:nth-of-type(4) {
span {
animation: slide-in-right var(--duration)
cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
}
&:hover {
box-shadow: rgba(255, 209, 98, 0.25) 0px 30px 60px -12px inset,
rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
span {
color: var(--yellow);
&::before {
transform: scaleX(1);
transform-origin: bottom center;
}
}
.fill {
fill: var(--yellow);
}
img {
filter: brightness(1);
}
}
svg {
width: calc(var(--logo-dimensions) / 6);
}
}
@for $i from 1 through 4 {
.panel {
&:nth-of-type(#{$i}) {
animation-delay: $i * (0.35s) + 6s;
span {
animation-delay: $i * (0.35s) + 6.5s;
}
}
}
}
.letter {
animation: bounce-in-fwd var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94)
forwards;
color: var(--yellow);
display: inline;
opacity: 0;
}
@for $i from 1 through 7 {
.letter {
&:nth-child(#{$i}) {
animation-delay: $i * (0.35s) + 2.25s;
}
}
}
.geo-square {
align-self: center;
animation: scale-in-hor-center var(--duration)
cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
scale-out-hor-left var(--duration) cubic-bezier(0.55, 0.085, 0.68, 0.53)
forwards;
animation-delay: 1.5s, 5.5s;
box-shadow: 0 0 0 var(--default-padding) var(--yellow);
display: grid;
height: calc(var(--default-padding) * 20);
margin: 0 auto calc(var(--default-padding) * 4);
opacity: 0;
position: relative;
transition: color var(--duration);
width: calc(var(--default-padding) * 15);
z-index: var(--z-30);
img {
animation: scale-in-ver-center var(--duration)
cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
slit-out-vertical 1s ease-in forwards;
animation-delay: 2s, 4.5s;
opacity: 0;
height: var(--full-h);
transform: scale(1.75);
}
}
@media only screen and (min-width: 760px) {
body {
grid-template-rows: 8rem calc(100vh - 8rem);
}
nav {
ul {
&:nth-of-type(2) {
li {
&:nth-child(-n + 3) {
display: flex;
}
}
}
}
svg {
width: var(--logo-dimensions);
}
}
article {
flex: 1;
}
h1 {
margin: 0 auto;
}
.panel {
&:nth-of-type(1) {
span {
animation: slide-in-top var(--duration)
cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
}
&:nth-of-type(2) {
span {
animation: slide-in-top var(--duration)
cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
}
&:nth-of-type(3) {
span {
animation: slide-in-top var(--duration)
cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
}
&:nth-of-type(4) {
span {
animation: slide-in-top var(--duration)
cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
}
}
@for $i from 1 through 4 {
.panel {
&:nth-of-type(#{$i}) {
animation-delay: $i * (0.35s) + 6s;
span {
animation-delay: $i * (0.35s) + 6.35s;
}
}
}
}
}
/* ----------------------------------------------
Animation start
* ---------------------------------------------- */
/* ----------------------------------------------
* Generated by Animista on 2021-9-13 17:41:2
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
@keyframes scale-in-ver-center {
0% {
transform: scaleY(0);
opacity: 1;
}
100% {
transform: scaleY(1);
opacity: 1;
}
}
@keyframes scale-in-hor-center {
0% {
transform: scaleX(0);
opacity: 1;
}
100% {
transform: scaleX(1);
opacity: 1;
}
}
@keyframes slit-out-vertical {
0% {
transform: translateZ(0) rotateY(0);
opacity: 1;
}
54% {
transform: translateZ(-160px) rotateY(87deg);
opacity: 1;
}
100% {
transform: translateZ(-800px) rotateY(90deg);
opacity: 0;
}
}
@keyframes bounce-in-fwd {
0% {
transform: scale(0);
animation-timing-function: ease-in;
opacity: 0;
}
38% {
transform: scale(1);
animation-timing-function: ease-out;
opacity: 1;
}
55% {
transform: scale(0.7);
animation-timing-function: ease-in;
}
72% {
transform: scale(1);
animation-timing-function: ease-out;
}
81% {
transform: scale(0.84);
animation-timing-function: ease-in;
}
89% {
transform: scale(1);
animation-timing-function: ease-out;
}
95% {
transform: scale(0.95);
animation-timing-function: ease-in;
}
100% {
opacity: 1;
transform: scale(1);
animation-timing-function: ease-out;
}
}
@keyframes slide-in-top {
0% {
transform: translateY(-100rem);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes scale-out-hor-left {
0% {
transform: scaleX(1);
transform-origin: 0 0;
opacity: 1;
}
100% {
transform: scaleX(0);
transform-origin: 0 0;
opacity: 1;
}
}
@keyframes slide-in-left {
0% {
transform: translateX(-1000px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-right {
0% {
transform: translateX(1000px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
/* ----------------------------------------------
Disable Animation if that is user settings
* ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
* {
transition: none;
animation: none;
}
}
Live Preview:-
See the Pen Nat Geo Header by Andrew (@andrewrock) on CodePen.
Code Credits: https://codepen.io/andrewrock/full/mdwKywd