smooth page transitions - Post ID 271684

User 2879688 Photo


Registered User
192 posts

Hi Forum
has anyone managed to do smooth page transition.
In other word pages not jumping instantly between each other but with some slight fading in etc.
I havent got a clue about how CSS works!
I have a link
https://css-tricks.com/add-page-transit … hstate-js/
Ta
Jazz isn't dead it just smells funny!
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

Here's a good example. I haven't tried to implement in any cc app but it looks simple enough even if you need to add custom css.
http://jsfiddle.net/SO_AMK/VV2ek/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

I tried in RSD2, and it is very easy. :)
Maybe I add it to my selections of components...
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2879688 Photo


Registered User
192 posts

Hi All thanks for the replies
I'm still unclear about what code to put in the header or footer.
Could you possibly give some step by step instruction.
I've added code before but I don't understand it or am able to write help
Thanks
Tim
Jazz isn't dead it just smells funny!
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Check out the second link in my signature. I just created a transition page with RSD. It should be easy to do the same for RFF.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Well, quick and dirty, a RFF version has just been added...
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2879688 Photo


Registered User
192 posts

Hi Inger
Haven't had a chance to use it yet but I will very soon.
Thanks for the help and appreciate the rff. version.
I'm not really bothered if it's 'dirty' or not. If it works, it works. Good enough for me. Occam's Razor....
The simplest solution is the most likely answer!!
Thanks Tim
Jazz isn't dead it just smells funny!
User 2879688 Photo


Registered User
192 posts

Hi Inger
Hope your still there....
Tried the rff. file. Ive only got RSD 1.5 so i cant open that file
I guess you have to add the ID ie 'fade-in' to each column. the problem is I can only use this once. Ive added the css fading-style.css and the script to the header
Am i missing something.

Thanks Tim
Jazz isn't dead it just smells funny!
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

I haven't got RSD1.5 any more, so I can't make an example for that.
But you have a couple of options:
If you want certain parts of your page, but not all, have this transition: Change in the style sheet '#fade-in p, #fade-in img' to '.fade-in' (mind the dot in front of fade-in!). And then remove the ID fade in from the column. Then you can give each element you want to fade in the class fade-in.
Otherwise, if you want the whole page to fade in, let the ID in the style sheet say just '#fade-in', and give this ID fade-in to the grid.

I think in both cases you need to first export the project as is, then pick up the custom style sheet to edit it, and then re-import it to the Resources.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2879688 Photo


Registered User
192 posts

Hi Inger
Marvellous!
Thanks for that.
That makes more sense.
Thanks for helping out again
T.
Jazz isn't dead it just smells funny!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.