Editing your Text Animation

Editing your Text Animation in your JavaScript widget can be fun, but be careful:
 
If the syntax gets mishandled the results may be undesirable. But don't worry, we have you covered. 
 
In the event you change some code or text in this widget, that you didn't mean to or can't reverse, simply delete everything in the text field and cut and paste this "Default" code snippet into your Widget. If you feel comfortable enough check out the PRO-Tips below to further personalize your text animation. 
 
*************** Default Code **************
 
 
<script type="text/javascript">
//*****************************************************************************************************************************************ATTENTION: THIS WIDGET CREATES THE ANIMATED LOGO IN THE CENTER OF THE SCREEN.
//******************************************************************************************************************************************
// TO CHANGE THE MESSAGE THAT APPEARS IN THE LOGO ALL YOU'LL NEED TO DO IS ALTER THE TEXT ON THE LINE INDICATED BELOW SO THAT IT LOOKS LIKE THIS: 
// var text = 'your message';
//******************************************************************************************************************************************
//CAUTION: DO NOT CHANGE ANYTHING OUTSIDE OF THE QUOTATIONS, THIS WILL RESULT IN CODE FAILURE AND YOUR MESSAGE WILL NO LONGER APPEAR THE WAY YOU WANT IT TO.
//******************************************************************************************************************************************
//FOR PRO-TIPS OR IN CASE OF CODE FAILURE, FOLLOW THIS LINK:  http://www.talkspotsupport.com/kb/a229/editing-your-text-animation.aspx#
//******************************************************************************************************************************************
 
var text = 'Adventure blog'; // <--- ***THIS IS THE LINE YOU CHANGE***
 
// IGNORE EVERYTHING BELOW HERE! It is just the computer code that animates the text //
$(document).ready(function() {
    var myDiv = '<div class="ts-center" >';
    myDiv += text;
    myDiv += '</div>';
    $('body').append(myDiv);  
    $('.ts-center').show("fade", 8000);
});
$(document).ready(function(){
    $('.ts-center').click(function(){
        $( ".ts-center" ).css('color', 'white');
        $( ".ts-center" ).css('opacity', '.99');
        $(".ts-center").css('-ms-transform','scale(1.25) skew(-15deg)');
        $(".ts-center").css('-webkit-transform','scale(1.25) skew(-15deg)'); 
        $(".ts-center").css('transform','scale(1.25) skew(-15deg)');
       location.assign('/blog');
       return false;
    });
})
</script>
<style>
.ts-center{
    display:none; 
    position: absolute;  
    font-size:72px; 
    padding-top: 10px; 
    padding-left: 50px;     
    padding-bottom: 10px;  
    padding-right: 50px;
    border: 1px solid white;
    border: double;
    top:calc(50% - 169px/2); 
    left:calc(42% - 300px/2);
    font-family: "Times New Roman", Times, serif;
   color: white;
}
.ts-center:hover{
     color: red;
     opacity: .33;
     border: none;
     font-size: 150px;
     margin-left: -12%;
     margin-top: -3%;
}
</style>
 
 
 
 
PRO-Tips: 
Below are some pro-tips for advanced users who wish to personalize their animation even further. Have fun with it, you always have the default code to revert back to. 
 
With some simple adjustments you will be able to change the font size, style, color, etc. See tips in red below. 
 
 
**** Take advantage of the in text links for additional information. ****
<style>
.ts-center{
    display:none;
 
    position: absolute;   Controls the Position of the text on your screen.
    font-size:72px;   This is how big the text will be displayed. Experiment with different values.
    padding-top: 10px;   This provides some padding inside the box between the border and your text.
                                     You can adjust each side independently.
    padding-left: 50px;     
    padding-bottom: 10px;
    padding-right: 50px; 
    border: 1px solid white;   Experiment with Different Colors or change the size of your boarder in pixels.
    border: double;  Controls your Boarder Styles 
  [ top:calc(50% - 169px/2); ] -  [ This controls the positioning of the text when it is scrolled over - Depending on the length of your title you might need to adjust the message to be centered on the screen. Adjust percentage values until you have the message positioned where you want. ]
  [ left:calc(42% - 300px/2); ]
    font-family: "Times New Roman", Times, serif; Controls the Style of your fonts.
   color: white; Controls the Color of your text.
}
 
**** The following  properties control the hover effect when you scroll over the text ****
.ts-center:hover{
     color: red;
     opacity: .33;  
     border: none;
     font-size: 150px;
   [ margin-left: -12%; ]  -  [ This controls the positioning of the text when it is scrolled over - Depending on the length of your title you might need to adjust the message to be centered on the screen. Adjust negative and positive values until you have the message positioned where you want. Example -12% will pull your message towards the left side of the screen while 12% will push your message away from the left side of the screen. You can adjust the message in the same fashion with the top-margin.  ]
   [ margin-top: -3%; ]
}
</style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Add Feedback