In this blog, you will learn how you can create Owl Animated Login Screen in lightning web component.
Sample Code
LWC.html
<template>
<div class="owl">
<div class="hand" data-id="hand-l"></div>
<div class="hand hand-r" data-id="hand-r"></div>
<div class="arms">
<div class="arm" data-id="arm-l"></div>
<div class="arm arm-r" data-id="arm-r"></div>
</div>
</div>
<div class="form">
<div class="control">
<lightning-input type="email" data-id="username" placeholder="Username" onclick={handleUsernameIn} onchange={handleUsernameIn} onfocus={handleUsernameIn} onblur={handleUsernameOut} onabort={handleUsernameOut} ></lightning-input>
</div>
<div class="control" style="margin-top: -15px; margin-bottom: 10px;">
<lightning-input type="password" data-id="password" placeholder="Password" onclick={handlePasswordIn} onchange={handlePasswordIn} onfocus={handlePasswordIn} onblur={handlePasswordOut} onabort={handlePasswordOut} ></lightning-input>
</div>
<div class="control">
<lightning-button type="submit" class="slds-button slds-text-center" variant="netural" label="Login" title="Login" ></lightning-button>
</div>
</div>
</template>
LWC.js
import { LightningElement, track } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import jquery from '@salesforce/resourceUrl/jquery';
export default class LoginComponent extends LightningElement {
connectedCallback(){
loadScript(this,jquery)
.then(()=>{
console.log('Jquery Loaded');
$(this.template.querySelector('[data-id="hand-l"]')).addClass('feathers');
$(this.template.querySelector('[data-id="hand-r"]')).addClass('feathers');
})
.catch(error=>{
console.log('Failed to Load Jquery -' +error);
});
}
handlePasswordIn(){
$(this.template.querySelector('[data-id="hand-l"]')).addClass('hand-left');
$(this.template.querySelector('[data-id="hand-r"]')).addClass('hand-right');
$(this.template.querySelector('[data-id="arm-l"]')).addClass('arm-left');
$(this.template.querySelector('[data-id="arm-r"]')).addClass('arm-right');
this.handleUsernameOut();
}
handlePasswordOut(){
$(this.template.querySelector('[data-id="hand-l"]')).removeClass('hand-left');
$(this.template.querySelector('[data-id="hand-r"]')).removeClass('hand-right');
$(this.template.querySelector('[data-id="arm-l"]')).removeClass('arm-left');
$(this.template.querySelector('[data-id="arm-r"]')).removeClass('arm-right');
this.handleUsernameOut();
}
handleUsernameIn(){
this.handlePasswordOut();
$(this.template.querySelector('[data-id="hand-l"]')).removeClass('feathers');
$(this.template.querySelector('[data-id="hand-r"]')).removeClass('feathers');
$(this.template.querySelector('[data-id="arm-l"]')).addClass('wings');
$(this.template.querySelector('[data-id="arm-r"]')).addClass('wings');
}
handleUsernameOut(){
$(this.template.querySelector('[data-id="hand-l"]')).addClass('feathers');
$(this.template.querySelector('[data-id="hand-r"]')).addClass('feathers');
$(this.template.querySelector('[data-id="arm-l"]')).removeClass('wings');
$(this.template.querySelector('[data-id="arm-r"]')).removeClass('wings');
}
}
LWC.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>55.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__HomePage</target>
<target>lightning__AppPage</target>
<target>lightning__Tab</target>
</targets>
</LightningComponentBundle>
LWC.css
body{
background-color: #1a8fb4;
font-family: 'Roboto', sans-serif;
font-size: 14px;
}
.owl{
margin: auto;
width: 211px;
height: 108px;
background-image: url('https://dash.readme.io/img/owl-login.png');
position: relative;
}
.hand{
width: 34px;
height: 34px;
border-radius: 40px;
transform: scaleY(0.6);
position: absolute;
left: 14px;
bottom: -8px;
transition: 0.3s ease-out;
}
.feathers{
background-color: #472d20;
}
.hand-left{ transform: translateX(42px) translateY(-15px) scale(0.7); }
.hand-r{
left: 170px;
}
.hand-right{ transform: translateX(-42px) translateY(-15px) scale(0.7); }
.wings{
left: 0px !important;
top: 0px !important;
}
.arms{
position: absolute;
top: 58px;
height: 41px;
width: 100%;
overflow: hidden;
}
.arm{
width: 40px;
height: 65px;
background-image: url('https://dash.readme.io/img/owl-login-arm.png');
position: absolute;
left: 20px;
top: 40px;
transition: 0.3s ease-out;
.arm-r{
left: 158px;
transform: scaleX(-1);
}
}
.arm-left{ transform: translateX(40px) translateY(-40px); }
.arm-right { transform: translateX(-40px) translateY(-40px) scaleX(-1); left: 158px; }
.form{
margin: auto;
margin-top: -9px;
padding: 0 15px 15px 15px;
background-color: white;
width: 250px;
}
.control{
margin-bottom: 5px;
position: relative;
}
Static Resources
1) Go to https://code.jquery.com/jquery-3.6.1.min.js and download it to your local machine.
2) Go to Setup in Salesforce
3) Search for Static Resources
4) Create New Static Resources
5) Name - Jquery and Upload the Js File you downloaded in Step 1 and Save.
NOTE : Jquery is required for this animation to work.
Demo
0 Comments