Animated Invite
How do I make an animated invite?
Hover the envelope to trigger animation.I haven't done any coding in a while so i decided to make this for practice.. What is a animated invite? How do you make a animated invite? This script and codes were developed by Kescoe on 22 October 2022, Saturday.
Animated Invite - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Invite</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="Envelope"> <div id="Shadow"></div> <div id="OpenFlapBack"></div> <div id="backFlap"></div> <div id="Paper"> <div id="Words"></div> <div id="circle"></div> </div> <div id="frontFlap2"></div> <div id="frontFlap1"></div> <div id="OpenFlap"></div> <h1>Inspired by: <a href="https://dribbble.com/shots/1003867-Dribbble-Invitation">Dribbble Invitation</a></h1>
</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>
Animated Invite - Script Codes CSS Codes
body{
background-color:#444444;
}
#Envelope{
margin-top:-150px;
margin-left:-100px;
}
#backFlap{
height:100px;
width:265px;
position:absolute;
background-color:#cc3770;
margin-left:264px;
margin-top:270px;
}
#frontFlap1{
width:0;
height:0;
border-bottom:155px solid #ea4c89;
border-right:265px solid transparent;
margin-left:264px;
margin-top:270px;
position:absolute;
}
#frontFlap2{
width:0;
height:0;
border-bottom:156px solid #dc447f;
border-left:265px solid transparent;
position:absolute;
margin-top:269px;
margin-left:265px;
}
#OpenFlap{
width:0;
height:0;
border-left:134px solid transparent;
border-right:134px solid transparent;
border-top:80px solid #cc3770;
margin-top:270px;
margin-left:263px;
position:absolute;
}
#Paper{
position:absolute;
height:150px;
width:223px;
background-color:#f2f2f2;
margin-left:280px;
margin-top:270px;
}
#Words{
position:absolute;
height:10px;
width:75px;
background-color:#d3d3d3;
margin-left:15px;
margin-top:30px;
}
#Words:after{
content:"";
position:absolute;
height:10px;
width:30px;
background-color:#d3d3d3;
margin-top:20px;
}
#circle{
height:0px;
width:0px;
background-color:#2ecc71;
margin-left:170px;
margin-top:-40px;
/*border-radius*/
-webkit-border-radius:75px; -moz-border-radius:75px; border-radius:75px;
/*box-shadow*/
-webkit-box-shadow:-3px 7px 0px rgba(61, 62, 61, 0.23); -moz-box-shadow:-3px 7px 0px rgba(61, 62, 61, 0.23); box-shadow:-3px 7px 0px rgba(61, 62, 61, 0.23);
}
#OpenFlapBack{
width:0;
height:0;
border-left:133px solid transparent;
border-right:133px solid transparent;
border-bottom:105px solid #cc3770;
position:absolute;
margin-top:165px;
margin-left:264px;
opacity:0.0;
}
#Shadow{
background-color:#3a3d3c;
height:15px;
width:265px;
position:absolute;
margin-left:265px;
margin-top:420px;
}
h1{
position:absolute;
margin-left:190px;
margin-top:470px;
color:#f2f2f2;
}
a{
color:#f2f2f2;
}
a:hover{
opacity:0.3;
}
p{
position:absolute;
margin-left:340px;
margin-top:445px;
color:#f2f2f2;
opacity:0.5;
}
Animated Invite - Script Codes JS Codes
/* Hover the envelope to trigger animation. */
$( "#Envelope" ).mouseover(function() { open();
});
$( "#Envelope" ).mouseleave(function() { close();
});
function open() { $( "#OpenFlap" ).animate({ "opacity": "0" }, "slow" ); $( "#circle" ).animate({ "height": "70px", "width": "70px"}, "slow" ); $("#OpenFlapBack").animate({ "opacity": "1" }, 1 ); $( "#Paper" ).delay(140).animate({ "margin-top": "197px" }, "slow" );
}
function close() { $( "#Paper" ).animate({ "margin-top": "270px" }, "slow" ); $( "#circle" ).animate({ "height": "-70px", "width": "-70px"}, "slow" ); $("#OpenFlapBack").delay(600).animate({ "opacity": "0" }, "slow" ); $( "#OpenFlap" ).delay(300).animate({ "opacity": "1" }, "slow" );
}
Developer | Kescoe |
Username | kescoe |
Uploaded | October 22, 2022 |
Rating | 4.5 |
Size | 2,556 Kb |
Views | 26,312 |
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!
Name | Size |
Color chart | 2,248 Kb |
CSS gameboy | 4,131 Kb |
Glitchy Text Effect | 2,208 Kb |
Mr.Build A Face | 2,672 Kb |
Duck Hunt | 1,706 Kb |
Animated menu | 2,143 Kb |
Funny animals | 3,076 Kb |
Accordian nav | 2,168 Kb |
IceCream Truck | 4,306 Kb |
Css iphone | 2,773 Kb |
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!
Name | Username | Size |
Simple star rating using js and data-uri | TheEnd | 5,795 Kb |
OnScreenAction | Ozgursagiroglu | 2,647 Kb |
Sass Get Function | Lukewatts | 2,155 Kb |
Rotate Demo | Agelber | 3,061 Kb |
Cool audio | Bigliam | 1,868 Kb |
Wikipedia API | Coderpilot | 2,802 Kb |
React Markdown Previewer | C0d0er | 3,190 Kb |
The Rope | Chribbe | 2,886 Kb |
AngularJS Animated Todo List | Ehaase | 2,975 Kb |
Old calculator | Gnarfugh | 2,815 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!