I have a preloader splash page for my website that I would like to display upon load, and fade out after 2s, revealing the main website content below.
I have the below code, which work well to display the splash page upon window load, but I want to replace this with a simple 2s delay, so that it always appear, even for those on super fast connections. Currently it is fading out too quickly when on a fast connection.
Thanks.
HTML
<div class='preloader'>
<div class="preloader-logo">Logo</div>
<div class="preloader-loading-icon">Loading</div>
</div>
<main>Content goes here, should be hidden initially until fully loaded.</main>
CSS
.preloader {
display: block;
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
z-index: 9999;
background: rgba(255,102,51,1);
}
.preloader-logo {
background: url(images/ui-sprite.svg) no-repeat 0 -300px;
position: absolute;
width: 140px;
height: 58px;
top: 50%;
left: 50%;
text-indent: -9999px;
}
.preloader-loading-icon {
background: url(images/preloader-loading.svg) no-repeat 50%;
text-indent: -9999px;
position: relative;
top: 50%;
left: 50%;
margin-top: 90px;
width: 40px;
height: 40px;
}
main { opacity: 0; } Hide main content to avoid flash before preloader initialises */
JS
/* Preloader Splash */
$(window).load(function(){
$('#container').animate({opacity: 1},300);
$('.preloader').fadeOut(500);
});
Use setTimeout
$(window).load(function(){
setTimeout(function() {
$('#container').animate({opacity: 1},300);
$('.preloader').fadeOut(500);
}, 2000);
});
Related
Hello people from StackOverflow.
I'm trying to do something exactly like in this website: http://anayafilms.com/ (work section).
It's basically an image but on mouse over, it gets darken, a text at the bottom and two "buttons" (just some font awesome icons in a circle), along with some basic animation.
So far I only have the image in a div and no idea on how to do that, so if anyone can help me out that'd be amazing.
Before and after, just to illustrate it in case you don't wanna go on the website
Depending on what you really need it to do, you might be able to do this without javascript. Here is an example that makes use of the css pseudo class :hover and some absolute positioning. I'm darkening the background, which you can set as an image, by using a layer above it with a opacity: .5 black background created using background: rgba(0,0,0,.5).
.css-rollover {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.css-rollover:hover .overlay {
opacity: 1;
pointer-events: all;
}
.bg {
width: 100%;
height: 100%;
background: red;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
text-align: center;
color: #fff;
opacity: 0;
pointer-events: 0;
transition: opacity .2s;
}
.overlay p {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX( -50% );
}
.overlay .fa-links {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.overlay .fa-links a {
display: inline-block;
width: 20px;
height: 20px;
line-height:20px;
border-radius: 50%;
margin: 5px;
padding: 5px;
background: blue;
text-decoration: none;
color: #fff;
}
<div class="css-rollover">
<div class="bg" ></div>
<div class="overlay">
<div class="fa-links">
A
B
</div>
<p>You're hovering...</p></div>
</div>
I have a map section with html as follows,
<div id="map-section" class="map-section">
<!-- map opener -->
<div id="map-opener" class="map-mask" style="opacity:0.5;">
<div class="map-opener">
<div class="font-second">locate us on the map<i class="ci-icon-uniE930"></i></div>
<div class="font-second">close the map<i class="ci-icon-uniE92F"></i></div>
</div>
</div>
<!--/ End map opener -->
<div id="map-container">
</div>
</div>
<!--/ End Map Section -->
and the css was,
.map-section {
height: 150px;
overflow: hidden;
position: relative;
-webkit-transition: height 0.2s ease-out;
transition: height 0.2s ease-out;
}
.map-mask {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
cursor: pointer;
z-index: 4;
}
.map-mask .row {
position: relative;
}
.map-mask .row > div {
position: relative;
top: 50%;
}
.map-opener {
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -200px;
width: 400px;
height: 50px;
overflow: hidden;
line-height: 50px;
text-align: center;
font-weight: 400;
}
.map-opener div {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
}
.map-opener div:first-child {
opacity: 1;
}
.map-opener div:nth-child(2) {
margin-top: -50px;
opacity: 0;
}
.map-opener i {
font-size: 28px;
vertical-align: middle;
}
.map-opener i:before {
display: inline;
}
.map-opened {
height: 450px;
}
.map-opened .map-mask {
height: 100px;
}
.map-opened .map-opener div:first-child {
opacity: 0;
}
.map-opened .map-opener div:nth-child(2) {
opacity: 1;
}
But this html won't give you full description about my problem and hence i am explaining here regarding it..
In a website i am using a map section in which at initial stage i have map with height of 150px; , and a text named "Locate us on map".. When we click the text, the map with a height of 450px; gets opened, here comes the issue the opened map was not scrolling down to full height and there is a need of manual scroll down to look at the full map.. How could i do it (i.e, if we click on "Locate us on map", the map container should move to full height without manual scroll down"..
The link of the site was http://dev.seyali.com/seyalitechv3/ and look at the footer of this site..
This link will clears you my issue..
Your div height of the map is changing and thus changing the height of the window but the window scroll position is not changing, you need to scroll the window on change of the div height.
To scroll the window you can add a click listener to the map mask as shown below and animate to the bottom of the page usng jQuery.
Add this JS code to your javascript file.
$('.map-mask').on('click',function(){
$("html, body").animate({ scrollTop: $(document).height() }, 1000);
});
In my code margin-left: is working in two different ways in Firefox and all the other browsers.
On Firefox, the margin is only like 20% of the "real" margin. I tried #-moz-document url-prefix() { }, but it didn't solve the issue, it moved both the image that is shown and the "real position from where the cars start moving" to a even bigger margin.
Here's my code:
<section id="home" >
<div id="home1inner">
<div id="header">
*lots of content here*
</div>
<img id="cars" src="images/cars.png" />
</div>
</section>
#home {
position: relative;
width: calc(100% + 25px);
overflow-y: scroll;
background-image: url('images/movie_6.jpg');
background-repeat: no-repeat;
background-position: center;
height: 690px;
margin-top: 40px;
}
#home1inner {
height: 1550px;
overflow: hidden;
position: relative;
}
#cars {
position: absolute;
height: 690px;
bottom: -500px;
margin-left: -300px;
pointer-events: none;
}
Here's the website itself, where you can check the difference between Firefox and any other browser: http://denea.comeze.com/
Any ideas how to fix it?
In Firefox, your cars ID is defaulting to be centered on the page.
Simply add left: 0, like so:
#cars {
position: absolute;
height: 690px;
bottom: -500px;
margin-left: -300px;
pointer-events: none;
left: 0;
}
and it will start off at the position on the page you want.
so i'm making a project and I want the three box style page, however when I do the auto-expand to fit the content inside the boxes it floats over the other boxes - as I have had to position them.
html code:
<div class="content">
<h2>Contact me</h2>
<p>--content holder--</p>
</div>
<div class="content-bottom-left">
<p>--content holder--</p>
</div>
<div class="content-bottom-right">
<p>--content holder--</p>
</div>
my CSS:
.content {
background-color: 373737;
top: 15%;
width: 55%;
right: 25%;
position: absolute;
overflow: hidden;
margin-bottom: auto;
}
.content-bottom-left {
background-color: 373737;
width: 27%;
left: 15%;
top: 60%;
position: absolute;
overflow: hidden;
}
.content-bottom-right {
background-color: 373737;
width: 27%;
right: 20%;
top: 60%;
position: absolute;
overflow: hidden;
}
Outcome:
Outcome
add this CSS rule to your Div tags:
display:inline-block;
Your CSS doesn't allow the positions of the elements to move with above content
adding the following to both of the lower should do it.
clear: both;
tells elements to avoid collisions with elements on their left and right with which they collide, along with behnam bozorg's comment it should work.
You might also remove the top absolute positioning as it is being pushed down anyways.
.content-bottom-left {
background-color: 373737;
width: 27%;
left: 15%;
top: 60%;
position: absolute;
overflow: hidden;
}
.content-bottom-right {
clear: both;
display: inline-block;
background-color: 373737;
width: 27%;
right: 20%;
top: 60%;
position: absolute;
overflow: hidden;
}
I'm trying to get a full page (with nav at the top, but I don't mind the background going underneath it) zoom-out effect. However, I want it to execute once all assets are loaded, as it is the first thing seen when the page is loaded. So I wouldn't want it being executed early otherwise it may not even be seen or just the end of it would be caught.
I have seen several examples but I've had problems with them:
Animating (with jQuery) the background-size property - this made the animation 'choppy' and I read somewhere it was probably because it was being run on the CPU rather than the GPU.
Demo: https://jsfiddle.net/njj43kz4/
HTML
<body>
<div id="front"></div>
</body>
CSS
html {
width: 100%;
height: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
#front {
position: relative;
top: 0;
width: 100%;
height: 100%;
opacity: 1;
background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center;
background-size: 110%;
}
JavaScript
$('#front').animate({ backgroundSize: '100%' }, 1000);
Using a setTimeout as shown in this previous question's answer: Slight background zoom on DOM load? - this worked smoothly, however I cannot get it working when I change the width and height values to 100%. The image starts oversized before zooming out, but the oversized view is shown. I want the fixed 100%x100% view, and no extra scaling visible. I tried overflow: hidden but that isn't hiding the overflow. You can see this is happening as the scrollbars are appearing and ruining the effect.
Demo: http://jsfiddle.net/eHAuh/15/
HTML
<body>
<div id="front" class="scaled"></div>
</body>
CSS
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
#front {
position: relative;
top: 0;
width: 100%;
height: 100%;
opacity: 1;
background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center;
background-position: 50% 50%;
overflow: hidden;
}
.animatable {
-webkit-transition:all 750ms ease-out;
transition:all 750ms ease-out;
}
.scaled {
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
JavaScript
$(document).ready(function () {
$('#front').attr('class', 'animatable');
setTimeout(function () {
$('#front').removeClass('animatable');
}, 1000)
});
Any help would be great, and I hope the layout of this question is ok. I couldn't work out how to indent paragraphs without turning them into code indents. Thanks for reading and have a nice day.
Edit 1: The way this will execute when loaded is because the jQuery/JavaScript is in the $(window).load.
Edit 2: There was an answer suggesting to use keyframes, however these do not support IE9 and this would be preferable.
You can do it with css #keyframes if you want using scale
I have used pseudo class for adding background
/** after page has loaded*/
$(window).bind('load', function() {
$('#front').addClass('active')
})
html {
width: 100%;
height: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
#front {
position: relative;
top: 0;
width: 100%;
height: 100%;
opacity: 1;
overflow: hidden;
}
#front:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center;
background-size: cover;
transform: scale(2);
}
#front.active:after {
animation: animation 5s;
/* change the value 5s to what you want */
animation-fill-mode: forwards;
/* added so that it doesn't return to its original state which is scale(2)*/
}
#keyframes animation {
0% {
transform: scale(2);
}
100% {
transform: scale(1)
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="front"></div>
As per your requirements it looks like you require this
/** after page has loaded*/
$(window).bind('load', function() {
$('#front').animate({
width: '100%',
height: '100%'
}, 5000);
})
html {
width: 100%;
height: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#front {
position: relative;
top: 0;
width: 200%;
height: 200%;
opacity: 1;
background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="front"></div>
in css change
#front
position: fixed;
or for body add
overflow: hidden;