Flipping Text Animation

This effect give you a text box which, using a flip animation, switches between 3 seperate headings. The font, colour and timings are all completely editable. This effect is great for using in headers or homepages of websites to showcase what the company is about, their values or what they are selling.

How to use the Effect

1. First thing you will need to do is copy and paste the CSS code into the CSS section of your website. Once done you will need to go back to Blocklab and hit 'Publish' to save these changes.
   • If needed, this step is where you will change the Font and Block colours for this effect.
2. Once that code has been put into the CSS section, head into blocklabs and go to where you wish to have the effect. In this space place either a Text block or a HTML block and copy and paste the HTML Code. Once done, hit Publish and the effect will be live.
   • If needed, this is the step where you change the font of the top title.
   • If you need to change spacing then in the code add or remove div's from the top and bottom of the code.

CSS

#container {color:#999; text-transform: uppercase; font-size:36px; font-weight:bold; display:block; text-align: center; font-weight: bold !important;}
#flip { height:50px; overflow:hidden;}
#flip > div > div { color:#fff; padding:4px 20px; height:50px; margin-bottom:45px; display:inline-block; text-align: center !important; font-weight: bold; }
#flip div:first-child { animation: show 5s linear infinite; }
#flip div div { background:#ad0132;text-align: center !important; }
#flip div:first-child div { background:#ad0132;text-align: center !important; }
#flip div:last-child div { background:#ad0132; text-align: center !important;}
@keyframes show { 0% {margin-top:-270px;}
5% {margin-top:-180px;}
33% {margin-top:-180px;}
38% {margin-top:-90px;}
66% {margin-top:-90px;}
71% {margin-top:0px;}
99.99% {margin-top:0px;}
100% {margin-top:-270px;}
}

(To change the colour of the boxes, change the parts of code in Red)
(To change the font colour, change the part of the code in Green)
(If you are changing the height, the height value in #flip lines 1 & 2 MUST be the same.)

HTML (to use in a text or HTML block)

<div id=container>
<span style="color:#ffffff;">Your specialists for</span>
<div id=flip>
<div>
<div>Professional Indemnity Insurance</div>
</div>
<div>
<div>After The Event Insurance</div>
</div>
<div>
<div>Freelance Solicitors</div>
</div>
</div>
</div>

(To change the font colour, change the part of the code in Green)
(the /div's are used to add padding above and below the effect for being used as a banner. If you wish to have just the effect block then remove the top and bottom div's)