Fade In/Out Page Loading Effect On Pages

  • 1
  • Question
  • Updated 8 years ago
  • Answered
How do I implement a fade in/out effect to my pages when a user loads them?

This is what I am talking about:
http://www.google.com/chromebook/#fea...

After you go to the website, click on a navigation link. The effect will be made clear.
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
  • Curious

Posted 8 years ago

  • 1
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I see what you want. They made this by using one page and dynamically creating all of their pages on ONE actual page. They used lots and lots of jQuery to accomplish this effect. If you simply want your pages to fade in when you enter the page I can write you a fast script right now if you want that. But it wont be exactly like Google's. I can make something like that, but that'd be way to much work. Like it would require to re-make all of your pages' content in one HTML widget and the links are made to go to specific divs and hide one and show the other using jQuery/JavaScript. I really like that effect, too. Here's another awesome website by Google: http://google.com/nexus Click on each link at the top, and then for the best effect, click on the Gallery. That's very neat. I can make that from scratch but it would take hours and hours of coding and hard work. (And LOTS of HTML widgets)

Let me know if you want the pages to fade in when they load, and if so, let me know what color you want them to fade in from, and if you want them to fade out too.

Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Wait, you don't even have to add the cursor:pointer; in the style="" just removed href="" and it should work.
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
I need the style attribute to be defined in order to even display the button in the first place. Perhaps we should chat with gmail or Skype sometime so we don't spam this forum. It's also hard to describe what to do with code when I type it in the chat box and it renders instead of displaying it as text.

I will delete this post as soon as you send me a direct message on Skype or send me an email to prevent other users to get ahold of it.

Skype: Kr3m1in
Email: Kr3m1in@552clan.com

I'll be on wrapping up finals tomorrow so that will put me online at 11:00 or so.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Is that email through Google Apps/Gmail?
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
Yep.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Ok I'll email you.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
 Hi Michael,
 

Nathan is just the right person to help with this. I seem to recall his help on a different thread: http://forum.yola.com/yola/topics/pag... which may be of assistance to you as well!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I have a better an easier code now since I learned jQuery. That one still works but I have a better one with more effects now. I'll post a shorter code below to fade in the page.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
 Cool Nathan!  Thanks for your help on this!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No problem :) I'm making a test page really quick. Also, whenever a link is clicked, it will fade between pages just like on that example that Michael gave a link to. All he has to do is add a small code to each page in an HTML widget and it will fade from page to page very smoothly. I'm almost done with it, about 5 more minutes.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I'm done! I decided to just put the instructions to implement it onto the example page itself, since it's easier. Just go to this URL to see the fade effect and click on each tab to see all of the pages fade in and out as you go between pages:

http://tester3.yolasite.com/super-fad...

At first when you first view the pages it may not look that nice but after you click on each tab and view the pages and they get cached, it looks and is a lot smoother.

I hope this helps! :)

If you have any questions, please let me know.

I'll be on tomorrow at about 4:00PM EDT, so if you ask any questions, I'll answer them after 4:00PM tomorrow (EDT). (Just letting you guys know so you don't think I'm ignoring anyone)

Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Even when you click on the link to come back to this thread it fades out! I think its really cool...
Photo of Michael Cooke

Michael Cooke

  • 126 Posts
  • 14 Reply Likes
Thanks! To Yola reps: Mark this as answered.