...

View Full Version : Vertical Sliding effect like on Tumblr's Front Page



jackp
09-27-2011, 06:49 AM
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

vwphillips
09-27-2011, 03:44 PM
<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum