Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Vertical Sliding effect like on Tumblr's Front Page

    Hi,

    I am somewhat new to HTML, AJAX, and CSS.

    I'm wish to implement something similar to what Tumblr does on their front page where you click on the bottom footer bar, and the page horizontally shifts up keeping part of the original page (specifically, the email sign up) visible while exposing more content.

    I know the simplest is to have the entire content on the page and just "hide" and "show" the interested components "on click" of the bottom footer bar div-tag.

    But I like the sliding animation.

    Does YUI or JQuery provide the ability to do the animation? Or is this even a Javascript related functionality - ie should I look at HTML5 or CSS?

    Thanks
    Jack

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,516
    Thanks
    3
    Thanked 505 Times in 492 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <style type="text/css">
    <!--
    
    #slider {
      position:relative;overflow:hidden;visibility:hidden;width:100%;height:520px;
    }
    
    .slider {
      position:absolute;visibility:visible;left:-100px;top:0px;width:10000px;
    }
    
    .slider IMG{
      margin-Left:400px;
    }
    
    #sliderV {
      position:relative;overflow:hidden;width:200px;height:500px;border:solid red 1px;
    }
    
    .sliderV {
      position:absolute;visibility:visible;left:0px;top:-200px;height:200px;
    }
    
    .sliderV IMG{
      margin-Top:400px;width:200px;
    }
    -->
    </style></head>
    
    <body>
     <div id="slider" onmouseover="S1.Pause();" onmouseout="S1.Auto(500);" >
      <div class="slider" >
       <img src="https://secure.assets.tumblr.com/images/register_login/phones.png">
       <img src="https://secure.assets.tumblr.com/images/register_login/themes.png">
       <img src="https://secure.assets.tumblr.com/images/register_login/dashboard.png">
      </div>
     </div>
    
    <input type="button" name="" value="Goto 0" onmouseup="S1.SlideTo(0);" >
    <input type="button" name="" value="Goto 1" onmouseup="S1.SlideTo(1);" >
    <input type="button" name="" value="Goto 2" onmouseup="S1.SlideTo(2);" >
    
       onmouseover="S2.Pause();" onmouseout="S2.Auto(500);"
     <div id="sliderV" >
      <div class="sliderV" >
       <img src="https://secure.assets.tumblr.com/images/register_login/phones.png">
       <img src="https://secure.assets.tumblr.com/images/register_login/themes.png">
       <img src="https://secure.assets.tumblr.com/images/register_login/dashboard.png">
      </div>
     </div>
    
    <script type="text/javascript">
    <!--
    // Slider (27-September-2011) DRAFT
    // by Vic Phillips http://www.vicsjavascripts.org.uk/
    
    function zxcSlider(o){
     var oop=this,p=document.getElementById(o.ID),slide=p.getElementsByTagName('DIV')[0],imgs=slide.getElementsByTagName('IMG'),mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','offsetTop','offsetHeight']:['left','offsetLeft','offsetWidth'],ms=o.SlideDuration,srt=o.StartDelay,hold=o.HoldDelay;
     slide.appendChild(imgs[0].cloneNode(true));
     this.mde=mde;
     this.p=p;
     this.slide=slide;
     this.imgs=slide.getElementsByTagName('IMG');
     this.now=slide[mde[1]];
     this.ms=typeof(ms)=='number'&&ms>0?ms:1000;
     this.hold=typeof(hold)=='number'?hold:this.ms*2;
     this.cnt=0;
     if (typeof(srt)=='number'&&srt>0){
      this.Auto(srt);
     }
    }
    
    zxcSlider.prototype={
    
     SlideTo:function(nu,auto){
      var imgs=this.imgs,mde=this.mde,p=this.p,to;
      if (!imgs[nu]){
       nu=1;
       this.now=-imgs[0][mde[1]]+(p[mde[2]]-imgs[0][mde[2]])/2;
      }
      this.Pause();
      this.auto=auto==true;
      this.cnt=nu;
      to=-imgs[nu][mde[1]]+(this.p[mde[2]]-imgs[nu][mde[2]])/2;
      this.animate(mde[0],this.now,to,new Date(),1000);
     },
    
     Auto:function(ms){
      var oop=this;
      this.to=setTimeout(function(){ oop.run(); },ms||100);
     },
    
     Pause:function(ms){
      this.auto=false;
      clearTimeout(this.to);
     },
    
     run:function(){
      var oop=this,cnt=this.cnt;
      this.SlideTo(++cnt,true);
     },
    
     animate:function(mde,f,t,srt,mS){
      var oop=this,ms=new Date().getTime()-srt,now=Math.floor((t-f)*Math.sin(Math.PI/(2*mS)*ms)+f);
      if (isFinite(now)){
       this.now=now;
       this.slide.style[mde]=now+'px';
      }
      if (ms<mS){
       this.dly=setTimeout(function(){ oop.animate(mde,f,t,srt,mS); },10);
      }
      else {
       this.now=t;
       this.slide.style[mde]=t+'px';
       if (this.auto){
        this.to=setTimeout(function(){ oop.run(); },this.hold);
       }
      }
     }
    
    
    }
    
    
    S1=new zxcSlider({
     ID:'slider',         // the unique ID name of the parent node.                         (string)
     SlideDuration:1000,  //(optional) the slide duration in milli seconds.                 (number, default = 1000)
     HoldDuration:1000,   //(optional) the slide 'hold' duration in milli seconds.          (number, default = SlideDuration*2)
     StartDelay:1000      //(optional) the auto rotation 'start' duration in milli seconds. (number, default = no auto start)
    });
    
    
    S2=new zxcSlider({
     ID:'sliderV',        // the unique ID name of the parent node. (string)
     Mode:'Vertical',     //(optional) the mode of execution, 'Horizontal' or 'Vertical'.   (string, default = 1000)
     SlideDuration:1000,  //(optional) the slide duration in milli seconds.                 (number, default = 'Horizontal')
     HoldDuration:1000,   //(optional) the slide 'hold' duration in milli seconds.          (number, default = SlideDuration*2)
     StartDelay:1000      //(optional) the auto rotation 'start' duration in milli seconds. (number, default = no auto start)
    });
    
    
    
    
    //-->
    </script></body>
    
    </html>
    Last edited by vwphillips; 09-27-2011 at 04:21 PM. Reason: Added Vertical mode
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •