Background entrance animation

Developer
Alejandro Montañez
Size
2,588 Kb
Views
24,288
  1. Background entrance animation Previews
  2. Background entrance animation HTML Codes
  3. Background entrance animation CSS Codes
  4. Background entrance animation JS Codes

How do I make an background entrance animation?

Background entrance animation using background-attachment fixed and css animations. (Also a few lines of jQuery). What is a background entrance animation? How do you make a background entrance animation? This script and codes were developed by Alejandro Montañez on 13 October 2022, Thursday.

Background entrance animation Previews
IQ Test

Background entrance animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Background entrance animation</title> <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>codeams</h1>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Background entrance animation - Script Codes CSS Codes

/* * Say hello: twitter @codeams. * It looks great on chrome. */
html, body{ width: 100%; height: 100%;
}
body, h1, div{ margin: 0; padding: 0;
}
body{ overflow: hidden; background: #111;
}
h1{ display: inline; position: absolute; top: calc(50% - 36px); left: calc(50% - 146px); z-index: 2; padding: 5px 20px; text-align: center; letter-spacing: 4px; font: 400 72px/1 'Lobster', sans-serif; opacity: 0; background: rgba(0,0,0,0.2); color: white; -webkit-animation: show 300ms linear 3.5s forwards; animation: show 300ms linear 3.5s forwards;
}
div{ display: block; width: calc(100% / 10); height: calc(100% / 8); float: left; opacity: 0; background-image: url('https://s15.postimg.org/ku9rkdgm3/desk.jpg'); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover;
}
.in{ -webkit-animation: show 700ms linear forwards; animation: show 700ms linear forwards;
}
@-webkit-keyframes show{ /* play with it */ 0%{ border-radius: 10px; opacity: 0; -webkit-transform: translate3d(0,0,0) rotate(75deg) scale(0.5); transform: translate3d(0,0,0) rotate(75deg) scale(0.5); } 50%{ opacity: 0.9; -webkit-transform: translate3d(0,0,0) scale(0.8); transform: translate3d(0,0,0) scale(0.8); } 80%{ opacity: 1; -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(0.9); transform: translate3d(0,0,0) rotate(0deg) scale(0.9); } 100%{ border-radius: 0; opacity: 1; -webkit-transform: translate3d(0,0,0) scale(1); transform: translate3d(0,0,0) scale(1); }
}
@keyframes show{ /* play with it */ 0%{ border-radius: 10px; opacity: 0; -webkit-transform: translate3d(0,0,0) rotate(75deg) scale(0.5); transform: translate3d(0,0,0) rotate(75deg) scale(0.5); } 50%{ opacity: 0.9; -webkit-transform: translate3d(0,0,0) scale(0.8); transform: translate3d(0,0,0) scale(0.8); } 80%{ opacity: 1; -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(0.9); transform: translate3d(0,0,0) rotate(0deg) scale(0.9); } 100%{ border-radius: 0; opacity: 1; -webkit-transform: translate3d(0,0,0) scale(1); transform: translate3d(0,0,0) scale(1); }
} /* the translate3d is for better performance on Chrome */

Background entrance animation - Script Codes JS Codes

$('div').each(function(i, e){ setTimeout(function(){ $(e).addClass('in') }, Math.random() * 2200 + 1300) // i * 80 instead Math.random() * 220 // if you don't feel like random
})
Background entrance animation - Script Codes
Background entrance animation - Script Codes
Home Page Home
Developer Alejandro Montañez
Username codeams
Uploaded October 13, 2022
Rating 4
Size 2,588 Kb
Views 24,288
Do you need developer help for Background entrance animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alejandro Montañez (codeams) Script Codes
Name
Loading
Another loading animation
Minimalist vcard
Sticky navigation sample
Animated scroll in 3 lines of jQuery
Random
Such Spinners, Much Loading
Bounce-in css animation
Personal website layout
Next Effect
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!