Duda con efecto al ingresar a la web
Publicado por Luis (1 intervención) el 10/09/2016 03:46:49
Hola buenas noches. Hace poco tiempo que estoy intentando algo con php y jquery y estoy trabado con esto.
Tengo mi index.html , con un par de divs y un script jquery que le da un efecto de transicion y lo transforma en modal, esta pagina es solo un splash o presentación, es básicamente un div que contiene una imagen de 1000x400 pixeles con la foto de una oficina, y al clickear llama a la verdadera Home page que es index2.php.
Actualmente " ... casi ... " hace lo que necesito ... index.html se carga en modal y si presiono un boton "close" redirecciono a mi página principal, el tema es que ese cambio necesito sea fluído y gradual.
Quisiera que se cargue el index.html con el efecto que ya tiene , y que al clickear en close , "index.html se transparente gradualmente a la vez que mi pagina principal , por ej, index2.php , esta detras y aparece con estilo fadein. Como si index.html se fundiera en index2.php .
Copio el index.html :
Alguna ayuda para lograr lo que necesito ? Gracias !!!
Tengo mi index.html , con un par de divs y un script jquery que le da un efecto de transicion y lo transforma en modal, esta pagina es solo un splash o presentación, es básicamente un div que contiene una imagen de 1000x400 pixeles con la foto de una oficina, y al clickear llama a la verdadera Home page que es index2.php.
Actualmente " ... casi ... " hace lo que necesito ... index.html se carga en modal y si presiono un boton "close" redirecciono a mi página principal, el tema es que ese cambio necesito sea fluído y gradual.
Quisiera que se cargue el index.html con el efecto que ya tiene , y que al clickear en close , "index.html se transparente gradualmente a la vez que mi pagina principal , por ej, index2.php , esta detras y aparece con estilo fadein. Como si index.html se fundiera en index2.php .
Copio el index.html :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<html>
<head>
<meta charset="UTF-8">
<link href="css/2.css" rel="stylesheet" type="text/css" />
<script src="jquery-3.1.0.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var id = '#caja_portada .window';
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask, .window').hide();
window.location.href = "http://localhost/Tienda100/index2.php";
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
window.location.href = "http://localhost/Tienda100/index2.php";
});
});
</script>
</head>
<div id="caja_portada">
<div id="dialog" class="window">
<a href="#" class="close"><img src="IMAGENES/close.png" id="boton_close" alt="Imagen no disponible"></img></a>
</div>
<div id="mask"></div>
</div>
</html>
Alguna ayuda para lograr lo que necesito ? Gracias !!!
Valora esta pregunta
0