Dynamic Banner Website Intro, Animated Text In Banner: How many websites do we see every day. in many websites, you will notice that animated text in their banner. Which we also call dynamic banner. Said about the website via animated text, Which looks very good and professional. These types of dynamic banner website intro mostly built in JavaScript / JQuery.
Nowadays, Every portfolio & Professional websites have a dynamic banner website intro. For visitor. So, visitors can get an idea about the website without having to read about. Well, this is a good idea to tell about your website by animated text in banner. Which attracts visitors.
Today I will give you source code of dynamic banner website intro, which known as Animated text banner. You can place it on your website just by changing matters in this code. So, just replace my text and put your own. Basically, I made this program in HTML, CSS & JQuery a JavaScript library. There are 3 types of files HTML CSS and JavaScript.
Dynamic Banner Website Intro Source Code or Animated Text In Banner Source Code Giver Here Below:
I have created 3 files for this Dynamic Banner Website Intro project/program. First is “index.html” second is “style.css” & third is “function.js”. Copy source code from below.
First, create a file named “index.html”
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<!DOCTYPE html> <!-- Code By Web Dev Trick ( https://webdevtrick.com) --> <html> <head> <meta charset="UTF-8"> <title>Dynamic Banner Website Intro | Webdevtrick.com</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,100,300,200,500,600,700,800,900"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="intro"> <div class="animated-bar"></div> <div class="slide slide-a"> <div class="slide-content"> <p class="slide-a-child">webdevtrick.com</p> <h1 class="slide-a-child">This Is Web Dev Trick Blog</h1> <p class="slide-a-child">This is New and Fresh Blog</p> </div> </div> <div class="slide slide-b"> <div class="slide-content"> <h2 class="slide-b-child">What We Share?</h2> <p class="slide-b-child">Tutorial, Tips, Tricks and Source Code</p> <p class="slide-b-child">About Web And Graphic Design, Development & SEO</p> </div> </div> <div class="slide slide-c"> <div class="slide-content"> <h2 class="slide-c-child">This Blog Is For</h2> <ul> <li class="slide-c-child"><p>Web Designer</p></li> <li class="slide-c-child"><p>Graphic Designer</p></li> <li class="slide-c-child"><p>Web Developer</p></li> <li class="slide-c-child"><p>SEO</p></li> </ul> </div> </div> <div class="slide slide-d"> <div class="slide-content"> <h2 class="slide-d-child">Keep Visiting This Blog</h2> <p class="slide-d-child">Our Blog -<a href="http://mohamdhasan.pro/" target="_blank"> webdevtrick.com</a></p> <button class="slide-d-child replay">Reload</button> </div> </div> </div> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src="js/function.js"></script> </body> </html> |
Then create a file named “style.css”
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 |
/** Code By Web Dev Trick ( https://webdevtrick.com) **/ *, *::before, *::after { box-sizing: border-box; outline: none; } h1, h2, h3, h4, h5, h6, p { margin: 5px 0; } body { margin: 0; padding: 0; } .intro { width: 100%; min-height: 100vh; position: relative; } .intro .animated-bar { width: 0; height: 3px; background: #fff; z-index: 9999; position: absolute; top: 0; left: 0; -webkit-animation: bar 5s 3 linear; animation: bar 5s 3 linear; } .intro .slide { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #ff0; position: absolute; top: 0; left: 0; padding: 20px; overflow: hidden; } .intro .slide.slide-a { background: #f26060; z-index: 400; } .intro .slide.slide-a .slide-a-child { -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; transition: all 1s; } .intro .slide.slide-a .slide-a-child.is-visible { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .intro .slide.slide-a p { font-size: 25px; } .intro .slide.slide-b { background: #0EB29A; z-index: 300; } .intro .slide.slide-b h2 { -webkit-transform: translateX(50px); transform: translateX(50px); } .intro .slide.slide-b p:first-of-type { -webkit-transform: translateX(-50px); transform: translateX(-50px); margin-bottom: 20px; } .intro .slide.slide-b p:last-of-type { -webkit-transform: translateX(50px); transform: translateX(50px); } .intro .slide.slide-b .slide-b-child { transition: all 1s; opacity: 0; } .intro .slide.slide-b .slide-b-child.is-visible { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } .intro .slide.slide-c { background: #3e454d; z-index: 200; } .intro .slide.slide-c .slide-c-child { transition: all 1s cubic-bezier(0.25, 0.25, 0.23, 1.405); -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0; } .intro .slide.slide-c .slide-c-child.is-visible { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } .intro .slide.slide-d { background: #ff8071; z-index: 100; } .intro .slide.slide-d .slide-d-child { transition: all 1s; opacity: 0; -webkit-transform: translateY(-50px); transform: translateY(-50px); } .intro .slide.slide-d .slide-d-child.is-visible { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .intro .slide.slide-d button.slide-d-child { -webkit-transform: translateY(50px); transform: translateY(50px); } .intro .slide .slide-content { text-align: center; color: #fff; font-family: "Raleway", sans-serif; } .intro .slide .slide-content h1 { font-size: 70px; font-weight: 400; margin: 20px 0; } .intro .slide .slide-content h2 { font-size: 60px; font-weight: 400; margin: 20px 0; } .intro .slide .slide-content p { font-size: 25px; font-weight: 300; } .intro .slide .slide-content p a { color: #b6483d; text-decoration: none; position: relative; } .intro .slide .slide-content p a:hover::after { width: 180px; } .intro .slide .slide-content p a::after { content: ""; width: 0; height: 1px; background: #b6483d; display: block; position: absolute; bottom: -3px; left: 0; transition: all 0.5s; } .intro .slide .slide-content ul li { display: inline-block; } .intro .slide .slide-content ul li p { position: relative; } .intro .slide .slide-content ul li p::after { content: ""; width: 8px; height: 8px; background: #fff; display: inline-block; margin: 0 20px; border-radius: 50%; } .intro .slide .slide-content ul li:last-of-type p::after { display: none; } .intro .slide .slide-content button { width: 120px; height: 120px; line-height: 120px; border: none; color: #fff; border-radius: 50%; text-align: center; background: #CC584C; margin-top: 30px; border: 2px solid transparent; transition: all 0.5; cursor: pointer; font-size: 18px; font-family: "Raleway", sans-serif; transition: all 0.5s; } .intro .slide .slide-content button:hover { background: none; border: 2px solid #CC584C; color: #b6483d; } @-webkit-keyframes bar { 0% { width: 0; } 100% { width: 100%; } } @keyframes bar { 0% { width: 0; } 100% { width: 100%; } } @media (max-width: 991px) { h1 { font-size: 50px !important; } h2 { font-size: 45px !important; } p { font-size: 22px !important; } p a:hover::after { width: 160px !important; } } @media (max-width: 768px) { .slide-c-child { display: block !important; } p::after { display: none !important; } button.replay { width: 80px !important; height: 80px !important; line-height: 80px !important; font-size: 14px !important; } a:hover::after { width: 140px !important; } } @media (max-width: 480px) { h1 { font-size: 40px !important; } h2 { font-size: 33px !important; } p { font-size: 18px !important; } p a:hover::after { width: 130px !important; } } |
Final step: create a file named “function.js”
function.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
$(document).ready(function () { 'use strict'; var slide = $('.slide'), slideAelements = $('.slide-a-child'), slideBelements = $('.slide-b-child'), slideCelements = $('.slide-c-child'), slideDelements = $('.slide-d-child'), replay = $('button.replay'); slide.each(function (i) { if (i < 3) { setTimeout(function () { slide.eq(i).fadeOut(); }, 5000 * (i + 1)); } }); function animateSlideA() { slideAelements.each(function (i) { setTimeout(function () { slideAelements.eq(i).addClass('is-visible'); }, 300 * (i + 1)); }); } function animateSlideB() { slideBelements.each(function (i) { setTimeout(function () { slideBelements.eq(i).addClass('is-visible'); }, 300 * (i + 1)); }); } function animateSlideC() { slideCelements.each(function (i) { setTimeout(function () { slideCelements.eq(i).addClass('is-visible'); }, 150 * (i + 1)); }); } function animateSlideD() { slideDelements.each(function (i) { setTimeout(function () { slideDelements.eq(i).addClass('is-visible'); }, 300 * (i + 1)); }); } animateSlideA(); setTimeout(function () { animateSlideB(); }, 5000); setTimeout(function () { animateSlideC(); }, 10000); setTimeout(function () { animateSlideD(); }, 15000); replay.on('click', function () { location.reload(true); }); }); |
Note: Create files with same names given here, otherwise if you want to change then also change in HTML link src.
You can modify as you want. Now time for check your creativity for this banner text animated intro. This is for Not for CMS or WEB 2.0, this for manually created website. In CMS like WordPress, you can use plugins for this.
I hope this source code, it will helpful for you. You can increase our morale by sharing. If you have any questions or want to say something, then you can comment below. Thanks for Visiting.
hi!,I like your writing so much! proportion we communicate more approximately your
article on AOL? I require an expert in this area to
resolve my problem. Maybe that’s you! Having a look ahead to see you.
what is your problem?
Hi my friend! I wish to say that this article is amazing, great
written and come with almost all significant infos. I would like to peer extra posts like this .
thank you, i post very day
God bless u for this