The page Will be Look This but when we move the mouse over the page will be opened
Follwing are the meathed to Build up This page
1-create a login html page in jdveloper
2-write this code in the html page
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="skins/Login.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="script/Login.js"></script>
<title>Login</title>
<style>
.toggler { width: 500px; height: 200px !important;}
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = $( "#effectTypes" ).val();
// most effect types need no options passed by default
var options = {};
// some effects have required parameters
if ( selectedEffect === "scale" ) {
options = { percent: 100 };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 280, height: 185 } };
}
// run the effect
$( "#effect" ).show( selectedEffect, options, 500, callback );
};
//callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect:visible" ).removeAttr( "style" ).fadeOut();
}, 1000 );
};
// set effect from select menu value
$( "#button" ).click(function() {
runEffect();
});
$( "#effect" ).hide();
});
</script>
</head>
<body style='background-image:url("loginbg.png"); background-repeat:no-repeat; background-size:100.0%;'>
<div style="margin-left:1%; margin-top:1%;"><img src="resources/images/klashlog.png" width="301"></img></div>
<div class="login"
style="background-color:#deeaf8;-webkit-box-shadow: 2px 0px 31px 3px rgba(230,205,205,1); -moz-box-shadow: 2px 0px 31px 3px rgba(230,205,205,1); box-shadow: 2px 0px 31px 3px rgba(230,205,205,1);">
<header class="header">
<span class="text">LOGIN</span>
<span class="loader"></span>
</header>
<form class="form" method="POST" action="j_security_check">
<input class="input" type="text" name="j_username" placeholder="UserName"
style="background-color:#deeaf8;"/>
<input class ="input" type="password" name="j_password" placeholder="Password"
style="background-color:#deeaf8;"/>
<button class="btn" type="submit" style=" background-color:#deeaf8;"></button>
</form>
</div>
<button class ="resetbtn" type= "reset"> Reset it </button>
<div class="Help"
style="margin-left:70%">
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Help</h3>
<p style="background-color:#d5efff;">
If you are enable to login into your account then you can recheck your account and try again!!!!!
</p>
</div>
</div>
<select name="effects" id="effectTypes">
<option value="blind">Blind</option>
<option value="bounce">Bounce</option>
<option value="clip">Clip</option>
<option value="drop">Drop</option>
<option value="explode">Explode</option>
<option value="fold">Fold</option>
<option value="highlight">Highlight</option>
<option value="puff">Puff</option>
<option value="pulsate">Pulsate</option>
<option value="scale">Scale</option>
<option value="shake">Shake</option>
<option value="size">Size</option>
<option value="slide">Slide</option>
</select>
<button id="button" class="ui-state-default ui-corner-all">Need Help</button>
</div>
</body>
</html>
3-Add These Libarries and css code For page Animation
4 Css For Animation
@import url(http://fonts.googleapis.com/css?family=Lobster);
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
user-select:none;
}
body {
background: hsla(255, 255%, 255%, 1);
}
.icon {
margin-top: 10px;
padding-left: 1200px;
padding-right: 30px;
}
.login {
position: absolute;
top: 50%;
left: 50%;
margin: -10rem 0 0 -10rem;
width: 20rem;
height: 20rem;
padding: 3em;
background: hsla(255,255%,255%,1);
border-radius: 50%;
overflow: hidden;
transition:all 1s ease;
font-family: monospace;
}
.login:hover > .header, .login.clicked > .header {
width: 2rem;
}
.login:hover > .header > .text, .login.clicked > .header > .text {
font-size: 1rem;
-webkit-transform: rotate(-90deg);
transform: rotate(+90deg);
}
.login.loading > .header {
width: 20rem;
transition:all 1s ease;
}
.login.loading > .header > .text {
display: none;
}
.login.loading > .header > .loader {
display: block;
}
.header {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width:20rem;
height: 20rem;
background: hsla(0, 5%, 0%, 1);
transition: width 2s ease-out ;
background-color: #006ba5;
}
.header > .text {
display: block;
width: 100%;
height: 100%;
font-size: 5rem;
text-align: center;
line-height: 20rem;
color: hsla(255,255%,255%,1);
transition: all 1s ease-in-out;
}
.header > .loader {
display: none;
position: absolute;
left: 5rem;
top: 5rem;
width: 10rem;
height: 10rem;
border-left: 10px solid hsla(255, 255%, 255%, 1);
border-bottom:10px solid hsla(255,255%,255%,1);
border-right:10px solid hsla(255,255%,255%,1);
border-top: 8px solid hsla(255,255%,255%,1);
border-radius: 50%;
box-shadow:inset 2px 2px 2px 2px hsla(0, 5%, 0%, 1);
animation: loading 3s linear infinite;
}
.header > .loader:after {
content: "";
position: absolute;
left: 4.15rem;
top: -0.5rem;
width: 1rem;
height: 1rem;
background: hsla(1, 75%, 55%, 1);
border-radius: 50%;
border-right: 1px solid hsla(1, 75%, 55%, 1);
}
.header > .loader:before {
content: "";
position: absolute;
left: 3.4rem;
top: -0.5rem;
width: 0;
height: 0;
border-right: 1rem solid hsla(1, 75%, 55%, 1);
border-top: 0.5rem solid transparent;
border-bottom: 0.5rem solid transparent;
}
@keyframes loading {
50% {
border-left: 10px solid hsla(1, 95%, 25%, 1);
border-bottom:10px solid hsla(1, 95%, 25%, 1);
border-right:10px solid hsla(1, 95%, 25%, 1);
border-top:8px solid hsla(1, 95%, 25%, 1);
}
100% {
transform: rotate(360deg);
}
}
.form {
margin: 0 0 0 2rem;
padding: 0.5rem;
}
.input {
display: block;
width: 100%;
font-size: 1.5rem;
padding: 0.5rem 1rem;
box-shadow: none;
border-color: hsla(0, 5%, 0%, 1);
border-width: 0 0 3px 0;
transition: all .99s ease-in;
outline:transparent;
}
.input + .input {
margin: 15px 0 0;
}
.input:focus {
border-bottom: 3px solid hsla(1, 75%, 55%, 1);
}
.btn {
position: absolute;
right: 7rem;
bottom: 5rem;
width: 4rem;
height: 4rem;
border: none;
background: hsla(255, 255%, 255%, 1);
font-size: 0;
border: none;
transition: all 0.99s ease-in-out;
color: #006394;
}
.btn:after {
content: "";
position: absolute;
left: 1.4rem;
top: 1rem;
width: 0;
height: 0;
border-left: 1.6rem solid hsla(1, 75%, 55%, 1);
border-top: .8rem solid transparent;
border-bottom: .8rem solid transparent;
transition: border 0.3s ease-in-out 2s;
}
.btn:hover, .btn:focus, .btn:active {
outline: none;
}
.btn:hover:after, .btn:focus:after, .btn:active:after {
border-left-color: hsla(0, 5%, 0%, 1);
}
.resetbtn{
border:none;
padding:.5em;
width:5em;
background:hsla(0,0%,0%,1);
color:hsla(255,255%,255%,1);
font-size: 1em;
border-radius:2px;
transition:all 1s ease-in-out;
outline:none;
box-shadow:0 0 1px 1px hsla(0,0%,0%,0.2);
background-color: #006ba5;
margin-left: 60%;
margin-top: 30%;
margin-bottom: 0px;
margin-right: 0px;
padding-left: 0px;
}
.resetbtn:hover, .resetbtn:focus{
background:hsla(255,255%,255%,1);
color:hsla(0,0%,0%,1);
background-color: #d6e7ff;
outline-color: #0084c6;
}
5 JS For This page
$(document).ready(function() {
$('.input').on('focus', function() {
$('.login').addClass('clicked');
});
$('.login').on('submit', function(e) {
e.preventDefault();
$('.login').removeClass('clicked').addClass('loading');
});
$('.resetbtn').on('click', function(e){
e.preventDefault();
$('.login').removeClass('loading');
});
})
6 Do not Forget To add These Libraries of javascript
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Run Your Login page
your login page is ready to use
Thanx
Mushtaq Wattu
to add a facet. Enter 
Panel Group Layout and drop it on the top facet of the template, in the visual editor.
Output Text into the panel group layout you just added.
