CSS animation mini project

Looking at this page you notice a simple navigation bar and a hero with some text on it. You might say : “ whats so special? ” Well behind the scenes there is some CSS magic called animation. Animations is a way to bring out inner personality and creativity , which evidently adds value to your work . It also draws attention to important areas of the webpage while creating a unique user experience.

So how do we use animations ?

Lets define some terms :

• Keyframes : Is a method to define animation sequences or appearance . Since we are creating animations that transition from one CSS style to another we need to specify it using key words such as: to and from or 0%-100%(started-completed)
• Animation : This lets you define the timing , duration , and additional details on how the animation to progress.
• Webkit : Is a web browser rendering engine used by safari and chrome. The CSS -webkit property is a shorthand property for setting multiple animation properties in one place.

Alright , let’s create the above project !

To kick things of let’s add the Navigation bar. Here’s the HTML code:

<nav class = "alignment">
    <div class = "btn">
          <span class = " select "><a class = "link-style"href = "index.html"> Home</a><span/>
    </div>
       
          
   <div class = "btn">
           <span class = " select "><a  class = "link-style"href =               "index.html"> Attractions</a><span/>
   </div>
          
    <div class = "btn">
          <span class = " select "><a  class = "link-style" href = "index.html"> Food</a><span/>
    </div>
          
     <div class = "btn">
          <span class = " select "><a  class = "link-style" href = "index.html"> Contact Us</a><span/>
     </div>
</nav>

Ok next lets add the CSS and it animation !

*{
  margin :0;
  box-sizing: border-box;
  }
body,html{
  height:100%;
  padding:0;
  background:#eee;
  font-family:georgia;
}
.alignment{
  height: 20vh;  /*View port Height */
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn {
  width: 150px;
  height: 50px;
  border: 1px solid #333;
  font-family: 'Cinzel', serif;
  font-size: 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 0;
  transition: 1s;
  margin-left: 35px ; 
}
.btn::before, .btn::after {
  position: absolute;
  background: #eee;
  z-index: -1;
  transition: 1s;
  content: '';
}
.btn::before {
  height: 50px;
  width: 130px;
}
.btn::after {
  width: 150px;
  height: 30px;
}
.select {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.btn:hover::before {
  width: 0px;
  background: #fff;
}
.btn:hover::after {
  height: 0px;
  background: #fff;
}
.btn:hover {
  background: #fff;
}
.link-style{
  text-decoration: none ; 
  color: #111 ; 
}

Phew , that was long !

Let’s understand some code:

• Flex / Flexbox : one dimensional layout module that creates a flexible responsive layout structure. Here is a great resource to practice and understand flex and its properties : https://flexboxfroggy.com/
• ::before :: after and ::hover : These are called pseudo elements . They act as an element of its own and can be styled, positioned and more.

Oooooh Look at that ! Smooth animation !

Alright now lets create the Hero !

Here is the HTML code needed

<div class="hero-image">
      <div class = "container">
        <h1><span>BIENVENUE!</span></h1>
        <span class ="des"><i>To the city of love....</i></span>
      </div>
    </div>

Pretty simple , now lets embellish it with some CSS

/*Hero*/
.hero-image{
  position:relative;
  width:100%;
  height:70vh;/*windows viewport height*/
  overflow:hidden;/*scroll bar*/
  background:url("https://static.independent.co.uk/s3fs-  public/thumbnails/image/2019/08/07/08/paris.jpg") no-repeat center;
  background-size:cover;
}

/*text on hero*/

.container{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);/*Vertically and horizontally centered*/
  overflow:hidden;
  text-align:center;
  color:#fff;
  font-weight:700;/*thick/thin*/
  text-shadow:0 0 10px black;
  animation : text 3s 1 ; 
}
.container h1{
  font-size:72px;
  letter-spacing:0.2em;
  animation : text 3s 1 ;
}
@keyframes text{
  0%{
    color:black ; 
    margin-bottom: -40px ; 
  }
  30%{
    letter-spacing: 25px ; 
    margin-bottom: -40px ; 
  }
  85%{
    letter-spacing: 8px ; 
    margin-bottom: -40px ; 
  }
  
}
.des{ 
  margin:20px;
  display:block;
  font-size:26px;
  text-shadow:0 0 10px black;
}
h3{
  text-align:center; 
    font-size:30px; 
    letter-spacing:1px; 
    font-family:"Times-new-roman"; 
    color:#007bb5;  
}

Awesome , Look at how mesmerizing the words look : flowing in and out of focus . eye-catching!

Conclusion

Well there you have it , an animated navigation and hero text , taking the project to the next level ! Hope you had fun creating this mini project , and happy coding : )