Thunderbolt — textboard

In this example below you will see how to do a Thunderbolt — textboard with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by tolgaozisik, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tolgaozisik ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Thunderbolt — textboard</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  div<div class="maincontainer">
  <div class="container">
    <div class="item01">
      <h1>SHOT — 01</h1>
      <h2>LOGO REVEAL</h2>
      <p>Thunderbolt logo revealing in darkness..
      </p>
      <li>
      <h3>IS THIS VOICEOVER RIGHT & NECESSARY?</h3>
      It could be "text" or "voiceover"
      </li>
      <div class="vo"><div class="voheader">VOICEOVER</div>Incorporating thunder is a very hard task.. </div>
      <div class="text"><div class="textheader">TEXT</div>Thunderbolt - A Beverly Hills Creative Digital Technology Company
      </div>
      <p>Logo goes into the darkness...</p>

    </div>
    <div class="item02">
      <h1>SHOT — 02</h1>
      <h2>DARK IMAGE</h2>
      <div class="vo"><div class="sound">♪</div>Engine Pistons & Gears slowly starting to make noise in the background.</div>
      <p>Still a dark image</p>
      <div class="darkimage"></div>
    </div>
    <div class="item03">
      <h1>SHOT — 03</h1>
      <h2>INTRODUCING THE THUNDERBOLT ENGINE</h2>
      <p>Pistons and Gears start to appear in the background in darkness... There are some sparks coming out - to give the feeling of it is just starting...</p>
      <div class="photo03">
          <img src="http://ge.tt/api/1/files/36xT56L2/0/blob?download" alt="" />
          <img src="http://ge.tt/api/1/files/9cG676L2/0/blob?download" alt="" />
          <img src="http://ge.tt/api/1/files/6HyW76L2/0/blob?download" alt="" />
      </div>
    </div>
    </div>
    <div class="item04">
      <h1>SHOT — 04</h1>
      <h2>REDUCE POST EFFECTS</h2>
      <p>Showing other angles of the pistons & gears, we can add some smoke effect on this part.</p>
        <section>
          <h3>LONG SENTENCES? </h3>
        Text or Voiceover ?
        </section>
        <div class="vo"><div class="voheader">VOICEOVER</div>A Digital Platform connecting the most creative entrepreneurs with the most Active Private Investors</div>
    </div>
    
    <div class="item05">
      <h1>SHOT — 05</h1>
      <h2>GETTING FASTER!</h2>
      <p>Showing other angles of the pistons & gears, we can add some smoke effect on this part. ( things are getting faster now... )</p>
      <li><h3>Is this keyword or something?</h3>
      "Influencers"</li>
      <div class="text"><div class="textheader">TEXT</div>INFLUENCERS</div>

    </div>
    <div class="item06">
      <h1>SHOT — 06</h1>
      <h2>SHAKE</h2>
      <p>Showing other angles of the pistons & gears, lets add some flames coming out on this and the camera starts shaking ( things are getting faster ... )
</p>
      <li><h3>What is it exactly?</h3>"Mentors"</li>
      <div class="text"><div class="textheader">TEXT</div>MENTORS</div>
      <h4>♫ → Sound goes off  - everything goes off slient and e sound effect of a ringing in the ears would be cool here...</h4>
      <li>→ Lets make this our peek point in the animation</li>
      <p>In A Digital Private Crowd Investment Platform
</p>
    </div>
  <div class="item07">
      <h1>SHOT — 07</h1>
      
      <h2>CHIPS</h2>
      <p>Showing some computer chips in the bg, coming together slowly...</p>
          <li><h3>We need to eleminate unnecessary items!</h3>Smillar → Surveillance / 1: 12</li>
          <div class="vo"><div class="voheader">VOICEOVER</div>The Thunderbolt engine connects</div>
          <div class="text"><div class="textheader">TEXT</div>
           INVESTORS (left - investor color - please get their colors from Kala )
          </div>
          <div class="vo"><div class="voheader">VOICEOVER</div>Directly to Startups.</div>
          <div class="text"><div class="textheader">TEXT</div>
          STARTUPS (right - startup color - please get their colors from Kala )
          </div>
        </div>
  <div class="item08">
      <h1>SHOT — 08</h1>
      <h2>WORLD</h2>
      <p>Showing a similar world animation that Surveillance video has... </p>
      <li><h3>Voiceover texts are too long!</h3>Edit carefully</li>
        
        <div class="vo"><div class="voheader">VOICEOVER</div>The Thunderbolt Engine allows your private startup to remain private</div>
        <div class="text"><div class="textheader">TEXT</div>PRIVATE, MENTORSHIP, FEEDBACK (center, stacked, glowing)
            </div>
        <li>→ Private glows</li>
        <div class="vo"><div class="voheader">VOICEOVER</div>Allows experienced business owners, influencers and experts to mentor up and get involved with young startups
        </div>
        <li>→ MENTORSHIP glows</li>
        <div class="vo"><div class="voheader">VOICEOVER</div> And give instantaneous feedback towards new ideas.
        </div>
        <li>→ FEEDBACK glows.</li>
    </div>
  <div class="item09">
      <h1>SHOT — 09</h1>
      <h2>CONNECTION</h2>
      <p>Showing a background that points out increase in efficiency and connection and collaboration ...</p>
    <li><h3>Text hiding lots of extra shots in one section</h3>Decrease or seperate them organised shots!</li>
        
        <div class="vo"><div class="voheader">VOICEOVER</div>The engine allows startups raise seed level investments in a matter of days.
        </div>
        <div class="text"><div class="textheader">TEXT</div>FASTER FUNDRAISING
            </div>
        
        <div class="vo"><div class="voheader">VOICEOVER</div>The engine allows investors to invest into digital startups without having any technical knowledge.
        </div>
        <div class="text"><div class="textheader">TEXT</div>INTELLIGENT INVESTING
        </div >
        <div class="vo"><div class="voheader">VOICEOVER</div>Thunderbolt Engine, Power your Business</div>
        <div class="text"><div class="textheader">TEXT</div>REVOLUTIONZING ENTREPRENEURSHIP AS WE KNOW IT</div >
        <li>→ POWER YOUR BUSINESS glows.</li>
    </div>
  
  <div class="item10">
      <h1>SHOT — 10</h1>
      <h2>LOGO AGAIN</h2>
      <p>Thunderbolt Engine Logo appears in the middle.
      </p>
      <div class="text"><div class="textheader">TEXT</div>THUNDERBOLT ENGINE (top, center) [tagline](bottom,center)</div>
    </div>
  
  <div class="item11">
      <h1>HEADER</h1>
      <h2>DARK IMAGE</h2>
      <p>Engine Pistons & Gears slowly starting to make noise in the background - still a dark image</p>
    </div>
  <div class="item12">
      <h1>HEADER</h1>
      <h2>DARK IMAGE</h2>
      <p>Engine Pistons & Gears slowly starting to make noise in the background - still a dark image</p>
    </div>
  <div class="item13">
      <h1>HEADER</h1>
      <h2>DARK IMAGE</h2>
      <p>Engine Pistons & Gears slowly starting to make noise in the background - still a dark image</p>
    </div>
  <div class="item14">
      <h1>HEADER</h1>
      <h2>DARK IMAGE</h2>
      <p>Engine Pistons & Gears slowly starting to make noise in the background - still a dark image</p>
    </div>
  <div class="item15">
      <h1>HEADER</h1>
      <h2>DARK IMAGE</h2>
      <p>Engine Pistons & Gears slowly starting to make noise in the background - still a dark image</p>
    </div>
  <div class="item16">
      <h1>HEADER</h1>
      <h2>DARK IMAGE</h2>
      <p>Engine Pistons & Gears slowly starting to make noise in the background - still a dark image</p>
    </div>
  <div class="item17">
      <h1>HEADER</h1>
      <h2>DARK IMAGE</h2>
      <p>Engine Pistons & Gears slowly starting to make noise in the background - still a dark image</p>
    </div>
  <div class="item18">
      <h1>HEADER</h1>
      <h2>DARK IMAGE</h2>
      <p>Engine Pistons & Gears slowly starting to make noise in the background - still a dark image</p>
    </div>
  
  <div class="item19">
      <h1>HEADER</h1>
      <h2>DARK IMAGE</h2>
      <p>Engine Pistons & Gears slowly starting to make noise in the background - still a dark image</p>
    </div>
  <div class="item20">
      <h1>HEADER</h1>
      <h2>DARK IMAGE</h2>
      <p>Engine Pistons & Gears slowly starting to make noise in the background - still a dark image</p>
    </div>
  
    </div>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/tolgaozisik/thunderbolt-andx2014-textboard-MwPvme */
@import url(https://fonts.googleapis.com/css?family=Roboto:500,700,400);
* {
  color: #FFF;
  margin: 0;
  padding: 0;
  font-family: "Roboto";
  font-weight: 500;
}

.maincontainer {
  box-sizing: border-box;
  border: 15px solid #FFFFFF;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: #FFFFFF;
}
.maincontainer:after {
  content: " ";
  display: block;
  clear: both;
}

.item01 {
  width: 49.1525423729%;
  float: left;
  margin-right: 1.6949152542%;
  height: 900px;
  background-color: #191970;
  box-sizing: border-box;
  border: 20px solid #191970;
}

.item02 {
  box-sizing: border-box;
  border: 20px solid #191970;
  width: 49.1525423729%;
  float: right;
  margin-right: 0;
  height: 900px;
  background-color: #191970;
}

.item03 {
  box-sizing: border-box;
  border: 20px solid #191970;
  width: 49.1525423729%;
  float: left;
  margin-right: 1.6949152542%;
  margin-top: 1.6949152542%;
  height: 900px;
  background-color: #191970;
}

.item04 {
  box-sizing: border-box;
  border: 20px solid #191970;
  width: 49.1525423729%;
  float: right;
  margin-right: 0;
  margin-top: 1.6949152542%;
  height: 900px;
  background-color: #191970;
}

.item05 {
  box-sizing: border-box;
  border: 20px solid #191970;
  width: 49.1525423729%;
  float: left;
  margin-right: 1.6949152542%;
  margin-top: 1.6949152542%;
  height: 900px;
  background-color: #191970;
}

.item06 {
  box-sizing: border-box;
  border: 20px solid #191970;
  width: 49.1525423729%;
  float: right;
  margin-right: 0;
  margin-top: 1.6949152542%;
  height: 900px;
  background-color: #191970;
}

.item07 {
  box-sizing: border-box;
  border: 20px solid #191970;
  width: 49.1525423729%;
  float: left;
  margin-right: 1.6949152542%;
  margin-top: 1.6949152542%;
  height: 900px;
  background-color: #191970;
}

.item08 {
  box-sizing: border-box;
  border: 20px solid #191970;
  width: 49.1525423729%;
  float: right;
  margin-right: 0;
  margin-top: 1.6949152542%;
  height: 900px;
  background-color: #191970;
}

.item09 {
  box-sizing: border-box;
  border: 20px solid #191970;
  width: 49.1525423729%;
  float: left;
  margin-right: 1.6949152542%;
  margin-top: 1.6949152542%;
  height: 900px;
  background-color: #191970;
}

.item10 {
  box-sizing: border-box;
  border: 20px solid #191970;
  width: 49.1525423729%;
  float: right;
  margin-right: 0;
  margin-top: 1.6949152542%;
  height: 900px;
  background-color: #191970;
}

.item11 {
  box-sizing: border-box;
  border: 20px solid #191970;
  width: 49.1525423729%;
  float: left;
  margin-right: 1.6949152542%;
  margin-top: 1.6949152542%;
  height: 900px;
  background-color: #191970;
}

.item12 {
  box-sizing: border-box;
  border: 20px solid #191970;
  width: 49.1525423729%;
  float: right;
  margin-right: 0;
  margin-top: 1.6949152542%;
  height: 900px;
  background-color: #191970;
}

.item13 {
  box-sizing: border-box;
  border: 20px solid #191970;
  width: 49.1525423729%;
  float: left;
  margin-right: 1.6949152542%;
  margin-top: 1.6949152542%;
  height: 900px;
  background-color: #191970;
}

.item14 {
  box-sizing: border-box;
  border: 20px solid #191970;
  width: 49.1525423729%;
  float: right;
  margin-right: 0;
  margin-top: 1.6949152542%;
  height: 900px;
  background-color: #191970;
}

.item15 {
  box-sizing: border-box;
  border: 20px solid #191970;
  width: 49.1525423729%;
  float: left;
  margin-right: 1.6949152542%;
  margin-top: 1.6949152542%;
  height: 900px;
  background-color: #191970;
}

.item16 {
  box-sizing: border-box;
  border: 20px solid #191970;
  width: 49.1525423729%;
  float: right;
  margin-right: 0;
  margin-top: 1.6949152542%;
  height: 900px;
  background-color: #191970;
}

.item17 {
  box-sizing: border-box;
  border: 20px solid #191970;
  width: 49.1525423729%;
  float: left;
  margin-right: 1.6949152542%;
  margin-top: 1.6949152542%;
  height: 900px;
  background-color: #191970;
}

.item18 {
  box-sizing: border-box;
  border: 20px solid #191970;
  width: 49.1525423729%;
  float: right;
  margin-right: 0;
  margin-top: 1.6949152542%;
  height: 900px;
  background-color: #191970;
}

.item19 {
  box-sizing: border-box;
  border: 20px solid #191970;
  width: 49.1525423729%;
  float: left;
  margin-right: 1.6949152542%;
  margin-top: 1.6949152542%;
  height: 900px;
  background-color: #191970;
}

.item20 {
  box-sizing: border-box;
  border: 20px solid #191970;
  width: 49.1525423729%;
  float: right;
  margin-right: 0;
  margin-top: 1.6949152542%;
  height: 900px;
  background-color: #191970;
}

h1 {
  margin-bottom: 20px;
  color: #FFFFFF;
}

h2 {
  background-color: #FFFFFF;
  color: red;
  font-size: 14px;
  padding: 10px 20px;
  margin-bottom: 10px;
}

h3 {
  color: red;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
  padding: 5px 0;
  margin-bottom: 10px;
}

h4 {
  background-color: #B0E0E6;
  color: #191970;
  padding: 15px 20px;
}

p {
  padding: 15px 20px;
  border: 1px solid #FFF;
  color: #FFFFFF;
}

section {
  background-color: #FFF;
  color: red;
  font-weight: 500;
  padding: 20px 20px;
}

li {
  background-color: #FFF;
  color: #191970;
  padding: 15px 20px;
  list-style-type: none;
  font-weight: 500;
}

.text {
  background-color: #F5F5F5;
  color: #1A025C;
  font-weight: 400;
  padding: 20px 20px;
}
.text .textheader {
  color: #191970;
  width: 25px;
  text-align: left;
  font-size: 10px;
  padding: 2px 4px;
  margin-bottom: 5px;
  border: 1px solid #191970;
}

.vo {
  padding: 15px 20px;
  background-color: #B0E0E6;
  color: #191970;
}
.vo .voheader {
  color: #191970;
  width: 55px;
  text-align: left;
  font-size: 10px;
  padding: 3px 4px;
  margin-bottom: 5px;
  border: 1px solid #191970;
}

.photo03 {
  margin: 10px 0;
}
.photo03 img {
  position: relative;
  width: 50%;
  float: left;
}

.darkimage {
  width: 100%;
  height: 250px;
  background-color: black;
  margin-top: 10px;
}

.sound {
  padding: 3px 3px;
  background-color: #FFF;
  color: #191970;
  text-align: center;
  width: 20px;
  font-size: 16px;
  margin-bottom: 5px;
  border: 1px solid #191970;
}

Comments