Site Search:

How to add star war effects in blogger post in 5 minutes

Back>

paste the following code into the post's HTML, and add more content
effects
<style>
#starwartitles
{
 position: relative;
 width: 300px;
 height: 300px;
 bottom: 0;
 left: 50%;
 margin-left: -9em;
 font-size: 350%;
 font-weight: bold;
 text-align: justify;
 overflow: hidden;
 transform-origin: 50% 100%;
 transform: perspective(200px) rotateX(25deg);
}

#starwartitles:after
{
 position: relative;
 content: ' ';
 left: 0;
 right: 0;
 top: 0;
 bottom: 60%;
 background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
 pointer-events: none;
}

#starwartitlecontent
{
 position: relative;
 top: 100%;
 animation: scroll 50s linear 4s infinite;
}

@keyframes scroll {
 0% { top: 100%; }
 100% { top: -170%; }
}
</style>

<br />
<div id="starwartitles">
<div id="starwartitlecontent">
content<br />
content1<br />
content2<br />
content<br />
content1<br />
content2<br />
content<br />
content1<br />
content2<br />
content<br />
content1<br />
content2<br />
content<br />
content1<br />
content2<br />
</div>
</div>