[edit] banner text animation

aplus#4
tribikram 2 years ago
parent 52b17f877e
commit 862592539c
  1. 35
      public/frontend/css/style.css
  2. 2
      resources/views/welcome.blade.php

@ -227,22 +227,24 @@ Responsive Codes
top: 40%; top: 40%;
left: 10%; left: 10%;
visibility: hidden; visibility: hidden;
animation: 4s anim-lineUp ease-out; animation: 6s anim-lineUp ease-out;
} }
.banner-section .banner-description-two{ .banner-section .banner-description-two{
position: absolute; position: absolute;
top: 40%; top: 30%;
left: 10%; left: 26%;
padding-right: 30%;
visibility: hidden; visibility: hidden;
animation: 3s anim-lineUp ease-out; text-align: center;
animation-delay: 6s; animation: 6s anim-lineDown ease-out;
animation-delay: 4s;
} }
.banner-section .banner-description-three{ .banner-section .banner-description-three{
position: absolute; position: absolute;
top: 40%; top: 40%;
left: 10%; left: 10%;
visibility: hidden; visibility: hidden;
animation: 4s anim-lineUp ease-out; animation: 5s anim-lineUp ease-out;
animation-delay: 8s; animation-delay: 8s;
} }
.banner-description h2, .banner-description-two h2, .banner-description-three h2{ .banner-description h2, .banner-description-two h2, .banner-description-three h2{
@ -272,6 +274,27 @@ Responsive Codes
transform: translateX(0%); transform: translateX(0%);
} }
} }
@keyframes anim-lineDown {
0% {
opacity: 0;
transform: translateY(-50%);
visibility: visible;
}
20% {
opacity: 0;
visibility: visible;
}
50% {
opacity: 1;
visibility: visible;
transform: translateY(0%);
}
100% {
opacity: 0;
visibility: visible;
transform: translateY(0%);
}
}
.banner-description h3, .banner-description-two h3, .banner-description-three h3{ .banner-description h3, .banner-description-two h3, .banner-description-three h3{
font-weight: 700; font-weight: 700;
font-size: 42px; font-size: 42px;

@ -19,7 +19,7 @@
<p>Let us find you a work placement and secure your permanent residency in just 4 simple steps.</p> <p>Let us find you a work placement and secure your permanent residency in just 4 simple steps.</p>
</div> </div>
<div class="banner-description-three"> <div class="banner-description-three">
<h2>Our pathway will </h2> <h2>Lorem ipsum </h2>
<h3>help you build a secure future in Australia </h3> <h3>help you build a secure future in Australia </h3>
<p>Let us find you a work placement and secure your permanent residency in just 4 simple steps.</p> <p>Let us find you a work placement and secure your permanent residency in just 4 simple steps.</p>
</div> </div>

Loading…
Cancel
Save