Full Screen Application Animation

Developer
Bryce Snyder
Size
3,613 Kb
Views
42,504
  1. Full Screen Application Animation Previews
  2. Full Screen Application Animation HTML Codes
  3. Full Screen Application Animation CSS Codes
  4. Full Screen Application Animation JS Codes

How do I make an full screen application animation?

Animation to show opening of a full screen app on a SPA (single page application). Also has the ability to minimize size. What is a full screen application animation? How do you make a full screen application animation? This script and codes were developed by Bryce Snyder on 28 July 2022, Thursday.

Full Screen Application Animation Previews
IQ Test

Full Screen Application Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Full Screen Application Animation</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:300|Montserrat' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button id="open">OPEN</button>
<div id="window">	<header>	<h1>	<span class="glyphicon glyphicon-fullscreen"></span>	<span class="glyphicon glyphicon-remove"></span>	</h1>	</header>	<main>	<section>	<span class="glyphicon glyphicon-heart"></span>	</section>	<section>	<span class="glyphicon glyphicon-record"></span>	</section>	<section>	<span class="glyphicon glyphicon-leaf"></span>	</section>	<section>	<span class="glyphicon glyphicon-fire"></span>	</section>	</main>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Full Screen Application Animation - Script Codes CSS Codes

body { background: #f5d069; font-family: 'Open Sans', sans-serif; overflow: hidden;
}
@-webkit-keyframes fall-in { 0% { -ms-transform: scale(3, 3); -webkit-transform: scale(3, 3); transform: scale(3, 3); opacity: 0; } 50% { -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; } 60% { -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } 100% { -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
}
button { background: #484846; color: #fff; border: none; padding: 5px 25px; border-radius: 4px; font-size: 1.5em; font-weight: lighter; position: absolute; left: 50%; top: 50%; margin-left: -51px; margin-top: -20px; font-family: 'Montserrat', sans-serif;
}
button:focus { outline: none;
}
button:active { background: #7d7d7a;
}
#window { transition: all 0.15s ease-in-out; height: 100%; width: 100%; background: #fff; position: absolute;
}
#window.animated { -webkit-animation: fall-in 0.25s; -moz-animation: fall-in 0.25s; -o-animation: fall-in 0.25s; animation: fall-in 0.25s;
}
#window header { border-bottom: 1px solid #f0f0f0; width: 100%; height: 20px;
}
#window header h1 { font-family: 'Montserrat', sans-serif;
}
#window header h1 span.glyphicon { font-size: 14px; position: absolute; right: 15px; top: 10px; cursor: pointer;
}
#window header h1 span.glyphicon:first-child { right: 40px; top: 12px; font-size: 10px; font-weight: bold;
}
#window header h1 span.glyphicon:last-child { color: #f00;
}
#window.minimized { transition: all 0.15s ease-in-out; height: 75%; width: 50%; margin-left: 25%; margin-top: 5%; border-radius: 4px;
}
#window section { position: absolute; width: 50%; height: 50%; float: left;
}
#window section:first-child { border-bottom: 1px solid #f0f0f0; border-right: 1px solid #f0f0f0;
}
#window section:nth-child(2) { border-bottom: 1px solid #f0f0f0; left: 50%;
}
#window section:nth-child(3) { top: 50%; border-right: 1px solid #f0f0f0;
}
#window section:last-child { top: 50%; left: 50%;
}
#window section:hover { cursor: pointer;
}
#window section:hover span { transition: all 0.1s ease-in-out;
}
#window section:hover:first-child span { color: #ff69b4;
}
#window section:hover:nth-child(2) span { color: #ff6347;
}
#window section:hover:nth-child(3) span { color: #9acd32;
}
#window section:hover:last-child span { color: #ff8c00;
}
#window section span { font-size: 5em; position: absolute; left: 50%; margin-left: -35px; top: 50%; margin-top: -35px; color: #eee;
}

Full Screen Application Animation - Script Codes JS Codes

$(document).ready(function() {	$(function() {	$('.glyphicon-fullscreen').click(function() {	$('#window').toggleClass('minimized');	});	$('#open').click(function() {	$('#window').show().toggleClass('animated');	});	$("#window").hide();	$('.glyphicon-remove').click(function() {	$('#window').hide().toggleClass('animated').removeClass('minimized');	});	});
});
Full Screen Application Animation - Script Codes
Full Screen Application Animation - Script Codes
Home Page Home
Developer Bryce Snyder
Username brycesnyder
Uploaded July 28, 2022
Rating 4.5
Size 3,613 Kb
Views 42,504
Do you need developer help for Full Screen Application 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!

Bryce Snyder (brycesnyder) Script Codes
Name
PURE CSS3 Vector Ribbon Banner
Pure CSS Material Input
Pure CSS3 Viking Mace
Flat Banner Single Pseudo Element
New Google Loader
Dynamic Material Boxes
Success Modal with Animation
New Instagram Logo Attempt
A Pen by Bryce Snyder
Pure CSS3 Parallax Menu
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!