I have a problem: I have a login screen that I made, but it blinks. I did not want this to happen.
I wanted the login form to be static with the images passing in 5 minutes.
Thelinkdoesnothavethegraybox.
Iwantedthegrayboxtoo.
Hereistheproblemlink: Problem link
This happens because your image is being dynamically added to the documento ... in summary it is not loaded at the same time that the content of the page is loaded.
This "effect" only happens while the image is not yet in the browser cache , after each image is loaded the other transitions will not have this effect on the form already image ... how are you? by applying the function fadeOut() and fadeIn() in the class that contains the form soon the form also receives this effect.
To work around this you can simply replace the fade functions with a css class with the transition property.
I already know slide is set to happen every 5 seconds (5000) and not 5 minutes (300000 or 1000 * 60 * 5).
The color of background needs to be defined:
The following example uses 10 seconds (10000) and a background-color #d3d3d3 for the form as well as using the% css% property of the css to promote the transition between images instead of using fade .
$(document).ready(function(){
var count = 0;
var images = [
"https://weec-sistemas.000webhostapp.com/sistema-teste/img/bg-1.jpg",
"https://weec-sistemas.000webhostapp.com/sistema-teste/img/bg-2.jpg",
"https://weec-sistemas.000webhostapp.com/sistema-teste/img/bg-3.jpg"];
var image = $(".img-fader");
image.css("background-image","url("+images[count]+")");
setInterval(function() {
image.css("background-image", "url("+images[count++]+")");
if(count == images.length)
{
count = 0;
}
}, 10000);
});.bg-secondary {
background-color: #d3d3d3;
}
.transition {
transition: all 1.0s;
} <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Tema Bootstrap -->
<link href="https://weec-sistemas.000webhostapp.com/sistema-teste/css/bootstrap-theme.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!-- Estilo Customizado -->
<link href="https://weec-sistemas.000webhostapp.com/sistema-teste/css/style.css" rel="stylesheet">
<!-- Estilo Responsivo -->
<link href="https://weec-sistemas.000webhostapp.com/sistema-teste/css/style-responsive.css" rel="stylesheet" />
<body class="img-fader transition">
<div class="container">
<form class="login-form bg-secondary" method="post" action="">
<div class="login-wrap">
<p class="login-img"><i class="fa fa-lock" aria-hidden="true"></i></p>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>
<input type="text" id="loginUsuario" name="loginUsuario" class="form-control" placeholder="Usuário" autofocus>
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock" aria-hidden="true"></i></span>
<input type="password" id="senhaUsuario" name="senhaUsuario" class="form-control" placeholder="Senha">
</div>
<label class="checkbox">
<input type="checkbox" value="lembra-me"> Lembrar me
<span class="pull-right"> <a href="#"> Esqueceu senha?</a></span>
</label>
<input type="submit" name="logar" value="Login" class="btn btn-primary btn-lg btn-block" data-disable-with="Login">
<!-- <button class="btn btn-info btn-lg btn-block" type="submit">Signup</button> -->
</div>
</form>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"type="text/javascript" ></script>
<script src="https://weec-sistemas.000webhostapp.com/sistema-teste/js/jquery.min.js"type="text/javascript" ></script>
</body> The problem is basically that the class that transitions ( .img-fader ) using fadeOut and fadeIn is in body , so all content will be affected.
One solution is to put form out of div container and apply the .img-fader class to this div . As a result, form will not be affected.
It is also necessary to change the CSS of form so that it stays centered on the screen, and adjust height height of div container to occupy the entire screen.
Also replace the class container with container-fluid , which will occupy the full width of the screen.
HTML will look like this:
Do not forget to delete the class
img-faderfrom<body>.
<div class="container-fluid img-fader">
</div>
<form class="login-form" method="post" action="https://weec-sistemas.000webhostapp.com/sistema-teste/login.php">
<div class="login-wrap">
<p class="login-img"><i class="fa fa-lock" aria-hidden="true"></i></p>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>
<input type="text" id="loginUsuario" name="loginUsuario" class="form-control" placeholder="Usuário" autofocus>
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock" aria-hidden="true"></i></span>
<input type="password" id="senhaUsuario" name="senhaUsuario" class="form-control" placeholder="Senha">
</div>
<label class="checkbox">
<input type="checkbox" value="lembra-me"> Lembrar me
<span class="pull-right"> <a href="https://weec-sistemas.000webhostapp.com/sistema-teste/login.php#"> Esqueceu senha?</a></span>
</label>
<input type="submit" name="logar" value="Login" class="btn btn-primary btn-lg btn-block" data-disable-with="Login">
<!-- <button class="btn btn-info btn-lg btn-block" type="submit">Signup</button> -->
</div>
</form>
CSS Changes
Change the .login-form class in your CSS below by this, it will center the form on the screen:
.login-form {
max-width: 350px;
background: #d5d7de, fixed;
position: fixed;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
Finally, include the following code in your img-slider.js file at the beginning of $(document).ready(function(){ :
$(window).on("load resize", function(){
$(".container-fluid").css("height",window.innerHeight+"px");
});
Looking like this:
$(document).ready(function(){
$(window).on("load resize", function(){
$(".container-fluid").css("height",window.innerHeight+"px");
});
var count = 0;
var images = ["img/bg-1.jpg","img/bg-2.jpg","img/bg-3.jpg"];
var image = $(".img-fader");
image.css("background-image","url("+images[count]+")");
setInterval(function(){
image.fadeOut(500, function(){
image.css("background-image","url("+images[count++]+")");
image.fadeIn(500);
});
if(count == images.length)
{
count = 0;
}
},5000);
});