I want to launch an animation as soon as my home page opens, but it takes time to display (the body remains displayed for a while).
My script :
$(document).ready(function(){
$('.logo').hide();
});
$(window).load(function(){
$('.logo').fadeIn('fast');
$(".logo").animate({
marginTop:'0px',
opacity:1
},200,'swing');
});
I tried to manipulate this code but I'm new to javascript :(
$(window).on('load', function() {
$('.logo').hide().fadeIn('fast').animate({marginTop:'0px', opacity:1}, 500, 'swing');
});
This code uses the $(window).on('load', function(){}) function to ensure that the entire page, including images and other assets, is loaded before running the animation.
The $('.logo').hide().fadeIn('fast').animate({marginTop:'0px', opacity:1}, 500, 'swing'); function hides the logo initially, then fades it in quickly, and finally animates it by moving it up by 0 pixels and setting the opacity to 1 over a period of 500 milliseconds using the "swing" easing function.
Note: Make sure that you have included the jQuery library in your HTML file for this code to work. You can do so by adding the following code in the head section of your HTML file:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I hope this helps!
Great thanks a lot. I just forgot to say that the logo goes up. I forgot to script. I'm giving you all of it, but of course just the fact that the logo goes up is enough for me. Thanks again, you're GREAT :)
<!-- /logo descend -->
$(window).on('load', function() {
$('.logo').hide().fadeIn('fast').animate({marginTop:'0px', opacity:1}, 500, 'swing');
});
<!-- /Slider goes up a bit -->
$(document).ready(function(){
$('#slider').hide();
});
$(window).load(function(){
$('#slider').fadeIn('slow');
$("#slider").delay(400).animate({
marginTop:'-1200px',
opacity:1
},800,'swing');
});
<!-- /logo and Slider rise (2 scripts) -->
$(document).ready(function(){
$('.logo').hide();
});
$(window).load(function(){
$('.logo').fadeIn('slow');
$(".logo").delay(200).animate({
marginTop:'-2400px',
opacity:1
},800,'swing');
});
$(document).ready(function(){
$('sl.slider').hide();
});
$(window).load(function(){
$('.sl-slider').fadeIn('slow');
$(".sl-slider").delay(800).animate({
marginTop:'0px',
opacity:1
},800,'swing');
});
Related
I have a website in squarespace. There is a gallery page which has some text and when scrolled down it shows some pictures and text fades away, all i want is to slow the fading transition effect of the page, anyone can help? i tried to add the following script in the header code injection but it didn't work
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script type="text/javascript">
window.sr = ScrollReveal();
sr.reveal('#collection-5aa2fea971c10b74be7193dd', {duration: 1500});
</script>
Try this
sr.reveal('#collection-5aa2fea971c10b74be7193dd', {delay: 1500});
This is my script;
<script src="http://static.tumblr.com/mviqmwg/XyYn59y3a/jquery.photoset-grid.min.js"></script>
<script>
$(document).ready(function() {
$('.photoset-grid').photosetGrid({
gutter: '0px',
});
});
</script>
<!-- /Photoset-grid script -->
This makes the images "jump into grid effect"
I want everything to show up normaly.
Is there a hide effect with css and then show it when everything is loaded?
Thank you for anny advice!
If you look at the source for Photosetgrid:
https://github.com/stylehatch/photoset-grid/
You can see that they use a simple style tag: style="visibility: hidden;"
If you prefer to use jquery it would be:
$(".photoset-grid").hide();
To make it visible it would be this way:
$('.photoset-grid-basic').photosetGrid({
onComplete: function(){
$('.photoset-grid-basic').attr('style', '');
//or $('.photoset-grid-basic').show();
}
});
You can see more info about its usage here:
http://stylehatch.github.io/photoset-grid/#demo-basic-usage
I'm putting together this website: www.mccraymusic.com/newsite and I am trying to make it so that the navigation bar (which I know is not styled) fades in after the background fades in. Instead it seems to want to fade out.
I thought I have all the code in place and javascript correct. I actually want it so that the navigation bar and content I add to the site will fade in, after the initial background fade in occurs.
Do you I need to move some stuff around in my html? or how can I achieve this? I don't think I'm far from getting what I want
To start an animation after another, you can use the callback of .fadeIn() (or any effect function). Something like:
$( "#div1" ).fadeIn(function(){ $( "#div2" ).fadeIn(); });
Or (easier to read):
$( "#div1" ).fadeIn(function(){
$( "#div2" ).fadeIn();
});
div1 will fade in, and when it finishes, div2 will start to fade in.
Take a look in the docs: http://api.jquery.com/fadeIn/
I used this to fade stuff in with jQuery... pros will tell you this is a terrible practice... because you have the div initially set to display: none... and if javascript is off - then it will never fade in... but this works. and if it's just for a band or artist - chances are - no one is going to be looking at this site on IE 6 etc... but look in to no.js or whatever and have a back up plan.
<!--fade in div-->
<script type="text/javascript">
$(document).ready(function() {
$("#div-name").css("display", "none");
$("#div-name").fadeIn(15000);
});
</script>
Try callback function of jQuery
<script type="text/javascript">
$(function() {
$("body.bg").fadeIn(200,function(){
$('.second').fadeIn()
});
});
</script>
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);
});
});
I have implemented jQuery tabs and am using the opacity technique to fade one tab out and then fade another in. I would like to have the second image fade over the first and then hide the first image. That way the background behind the tabs will not be shown. Please advise.
Current jQuery code:
<script type="text/javascript">
$(function() {
$('#web-select').tabs({ fx: { opacity: 'toggle', duration:'fast'} });
});
</script>
Your code above will work in the 1.6 UI, but in the 1.7.2 UI version try the following:
$('#web-select').tabs('option', 'fx', { opacity: 'toggle', duration: 'fast' });
You could use the .show() and .hide() snippets to do such a thing!