I'm making a personal portfolio and want to show my site tagline for like 3 seconds (full screen), then fade out to show the actual website. What code is used to show some initial div then fade out to the actual website?
This works, with setTimeout(). After 3000 ms, we add the class hidden to the "loading element" that will hide it. You can customize the classes in order to achieve other types of animations. For example, now the animation is set to run for 500 ms.
setTimeout(function() {
$('#loading').addClass('hidden');
}, 3000);
#loading{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: gray;
color: white;
opacity: 1;
transition: 0.5s;
visibility: visible;
}
#loading.hidden{
opacity: 0;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loading">Loading site...</div>
<div id="site">
<h1>My site</h1>
<p>Lorem ipsum</p>
</div>
If you prefer regular javascript, you can do it like this:
setTimeout(function() {
var element = document.getElementById('loading');
element.classList += " hidden";
}, 3000);
I made a CSS-only version using CSS3 keyframes/animation.
HTML:
<div id="websiteOverlay">
"Some tagline"
</div>
<div class="container">
<h1>
Website content header
</h1>
<p>
Website content body, with some paragraphs
</p>
</div>
CSS:
#-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fadeOut {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#websiteOverlay {
text-align: center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: black;
color: white;
opacity: 0;
-webkit-animation: fadeOut 3s;
animation: fadeOut 3s;
}
Fiddle: https://jsfiddle.net/9z6ow28m/
At the bottom of your HTML document, add a fixed div:
<div class="fixed">Tagline...</div>
Then make it fixed and fill 100% with CSS:
.fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
So, now you have the tagline element on top of everything else. Last thing you need to do is fade out that element after 3 seconds. This can easily get achieved with jQuery for example:
setTimeout(function() {
jQuery('.fixed').fadeOut();
}, 3000);
That's all it takes
Related
I'm having an issue with a notification system I am building.
All works fine till the end where my javascript is triggered to remove the show class from the notification div. When the class is removed, there is a brief flash to the start position of the div.
Example here
JS to show notification:
function showNotification() {
notificationRef.current.classList.add("nShow");
setTimeout(() => {
notificationRef.current.classList.remove("nShow");
}, 4000);
}
Notification CSS has general positioning and styling with visibility: hidden and top: 85px set.
nShow (class to show notification):
.notification.nShow {
visibility: visible;
animation: fadeNotiIn 1s, fadeNotiOut 1s 3s;
}
#keyframes fadeNotiIn {
from {
top: 0;
opacity: 0;
}
to {
top: 85px;
opacity: 1;
}
}
#keyframes fadeNotiOut {
from {
top: 85px;
opacity: 1;
}
to {
top: 0;
opacity: 0;
}
}
It seems that visibility: hidden is being set after opacity: 1 so there is a flash when removing the show class.
Thanks
Here is a sample. I would not advise you to use animation here. Between the two animations you plan, your element goes back to its default state and that's making things ugly.
Instead, what I would do is use a short transition to smooth a bit the thing between the two states, and keep handling it through JS.
const notification = document.querySelector('.notification');
function startNotification() {
notification.classList.add("nShow");
setTimeout(() => {
notification.classList.remove("nShow");
}, 3000);
}
.notification {
opacity: 0;
position: absolute;
top: 0px;
transition: all 1s;
}
.notification.nShow {
top: 85px;
opacity: 1;
}
.root {
position: relative;
}
<button onclick="startNotification()">Start notification</button>
<div class="root">
<div class="notification">Hello</div>
</div>
As said in the first version, I don't think you should go for visibility and opacity at the same time, and since you are already using opacity, let's use it completely.
I found this cool snackbar which I can use on my test website for learning reasons.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_snackbar
This snackbar uses ID so I will have to copy paste CSS as well as javascript over and over. if I want 4 different snackbar on same page than I will have to copy paste CSS code 4 times... that can be annoying.
So here is my attempt of setting multi snackbar. you can copy paste my code in above link to see the results.
As you can see, the effect works but it loses the CSS code. Any idea?
again: In snackbar id... I'm just creating layout of box, so I can change snackbar to class... and have id for unique box.
<!DOCTYPE html>
<html>
<head>
<style>
.snackbar {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
font-size: 17px;
}
.snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
#-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
#keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
#-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
#keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
</style>
</head>
<body>
<h2>Snackbar / Toast</h2>
<p>Snackbars are often used as a tooltips/popups to show a message at the bottom of the screen.</p>
<p>Click on the button to show the snackbar. It will disappear after 3 seconds.</p>
<button onclick="myFunction()">Show Snackbar</button>
<div id="myUniqueBar" class="snackbar">Some text some message..</div>
<script>
function myFunction() {
var x = document.getElementById("myUniqueBar")
x.className = "show";
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
</script>
</body>
</html>
Because you are removing your existing snackbar class when using the code:
x.className = "show";
Instead replace the above code with this code:
x.classList.add("show");
Codepen link: https://codepen.io/anon/pen/KZRJmP
hi am tying to make a preloader for my site with css and jQuery. here is the fiddle.It is working perfectly. But the problem is i need this to work before page load. now preloader is working after the page is loaded.
$('.la-anim-1').addClass('la-animate');
just need to run the script before page load.help..
cheers thanks!!
The way you are applying your CSS won't work in this scenario. You need keyframes animation. The idea is to start the animation on the element as soon as it is rendered, and then when the page load is complete, stop it by removing the class (and better still removing the element itself).
Demo: http://jsfiddle.net/abhitalks/KWh5d/6/
Start the element with the class applied:
<div class="la-anim-1 la-animate"></div>
Add this to your CSS:
#-webkit-keyframes preloader {
0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); }
100% { opacity: 1; -webkit-transform: translate3d(0%, 0, 0); }
}
#keyframes preloader {
0% { opacity: 0; transform: translate3d(-100%, 0, 0); }
100% { opacity: 1; transform: translate3d(0%, 0, 0); }
}
And then add this animation to your .la-anim-1.la-animate class:
.la-anim-1.la-animate {
-webkit-animation: preloader 5s infinite;
animation: preloader 5s infinite;
}
And then, your jQuery inside DOM ready:
$('.la-anim-1').removeClass('la-animate');
And better still, remove the element itself:
$('.la-anim-1').remove();
Edit: Added standard along with -webkit- vendor prefix. Please add other vendor prefixes as needed.
Keep your code under document load function.
$(document).load(function(){
$('.la-anim-1').addClass('la-animate');
});
With Bootstrap, Jquery, CSS
<style>
.overlay {
position: absolute; background-color: white; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 10;
}
.overlay div{ position: relative; z-index: 10; top:30%; left: 50%;}
</style>
HTML
<body>
<div class="overlay">
<div class="spinner-border text-secondary" >
<span class="sr-only">Loading...</span>
</div>
</div>
<div> Helloo World</div>
</body>
JQuery
<script>
$(window).on('load', function(){
$( ".overlay" ).fadeOut(100, function() {
$( ".overlay" ).remove();
});
});
</script>
When I add the .shown class to my #overlay I would like the opacity to fade in for 2secs, then immediately reverse and fade out for 2 seconds, creating a sort of "flashing" effect.
I tried just removing the class but that doesn't show any animation at all. This is my sample markup/CSS:
HTML:
<div id="outer">
This is some text
<div id="overlay"></div>
</div>
CSS:
#overlay {
...
opacity: 0;
transition: opacity 2s ease-in-out;
}
#overlay.shown {
opacity: 0.3;
}
Attemped JS:
// Wait 2 seconds from page load...
setTimeout(function() {
// Add shown class to trigger animation
document.getElementById("overlay").classList.add("shown");
// Want to remove the class and hoped this would reverse the animation...
// it doesn't
document.getElementById("overlay").classList.remove("shown");
}, 2000);
jsFiddle
use css animation with keyframes
#keyframes myFlash
{
0% {opacity:0;}
50% {opacity:0.3;}
100% {opacity:0;}
}
#-webkit-keyframes myFlash /* Safari and Chrome */
{
0% {opacity:0;}
50% {opacity:0.3;}
100% {opacity:0;}
}
#overlay {
...
opacity: 0;
}
#overlay.shown {
animation:myFlash 2s;
-webkit-animation:myFlash 2s; /* Safari and Chrome */
}
It looks like you could use a second timeout after the first animation completes..
// Wait 2 seconds from page load...
setTimeout(function() {
// Animate Forward
document.getElementById("overlay").classList.add("shown");
setTimeout(function(){
// Animate Back
document.getElementById("overlay").classList.remove("shown");
},2000);
}, 2000);
There are lots of changes i have done to achieve your out put please check following code
Your css
#outer {
width: 100px;
height: 100px;
position: relative;
}
#overlay {
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
background: #336699;
opacity: 0;
transition: opacity 2s ease-in-out;
}
#overlay.shown {
display: block;
opacity: 0.5;
}
Your js
setTimeout(function() {
$("#overlay").addClass("shown");
var def = $('#overlay').promise();
def.done(
function () {
$('body').stop().delay(5000).queue(function(){
$("#overlay").removeClass("shown");
});
});
}, 2000);
There was no delay between first and second so how it will show animation which you have done
Please check working demo.....Demo
I am looking to get a nice smooth rollover image to fadeIn over the parent image for a set of buttons.
I have my overlay image stacked ontop of my main image, and it's set to "display: none;".
I have the following jQuery, and it works to FadeIn the overlay image, but it fades it in and out repeatedly when the mouse is over the image. Do I have something wrong in the syntax for my jQuery? Thanks in advance.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".main").mouseenter(function() {
jQuery(".overlay").fadeIn();
});
jQuery(".main").mouseleave(function() {
jQuery(".overlay").fadeOut();
});
});
</script>
and my HTML code:
<style type="text/css">
<!--
.hoverbox { position: relative; }
.main { width: 243px; height: 117px; }
.overlay { position: absolute; width: 243px; height: 117px; top: 0; left: 0; display: none; }
-->
</style>
<!-- button 1 -->
<div class="hoverbox" style="float: left; width: 243px; height: 117px;">
<a href="/locations/sacramento-international-airport/">
<img class="main" src="/images/home-button-smf_orig.jpg" />
<img class="overlay" src="/images/home-button-smf_rollover.jpg" />
</a>
</div>
<!-- end button 1 -->
Try this instead:
<script>
$(document).ready(function() {
$(".hoverbox").on("mouseenter", function(){
$(".overlay").stop(true, true).fadeIn();
});
$(".hoverbox").on("mouseleave", function(){
$(".overlay").stop(true, true).fadeOut();
});
});
</script>
I think hovering over the image itself was a bad idea, here I use the parent container. Also, using the on() method is now the preferred way to trigger mouse enter and leave events.
Good luck!
Michael's answer is a good one and will work, but it may be preferable to use CSS transitions for the animation and reserve jQuery for the behavior.
Here's a demo.
JavaScript
$(".hoverbox")
.mouseenter(function () {
$(this).addClass("on");
})
.mouseleave(function () {
$(this).removeClass("on");
});
CSS
.overlay {
opacity: 0;
position: absolute;
top: 0;
left: 0;
-webkit-transition: .4s;
-moz-transition: .4s;
-o-transition: .4s;
-transition: .4s;
}
.hoverbox.on .overlay {
opacity: 1;
}
Here's a demo of the former approach (similar to Michael's answer). Also, your CSS has been cleaned up for both examples.
css is enough in this case, try the below code
.main:hover + .overlay{ display:block; }
and make sure overlay has a higher z-index
.overlay {
position: absolute; width: 243px; height: 117px;
top: 0; left: 0; display: none; z-index: 2;
}
http://jsfiddle.net/Grhqn/1/
for graceful fading
.overlay {
position: absolute; width: 243px; height: 117px; top: 0;
left: 0; z-index: 2; transition: opacity 1.5s ease; opacity:0;
}
.overlay:hover { opacity:1; }
http://jsfiddle.net/Grhqn/3/