Adding a background CSS animation to the login page

Animation can also be completely done in CSS. In many cases, you will probably run into some interesting demos online and would like to incorporate the CSS-only code for animation. If the animation is not as critical to the user experience, you could just use to add additional effects to the app. CSS animation is great because you don't have to write JavaScript code to manage the animation and just leave the browser to process it.

In this section, you will build an app to show some floating squares in the background of your login page, as shown:

Adding a background CSS animation to the login page

Getting ready

There is no need to test in a physical device because CSS animation will work just fine in the Ionic app.

How to do it...

Here are the instructions:

  1. Create a new BubbleLogin app using the blank template, as follows, and go to the BubbleLogin folder:
    $ ionic start BubbleLogin blank --v2
$ cd BubbleLogin
  2. Open the ./src/pages/home/home.html file and modify the content with the following code:
    <ion-content #myContent class="home">
  <ul class="bg-bubbles">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  
  <ion-list>

    <ion-item>
      <ion-label>Username</ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>

    <ion-item class="input-password">
      <ion-label>Password</ion-label>
      <ion-input type="password" ></ion-input>
    </ion-item>

  </ion-list>

  <div padding>
    <button ion-button block round color="secondary">LOGIN</button>
  </div>
  
  <p class="logo">
    <ion-icon name="ios-chatbubbles"></ion-icon>
  </p>
</ion-content>

    The bg-bubbles class will convert a list of <li> into floating squares pieces.

  3. Edit ./src/pages/home/home.scss with the following:
    .home {
  background-color: SeaGreen;  
  
  .logo {
    margin: 0;
    color: white;
    font-size: 100px;
    text-align: center;  
  }
  
  scroll-content {
    overflow-y: hidden;
  }
  
  .item {
    background-color: transparent;
  }
  
  .item-input ion-label, .item-select ion-label,input.text-input {
    color: white;
  }
  
  ion-list > .item:first-child {
    border-top: 0;
    border-bottom: 1px solid white;
  }
  
  ion-list > .item:first-child .item-inner {
    margin-right: 8px;
  }
  
  ion-list .item-inner {
    border-bottom: 0;
  }
  
  .input-password {
    border-bottom: 1px solid white!important;
    
    item-inner {
      border-bottom: 1px solid white;
      margin-right: 8px;
    }
  } 

}

.bg-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  z-index: 0;
  
  li {
    position: absolute;
    list-style: none;
    display: block;
    width: 40px;
    height: 40px;
    background-color: black;
    opacity: 0.2;
    bottom: -160px;
    
    -webkit-animation: square 25s infinite;
    animation:         square 25s infinite;
    
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    
    &:nth-child(1) {
      left: 10%;
    }
    
    &:nth-child(2) {
      left: 20%;
      
      width: 80px;
      height: 80px;
      
      animation-delay: 2s;
      animation-duration: 17s;
    }
    
    &:nth-child(3) {
      left: 25%;
      animation-delay: 4s;
    }
    
    &:nth-child(4) {
      left: 40%;
      width: 60px;
      height: 60px;
      
      animation-duration: 22s;
      
      background-color: black;
    }
    
    &:nth-child(5) {
      left: 70%;
    }
    
    &:nth-child(6) {
      left: 80%;
      width: 120px;
      height: 120px;
      
      animation-delay: 3s;
      background-color: black;
    }
    
    &:nth-child(7) {
      left: 32%;
      width: 160px;
      height: 160px;
      
      animation-delay: 7s;
    }
    
    &:nth-child(8) { 
      left: 55%;
      width: 20px;
      height: 20px;
      
      animation-delay: 15s;
      animation-duration: 40s;
    }
    
    &:nth-child(9) {
      left: 25%;
      width: 10px;
      height: 10px;
      
      animation-delay: 2s;
      animation-duration: 40s;
      background-color: black;
    }
    
    &:nth-child(10) {
      left: 90%;
      width: 160px;
      height: 160px;
      
      animation-delay: 11s;
    }
  }
}

@-webkit-keyframes square {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-700px) rotate(600deg); }
}
@keyframes square {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-700px) rotate(600deg); }
   }
  4. Go to your terminal and run the app with the following command:
    $ ionic serve

How it works…

Since this app does not use JavaScript for animation, you will not need to modify anything in home.ts.

The CSS will drive the animation infinitely with the following code:

animation: square 25s infinite;
transition-timing-function: linear;

You will also be using two points in the square keyframe:

@keyframes square {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-700px) rotate(600deg); }
}

So, for a 0% to 100% loop, it will move 700 px vertically and rotate 600 degrees in the duration.

The reason that each square has a different size and speed is because you can customize the CSS as per the <li> tag further. Consider the following example:

    &:nth-child(2) {
      left: 20%;
      
      width: 80px;
      height: 80px;
      
      animation-delay: 2s;
      animation-duration: 17s;
    }

Since this animation does not generate a random number of square objects and there are a limited number of objects, you could write a customization for each <li> tag in the CSS.

Note that you have to put the animation with z-index: 0 because it will stay above other layers, such as form and button.

See also

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.221.47.203