I'm currently using this jQuery snippet to produce the effect of picture fading-in one-by-one when the page is loading:
jQuery(document).ready(function($) {
animatePictures('img');
});
function animatePictures(selection) {
elementsToAnimate = jQuery(selection);
elementsToAnimate.hide().each(function(i) {
jQuery(this).delay(i * 500).fadeIn(5000);
});
}
This roughly does the trick, but as you can see, the assets are first loaded, then they are hidden when the DOM is ready and then faded-in in 500ms intervals.
I was wondering if you could tell me how I can make it properly so that pictures really fade-in as the site is loading, and are not first hidden and then faded-in.
I will appreciate all suggestions. Thanks!
First in your css set all your pics to be display:none
img{display: none;}
Then use:
function animatePictures() {
jQuery('img').each(function(i) {
jQuery(this).delay(i * 500).fadeIn(5000);
});
}
jQuery(window).load(function($) { animatePictures(); });
by using the window load all your pictures will be loaded in memory and can be shown separately than the rate of download... You might think of using a lazy loader script instead if you are trying to optimize your page...
Pretty simple solution is to use just css:
img{/*select the selector*/
display: none;
}
Related
I'm trying to create a flipping page effect with pure CSS. I found this code and now I'm trying to customize it. Basically I want the flipping animation to happen once the page is loaded. So I did this. Now instead of #page-flip:hover #s3 (for example) I have .hover #s3 and I add hover class to #page-flip with JS:
window.addEventListener('DOMContentLoaded', init);
function init(){
setTimeout(function(){
document.getElementById('page-flip').classList.add('hover')
}, 100);
}
It works just fine. The problem is, on both animations I see a little page "trembling" when the animation starts. I'm trying to get rid of it for hours and for now no luck. Any suggestions, please?
I'm having a problem with a website I'm working on displaying correctly on the stock browser on Android. I know that the stock browser isn't as reliable as Chrome, however I need to get it working on the browser as the client insists on this as well as the fade in.
The issue occurs on mobile when pressing the Menu at the top. What should happen is the page should fade out and then the menu page fades in. The problem occurs with the fade in not working and the page appearing as a black page even though the links are still use-able.
I've done some testing and have found that by changing the jQuery from:
jQuery(document).ready(function(){
to
$(window).load(function(){
solves the issue, however this doesn't look very nice at all as all the page elements finish loading and display and then the fade in happens. So this isn't a solution, but suggests that the stock browser is launching the fadein before the page has finished loading.
I've also tried moving the .js file from the head in the header.php to the bottom after the Menu html. This again results in the menu html loading and appearing and then the Javascript runs and fades in the menu. Again not optimal as it doesn't look very good.
Here's the Javascript affecting it:
function transitionPage(){
$('body').css('opacity', '0').fadeTo(1500, 1,'swing');
$('.menu_open').css('opacity', '0').fadeTo(1500, 1,'swing');
$('a.transition').click(function(event){
event.preventDefault();
linkLocation = this.href;
$('body').css({zIndex:99}).fadeOut(3000, redirectPage);
$('.menu_open').css({zIndex:99}).fadeOut(4000);
});
function redirectPage() {
window.location = linkLocation;
}
}
Any help would be gratefully appreciated!
Start the page already opacity 0 then use jQuery to change it on document ready. I used CSS3 transitions as it is simpler but it could also be done with jQuery and the display: none property.
// CSS
body {
opacity: 0;
transition: opacity 1.5s;
}
// JS
$(function() {
$('body').css({opacity: 100});
});
http://jsbin.com/qecaha/1/edit
// CSS
body {
display: hidden;
}
// JS
$(function() {
$('body').fadeIn(1500);
});
http://jsbin.com/qecaha/2/edit
I have built a parallax scrolling intro for a clients website - the site contains many high res images - so I have created a quick loader which blanks out the screen with a full screen high z-index div and then uses the setTimeout method to fade in the page 4 seconds after document ready (not sure if this is the best way to do this but it works in every test I've tried).
I would like to disable the scroll to prevent users scrolling through the animation before it appears -can anyone recommend a good cross-browser method to do this?
If you want to fade in when all images are loaded, you can try this
var images = $('img');
var images_nbr = images.length;
images.load(function() {
images_nbr--;
if (images_nbr == 0) {
$('body').css('overflow','auto');
$('...').fadeIn();
}
});
Set
#mydiv {
overflow:hidden
}
in your parent div in CSS. Then, in your document, add this...
$('#mydiv').css('overflow', 'auto');
...in the function that fades in your content.
Thus, on load the page will be unscrollable, but when you fade in, the overflow property will be overwritten and allow the content to scroll.
.scrolldiv{
overflow:hidden;
}
$(window).load(function(){
$(".scrolldiv").css("overflow","auto");
});
You can try like,
initially add the below css on body
body {overflow:hidden;}
and after your setInterval function complete execution (whatever your loading function) just remove the style from body, like
$('body').css('overflow','auto');
I've looked at some similar posts regarding interaction delay after page load, but I can't seem to find anything regarding the classical a:hover disable.
The problem is that JS will load most likely slower than the CSS, and hacking CSS isn't going to work for this problem.
Situation
I have a home page animation. On page load, i have a stack of images coming in from the left and a div of absolute anchor tags coming in from the right (~ 2 cases per line), which both slide and meet in the middle. After page load, I set a timer to go through the stack of images, and the corresponding anchor tag highlights.
The problem is that this timer is broken when the user hovers over any of the anchors tags, and when this happens, the corresponding image fades in. And this interaction could be right on page load.
Is there any possible way of disabling anchors tags a:hover on page load/delay?
What I've tried
I cannot simply remove the a:hover class and replace it with another one of background-color:transparent, because my JS still picks up the onHover function (I could target onHover only for that changed class maybe..)
I am able to target each of the anchor tags on page load with an alert on mouseenter when accidentally hovering over:
//on page load, disable mouse-over ability on anchor tags
var disableOnLoad = function (ev) {
var target = $(ev.target);
var casesId = target.attr('id');
//if mouse is over one of the cases
if (target.is(".cases")) {
//disable CSS a:hover
$(this).removeClass('homeText a:hover');
}
}
Another thing I might be able to try is calling setTimeOut(function(){ onHover()) so that there is a delay, but that will effect after page load as well.
Any suggestions?
CSS:
#blocker{
position:fixed;
width:100%;
height:100%;
left:0;
top:0;
right:0;
bottom:0;
z-index:9999;
}
JS:
setTimeout(function(){
$('#blocker').remove();
}, 3000);
HTML:
<body>
<div id="blocker" ></div>
<!-- your stuff -->
make sure the blocker div is close to the body tag to insure no capture/bubbling issues.
What if your page started out with your links as NOT wrapped with anchor tags, and you use a setTimeout onLoad to append the tags 3 seconds later?
Have not tested this but prevent default may work for you"
$("a").mouseover(function(event) {
event.preventDefault();
// Run any other needed code here
});
(function(){
$("a").unbind('mouseover');
}).delay(2000); // delay 2 seconds
Better to run the unbind code after you know all images are loaded
you may also want to modify the selector from all a tags to a.class
Bit late to the discussion, but in case it helps anyone else, I solved my problem by adding pointer-events: none to the body element in CSS (using a class called pointer-none, and then removing it with JavaScript after a delay.
var timeout;
window.onload = function(){
timeout = setTimeout(function(){
document.querySelector('body').classList.remove('pointer-none');
}, 1500);
}
People asked similar questions before, but mine is with a twist:
I'm using Supersized jQuery plugin to load a single full-screen background image. The code loading the image is this:
<script type="text/javascript">
jQuery(document).ready(function($) {
$.supersized({
//Background image
slides : [ { image : 'http://www.cybart.com/bscg/wp-content/themes/Custom/images/backgrounds/bg.jpg' } ]
});
$('#content').delay(3500).fadeIn(600);
});
</script>
As you can see in the code, I chained the fadeIn effect after the "supersized" function. I want to fade in the #content div after the background image (bg.jpg) not just finished loading but also finished fading in. I used the solution I don't particularly like: setting a long delay before my fadeIn effect.
What would be the best way to fade in the content div after Supersized image finihsed fading in?
Would be grateful for your help!
If anyone is still looking for a solution, here's what I did:
Supersized.3.2.7.js
Right after the img.load function, within the base._start function, I added the following:
img.fadeOut();
img.bind("load", function () { $(this).fadeIn(750); });
Found my own answer:
the solution is to edit the supersized core js file. In the file, after this bit of code:
$('#supersized-loader').hide(); //Hide loading animation
element.fadeIn('fast'); //Fade in background
resizenow();
I added my own line:
$('#content').delay('fast').fadeIn('fast');
Worked like magic!
Have you tried using the jQuery .ready() function?
jQuery(document).ready(function($) {
$.supersized({
//Background image
slides : [ { image : 'http://www.cybart.com/bscg/wp-content/themes/Custom/images/backgrounds/bg.jpg' } ]
});
$.supersized.ready( function() {
$('#content').fadeIn(600);
});
});