Segunda transición
Publicado por Alejandro (1 intervención) el 09/02/2015 15:06:13
Hola!
estoy intentando crear el siguiente efecto: lo primero es que me aparezca con una suave transición un cuadro (que lo he conseguido), a continuación que al pulsarlo se desplaze a la izquierda hasta que desaparezca de la pantalla ( que tambien he conseguido). Y lo último sería que al desaparecer de la pantalla, apareciera un nuevo div con una suave transición de 0 a 100% de opacidad. Este es el código:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>A ver si me saleeeeee</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script>
var p=0.01,t;
function mover(obj){
if(p>350){
clearTimeout(t);
return;
}
p+=-5;
obj.style.left=p+'px';
t=setTimeout( function(){ mover(obj) },1 );
}
var element = document.getElementById("Slideshow");
var duration = 3000; /* fade duration in millisecond */
var hidtime = 2000; /* time to stay hidden */
var showtime = 2000; /* time to stay visible */
function SetOpa(Opa) {
element.style.opacity = Opa;
element.style.MozOpacity = Opa;
element.style.KhtmlOpacity = Opa;
element.style.filter = 'alpha(opacity=' + (Opa * 100) + ');';
}
</script>
</head>
<body>
<div id="container" onclick="mover(this)">
<div id="Basement" style="width:90%;margin:auto;">
<h1 "FadeIn()"></h1>
<div style="width:100%; opacity: 0" id="Slideshow"; >
<div id="wrap">
<div id="container">esto es una prueba</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var element = document.getElementById("Slideshow");
var duration = 3000; /* fade duration in millisecond */
var hidtime = 2000; /* time to stay hidden */
var showtime = 2000; /* time to stay visible */
function SetOpa(Opa) {
element.style.opacity = Opa;
element.style.MozOpacity = Opa;
element.style.KhtmlOpacity = Opa;
element.style.filter = 'alpha(opacity=' + (Opa * 100) + ');';
}
window.onload = function FadeIn() {
for (i = 0; i <= 1; i += 0.001) {
setTimeout("SetOpa(" + i +")", i * duration);
}
setTimeout("fadeOut()", (duration + showtime));
}
</script>
</body>
</html>
Los dos primeros efectos los he conseguido, pero que me aparezca el div de cero a cien de opacidad, no. A ver si alguien es capaz de lograrlo.
Saludos!
Alejandro.
estoy intentando crear el siguiente efecto: lo primero es que me aparezca con una suave transición un cuadro (que lo he conseguido), a continuación que al pulsarlo se desplaze a la izquierda hasta que desaparezca de la pantalla ( que tambien he conseguido). Y lo último sería que al desaparecer de la pantalla, apareciera un nuevo div con una suave transición de 0 a 100% de opacidad. Este es el código:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>A ver si me saleeeeee</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script>
var p=0.01,t;
function mover(obj){
if(p>350){
clearTimeout(t);
return;
}
p+=-5;
obj.style.left=p+'px';
t=setTimeout( function(){ mover(obj) },1 );
}
var element = document.getElementById("Slideshow");
var duration = 3000; /* fade duration in millisecond */
var hidtime = 2000; /* time to stay hidden */
var showtime = 2000; /* time to stay visible */
function SetOpa(Opa) {
element.style.opacity = Opa;
element.style.MozOpacity = Opa;
element.style.KhtmlOpacity = Opa;
element.style.filter = 'alpha(opacity=' + (Opa * 100) + ');';
}
</script>
</head>
<body>
<div id="container" onclick="mover(this)">
<div id="Basement" style="width:90%;margin:auto;">
<h1 "FadeIn()"></h1>
<div style="width:100%; opacity: 0" id="Slideshow"; >
<div id="wrap">
<div id="container">esto es una prueba</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var element = document.getElementById("Slideshow");
var duration = 3000; /* fade duration in millisecond */
var hidtime = 2000; /* time to stay hidden */
var showtime = 2000; /* time to stay visible */
function SetOpa(Opa) {
element.style.opacity = Opa;
element.style.MozOpacity = Opa;
element.style.KhtmlOpacity = Opa;
element.style.filter = 'alpha(opacity=' + (Opa * 100) + ');';
}
window.onload = function FadeIn() {
for (i = 0; i <= 1; i += 0.001) {
setTimeout("SetOpa(" + i +")", i * duration);
}
setTimeout("fadeOut()", (duration + showtime));
}
</script>
</body>
</html>
Los dos primeros efectos los he conseguido, pero que me aparezca el div de cero a cien de opacidad, no. A ver si alguien es capaz de lograrlo.
Saludos!
Alejandro.
Valora esta pregunta
0