Introduction to Login Page –  Auto Background Changer

When the user creating a application, the login page is automatically created. The Login page is created based on the Oracle apex login API credentials verification and session registration. We can also able to create a own Login page based on our business requirements.

Learning Objective

Login Page – Auto Background Changer

Use case

Requirement:

Login Page – Auto Background Changer, You could achieve this using simple CSS Classes . Let us see the step by step process to achieve this.

Solution:

Step 1: Create a application and it will automatically create a Login Page.

Import the Images into the Shared Components  “Static Files” Section and also refer those images in to the CSS Section

Sample Code:

#APP_IMAGES#Image1.jpg

Step2 : Place the below sample code into the Page CSS “Inline” Section

 

Sample Code:

.slideshow {

  list-style: none;

  margin: 0px;

}

.slideshow li span {

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0px;

  left: 0px;

  color: transparent;

  background-size: cover;

  background-position: 50% 50%;

  background-repeat: none;

  opacity: 0;

  z-index: 0;

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

  -webkit-animation: imageAnimation 40s linear infinite 0s;

  -moz-animation: imageAnimation 40s linear infinite 0s;

  animation: imageAnimation 40s linear infinite 0s;

}

.slideshow li:nth-child(1) span {

  background-image: url(#APP_IMAGES#Image1.jpg);

}

.slideshow li:nth-child(2) span {

  background-image: url(#APP_IMAGES#image2.jpg);

  -webkit-animation-delay: 10s;

  -moz-animation-delay: 10s;

  animation-delay: 10s;

}

.slideshow li:nth-child(3) span {

  background-image: url(#APP_IMAGES#image3.jpg);

  -webkit-animation-delay: 20s;

  -moz-animation-delay: 20s;

  animation-delay: 20s;

}

.slideshow li:nth-child(4) span {

  background-image: url(#APP_IMAGES#image4.jpg);

  -webkit-animation-delay: 30s;

  -moz-animation-delay: 30s;

  animation-delay: 30s;

}

@-webkit-keyframes imageAnimation {

  0% {

    opacity: 0;

    -webkit-animation-timing-function: ease-in;

  }

  12.5% {

    opacity: 1;

    -webkit-animation-timing-function: ease-out;

  }

  25% {

    opacity: 1;

  }

  37.5% {

    opacity: 0;

  }

  100% {

    opacity: 0;

  }

}

@-moz-keyframes imageAnimation {

  0% {

    opacity: 0;

    -moz-animation-timing-function: ease-in;

  }

  12.5% {

    opacity: 1;

    -moz-animation-timing-function: ease-out;

  }

  25% {

    opacity: 1;

  }

  37.5% {

    opacity: 0;

  }

  100% {

    opacity: 0;

  }

}

@keyframes imageAnimation {

  0% {

    opacity: 0;

    -webkit-animation-timing-function: ease-in;

    -moz-animation-timing-function: ease-in;

    animation-timing-function: ease-in;

  }

  12.5% {

    opacity: 1;

    -webkit-animation-timing-function: ease-out;

    -moz-animation-timing-function: ease-out;

    animation-timing-function: ease-out;

  }

  25% {

    opacity: 1;

  }

  37.5% {

    opacity: 0;

  }

  100% {

    opacity: 0;

  }

}

.no-cssanimations .slideshow li span {

  opacity: 1;

}

Step3: Copy & Paste the below code in to Page “Header and Footer” Section

 

Sample Code:

<ul class="slideshow">

  <li><span></span></li>

  <li><span></span></li>

  <li><span></span></li>

  <li><span></span></li>

</ul>

Output:

Now the UI of Login Page is

Recent Posts

Start typing and press Enter to search