Nice one, this is more a pageloader imo, because there is no intro and outro. Is it possible to adapt the code ... So when you click to navigate to another page : 1) outro animation before loading starts 2) loading screen 3) When page is fully loaded, start intro animation. Keep up the good work!
You're a hero! All other tutorials make it way to complex to integrate into web content management systems by opting JavaScript. Since yours is very streamlined using just CSS I was able to add it into Shopify by adding the code to the theme.liquid file. Thanks a lot.
Hi, would it somehow be possible to have different transitions for different pages? I am getting error: Cannot redeclare function add_code_on_body_open (obviously). But how could this be fixed?
Cordial saludo, que buen trabajo… Pero estoy tratando de implementar la solución no al cargar la paginas, sino al salir de ella, es decir desvanecer en el out, con el fin que apenas se haga clic desvanezca y el usuario tenga la sensación de saber que el clic ya está en proceso, el que está es efecto de entrada, me interesaría efecto de salida. Agradecería si me puedes ayudar, muchas gracias
Thanks for watching. That will require custom Javascript to load an animation on page exit. Here's a link to get started: stackoverflow.com/questions/18873574/css-transition-property-on-page-exit
A clean and informative presentation, but the overall rendering result -- from my implementation on an Astra starter theme -- produces a 'hit and miss' effect. On one page, perfectly smooth, with another, slightly glitchy.
Hi, can you adjust this code so the transition fades in instead of appearing quickly? And also is it possible to code this so the duration of the transition actually matches how long the page takes to load? Thanks
I'm wondering if anyone is able to help me. I downloaded code snippets, copy and pasted the code, it wasn't working exactly as I'd hoped, so I deleted it. I deleted the snippets and deleted the 'Code Snippets' plugin from WP, but the code is still running, and I don't know how to get it out of the site. So now it's running and broken. Help!
Thanks! Yes with CSS animations you can do pretty anything. You can add a (left:100%;) to your keyframes to animate on the x-axis. Here's some different ways to animate CSS on the x-axis: stackoverflow.com/questions/41587802/css-animation-from-left-to-right
