My problem is this:
I'm making an application that displays a series of elements. On the left is the browser with some buttons to access the corresponding content. Each time a button is pressed, the window changes, with the background, the text .. I would like that when a button is pressed and shows new content, the background will appear in a faded, white way to the corresponding image ... and not at once.
In the code is not the tests that I applied to try to do it. I did not get the desired effect, so I leave the structure.
PS: If there is a better way to change the different views with the buttons, do not hesitate to tell me.
* {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
min-height: 470px;
min-width: 300px;
}
body {
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
position: relative;
}
header {
display: block;
width: 100%;
position: relative;
}
.navegador {
width: 100%;
z-index: 99999;
height: 80px;
background-color: #091d3e;
background: linear-gradient(#091d3e, #091d3e);
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
#logo-SIADE {
width: 92px;
}
.pestanias li a {
padding-top: 0;
padding-bottom: 0;
text-transform: uppercase;
font-weight: 600;
line-height: 80px;
font-size: 14px;
color: white;
transition: all .5s ease;
}
.pestanias li a:focus {
background-color: inherit;
}
.pestanias li a:hover {
background-color: inherit;
text-shadow: 0px 0px 16px rgba(255, 255, 255, 1);
transition: all .5s ease;
}
#aplicacion {
height: calc(100% - 80px);
position: relative;
margin: 0;
padding: 0;
}
#elemIzq {
height: 100%;
margin: 0;
padding: 0;
}
#apartados {
margin: 0;
padding: 0;
list-style: none;
height: 100%;
}
#apartados li {
height: calc(100% / 3);
text-align: center;
border: 6px solid #ffffff;
}
#apartados :nth-child(2) {
border-top-width: 0px;
}
#apartados :nth-child(3) {
border-top-width: 0px;
}
.tituloAcceso {
height: 100%;
width: 100%;
text-decoration: none;
background-color: rgba(9, 29, 62, 0.67);
color: white;
letter-spacing: 1px;
font-size: 25px;
font-weight: 500;
text-transform: uppercase;
border-style: none;
transition: all .5s ease;
}
.seleccionado {
background-color: #091d3e;
}
.tituloAcceso:hover {
background-color: #091d3e;
transition: all .5s ease;
}
.oculto{
display: none;
transition: all .5s ease
}
#elementoVisor {
height: 100%;
border-top: 6px solid #ffffff;
border-right: 6px solid #ffffff;
border-bottom: 6px solid #ffffff;
background: url(../IMAGES/visor.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
#elementoD3 {
transition: all .5s ease;
height: 100%;
border-top: 6px solid #ffffff;
border-right: 6px solid #ffffff;
border-bottom: 6px solid #ffffff;
background-image: url(../IMAGES/d3.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
transition: all .5s ease;
}
#elementoMeteo {
height: 100%;
border-top: 6px solid #ffffff;
border-right: 6px solid #ffffff;
border-bottom: 6px solid #ffffff;
background-image: url(../IMAGES/meteo.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right;
transition: all .5s ease;
}
.contenidoDef {
width: 400px;
height: 250px;
padding: 30px;
background-color: #091d3e;
border: 6px solid #ffffff;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 10px 10px 59px -2px rgba(0,0,0,0.75);
transition: all .5s ease
}
.contenidoDef h3{
color: white;
text-align: center;
position: relative;
}
.contenidoDef p{
color: white;
text-align: center;
position: relative;
}
.botonAbrir{
padding: 10px;
width: 100px;
background-color: #091d3e;
border: 2px solid white;
border-radius: 8px;
color: white;
position:relative;
left: 50%;
top: 80%;
transform: translate(-50%, 30%);
}
.botonAbrir:hover{
background-color: white;
color: #091d3e;
border: 2px solid #091d3e;
} <html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="FONT-AWESOME/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Montserrat:300">
<!--########################## - CSS - ##########################-->
<!--CSS de Bootstrap-->
<link rel="stylesheet" type="text/css" href="CSS/normalize.min.css">
<link rel="stylesheet" type="text/css" href="BOOTSTRAP/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="CSS/stylesApp.css">
<!--#############################################################-->
</head>
<body>
<header>
<nav class="navegador navegInic">
<ul class="container-fluid contenidoNav">
<li class="navbar-header contenidoNav">
<button id="botonRes" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#colapsado"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand contenidoNav" href="#zona1"></a>
</li>
<li id="colapsado" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right pestanias">
<li> <a href="log_reg.html">
Salir
</a> </li>
</ul>
</li>
</ul>
</nav>
</header>
<section id="aplicacion" class="row content">
<nav id="elemIzq" class="col-sm-3 elemento">
<ul id="apartados">
<li>
<button id="botonVisor" class="tituloAcceso seleccionado">Visor</button>
</li>
<li>
<button id="botonGraficos" class="tituloAcceso">Gráficos</button>
</li>
<li>
<button id="botonMeteorologia" class="tituloAcceso">Meteorología</button>
</li>
</ul>
</nav>
<section id="elementoVisor" class="col-sm-9 fondoInvisible">
<article class="contenidoDef">
<h3>Visor de mapas</h3>
<p>Información para todas las paradas, tramos y líneas.</p>
<button class="botonAbrir" onclick='window.open("visor.html", "Diseño Web", "fullscreen=yes")'>Abrir</button>
</article>
</section>
<section id="elementoD3" class="col-sm-9 oculto fondoInvisible">
<article class="contenidoDef">
<h3>Gráficos</h3>
<p>Representación con múltiples gráficos para todo tipo de información.</p>
<p>EN DESARROLLO</p>
<!--<button class="botonAbrir" onclick='window.open("visor.html", "Diseño Web", "fullscreen=yes")'>
Abrir
</button>-->
</article>
</section>
<section id="elementoMeteo" class="col-sm-9 oculto fondoInvisible">
<article class="contenidoDef">
<h3>Meteorología</h3>
<p>Seguimiento de las condiciones meteorolsógicas de la zona.</p>
<button class="botonAbrir" onclick='window.open("meteo.html", "Diseño Web", "fullscreen=yes")'>Abrir</button>
</article>
</section>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {});
$("#botonVisor").click(function () {
$("#botonGraficos").removeClass("seleccionado");
$("#botonMeteorologia").removeClass("seleccionado");
$("#botonVisor").addClass("seleccionado");
$("#elementoVisor").removeClass("oculto");
$("#elementoD3").addClass("oculto");
$("#elementoMeteo").addClass("oculto");
});
$("#botonGraficos").click(function () {
$("#botonVisor").removeClass("seleccionado");
$("#botonMeteorologia").removeClass("seleccionado");
$("#botonGraficos").addClass("seleccionado");
$("#elementoD3").removeClass("oculto");
$("#elementoVisor").addClass("oculto");
$("#elementoMeteo").addClass("oculto");
});
$("#botonMeteorologia").click(function () {
$("#botonGraficos").removeClass("seleccionado");
$("#botonVisor").removeClass("seleccionado");
$("#botonMeteorologia").addClass("seleccionado");
$("#elementoMeteo").removeClass("oculto");
$("#elementoD3").addClass("oculto");
$("#elementoVisor").addClass("oculto");
});
</script>
</body>
</html>