LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  


  

Text Changer and Fader

I am a
CSS
html {height: 100%; width: 100%;}
body{
background-color: #1f1f1f;
    background: -webkit-radial-gradient(#1f1f1f, #000000);
  background: radial-gradient(#1f1f1f, #000000);
}

h1 {font-family: 'Open Sans', sans-serif; font-size: 30px; color: #fff; text-align:center; position: absolute; width: 100%; top: 0px; background: #000; margin: 0px; padding: 15px 0px; z-index:200;}


.tochange {font-family: 'Open Sans', sans-serif; text-transform: uppercase; color: #fff; height: 60px; position: absolute; top: 50%; margin-top: -30px; text-align:center; width: 80%;left: 10%; font-size: 60px;}



JS
$(document).ready(function(){

    var i = 1;
    var interval = setInterval( increment, 2000);
    var headertext = "I am"
    
    function increment(){
        i = i + 1;
        if(i>7) {i = 1;}
        
          if(i==1){headertext = "I am a"}
          if(i==2){headertext = "Web Designer"}
          if(i==3){headertext = "Front End Dev"}
          if(i==4){headertext = "Interactivity Specalist"}
          if(i==5){headertext = "Lover of Pixels"}
          if(i==6){headertext = "Bit of a geek"}
          if(i==7){headertext = "Fan of Adorable Animals"}

          $('.tochange').animate({'opacity': 0}, 1000, function () {
              $('.tochange').text(headertext);
          }).animate({'opacity': 1}, 1000);

        }   
});
Host Instantly Drag and Drop Website Builder

 

Description

Wanted text to change in a certain order on my new portfolio site, including a nice simple fade in and out. :D
Term
Tue, 11/28/2017 - 02:24

Related Codes

Pen ID
Pen ID
Pen ID