2
I have a problem: I have a login screen that I did, but it keeps blinking. I didn’t want this to happen.
I wanted the login form to be static with the images running in 5 minutes.
The link does not have the gray box.
I wanted the gray box too.
Here the problem link: Link to the problem
0
The problem is basically in which the class that makes the transitions (.img-fader) using fadeOut and fadeIn is in the body, so all content will be affected.
One solution is to put the form out of div container and apply the class .img-fader to that div. With that, the form will not be affected.
You also need to change the CSS of form so that it is centered on the screen, and adjusts the height height of div container to occupy the entire screen.
Also replace the class container for container-fluid, which will occupy the entire width of the screen.
HTML will look like this:
Don’t forget to delete the class
img-faderof<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>
Changes to the CSS
Change the class .login-form in your CSS below by this, will center on the screen the form:
.login-form {
max-width: 350px;
background: #d5d7de, fixed;
position: fixed;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
Finally, include the code below in your file img-slider.js at the very beginning of $(document).ready(function(){:
$(window).on("load resize", function(){
$(".container-fluid").css("height",window.innerHeight+"px");
});
Thus remaining:
$(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);
});
0
This is because your image is being added "dynamically" at the documento... in short it is not loaded at the same time as the page content 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 image already the form... as you are applying the function fadeOut() and fadeIn() in the class that holds the form so the form also receives this effect.
To get around this can simply replace the functions fade by a css class with the property transition.
I already know slide this set to happen every 5 seconds (5000) and not 5 minutes (300000 or 1000 * 60 * 5).
Already the color of background needs to be defined:
The following example uses 10 seconds (10000) and a background-color #d3d3d3 for the form in addition to using the property transition 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>show, that’s what I wanted
Browser other questions tagged css html5 bootstrap login
You are not signed in. Login or sign up in order to post.
Without source code it is difficult to help. But I believe this is happening because your slider was tagged <body>! I suggest you create a div take 100% of width and height and in it assign the slider! Thus, this component will be separate from the other elements of your site! This is happening because who is being changed is the body, soon everything inside him is also changed!
– Wesley Redfield
The code is here: https://weec-sistemas.000webhostapp.com/sistema-teste/scripts.txt
– Wesley Rodrigues
I could explain myself?
– Wesley Rodrigues
About flashing, I noticed that when the image is not in Cash it takes a few microseconds to load for the first time, after it has already loaded it no longer flashes in transition
– hugocsl