I've been working on a loading screen for a one-page website, the loading screen is nothing more than a svg logo drawing itself out which works perfectly fine, but once the 'loading' is done i fade out the loading screen and fade in the content of the website.
It works fine except for the fact that when the content fades in it shocks really bad because of the background-image, i know that this is not the background-image loading itself because the whole reason there is a loading screen at all is to give the website time to load all of the images, so for some reason the fadein is not working properly.. perhaps it's the way i set up all the animations, have a look:
(i use jquery and animate.css for the fades)
JQuery:
setTimeout(function() {
$("#Builds").children().addClass("animatedLogo");
setTimeout(function() {
$(".loadingLogo").addClass("fadeOut");
setTimeout(function() {
$(".loadingScreen").addClass("fadeOut");
setTimeout(function() {
$(".loadingScreen").css('display', 'none');
setTimeout(function() {
$("body").css('overflow-y', 'auto');
$(".contentWrapper").addClass("fadeIn").show();
$("header").addClass("fadeIn").show();
setTimeout(function() {
$("body").css('background-color', "#fff");
}, 500)
}, 500)
}, 500)
}, 500)
}, 3400)
Html:
<div class="loadingScreen animated">
<div class="loadingLogo animated">
<svg>
//svg logo
</svg>
</div>
</div>
<div class="contentWrapper animated">
#yield('content')
</div>
so i pretty much already know that there is something wrong with the way that i am doing this, perhaps doing it like this is to performance heavy? any suggestions on how to do this differently are much appreciated!
thanks!
As you want to display a loading screen until your page content loads, you can replace your existing code with this code:
HTML
<div class="se-pre-con"></div>
CSS
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(images/loader-64x/Preloader_2.gif) center no-repeat #fff;
}
Note: Change background url in this css. Replace it with the your svg file which is going to be shown as loading image.
JavaScript
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");
});
In this scenario, you don't need to fade In your page content manually. As soon as page loads all the content and window is ready, your loading screen will automatically fade out and your page will be visible to users. Your page's Background image will also not look bad, because it will be already loaded on screen.
You can Click here for further details.
Give a try to this approach and hope this will help you to overcome your issue.
Related
I apologize in advance if this is a simple question, but I am a novice and am having an extremely difficult time resolving a glitch that occurs when triggering a CSS transition on mouseover.
I am using JS to trigger an inversion of color and background images based on the position of the mouse on the screen. If a user moves their mouse to the bottom 50% of the screen, the JS adds the class 'white' to the tag.
This changes the color of all text on the page and loads a different background image.
I think that I am facing two issues:
After the initial page load, the transition flickers once. I believe this may be because the image isn't pre-loaded. I am not sure how I can easily do this in my current situation.
When mousing between the bottom and top half of the screen quickly I notice the same type of flickering behavior. However, when I allow the transition to complete, I can move between both states smoothly without flickering. I cannot understand what is causing this inconsistent behavior.
Live page | Fiddle demo
<style>
#home {
background-color: #191919;
background: url(../img/Profile1.jpg) no-repeat center center fixed;
background-size: cover;
transition: all 900ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#home.white{
background-color: white;
background: url(../img/Profile2.jpg) no-repeat center center fixed;
background-size: cover;
}
</style>
<div id="split-container">
<div class="split-top">
<div class="container-s">
<div class="row">
<div class="col-12">
<h1 class="center offwhite">A UI/UX designer dedicated to creating thoughtful digital experiences.</h1>
</div>
</div>
</div>
</div>
<div class="split-bottom invert-trigger">
<div class="container-s">
<div class="row">
<div class="col-12">
<h1 class="center offblack">An avid traveller seeking new perspectives and meaningful connections.</h1>
</div>
</div>
</div>
</div>
</div>
<script>
winWidth=$(window).width();
if (winWidth >=752) {
$('.invert-trigger').hover(function(){
$('body').addClass('white');
}, function(){
$('body').removeClass('white');
});
$('.invert-trigger').hover(function(){
$('.invert').addClass('black');
}, function(){
$('.invert').removeClass('black');
});
}
});
</script>
Thank you for any help you can provide to resolve these challenges!
"Quickly" in this case is when you move the mouse before a transition has completed.
There are many ways to deal with this.
One example is to toggle a parameter indicating whether or not the animation is ready. You can then toggle the parameter to ready = false when you start the animation and use setTimeout() to toggle it back. This way the animation will always be completed before you can trigger it again.
I have changed your script a little bit. I hope it's still readable for you.
$(document).ready(function() {
if($(window).width() >= 752) {
$('.invert-trigger').on('mouseover', function() { // One .mouseover() event
$('body').addClass('white');
$('.invert').addClass('black');
}).on('mouseout', function() { // One .mouseout() event
$('body').removeClass('white');
$('.invert').removeClass('black');
});
}
});
The flickering of the image, comes from the fact the image is not loaded in the DOM yet.
This can be solved by pre-loading the image.
var img = new Image();
img.src = 'your_image_url.jpg';
I hope this helps you on your way.
I'd be inclined to use a :before pseudo-element on your body tag with the alternative color and background image already applied to it and with an opacity of zero, and toggle opacity in your hover handlers. It'll lay behind your other content. Then the image would (hopefully, depending on size and network speed) load before the initial transition.
I am making a webpage. Code can be found here: https://jsfiddle.net/saTfR/50/
I would like to insert a menu on the left side which will scroll down to different sections of the webpage which I will later add. I want the background map image to always stay in the same position when scrolling. I would like to make a section in the menu called "Portfolio" which will scroll down to different PNG images which I will insert. I would like for the user to be able to click on a PNG image and a new tab will open so that the user can better see the image.
I would also like my logo.png image to be displayed on the top-right hand corner of the page and be visible whenever the user scrolls up and down. (The logo cannot be currently displayed in the link because it is saved in my computer).
HTML:
<p class="text">text</p>
<img id="map" src="http://www.local-guru.net/img/guru/worldglow.png" alt="map"/>
<p class="text">text</p>
<div class="logo">
<img id="logo" src="logo2.png" alt="Logo">
</div>
</html>
CSS:
* {font-family: Lucida Console; }
.text{
color:white;
z-index:999;
position:fixed;
bottom: 10px;
right: 5px;
left:60%;
font-size:25px;}
</style>
JavaScript:
$(".text").hide().fadeIn(2000);
var mywindow = $(window);
var pos = mywindow.scrollTop();
mywindow.scroll(function() {
if(mywindow.scrollTop() > pos)
{
$('.text').fadeOut();
}
else
{
$('.text').fadeIn();
}
pos = mywindow.scrollTop();
});
You can easily apply your image as background image and fix it.
Example CSS:
body {
background-image: url('your_image.jpg');
background-attachment: fixed;
}
It will stay fixed but the page's contents will scroll like normal above that background image.
To put the logo in the top right corner and make it stay, you need to give it a position: fixed and the place it in the corner (with html or top/left/margins in css). You may also want to give it a higher z-index to ensure it stays on top. I would provide code example but I'm on my mobile right now.
Now that I'm back, here is some sample code to get you started.
#logo {
position: fixed;
right: 0;
top: 0;
z-index: 10;
}
Please see #Mischback's answer for CSS background-image.
Please see the very useful fancyBox.js utility with regard to your image inquery.
The fancyBox jQuery pluggin makes image manipulation and viewing Super Easy.
I will let someone else anwer how to fix/lock a logo to the top of the screen when scrolling.
I agree with Mischback but I would actually put the image in its own instead of the body.
HTML
<div id="image"></div>
CSS
#image {
background-image: url('image.jpg');
background-attachment: fixed;
}
Lately I have come into a dead end. I'm trying to expand the footer (#footernotes) and that works, it's basically a div behind the body (done with z-index) and when you click on a button it moves down. The scroll bar goes with it too, meaning that the page is now longer.
But what I'm trying to do is to make the viewport move with the expanded div. What happens now is that when I press the button (.secret) the div (#footernotes) comes in but it is still out of the viewport UNLESS you manually scroll to view the longer page.
So to some it up, how do you make the viewport automatically scroll down after you expanded the page? In other words, how do you make the viewport stay at the bottom of the page.
Here is my code:
<script>
$(document).ready(function(){
$('.secret').click(function(){
$("#footernotes").animate({top: "100px"}, 1000);
return false;
});
});
</script>
<div id="footer">
</div>
<div id="footernotes">
</div>
</div> <!-- end #footer -->
And the CSS for #footernotes
#footernotes {
background-color: red;
width: 100%;
position: relative;
top: -80px;
height: 150px;
z-index: -400;
}
EDIT: While typing up the question I figure out the answer, you have to use the scrollTop. I have added the line code in the example below:
<script>
$(document).ready(function(){
$('.secret').click(function(){
$("#footernotes").animate({top: "100px"}, 1000);
$('body,html').animate({scrollTop: "210px"},1000);
return false;
});
});
</script>
You can still answer this if you think there is a better way, I just thought I'll leave this question posted in case other people have the same question.
document.getElementById('divID').scrollIntoView();
try and see if that would do the job.
It can be done using Jquery method .focus(). just need to add
$(divname / .class / #id).focus();
and it would be done.
I am using max-width: 100%; height: auto; on all my <img> elements and on my image slider wrapper.
When resizing the browser window, the images scale correctly, but many surrounding elements don't follow along and misposition. They will self-correct once the page is refreshed or next image is loaded in the image slider. Any ideas?
Demo - scale the window, css at line 25
Pikachoose library sets the sizes of a few elements on each animation.
<div class="pika-stage" style="height: 355px;">
<div class="pika-aniwrap" style="position: absolute; top: 0px; left: 0px; width: 835px;">
This is why everything fixes itself when the next animation happens. You could look though the source and replicate the animations re-sizing code and put it in a $(window).resize event handler. Looking at the docs for Pikachoose it seems that they have a goto method.
You could do something like this:
$(window).resize(function(){$('#pikame').data('pikachoose').GoTo(3)})
Where the index of 3 is the current active slide. You probably want to use a form of timeout and only call it once to improve performance.
var resizeSlider = null
$(window).resize(function(){
if(resizeSlider) clearTimeout(resizeSlider)
resizeSlider = setTimeout(function() {
$('#pikame').data('pikachoose').GoTo(3)
}, 300)
})
This should make it so the goto is fired 300ms after the last window.resize event.
Hope this gives you some ideas.
My Site have a small introduction with heavy images, here is the little animation on it:
Jquery
$(function(){
$('#intro-left').stop().delay(5000).animate({'width':'0'},4000, 'easeOutQuint');
$('#intro-right').stop().delay(5000).animate({'width':'0','left':'100%'},4000, 'easeOutQuint');
$('#intro-rights').stop().delay(5000).animate({'width':'0','left':'100%'},4000, 'easeOutQuint');
$('#intro-logo').stop().delay(10000).fadeOut(1500);
});
HTML
<div id="intro-left"></div>
<div id="intro-right"></div>
<div id="intro-rights"></div>
<div id="intro-logo"><img class="top" src="images/intro_top.jpg"><img class="logo" src="images/intro-logo.jpg"><img class="bot" src="images/intro-bot.jpg"></div>
<div id="header">
Rest of the Site...
CSS
#intro-left {
position: absolute;
z-index: 10000;
top: 0;
left: 0;
background: url(images/intro-left.png) right no-repeat;
width: 58%;
height: 100%;
}
#intro-right {
position: absolute;
z-index: 9000;
top: 0;
left: 32%;
background: url(images/intro-right.png) left no-repeat;
width: 68%;
height: 100%;
}
and as you can see, it is just full screen images and colors, the problem is that the Web surfer may miss that intro, or, have it introduced in a bad way, with images loading...
It make the intro ugly, then,
i want to know if there is a way to make all the content in the page invisible while it is loading, then, when all the content of that page is loaded, make it visible.
Maybe a display: none during the loading and then the page is loading make it block, something like that would work,
Is that posible? Or similar to it?
Thanks a lot in advance!
The following link will take you to a jquery loading plugin that allows you to add a pre-loader to your website which should be a great solution to your problem.
http://www.gayadesign.com/diy/queryloader2-preload-your-images-with-ease/
You would use the onComplete() function to have your intro start going after the page / pre-loader is finished.
Might look something like this:
$("body").queryLoader2({
barColor: "#6e6d73",
backgroundColor: "#fff1b0",
percentage: true,
barHeight: 30,
completeAnimation: "grow",
onComplete: function(){
$('#intro-left').stop().delay(5000).animate({'width':'0'},4000, 'easeOutQuint');
$('#intro-right').stop().delay(5000).animate({'width':'0','left':'100%'},4000, 'easeOutQuint');
$('#intro-rights').stop().delay(5000).animate({'width':'0','left':'100%'},4000, 'easeOutQuint');
$('#intro-logo').stop().delay(10000).fadeOut(1500);
}
});
Try encasing the whole page contents in <div id='loadHide' style='display:none'>...</div>
You can then add
$('#loadHide').show();
To the beginning of your code block, to display the contents once the document has finished loading.
The finished javascript would be:
$(function(){
$('#loadHide').show();
$('#intro-left').stop().delay(5000).animate({'width':'0'},4000, 'easeOutQuint');
$('#intro-right').stop().delay(5000).animate({'width':'0','left':'100%'},4000, 'easeOutQuint');
$('#intro-rights').stop().delay(5000).animate({'width':'0','left':'100%'},4000, 'easeOutQuint');
$('#intro-logo').stop().delay(10000).fadeOut(1500);
});
The display:none/display:block would likely work, and jQuery has a method of running code only after the page has fully loaded.
$(document).ready(function() {
$('#content').show();
// I would also recommend that you start your animation here, too
});
The $(document).ready solutions are good, but the document can be ready before all of your images are finished loading. If your main concern is waiting until all images are loaded, I would check out this question, which suggests that you use the $(window).load callback. Also, you can add onload event handlers to your images to be sure you don't start animating before images are loaded.
var image = new Image();
image.onload = function() {
//Animation code here
};
image.src = "http://i2.ytimg.com/vi/yW5Vv23HQWM/hqdefault.jpg";
This would only work if you are loading a single image. If you need to wait on more than one image, you would put your animation code somewhere else and each time an onload event was fired, you would check to see if all of your needed images are loaded yet. Once they have all loaded, call your animation code.