Apple sliding source code reveal
.jpg)
This Javascript source code can help people such as Website builder,editor,blogger and newbie to gain some knowledge how to put slide script like you see on your iPhone/iPod
Source Code:
<meta charset='UTF-8'>
<title>Your Title Name</title>
<link rel='stylesheet' href='css/style.css'>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
<link href='http://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'></script>
<script src='js/slidetounlock.js'></script>
<meta name="text:New Username" content="NEW USERNAME"/>
<meta name="color:Link" content="#000000"/>
<meta name="color:Hover" content="#7FFF00"/>
<meta name="if:Show Navigation" content="1"/>
<center><br><br><br><br><br>
<ha><b>I'VE MOVED!</b></ha><br><br><br>
slide to unlock my new url
</center>
<style type="text/css">
a:link, a:active, a:visited{
color: {color:Link};
text-decoration: none;
-webkit-transition: 0.3s ease-in;
}
a:hover {
color: {color:Hover};
-webkit-transition: 0.3s ease-in;
}
iframe#tumblr_controls{
top: 0px !important;
margin: 0 0 0 0;
right: 0px !important;
position: fixed !important;
opacity: 0;
}
ha{
font: 50pt 'Righteous', cursive; !important;
font-weight:normal;
line-height:20px;
margin:0px;
color: rgba(0,0,0,0.6);
text-shadow:1px 1px 2px rgba(255,255,255,0.1);
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;}
h5{
font: 20pt 'Righteous', cursive; !important;
font-weight:normal;
line-height:20px;
margin:0px;
color: rgba(0,0,0,0.6);
text-shadow:1px 1px 2px rgba(255,255,255,0.1);
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;}
</style>
</head><body>
<div id="page-wrap">
<div id="well">
<h2><strong id="slider"></strong><span>slide to unlock</span></h2>
</div>
</div>
<style type="text/css">
/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/
* { margin: 0; padding: 0; }
body {
font: 15px Georgia, serif;
background-image:url(http://static.tumblr.com/b8yqvki/2qGmal7sx/pattern9.jpg);
background-repeat: repeat;
background-attachment: fixed;
min-height: 350px;
}
#page-wrap { width: 720px; margin: 0 auto; padding-top: 50px; }
#well {
padding: 14px 20px 20px 20px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
background: -moz-linear-gradient(top, #010101, #181818);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818));
border: 2px solid #454545;
overflow: hidden;
-webkit-user-select: none;
}
h2 {
background: -moz-linear-gradient(left, #4d4d4d, 0.4, #4d4d4d, 0.5, white, 0.6, #4d4d4d, #4d4d4d);
background: -webkit-gradient(linear,left top,right top,color-stop(0, #4d4d4d),color-stop(0.4, #4d4d4d),color-stop(0.5, white),color-stop(0.6, #4d4d4d),color-stop(1, #4d4d4d));
-moz-background-clip: text;
-webkit-background-clip: text;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
-webkit-animation: slidetounlock 5s infinite;
font-size: 80px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
padding: 0;
width: 200%;
-webkit-text-size-adjust: none;
}
#slider {
background: url("http://static.tumblr.com/b8yqvki/VLHmclr68/arrow.png") no-repeat;
width: 146px;
height: 98px;
display: inline-block;
vertical-align: middle;
line-height: 1;
}
@-webkit-keyframes slidetounlock {
0% {
background-position: -720px 0;
}
100%{
background-position: 720px 0;
}
}
.fontcolor{
font-size: 50px;
color:#ffffff;
}
</style>
<script type="text/javascript">
$(function() {
$("#slider").draggable({
axis: 'x',
containment: 'parent',
drag: function(event, ui) {
if (ui.position.left > 550) {
window.location = "Your URL";
} else {
// Apparently Safari isn't allowing partial opacity on text with background clip? Not sure.
// $("h2 span").css("opacity", 100 - (ui.position.left / 5))
}
},
stop: function(event, ui) {
if (ui.position.left < 550) {
$(this).animate({
left: 0
})
}
}
});
});
</script>
<center> <br><br><br>
<u><a href="Your URL" title="{text:New Username}">click here if you are not redirect</a></u><br><br><br>
<h5>
<a href="http://videostreamservice.blogspot.com/" title="refresh">S</a>
<a href="http://videostreamservice.blogspot.com/" title="message">L</span></a>
<a href="http://videostreamservice.blogspot.com/" title="install">I<a>
<a href="http://videostreamservice.blogspot.com/" title="theme">D</a>
<a href="http://videostreamservice.blogspot.com/" title="credit">E</span></a>
<h5>
</center>
</body></html>
DONE
Don't forget to change the URL because it will cause changing for your site.
