Modal Window Test Animations

Developer
Charlie Volpe
Size
2,971 Kb
Views
14,168
  1. Modal Window Test Animations Previews
  2. Modal Window Test Animations HTML Codes
  3. Modal Window Test Animations CSS Codes
  4. Modal Window Test Animations JS Codes

How do I make an modal window test animations?

I will be adding to this as I need to think up more animations for intro and outro.. What is a modal window test animations? How do you make a modal window test animations? This script and codes were developed by Charlie Volpe on 08 November 2022, Tuesday.

Modal Window Test Animations Previews
IQ Test

Modal Window Test Animations - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Modal Window Test Animations</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="modal"> <h1>Modal Window</h1> <p>Normcore American Apparel four loko, kale chips Banksy asymmetrical you probably haven't heard of them fixie butcher plaid selvage blog. Truffaut pour-over Blue Bottle, lo-fi four loko cardigan meh flannel literally flexitarian banh mi Portland occupy Shoreditch. Meh deep v pickled butcher, Blue Bottle semiotics lomo mlkshk. Organic kale chips Vice fingerstache, four loko selfies semiotics vegan single-origin coffee beard sustainable distillery cred try-hard. Pork belly ethical swag Thundercats Pinterest twee. Mlkshk Vice hella freegan, chambray literally single-origin coffee Wes Anderson. Brunch PBR cliche, twee mumblecore fanny pack DIY Cosby sweater bicycle rights 90's lo-fi viral meh dreamcatcher.</p> </div>
</div>
<div class="select"> <select id="selection"> <option value="">Select One</option> <option disabled>--------------</option> <option value="fadeIn">Fade In</option> <option value="fadeOut">Fade Out</option> <option value="moveUp">Move Up</option> <option value="moveDown">Move Down</option> <option value="scaleIn">Scale In</option> <option value="scaleOut">Scale Out</option> </select>
</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>

Modal Window Test Animations - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { background: #c7c7c7; color: #373737; font-family: Roboto, sans-serif;
}
.container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1;
}
.select { margin: 0 auto; width: 10rem;
}
.select select { font-family: Roboto, sans-serif; background: #f7f7f7; height: 2rem; width: 10rem; border: 2px solid #373737;
}
.modal { position: relative; background: #f7f7f7; margin: 5rem auto; width: 60%; padding: 1rem; border: 2px solid #373737; border-radius: .5rem; overflow: hidden; z-index: 99;
}
.modal h1 { text-align: center;
}
.fadeIn { -webkit-animation: fadeIn 1s linear; animation: fadeIn 1s linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
.fadeOut { -webkit-animation: fadeOut 1s linear; animation: fadeOut 1s linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
.moveUp { -webkit-animation: moveUp 1s ease-in-out; animation: moveUp 1s ease-in-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
.moveDown { -webkit-animation: moveDown 1s ease-in-out; animation: moveDown 1s ease-in-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
.scaleIn { -webkit-animation: scaleIn 1s ease-in-out; animation: scaleIn 1s ease-in-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
.scaleOut { -webkit-animation: scaleOut 1s ease-in-out; animation: scaleOut 1s ease-in-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
@-webkit-keyframes fadeIn { 0%, 50% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes fadeIn { 0%, 50% { opacity: 0; } 100% { opacity: 1; }
}
@-webkit-keyframes fadeOut { 0%, 50% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes fadeOut { 0%, 50% { opacity: 1; } 100% { opacity: 0; }
}
@-webkit-keyframes moveUp { 0%, 50% { opacity: 0; margin: 10rem auto; } 100% { opacity: 1; margin: 5rem auto; }
}
@keyframes moveUp { 0%, 50% { opacity: 0; margin: 10rem auto; } 100% { opacity: 1; margin: 5rem auto; }
}
@-webkit-keyframes moveDown { 0%, 50% { opacity: 0; margin: 0 auto; } 100% { opacity: 1; margin: 5rem auto; }
}
@keyframes moveDown { 0%, 50% { opacity: 0; margin: 0 auto; } 100% { opacity: 1; margin: 5rem auto; }
}
@-webkit-keyframes scaleIn { 0%, 50% { -webkit-transform: scale(0,0); transform: scale(0,0); } 100% { -webkit-transform: scale(1,1); transform: scale(1,1); }
}
@keyframes scaleIn { 0%, 50% { -webkit-transform: scale(0,0); transform: scale(0,0); } 100% { -webkit-transform: scale(1,1); transform: scale(1,1); }
}
@-webkit-keyframes scaleOut { 0%, 50% { -webkit-transform: scale(1,1); transform: scale(1,1); } 100% { -webkit-transform: scale(0,0); transform: scale(0,0); }
}
@keyframes scaleOut { 0%, 50% { -webkit-transform: scale(1,1); transform: scale(1,1); } 100% { -webkit-transform: scale(0,0); transform: scale(0,0); }
}

Modal Window Test Animations - Script Codes JS Codes

$('#selection').change(function(e){ var sel = $('#selection')[0]; var text = sel.options[sel.selectedIndex].text; if (text == "Fade In"){ $('.modal').addClass('fadeIn').delay(1000).queue(function() { $('.modal').removeClass('fadeIn').dequeue(); }); } if (text == "Fade Out"){ $('.modal').addClass('fadeOut').delay(1000).queue(function() { $('.modal').removeClass('fadeOut').dequeue(); }); } if (text == "Move Up"){ $('.modal').addClass('moveUp').delay(1000).queue(function() { $('.modal').removeClass('moveUp').dequeue(); }); } if (text == "Move Down"){ $('.modal').addClass('moveDown').delay(1000).queue(function() { $('.modal').removeClass('moveDown').dequeue(); }); } if (text == "Scale In"){ $('.modal').addClass('scaleIn').delay(1000).queue(function() { $('.modal').removeClass('scaleIn').dequeue(); }); } if (text == "Scale Out"){ $('.modal').addClass('scaleOut').delay(1000).queue(function() { $('.modal').removeClass('scaleOut').dequeue(); }); }
});
Modal Window Test Animations - Script Codes
Modal Window Test Animations - Script Codes
Home Page Home
Developer Charlie Volpe
Username charlie-volpe
Uploaded November 08, 2022
Rating 3
Size 2,971 Kb
Views 14,168
Do you need developer help for Modal Window Test Animations?

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!

Charlie Volpe (charlie-volpe) Script Codes
Name
Full Site Redesign
Simple Battle Game
Galaxy S3 CSS Template
Draggable Finder Window Visualization
Draggable Node Based VPL Test
Responsive Flat Sublime Text Visualization
Block Puzzle Game
IPhone 5 CSS Template
IPad CSS Template
Grided Canvas Side-Scroller Game Engine
Create amazing marketing copy 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!