Web Development

Some Web Animations / Effects

I've complied a few Web animations/effects, I have created and used for some of my projects. (I hope to add more in the coming months. ... ) 
 
-----------------------------------------------------------------------------------------------------------------------------------

Float Up Effect Using CSS3

HTML
  1. <div class="dv">    
  2.   Your HTML Code here !  
  3. </div>   
CSS 3
  1. .dv {                
  2.     position: fixed;      
  3.     bottom: 18%;      
  4.     left: 50%;      
  5.     width: 35%;      
  6.     animation-name: aFloatUpEffect;      
  7.     animation-duration: 2s;      
  8.     animation-timing-function: ease;      
  9. }    
  10.     
  11.     
  12. @keyframes aFloatUpEffect {      
  13.     from {      
  14.         bottom: 10%;      
  15.         opacity:0;      
  16.     }      
  17.       
  18.     to {      
  19.         bottom: 18%;      
  20.         opacity:1;      
  21.     }      
  22. }   
Replace dv with the required class name. 
 
-----------------------------------------------------------------------------------------------------------------------------------  

Add blinking effect to your Website

 HTML / CSS
  1. <!DOCTYPE html>    
  2.     
  3. <html xmlns="http://www.w3.org/1999/xhtml">    
  4. <head runat="server">    
  5.     <title></title>    
  6.     <script src="scripts/jquery-2.1.4.js"></script>    
  7.     <script src="scripts/jquery_ui_custom/jquery-ui.js"></script>    
  8.     <link href="scripts/jquery_ui_custom/jquery-ui.css" rel="stylesheet" />    
  9.     <style type="text/css">    
  10.         @keyframes blinknCSS {    
  11.             from {    
  12.                 background-color: white;    
  13.             }    
  14.     
  15.             to {    
  16.                 background-color: greenyellow;    
  17.             }    
  18.         }    
  19.     
  20.         #blinkMeC {    
  21.             width: 200px;    
  22.             height: 100px;    
  23.             background-color: white;    
  24.             animation-name: blinknCSS;    
  25.             animation-duration: 1s;    
  26.             animation-iteration-count: infinite;    
  27.             animation-direction: alternate;    
  28.             animation-timing-function: linear;   
  29.              -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */   
  30.         }    
  31.     
  32.         #blinkMeJ {    
  33.             width: 200px;    
  34.             height: 100px;    
  35.             background-color: #FFFFFF;    
  36.         }    
  37.     </style>    
  38.     <script type="text/javascript">    
  39.         function blinky() {    
  40.             $("#blinkMeJ").animate({ "background-color": "#8beb4f" }, 2000, "linear", function () {    
  41.                 $("#blinkMeJ").animate({ "background-color": "#FFFFFF" }, 2000, "linear");    
  42.             });    
  43.             window.setTimeout(function () { blinky() }, 4444);    
  44.         }    
  45.     
  46.         $(document).ready(function () {    
  47.             blinky();    
  48.         });    
  49.     </script>    
  50. </head>    
  51. <body>    
  52.     <form id="frmBlink" runat="server">    
  53.         BLINKING ANIMATION IN WEB    
  54.         <hr />    
  55.         <div id="blinkMeC">    
  56.             Blinking using CSS    
  57.         </div>    
  58.         <hr />    
  59.         <div id="blinkMeJ">    
  60.             Blinking using Jquery    
  61.         </div>    
  62.         <hr />    
  63.     </form>    
  64. </body>    
  65. </html>   
If you want a limited number of blinks.

For CSS - Change the "animation-iteration-count: " to the number of times you want.
For jQquery - Remove the "window.setTimeout".
 
-----------------------------------------------------------------------------------------------------------------------------------
Loading Animation on Page Load Using Font Awesome
 
Add below HTML below start of body tag. 
  1. <div class="loader"><i class="fa fa-cog fa-spin" aria-hidden="true" title="Loading..."></i></div>   
 CSS
  1. .loader {  
  2.             position: fixed;  
  3.             left: 50vw;  
  4.             top: 50vh;  
  5.             z-index: 9999;  
  6.             font-size: 78px;  
  7.             opacity: 0.2;  
  8.             color: #ff0000;  
  9.         } 
 JAVASCRIPT
  1. $(window).load(function () {  
  2.     $(".loader").fadeOut("slow");  
  3. }) 
 -----------------------------------------------------------------------------------------------------------------------------------
 
 
Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs