Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #293391

    Hi!

    can You please tell me where to paste the css code, that is generated by service like this one.:

    http://cssload.net/en/animated_text

    Thanks a lot!

    Cheers!
    finlando

    #293403

    P.S.:

    the generated code is.:

    <style>
    #fountainTextG{
    width:240px;
    }

    .fountainTextG{
    color:#000000;
    font-family:Arial Black;
    font-size:25px;
    text-decoration:none;
    font-weight:normal;
    font-style:normal;
    float:left;
    -moz-animation-name:bounce_fountainTextG;
    -moz-animation-duration:1.43s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:linear;
    -moz-transform:scale(.5);
    -webkit-animation-name:bounce_fountainTextG;
    -webkit-animation-duration:1.43s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    -webkit-transform:scale(.5);
    -ms-animation-name:bounce_fountainTextG;
    -ms-animation-duration:1.43s;
    -ms-animation-iteration-count:infinite;
    -ms-animation-direction:linear;
    -ms-transform:scale(.5);
    -o-animation-name:bounce_fountainTextG;
    -o-animation-duration:1.43s;
    -o-animation-iteration-count:infinite;
    -o-animation-direction:linear;
    -o-transform:scale(.5);
    animation-name:bounce_fountainTextG;
    animation-duration:1.43s;
    animation-iteration-count:infinite;
    animation-direction:linear;
    transform:scale(.5);
    }

    #fountainTextG_1{
    -moz-animation-delay:0.44s;
    -webkit-animation-delay:0.44s;
    -ms-animation-delay:0.44s;
    -o-animation-delay:0.44s;
    animation-delay:0.44s;
    }

    #fountainTextG_2{
    -moz-animation-delay:0.55s;
    -webkit-animation-delay:0.55s;
    -ms-animation-delay:0.55s;
    -o-animation-delay:0.55s;
    animation-delay:0.55s;
    }

    #fountainTextG_3{
    -moz-animation-delay:0.66s;
    -webkit-animation-delay:0.66s;
    -ms-animation-delay:0.66s;
    -o-animation-delay:0.66s;
    animation-delay:0.66s;
    }

    #fountainTextG_4{
    -moz-animation-delay:0.77s;
    -webkit-animation-delay:0.77s;
    -ms-animation-delay:0.77s;
    -o-animation-delay:0.77s;
    animation-delay:0.77s;
    }

    #fountainTextG_5{
    -moz-animation-delay:0.88s;
    -webkit-animation-delay:0.88s;
    -ms-animation-delay:0.88s;
    -o-animation-delay:0.88s;
    animation-delay:0.88s;
    }

    #fountainTextG_6{
    -moz-animation-delay:0.99s;
    -webkit-animation-delay:0.99s;
    -ms-animation-delay:0.99s;
    -o-animation-delay:0.99s;
    animation-delay:0.99s;
    }

    #fountainTextG_7{
    -moz-animation-delay:1.1s;
    -webkit-animation-delay:1.1s;
    -ms-animation-delay:1.1s;
    -o-animation-delay:1.1s;
    animation-delay:1.1s;
    }

    #fountainTextG_8{
    -moz-animation-delay:1.21s;
    -webkit-animation-delay:1.21s;
    -ms-animation-delay:1.21s;
    -o-animation-delay:1.21s;
    animation-delay:1.21s;
    }

    #fountainTextG_9{
    -moz-animation-delay:1.32s;
    -webkit-animation-delay:1.32s;
    -ms-animation-delay:1.32s;
    -o-animation-delay:1.32s;
    animation-delay:1.32s;
    }

    @-moz-keyframes bounce_fountainTextG{
    0%{
    -moz-transform:scale(1);
    color:#000000;
    }

    100%{
    -moz-transform:scale(.5);
    color:#FFFFFF;
    }

    }

    @-webkit-keyframes bounce_fountainTextG{
    0%{
    -webkit-transform:scale(1);
    color:#000000;
    }

    100%{
    -webkit-transform:scale(.5);
    color:#FFFFFF;
    }

    }

    @-ms-keyframes bounce_fountainTextG{
    0%{
    -ms-transform:scale(1);
    color:#000000;
    }

    100%{
    -ms-transform:scale(.5);
    color:#FFFFFF;
    }

    }

    @-o-keyframes bounce_fountainTextG{
    0%{
    -o-transform:scale(1);
    color:#000000;
    }

    100%{
    -o-transform:scale(.5);
    color:#FFFFFF;
    }

    }

    @keyframes bounce_fountainTextG{
    0%{
    transform:scale(1);
    color:#000000;
    }

    100%{
    transform:scale(.5);
    color:#FFFFFF;
    }

    }

    </style>
    <div id=”fountainTextG”>
    <div id=”fountainTextG_1″ class=”fountainTextG”>
    Н</div>
    <div id=”fountainTextG_2″ class=”fountainTextG”>
    О</div>
    <div id=”fountainTextG_3″ class=”fountainTextG”>
    Н</div>
    <div id=”fountainTextG_4″ class=”fountainTextG”>
    П</div>
    <div id=”fountainTextG_5″ class=”fountainTextG”>
    А</div>
    <div id=”fountainTextG_6″ class=”fountainTextG”>
    Р</div>
    <div id=”fountainTextG_7″ class=”fountainTextG”>
    Д</div>
    <div id=”fountainTextG_8″ class=”fountainTextG”>
    О</div>
    <div id=”fountainTextG_9″ class=”fountainTextG”>
    Н</div>
    </div> – See more at: http://cssload.net/en/animated_text#sthash.aey5LAKe.dpuf

    #293436

    … forgot to mention that the preloader is for the layer slider

    Cheers!
    finlando

    #293575

    Hi!

    I’m not sure if you can easily use your css code with the LayerSlider plugin and probably you need to hire a developer who can integrate the css code into the slider for you. I recommend to paste the code into the quick css field (Enfold > Theme Options) or into the child theme style.css file. Don’t worget to remove the

    
    <style>
    

    and

    
    </style>
    

    html tags because they’re not required if you paste the code into css stylesheets or the quick css field.

    Regards,
    Peter

    #293591

    Thanks a lot, Peter!

    Cheers!
    finlando

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘preloader circle as text (css)’ is closed to new replies.