Swiftype Lower Third

Developer
Casey Zumwalt
Size
4,796 Kb
Views
12,144
  1. Swiftype Lower Third Previews
  2. Swiftype Lower Third HTML Codes
  3. Swiftype Lower Third CSS Codes
  4. Swiftype Lower Third JS Codes

How do I make an swiftype lower third?

What is a swiftype lower third? How do you make a swiftype lower third? This script and codes were developed by Casey Zumwalt on 07 November 2022, Monday.

Swiftype Lower Third Previews
IQ Test

Swiftype Lower Third - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Swiftype Lower Third</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="video"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2933/still.webp" alt="" /> <div class="lower-third"> <svg id="bug" width="303px" height="426px" viewBox="0 0 303 426" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> <!-- Generator: Sketch 3.4.3 (16044) - http://www.bohemiancoding.com/sketch --> <title>Shape</title> <desc>Created with Sketch.</desc> <defs></defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="Artboard-1-Copy-2" sketch:type="MSArtboardGroup" transform="translate(0.000000, -654.000000)" fill="#FFFFFF"> <g id="inverted-mono-copy" sketch:type="MSLayerGroup" transform="translate(-82.000000, 654.000000)"> <path d="M358.606452,357.765 C349.890323,380.175 338.683871,398.85 326.232258,412.545 C313.780645,427.485 298.83871,439.935 282.651613,448.65 C266.464516,457.365 249.032258,464.835 230.354839,468.57 C211.677419,472.305 190.509677,474.795 169.341935,474.795 C136.967742,474.795 109.574194,471.06 88.4064516,464.835 C67.2387097,457.365 48.5612903,447.405 36.1096774,432.465 C22.4129032,417.525 13.6967742,400.095 8.71612903,377.685 C3.73548387,355.275 0,329.13 0,299.25 C0,246.96 3.73548387,200.895 12.4516129,163.545 C21.1677419,126.195 33.6193548,95.07 51.0516129,71.415 C68.483871,47.76 90.8967742,29.085 117.045161,17.88 C143.193548,6.675 175.567742,0.45 211.677419,0.45 C241.56129,0.45 267.709677,2.94 290.122581,9.165 C311.290323,15.39 329.967742,25.35 343.664516,39.045 C357.36129,52.74 368.567742,71.415 374.793548,93.825 C381.019355,116.235 384.754839,143.625 384.754839,177.24 C384.754839,215.835 382.264516,250.695 377.283871,279.33 C374.793548,310.455 367.322581,335.355 358.606452,357.765 Z M341.19901,350.996316 L341.19901,350.996316 C350.973663,325.864749 356.603672,303.615689 358.665934,277.840758 L358.882658,276.130204 C363.624191,248.86992 366.077419,215.142398 366.077419,177.24 C366.077419,146.65839 362.863437,120.657721 356.79752,98.8232492 C351.630842,80.2256183 342.374999,64.1660884 330.457586,52.2502191 C319.512864,41.3069147 303.855785,32.6696454 285.123684,27.158697 C265.455067,21.6959001 241.456891,19.125 211.677419,19.125 C178.516625,19.125 148.513571,24.7130803 124.402557,35.0450334 C101.875384,44.6982855 81.9416685,60.9800567 66.0879784,82.492992 C50.8350573,103.190704 39.1080751,131.503407 30.6404536,167.788513 C22.5889771,202.290371 18.6774194,246.214483 18.6774194,299.25 C18.6774194,325.091178 21.5819816,349.48634 26.9487841,373.633824 C31.2403833,392.943519 38.4718561,407.404591 50.4580684,420.509556 C59.4325667,431.277559 73.9229141,439.919805 93.6765904,446.918849 C113.828459,452.845102 139.733283,456.12 169.341935,456.12 C188.077053,456.12 207.875615,454.020424 226.691895,450.257656 C241.736038,447.249217 256.97901,441.261682 273.796652,432.207202 C287.747504,424.696178 300.858589,413.818176 312.412087,399.982836 C323.41683,387.879187 333.395168,371.060739 341.19901,350.996316 Z M94.6322581,253.185 L179.303226,253.185 L255.258065,67.68 L94.6322581,253.185 Z M241.56129,204.63 L179.303226,253.185 L117.045161,402.585 L288.877419,204.63 L241.56129,204.63 Z" id="Shape" sketch:type="MSShapeGroup"></path> </g> </g> </g> </svg> <div class="name"></div> <div class="title"></div> </div>
</div>
<a href="#" class="run">Run Animation</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Swiftype Lower Third - Script Codes CSS Codes

.run { display: inline-block; line-height: 30px; padding: 0 15px; background: rgba(0, 0, 0, 0.75); color: white; text-decoration: none; font-size: 0.875rem; border-radius: 9999px; position: absolute; bottom: 50px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
.run:hover { background: #ff5012;
}
.video { overflow: hidden; width: 1920px; height: 1080px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
#bug { position: absolute; bottom: 0; left: 0; opacity: 0.4;
}
.name { width: 556px; height: 130px; position: absolute; left: 160px; bottom: 180px; overflow: hidden;
}
.name:after { content: ''; width: 556px; height: 130px; position: absolute; top: 0; left: 0; right: 0; background: #ff5126 url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2933/name.svg) no-repeat center center;
}
.title { width: 360px; height: 90px; position: absolute; left: 200px; bottom: 74px; overflow: hidden; -webkit-transform-origin: right; transform-origin: right; float: left;
}
.title:after { content: ''; width: 360px; height: 90px; position: absolute; top: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.6) url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2933/title.svg) no-repeat center center;
}
.run-animation #bug { opacity: 0; -webkit-animation: bug 6s ease forwards; animation: bug 6s ease forwards;
}
.run-animation .name { width: 0; -webkit-animation: name 6s ease forwards; animation: name 6s ease forwards;
}
.run-animation .title { width: 0; -webkit-animation: title 5.5s 0.5s ease forwards; animation: title 5.5s 0.5s ease forwards;
}
@-webkit-keyframes bug { 0%,2%,100% { opacity: 0; } 20%,80% { opacity: 0.4; }
}
@keyframes bug { 0%,2%,100% { opacity: 0; } 20%,80% { opacity: 0.4; }
}
@-webkit-keyframes name { 0% { width: 0px; -webkit-transform: translateX(0); transform: translateX(0); float: right; } 2% { width: 0px; } 8% { width: 556px; } 95% { width: 556px; float: right; } 100% { width: 0; -webkit-transform: translateX(50px); transform: translateX(50px); }
}
@keyframes name { 0% { width: 0px; -webkit-transform: translateX(0); transform: translateX(0); float: right; } 2% { width: 0px; } 8% { width: 556px; } 95% { width: 556px; float: right; } 100% { width: 0; -webkit-transform: translateX(50px); transform: translateX(50px); }
}
@-webkit-keyframes title { 0% { width: 0px; -webkit-transform: translateX(0); transform: translateX(0); } 2% { width: 0px; } 12% { width: 360px; } 95% { width: 360px; } 100% { width: 0; -webkit-transform: translateX(90px); transform: translateX(90px); }
}
@keyframes title { 0% { width: 0px; -webkit-transform: translateX(0); transform: translateX(0); } 2% { width: 0px; } 12% { width: 360px; } 95% { width: 360px; } 100% { width: 0; -webkit-transform: translateX(90px); transform: translateX(90px); }
}

Swiftype Lower Third - Script Codes JS Codes

$('.run').on('click', function () { $('.video').addClass('run-animation'); setTimeout(function () { $('.video').removeClass('run-animation'); }, 8000);
});
Swiftype Lower Third - Script Codes
Swiftype Lower Third - Script Codes
Home Page Home
Developer Casey Zumwalt
Username zumwalt
Uploaded November 07, 2022
Rating 3
Size 4,796 Kb
Views 12,144
Do you need developer help for Swiftype Lower Third?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Casey Zumwalt (zumwalt) Script Codes
Name
Video tiles
Animated Robot
A Pen by Casey Zumwalt
Animate in bugs
Simple flat toggle
Slidey things
Sign Up
Switch
Pure CSS Minimal Toggle Button
Search all the things
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!