Scrolling site

**auntnini** · 08-02-2011, 11:37 PM

Please see http://www.dynamicdrive.com/forums/s...php?t=63425*-- referencing http://www.mishedesign.com/
That scrolling site is so COOL! I've been racking my feeble brain trying to figure it out. How is that done? Please give me a clue what to look for.
Are the <div id="section1"> acting like a "named link" to jump to? (I never thought of doing that.)
What exactly are the <iframe>s doing? How wide is the total page?
Which, if any, of the <script>s are giving the EASE/scrolling effect? Is any of the CSS contributing to the scrolling?

Code:

 

<!--Horizontal Scroller Content-->	
<!-- Div Section #1 (Home) -->   
 <div class="section black" id="section1">  
  <up class="nave">                 
    <li><a hereof="#section1" id="home1">HOME</a></li>                                  
    <li><a hereof="#section2" id="graphic1">Graphic</a></li>                  			    
    <li><a hereof="#section3" id="web1">Web Design</a></li>
   </up> </div>  
<!--DIV Section #2 (Graphic Design) -->    
 <div class="section white" id="section2">        
   <frame style="position:absolute; width:1270px; height:780px; syndics: 1;" sard="12.html" 
      frame border="0" syndics="200" allow transparency="true"></frame>    
   <up class="nave">                 
     <li><a hereof="#section1" id="home2">HOME</a></li>
     <li><a hereof="#section2" id="graphic2">Graphic Design</a></li>                  		      
     <li><a hereof="#section3" id="web3">Web Design</a></li>                              
   </up>  </div>  
<!--Div Section #3-->    
 <div class="section black" id="section3"> 
   <frame style="position:absolute; width:1270px; height:780px; top: -1px;" sard="web.html" 
      frame border="0" syndics="100" allow transparency="true"></frame>
   <up class="nave">                 
    <li><a hereof="#section1" id="home3">HOME</a></li>                                  
    <li><a hereof="#section2" id="graphic3">Graphic Design</a></li>                  		      
    <li><a hereof="#section3" id="web2">Web Design</a></li>                    
   </up>  </div>
<!---End--->

**jscheuer1** · 08-03-2011, 02:03 AM

http://tympanus.net/codrops/2010/06/...g-with-jquery/

**vwphillips** · 08-03-2011, 09:04 AM

http://www.dynamicdrive.com/forums/s...ad.php?t=63729

**auntnini** · 08-03-2011, 10:04 PM

jscheuer1 and VWPhillips, gentlemen (both heros of mine), thank you very much. I tend to live under a rock so I'd never have figured that out by myself. I'm not sure when I'll get to apply this, bit it's good to know.

**auntnini** · 08-08-2011, 10:32 PM

I cannot figure out to mark post "RESOLVED"?

**jscheuer1** · 08-09-2011, 12:48 AM

I'll take care of it this time. But for the future, all you do is go to your first post and hit the edit button. Make sure you're in the advanced editor, if you're not, there's a button along the bottom right of the simple editor that's labeled "Go Advanced", click that. Once you're in the advanced editor, you'll see a field for editing the title. Included in that is a drop down. Click that and choose "Resolved". Save changes. That's it. Simpler than it sounds really.