How To Make A Fading Banner With Fading Text

UPDATED: JULY 21, 2016 – ARTICLE: HOW TO MAKE A FADING BANNER WITH FADING TEXT

Category: Web Design & Development

How to make a fading banner with fading text is easy with our HTML code. See the demo above, the image will appear first on the right followed by the text for that image which will fade in on the left. When you design your image leave the left side blank so it has white space, align the image you want to use on the right side. The size of the image that I have used is 948px x 403px if you decide to have images that are a different size you must then go to the code and change the width and height to your image size. When you copy the below code to your site it will work with our images and text. Works great if you looking for home page sliders.

Setting Up Your Image

Open paint or or what ever image editing software that you use and make a blank image with these sizes 948px x 403px paste your image on the right leave the left side blank for your fade in fade out text. Next upload your images to your site, change the URL of the image in the code to yours here (src=”http://www.linkbuildingservices4sites.com/resources/fading-banner-img1.jpg” alt) if you have changed the image size remember to also change the size in the fading banner code now publish your site and your images will be displayed.

Setting Up Your Fading Text Color And Size

The fading text size and color can easily be changed using the CSS part of the code. Look for the below codes.

.b1 {color:#0f0f0f;font-size:50px;line-height:1.2em;display:block;letter-spacing:-3px}
.b2 {color:#00a9ff;font-size:80px;line-height:1.2em;display:block;text-transform:uppercase;letter-spacing:-4px;margin:-12px 0 13px -5px}
*+html .b2 {margin:-12px 0 5px -5px}
.b3 {color:#0f0f0f;font-size:17px;line-height:1.2em;display:block}

.b1 is for the first text heading in black.
.b2 is for the second text heading in blue.
.b3 is for the third text in black.

Change the colour here – color:#00a9ff; – get the hex code for the colour you want.
Change text size here – font-size:50px;line-height:1.2em;

How to change whats written in the fading text

Text is changed in the HTML part of the code. Each image has its own text to go with that image, look for the below part of the HTML code and remove what is written in the code and replace with your text.

<strong class=”b1″>we love</strong>
<strong class=”b2″>THIS SITE</strong>
<strong class=”b3″>How To Create a Website<br />has some of the best HTML codes<br />like this free slide show for your site.</strong>

The fading banner with fading text can be used for the header of your page and will get your visitors attention, if you would like to have a link in the text just add the link in and it will work.

Speed is important when you make a website and the fading banner with fading text has images in it, before you upload your images please use our image tools to improve your pages loading time, it takes a couple of minutes to optimise the images but its well worth it.

Fading Banner With Fading Text Code

If you want to know how to make a fading banner with fading text on your site follow these steps:

• Step 1. Copy the fading banner with fading text HTML code below
• Step 2. Paste the HTML code on your site
• Step 3. Replace the images with your own
• Step 4. Remove our text and place your own text that you want displayed
• Step 5. Save and publish your site

Copy the fading banner with fading text code below

<style type="text/css">
.slider-wrapper {overflow:hidden;width:984px;position:absolute;top:0px;left:0;background:#fff;border-radius:0 18px 0 0;-moz-border-radius:0 18px 0 0;-webkit-border-radius:0 18px 0 0}
.slider {height:403px;width:954px;margin:10px auto}
.items {display:none}
.pagination {position:absolute;top:0;z-index:999}
.banner {width:400px;height:205px;position:absolute;top:92px;left:98px}
.prev {display:block;width:22px;height:37px;text-indent:-5000px;position:absolute;left:25px;top:183px;z-index:99;background:url(http://www.linkbuildingservices4sites.com/resources/fading-banner-control.png) left top no-repeat}
.prev:hover {background-position:left bottom}
.next {display:block;width:22px;height:37px;text-indent:-5000px;position:absolute;right:22px;top:183px;z-index:99;background:url(http://www.linkbuildingservices4sites.com/resources/fading-banner-control.png) right top no-repeat}
.next:hover {background-position:right bottom}
 /* Adjust fading text size and colour below*/
.b1 {color:#0f0f0f;font-size:50px;line-height:1.2em;display:block;letter-spacing:-3px}
.b2 {color:#00a9ff;font-size:80px;line-height:1.2em;display:block;text-transform:uppercase;letter-spacing:-4px;margin:-12px 0 13px -5px}
*+html .b2 {margin:-12px 0 5px -5px}
.b3 {color:#0f0f0f;font-size:17px;line-height:1.2em;display:block}
/* Mobile devices */
@media (max-width: 359px) {
.slider-wrapper {overflow:hidden;width:300px;position:absolute;top:0px;left:0;background:#fff;border-radius:0 18px 0 0;-moz-border-radius:0 18px 0 0;-webkit-border-radius:0 18px 0 0}
.slider {height:200px;width:300px;margin:10px auto}
.items {display:none}
.pagination {position:absolute;top:0;z-index:999}
.banner {width:300px;height:205px;position:absolute;top:10px;left:10px}
.prev {display:none}
.prev:hover {background-position:left bottom}
.next {display:none}
.next:hover {background-position:right bottom}
 /* Adjust fading text size and colour below*/
.b1 {color:#0f0f0f;font-size:30px;line-height: 34px;display:block;letter-spacing:-3px}
.b2 {color:#00a9ff;font-size:40px;line-height: 44px;display:block;text-transform:uppercase;letter-spacing:-4px;margin:-12px 0 13px -5px}
*+html .b2 {margin:-12px 0 5px -5px}
.b3 {color:#0f0f0f;font-size:10px;line-height:12px;display:block}
}
div#how-to-create-a-website-slider  {
left:20;
position:absolute;
top:0px;
margin-left: 10px;  
}  
</style>

<script type="text/javascript" src="http://www.linkbuildingservices4sites.com/resources/fading-banner.js"></script>

<div id="how-to-create-a-website-slider">
     <div class="slider">
             <ul class="items">
               <li><img src="http://www.linkbuildingservices4sites.com/resources/fading-banner-img1.jpg" alt="Fading Banner">
                <strong class="banner">
                  <strong class="b1">we love</strong>
                  <strong class="b2">THIS SITE</strong>
                  <strong class="b3">How To Create a Website<br />has some of the best HTML codes<br />like this free slide show for your site.</strong>
                </strong>
              </li>
              <li><img src="http://www.linkbuildingservices4sites.com/resources/fading-banner-img2.jpg" alt="Fading Banner">
                <strong class="banner">
                  <strong class="b1">learn to</strong>
                  <strong class="b2">DESIGN</strong>
                  <strong class="b3">Learn how to design your site<br />with our easy to follow tutorials<br />css codes and lots more<br / >from how to create a website</strong>
                </strong>
              </li>
              <li><img src="http://www.linkbuildingservices4sites.com/resources/fading-banner-img3.jpg" alt="Fading Banner with Fading Text">
                <strong class="banner">
                  <strong class="b1">lots of</strong>
                  <strong class="b2">TUTORIALS</strong>
                  <strong class="b3">Lots of web design tutorial<br />to help build your site<br />from how to create a website!</strong>
                      </strong>
                  </li>
                </ul>
              <a class="prev" href="#">prev</a>
              <a class="next" href="#">prev</a>
            </div>
           </div>
      
<script type="text/javascript">
    $(function(){
      $('.slider')._TMS({
        prevBu:'.prev',
        nextBu:'.next',
        playBu:'.play',
        duration:800,
        easing:'easeOutQuad',
        preset:'simpleFade',
        pagination:false,
        slideshow:3000,
        numStatus:false,
        pauseOnHover:true,
        banners:true,
        waitBannerAnimation:false,
        bannerShow:function(banner){
          banner
            .hide()
            .fadeIn(500)
        },
        bannerHide:function(banner){
          banner
            .show()
            .fadeOut(500)
        }
      });
    })
  </script>

 
Tags: how to make a fading banner with fading text, fading banner with fading text, fading banner, fading text, home page sliders
ARTICLE: HOW TO MAKE A FADING BANNER WITH FADING TEXT WAS FIRST PUBLISHED: DECEMBER 05, 2013

MORE HTML CODES