Choose from our various pricing plans. There is a package for everyone!


Tutorial: How to create animated advertising banners

View previous topic View next topic Go down

Tutorial Tutorial: How to create animated advertising banners

Post by Th1nK on Fri May 03, 2013 7:29 am

Hello,
Today I will show you how to create nice animated banners.
DEMO
I will give you the full HTML code (including Javascript,CSS and HTML).
OK, let's start working:
(1)Create new HTML page with:
Name: Advertising (or another name)
Do you wish to use your forum header and footer ? : NO
Use this page as homepage ?: NO

(2)Here is the full HTML code (it's table, not HTML page):

Code:
<TABLE BORDER="0">
 <TR>
 <TD WIDTH="30%" VALIGN="TOP">
  <meta charset='UTF-8'>
 <title>Slideup Boxes</title>
 <link rel='stylesheet' href='css/style.css'>
 
<style>
 .slide-up-boxes a {
display: block;
height: 130px;
margin: 0 0 20px 0;
background: rgba(215, 215, 215, 0.5);
border: 1px solid #ccc;
height: 65px;
overflow: hidden;
}
 
.slide-up-boxes h5 {
color: #333;
text-align: center;
 height: 65px;
font: italic 18px/65px Georgia, Serif;    /* Vertically center text by making line height equal to height */
 opacity: 1;
 -webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
 }
 
.slide-up-boxes a:hover h5 {
margin-top: -65px;
opacity: 0;
}
 
.slide-up-boxes div {
position: relative;
color: white;
font: 12px/15px Georgia, Serif;
 height: 45px;
padding: 10px;
opacity: 0;
-webkit-transform: rotate(6deg);
-webkit-transition: all 0.4s linear;
-moz-transform: rotate(6deg);
-moz-transition: all 0.4s linear;
-o-transform: rotate(6deg);
-o-transition: all 0.4s linear;
}
 .slide-up-boxes a:hover div {
opacity: 1;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
}
 .slide-up-boxes a:nth-child(1) div { background: #c73b1b url(http://icons2.iconarchive.com/icons/iconshock/real-vista-web-design/48/Banner-design-icon.png) 17px 17px no-repeat; padding-left: 120px; }
 .slide-up-boxes a:nth-child(2) div { background: #367db2 url(http://icons2.iconarchive.com/icons/iconshock/real-vista-web-design/48/Banner-design-icon.png) 21px 10px no-repeat; padding-left: 90px; }
 .slide-up-boxes a:nth-child(3) div { background: #393838 url(http://icons2.iconarchive.com/icons/iconshock/real-vista-web-design/48/Banner-design-icon.png) 14px 16px no-repeat; padding-left: 133px; }
.slide-up-boxes a:nth-child(4) div { background: #B0C920 url(http://icons2.iconarchive.com/icons/iconshock/real-vista-web-design/48/Banner-design-icon.png) 17px 17px no-repeat; padding-left: 120px; }
 </style>
</head>

<body>

 <div id="page-wrap">
 
<h1>Advertise:</h1>
 

<section class="slide-up-boxes">

 <a href="http://wufoo.com">
 <h5>Advertise</h5>
 <div>Your text here!Your text here!Your text here!Your text here!Your text here!Your text here!</div>
</a>
 
<a href="http://digwp.com">
 <h5>Advertise</h5>
 <div>Your text here!Your text here!Your text here!Your text here!Your text here!Your text here</div>
</a>
 
<a href="http://quotesondesign.com">
 <h5>Advertise</h5>
 <div>Your text here!Your text here!Your text here!Your text here!Your text here!Your text here</div>
</a>
<a href="http://wufoo.com">
 <h5>Advertise</h5>
 <div>Your text here!Your text here!Your text here!Your text here!Your text here!Your text here!</div>
</a>

 </section>
 
</div>
<style>
/*
 CSS-Tricks Example
 by Chris Coyier
 http://css-tricks.com
*/

* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; }

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

#page-wrap { width: 370px; margin: 60px auto; }

h1 { font: 32px Helvetica, Arial, Sans-Serif; margin: 0 0 20px 0; }
p { margin: 0 0 20px 0; }
a { text-decoration: none; }
</style> <BR>
 </TD>
 <TD WIDTH="5%"></TD>
 <TD WIDTH="30%" VALIGN="TOP">
 <meta charset='UTF-8'>
 <title>Slideup Boxes</title>
 <link rel='stylesheet' href='css/style.css'>
 
<style>
 .slide-up-boxes a {
display: block;
height: 130px;
margin: 0 0 20px 0;
background: rgba(215, 215, 215, 0.5);
border: 1px solid #ccc;
height: 65px;
overflow: hidden;
}
 
.slide-up-boxes h5 {
color: #333;
text-align: center;
 height: 65px;
font: italic 18px/65px Georgia, Serif;    /* Vertically center text by making line height equal to height */
 opacity: 1;
 -webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
 }
 
.slide-up-boxes a:hover h5 {
margin-top: -65px;
opacity: 0;
}
 
.slide-up-boxes div {
position: relative;
color: white;
font: 12px/15px Georgia, Serif;
 height: 45px;
padding: 10px;
opacity: 0;
-webkit-transform: rotate(6deg);
-webkit-transition: all 0.4s linear;
-moz-transform: rotate(6deg);
-moz-transition: all 0.4s linear;
-o-transform: rotate(6deg);
-o-transition: all 0.4s linear;
}
 .slide-up-boxes a:hover div {
opacity: 1;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
}
 .slide-up-boxes a:nth-child(1) div { background: #c73b1b url(http://icons2.iconarchive.com/icons/iconshock/real-vista-web-design/48/Banner-design-icon.png) 17px 17px no-repeat; padding-left: 120px; }
 .slide-up-boxes a:nth-child(2) div { background: #367db2 url(http://icons2.iconarchive.com/icons/iconshock/real-vista-web-design/48/Banner-design-icon.png) 21px 10px no-repeat; padding-left: 90px; }
 .slide-up-boxes a:nth-child(3) div { background: #393838 url(http://icons2.iconarchive.com/icons/iconshock/real-vista-web-design/48/Banner-design-icon.png) 14px 16px no-repeat; padding-left: 133px; }
.slide-up-boxes a:nth-child(4) div { background: #B0C920 url(http://icons2.iconarchive.com/icons/iconshock/real-vista-web-design/48/Banner-design-icon.png) 17px 17px no-repeat; padding-left: 120px; }
 </style>
</head>

<body>

 <div id="page-wrap">
 
<h1>Advertise:</h1>
 

<section class="slide-up-boxes">

 <a href="http://wufoo.com">
 <h5>Advertise</h5>
 <div>Your text here!Your text here!Your text here!Your text here!Your text here!Your text here!</div>
</a>
 
<a href="http://digwp.com">
 <h5>Advertise</h5>
 <div>Your text here!Your text here!Your text here!Your text here!Your text here!Your text here</div>
</a>
 
<a href="http://quotesondesign.com">
 <h5>Advertise</h5>
 <div>Your text here!Your text here!Your text here!Your text here!Your text here!Your text here</div>
</a>
<a href="http://wufoo.com">
 <h5>Advertise</h5>
 <div>Your text here!Your text here!Your text here!Your text here!Your text here!Your text here!</div>
</a>

 </section>
 
</div>
<style>
/*
 CSS-Tricks Example
 by Chris Coyier
 http://css-tricks.com
*/

* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; }

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

#page-wrap { width: 370px; margin: 60px auto; }

h1 { font: 32px Helvetica, Arial, Sans-Serif; margin: 0 0 20px 0; }
p { margin: 0 0 20px 0; }
a { text-decoration: none; }
</style> <BR>
 </TD>
 <TD WIDTH="5%"></TD>
 <TD WIDTH="30%" VALIGN="TOP">
  <meta charset='UTF-8'>
 <title>Slideup Boxes</title>
 <link rel='stylesheet' href='css/style.css'>
 
<style>
 .slide-up-boxes a {
display: block;
height: 130px;
margin: 0 0 20px 0;
background: rgba(215, 215, 215, 0.5);
border: 1px solid #ccc;
height: 65px;
overflow: hidden;
}
 
.slide-up-boxes h5 {
color: #333;
text-align: center;
 height: 65px;
font: italic 18px/65px Georgia, Serif;    /* Vertically center text by making line height equal to height */
 opacity: 1;
 -webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
 }
 
.slide-up-boxes a:hover h5 {
margin-top: -65px;
opacity: 0;
}
 
.slide-up-boxes div {
position: relative;
color: white;
font: 12px/15px Georgia, Serif;
 height: 45px;
padding: 10px;
opacity: 0;
-webkit-transform: rotate(6deg);
-webkit-transition: all 0.4s linear;
-moz-transform: rotate(6deg);
-moz-transition: all 0.4s linear;
-o-transform: rotate(6deg);
-o-transition: all 0.4s linear;
}
 .slide-up-boxes a:hover div {
opacity: 1;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
}
 .slide-up-boxes a:nth-child(1) div { background: #c73b1b url(http://icons2.iconarchive.com/icons/iconshock/real-vista-web-design/48/Banner-design-icon.png) 17px 17px no-repeat; padding-left: 120px; }
 .slide-up-boxes a:nth-child(2) div { background: #367db2 url(http://icons2.iconarchive.com/icons/iconshock/real-vista-web-design/48/Banner-design-icon.png) 21px 10px no-repeat; padding-left: 90px; }
 .slide-up-boxes a:nth-child(3) div { background: #393838 url(http://icons2.iconarchive.com/icons/iconshock/real-vista-web-design/48/Banner-design-icon.png) 14px 16px no-repeat; padding-left: 133px; }
.slide-up-boxes a:nth-child(4) div { background: #B0C920 url(http://icons2.iconarchive.com/icons/iconshock/real-vista-web-design/48/Banner-design-icon.png) 17px 17px no-repeat; padding-left: 120px; }
 </style>
</head>

<body>

 <div id="page-wrap">
 
<h1>Advertise:</h1>
 

<section class="slide-up-boxes">

 <a href="http://wufoo.com">
 <h5>Advertise</h5>
 <div>Your text here!Your text here!Your text here!Your text here!Your text here!Your text here!</div>
</a>
 
<a href="http://digwp.com">
 <h5>Advertise</h5>
 <div>Your text here!Your text here!Your text here!Your text here!Your text here!Your text here</div>
</a>
 
<a href="http://quotesondesign.com">
 <h5>Advertise</h5>
 <div>Your text here!Your text here!Your text here!Your text here!Your text here!Your text here</div>
</a>
<a href="http://wufoo.com">
 <h5>Advertise</h5>
 <div>Your text here!Your text here!Your text here!Your text here!Your text here!Your text here!</div>
</a>

 </section>
 
</div>
<style>
/*
 CSS-Tricks Example
 by Chris Coyier
 http://css-tricks.com
*/

* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; }

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

#page-wrap { width: 370px; margin: 60px auto; }

h1 { font: 32px Helvetica, Arial, Sans-Serif; margin: 0 0 20px 0; }
p { margin: 0 0 20px 0; }
a { text-decoration: none; }
</style> <BR>
 </TD>
 </TR>
</TABLE>
(3)How to change the icon, the color and the text?
For every box you will se this code:


where:

You can change this image:

in this code (in the CSS part of the table):
That's all. If you have questions please ask here Smile.
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: Tutorial: How to create animated advertising banners

Post by Sir Chivas on Fri May 03, 2013 2:40 pm

Very nice, I might be using this. Very Happy


Must Follow the Rules at all times!
No Support via PM
avatar
Sir Chivas
Premium Member


Age : 24
Posts : 55
Join date : 2012-08-04
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Tutorial: How to create animated advertising banners

Post by RSguideMaker on Tue May 07, 2013 9:15 pm

Very nice tutorial, and I will possibly be using this on my website.



Please do not request help via PM! Post on the forums where it can help everyone.
avatar
RSguideMaker
Support Moderator
Support Moderator

Age : 18
Posts : 421
Join date : 2012-05-23
Reputation : 9

View user profile http://euanfitzpatrick.co.nf/

Back to top Go down

Tutorial Re: Tutorial: How to create animated advertising banners

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum