Ticker

6/recent/ticker-posts

Animated Login Screen in Oracle Apex - Javainhand Tutorial

Oracle APEX Tutorial - Animated Login Screen in Oracle Apex

Hello Friends,

In this Oracle APEX Tutorial, Today I will tell you how to implement Animated Login Screen in Oracle APEX.

Basically, If we are creating an application in Oracle APEX, So in every application Login screen will be the same.

Let's try something different with Login Screen in Oracle APEX.

Step 1:- Navigate to Login Page where you want to this implementation. Below Screenshot will help you out.
Oracle APEX Tutorial - Animated Login Screen in Oracle Apex


Step 2:-First we want to good background image that justifies your application and adds to Login Screen Page. Go to Shared Components and upload your image into Static Application Files. Below Screenshot will help you.

Oracle APEX Tutorial - Animated Login Screen in Oracle Apex
As you are seen to the above screenshot with the red mark you can upload your image into Static Application Files or Static Workspace Files as well and copy Reference column PATH below screenshot will help you.
Oracle APEX Tutorial - Animated Login Screen in Oracle Apex

After copy path below CSS code copy and paste into Page Inline CSS Section.

.t-Body{
    background-image: url(#APP_IMAGES#background_image.jpeg);
    background-size: cover !important;

}

Step 3:-After adding a background image now Add Company logo into Region.,So again follow step 2 for image upload after that used below code for display logo.

.t-Login-logo {
background-image: url(#APP_IMAGES#gym_logo.png);
width:  250px;
height: 166px;
}

After adding both codes your login screen currently will be the same as the below screenshot.

Oracle APEX Tutorial - Animated Login Screen in Oracle Apex

Step 4:-Add fadeInDown CSS Class Under Appearance Section below screenshot will help you.

Oracle APEX Tutorial - Animated Login Screen in Oracle Apex
Step 5:-Give the static ID of Login Button(login) below screenshot will help you.

Oracle APEX Tutorial - Animated Login Screen in Oracle Apex


Step 6:- Use the Below Code into your Page Inline CSS Section.

.t-Login-region {
background-color: rgba(255, 255, 255, 0.8) !important;
}

#login {
 background-color: #a94438;
  border: none;
  color: white;
  padding: 15px 80px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  text-transform: uppercase;
  font-size: 13px;
  -webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
  box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#login:hover{
  background-color: #39ace7;
}

#login:active{
  -moz-transform: scale(0.95);
  -webkit-transform: scale(0.95);
  -o-transform: scale(0.95);
  -ms-transform: scale(0.95);
  transform: scale(0.95);
}
span.apex-item-icon.fa.fa-user {
    color: #56baed;
}
span.apex-item-icon.fa.fa-key {
    color: #56baed;
}
/* Simple CSS3 Fade-in-down Animation */
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

For DEMO:-

Reference:-

If You Like This Tutorial Please Like Share And Comment.

Post a comment

3 Comments

  1. Good Work.. Nice to see the animated Login screen.
    Can I get access to this Gym Management Application? Would like to see more insight about this app.

    ReplyDelete
    Replies
    1. Basically we are working on GYM Management System after ready i will share screen

      Delete
  2. Cool. Will wait for your email. You can share it to rprashu4u@gmail.com

    Most of your APEX blogs are excellent. Keep rocking with cool stuffs using APEX.

    ReplyDelete

If you have any doubts, Please let me know