Jump to content

  • Animated Hover Scroll

       (0 reviews)

    So, I figured that I would share this here, since it is a pretty nifty little thing that I love.

     

    It is a simple DOHTML, animated scroll of the medieval style. When you hover, it drops down to reveal whatever you put within. The base hover code is not mine; I found it years ago and forgot where exactly it came from. The tabbing within the code and the scroll images are mine. You may edit it to your heart's content! No need to credit, but a comment showing me where you use it would be cool! I'd love to see how you incorporate it into a roleplay.

     

    This would be perfect for character applications, post templates, or any sort of character communication!

    Actual Template Not Responsive


    Fluffly Catbutt


    Player Name:
    AIM:
    Yahoo:

    • Age: 20
    • Race:
    • Gender:
    • Alignment:
    • Home location:
    • Current Location:
    • Leaves: 500
    • Alliance:



    Stats
    • Strength:
    • Dexterity:
    • Constitution:
    • intelligence:
    • Charisma:
    Health: 100% Stamina: 100% Mana: 100%
    • Level 1 Skills

      • ---
    • Level 2 Skills

      • ---
    • Level 3 Skills

      • ---
    • Level 4 Skills

      • ---
    • Level 5 Skills

      • ---
    Shiney Diamond Sword!
    bibbidydodab

    Insert Personal Quote Here!

    Template code

    <link href='http://fonts.googleapis.com/css?family=IM+Fell+English:400italic|IM+Fell+DW+Pica:400italic' rel='stylesheet' type='text/css'>
<style type="text/css">
.scrollshell {
width: 472px;
margin: auto auto;
}
.scrolltop {
position: relative;
z-index: 100;
}

.scrollbot {
position: relative;
z-index: 101;
}

.scrollmiddle {
background-image:url("http://i986.photobucket.com/albums/ae347/blue-moon-stock/scrollmiddle_zpsecb97719.png");
background-repeat: repeat-y;
height: 0px;
padding-left: 60px;
padding-right: 60px;
overflow: hidden;
position: relative;
z-index: 99;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
-ms-transition: all 1.5s ease;
transition: all 1.5s ease;
}

.scrollshell:hover .scrollmiddle {
height: 500px;
overflow: auto;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
-ms-transition: all 1.5s ease;
transition: all 1.5s ease;
}

.titletext {
font-family: IM Fell English;
font-size: 21px;
color: #0F0D00;
line-height: 20px;
text-align: center;
margin-top: 10px;
}

.writetext {
font-family: IM Fell English;
font-size: 15px;
color: #0F0D00;
line-height: 15px;
text-align: justify;
}

.footertext {
font-family: IM Fell DW Pica;
font-size: 16px;
color: #0F0D00;
line-height: 20px;
text-align: right;
</style>
<html>
<div class="scrollshell">
<div class="scrolltop"><img src="http://i986.photobucket.com/albums/ae347/blue-moon-stock/scrolltop_zps5fb555d5.png"/></div><div class="scrollmiddle">
<div class="titletext">

<img src = "http://i986.photobucket.com/albums/ae347/blue-moon-stock/bastettavicboxkingzoidlord_zps863e8202.png">
<br>
Fluffly Catbutt
</div>
<br><br>
<div class="writetext">

<style type="text/css">

.tabs {
position: relative;   
min-height:545px; /* This part sucks */
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #deb887; 
padding: 10px; 
border: 1px solid #ccc; 
margin-left: -1px; 
position: relative;
left: 1px; 
}
.tab [type=radio] {
display: none;   
}
.content {
position: absolute;
top: 28px;
left: 0;
background: burlywood;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc; 
}
[type=radio]:checked ~ label {
background: burlywood;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
</style>

<div class="tabs">
  
 <div class="tab">
     <input type="radio" id="tab-1" name="tab-group-1" checked>
     <label for="tab-1">Basic Info</label>
     
     <div class="content">
Player Name:<br>
AIM:<br>
Yahoo:<br>
<br>
        <ul>
<li><b>Age:</b> 20</li> 
<li><b>Race:</b></li>
<li><b>Gender:</b></li>
<li><b>Alignment:</b></li>
<li><b>Home location:</b> </li>
<li><b>Current Location:</b></li>
<li><b>Leaves:</b> 500</li>
<li><b>Alliance:</b></li>
</ul>
<br>
<br>
<br>
<b> Stats</b>
        <ul>
<li><b>Strength:</b></li>
<li><b>Dexterity:</b></li>
<li><b>Constitution:</b></li>
<li><b>intelligence:</b></li>
<li><b>Charisma:</b></li>
</ul>
<b>Health:</b> 100%
<b>Stamina:</b> 100%
<b>Mana:</b> 100%
     </div> 
 </div>
 
 <div class="tab">
     <input type="radio" id="tab-2" name="tab-group-1">
     <label for="tab-2">Skills</label>
     
     <div class="content">
     <ul>
<li>Level 1 Skills</li>
<br>
---
<br>
<li>Level 2 Skills</li>
<br>
---
<br>
<li>Level 3 Skills</li>
<br>
---
<br>
<li>Level 4 Skills</li>
<br>
---
<br>
<li>Level 5 Skills</li>
<br>
---
<br>
     </div> 
 </div>
  
  <div class="tab">
     <input type="radio" id="tab-3" name="tab-group-1">
     <label for="tab-3">Equip/ inventory</label>
   
     <div class="content">
         Shiney Diamond Sword!
     </div> 
 </div>
<div class="tab">
     <input type="radio" id="tab-4" name="tab-group-1">
     <label for="tab-4">Property</label>
     
     <div class="content">
     bibbidydodab
     </div> 
 </div>
  
</div>
</div>
<br>
<div class="footertext">
Insert Personal Quote Here!
</div>
</div><div class="scrollbot">
<img src="http://i986.photobucket.com/albums/ae347/blue-moon-stock/scrollbottom_zps256c83aa.png"/>
</div>
</div>
    Brocade

    By Brocade (edited)

    Edited by Morrigan

    Go to codes Post Templates

    User Feedback

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept