We Keep Coding

Trigger a js animation when opening the page

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');
});

using GIF image on scroll of page

How can I animate an image on page scroll in a single page website so that when I scroll to next section it animates? Suppose I am using a closed eye which opens when I scroll to next section.

You can use the libgif library here: https://github.com/buzzfeed/libgif-js
It allows you to start, stop, or advance the gif frame programmatically. Here is an example straight from the source:
<script type="text/javascript" src="./libgif.js"></script>
<img src="./example1_preview.gif" rel:animated_src="./example1.gif" width="360" height="360" rel:auto_play="1" rel:rubbable="1" />
<script type="text/javascript">
$$('img').each(function (img_tag) {
if (/.*\.gif/.test(img_tag.src)) {
var rub = new SuperGif({ gif: img_tag } );
rub.load(function(){
console.log('oh hey, now the gif is loaded');
});
}
});
</script>
You can then use a combination of get_length (the number of frames in the gif), move_to (to go to a specific frame), and onscroll in jQuery/JavaScript to set the frame as the user scrolls your page.

There is also ScrollMagic which specializes in exactly what you are asking. Not sure about gif animations specifically, but they have tons of examples for different element animations.

Images "jumps" into the grid? how to stup the jump effect?

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

Jquery Loop function on scroll only

First, how to make this function run ONLY on scroll? Second, how to loop/repeat this function ONLY on window scroll infinitely?
$(function(){
$(".media-nav2").transition(
{ y: -600 }, 1500,
'cubic-bezier(.69,.19,.35,.83)');
});
I'm using the above function with this plugin https://github.com/rstacruz/jquery.transit.
Here is my webiste http://dev1.envisionwebdesign.co/johnreid/campaign.html. It's a one page parallax with no scroll bars. You navigate using the top menu and mouse/touch scroll. If you check this link http://dev1.envisionwebdesign.co/johnreid/campaign.html, you can see that the div .media-nav2 immediately transitions when the page loads.
Basically I'm trying to create a parallax effect where when you scroll down to the next page/section, the div .media-nav2 scrolls up. Here's a link to the fiddle http://jsfiddle.net/newmedia85/92YgR/. I have included a link to the onepage parallax jquery for the entire site. The way the one page parallax works is making it really hard for me to solve this. Any help appreciated!

use jquery scroll function
$(window).scroll(function () {
$(".media-nav2").transition({
y: -600
}, 1500, 'cubic-bezier(.69,.19,.35,.83)');
});

Div that appears on Scroll but not on page load

I'm making this web page and I want a div to appear only on scrolling down 300px from the top of the page. This is the JavaScript i borrowed from the net:
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
var y = $(window).scrollTop();
if(y > 300){
$("#topdiv").fadeIn("slow");
} else {
$("#topdiv").fadeOut("fast");
}})});</script>
The only issue with this is that when the page loads, the div appears on top and then disappears once the user starts scrolling. I dont want the div to appear once the page loads. Something like this is exactly what i want:
http://www.calmdigital.com/
Would greatly appreciate help!

on document ready hide the div
$(function(){
if($("#topdiv").length>0)
$("#topdiv").hide();
});
or hide it via css
#topdiv{
display:none;
}