26
Minimal Page Transitions with jQuery & CSS (blog.adam-marsden.co.uk)
almost 6 years ago from Adam Marsden, Developer, Designer & Maker
21 comments
Steve Sunderland, almost 6 years ago
You realize that visitors with javascript disabled just see a blank page?
Norm Sheeran, almost 6 years ago I've always wondered, who disables JS in thier browser these days?
Jim Silverman, almost 6 years ago
most recent stat i saw was 0.2% globally, with much higher rates in developing countries. https://blockmetry.com/blog/javascript-disabled
Norm Sheeran, almost 6 years ago Interesting, I personally feel your adverage website doesn't need to consider 0.2%.
Chase Giunta, almost 6 years ago
Those visitors with javascript disabled, by now, expect half the internet to be broken anyway.
Account deleted almost 6 years ago Why would people read an article about Jquery with javascript disabled?
That's not the point. His website (and this technique) is unusable if javascript is disabled. It would take less time to fix it than to write this comment.
Alex Robertson-Brown, almost 6 years ago Its a pretty easy fix to modernizr / have a .no-js class. Surprised it wasn't considered
Gareth Lewis, almost 6 years ago
Some people are fine with that fact. I would happily use a JavaScript framework like ReactJS, AngularJS or Vue if it improved the user experience of the 99.8% of visitors that do have JavaScript enabled.
Adam Marsden, almost 6 years ago
Hey Steve!
Took your advice onboard and have tweaked the code so that the first fade in is done via CSS so that way a user with JS disabled will see the site.
Nice work my friend!
Luan Gjokaj, almost 6 years ago
Nice & simple. I use the same technique in my projects. You can do much more complicated transitions with CSS.
Dennis Eusebio, almost 6 years ago
I think this looks clean, but I prefer a page to just load instantly. On first use, the transitions are nice, but if this is a site where you're going to click through a lot of pages, it gets a little cumbersome.
Vince P., almost 6 years ago
I much more prefer the effect of turbolinks.
Paul Kinchla, almost 6 years ago
If anyone is interested I came up with an implementation that does not use JQuery and allows content to be accessed in the rare case that JavaScript Fails
Awesome job! Love that you've removed jQuery as a dependency.
I made a change to the CSS & JS on my post so the content is accessible even if JS is disabled now.
High Five
I updated my post with a note about this and added a direct link.
Brandon S, almost 6 years ago
Not trying to sound pretentious, but do people still use jQuery?
Aaron Sagray, almost 6 years ago
Yes. It's fine for websites (not apps)
Aaron Wears Many Hats, almost 6 years ago
It does sound rather pretentious I'm afraid... It's the sort of question people who only care about the latest trends and not battle-hardened solutions for their clients would ask.
jQuery is used by 96.2% of all the websites whose JavaScript library we know. This is 72.7% of all websites.
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now