All geek questions in one place

Smooth transition between html pages with boot image animation

This, of course, is what I'm looking for: http://hoverstud.io , I am NOT looking for something like this → http://bit.ly/11jdunO , which has too many problems and errors.

Can someone help me find a tutorial or some links?

+4
source share
3 answers

I'm not sure what you want exactly, but you can use code like this:

$(document).ready(function(){ // to fade in on page load $("body").css("display", "none"); $("body").fadeIn(400); // to fade out before redirect $('a').click(function(e){ redirect = $(this).attr('href'); e.preventDefault(); $('body').fadeOut(400, function(){ document.location.href = redirect }); }); })

This will cause the entire page to disappear. If you want to tag only part of your page, change body to what you want.

+7
source

I would use some newer and cleaner tools for this. You can currently use CSS transitions for this.

Here is a very simple example:

 <html> <head> <style> .container { opacity: 0; transition: opacity 1s; } .container-loaded { opacity: 1; } </style> </head> <body> <div class="container"> <!-- All the content you want to fade-in here. --> </div> <script> $(document).ready(function() { $('.container').addClass('container-loaded'); }); </script> </body> </html>

I assume that the transition between pages is a complete reload of the page, so the container-loaded class disappears after the page reloads.

But it should be almost trivial to implement for single-page web applications using any popular Turbolinks framework or something like that.

Other notes:

  • If you want to wait for page images to load, you can use document.onload instead of $(document).ready() .
  • It would be almost easy to implement without using jQuery if document.querySelector and classLists are available to you.
+6
source

I built something like this.

First place #preloader in HTML on a div like this

 <div id="preloader"></div>

If you want, you can place the gif inside.

Then set up some CSS:

 #preloader { background: #FFF; bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 9999; }

Now make a few script as follows:

 $(window).load(function() { $('#preloader').delay(350).fadeOut('slow'); }); $('a').click(function(e){ e.preventDefault(); t = $(this).attr('href'); $('#preloader').delay(350).fadeIn('slow',function(){ window.location.href = t; }); });

And you're done :)

The first part is to make your preloader visible when the window loads, and then fadeOut.

Secondly, attach a click to the firework for fadeIn preloader and redirect to the architect href.

+2
source

Source: https://habr.com/ru/post/1484795/

More articles:


All Articles