How is this made? - Post ID 278752


Senior Advisor
11,018 posts
Online Now

I'm not so much into transformations, out of view thingies and such. Not yet, anyways. So I'm asking here:

Please look at the logo on this site: http://www.arendalfotoklubb.no/

The page is made with WordPress. But could someone figure out how the logo is made to shrink into nothing when scrolling the page? And how to achieve the same effect in RSD?
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.horgenhonning.net/
Component sharing for RSD, RFF and RBB: http://www.horgenhonning.net/sharing/



Registered User
1,564 posts
Online Now

Inger wrote:
I'm not so much into transformations, out of view thingies and such. Not yet, anyways. So I'm asking here:

Please look at the logo on this site: http://www.arendalfotoklubb.no/

The page is made with WordPress. But could someone figure out how the logo is made to shrink into nothing when scrolling the page? And how to achieve the same effect in RSD?


Looks to me like a shrinking header that comes into play when a certain amount of pixels have been scrolled

Can be done something similar within RSD but it's late now here for me (still suffering from the long journey yesterday, unless someone comes up with something for you in the meantime, I will look at it tomorrow.
The Sky Is A big Empty Space : But There Is No Room For Error
website https://rsdtutorials.com


Senior Advisor
17,829 posts
Online Now

I thought I already did an example of this for you Inger on another site.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
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 personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com


Senior Advisor
17,829 posts
Online Now

Never mind it's not quite the same.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
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 personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com


Senior Advisor
11,018 posts
Online Now

No, it was not the same, Eric. ;)
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.horgenhonning.net/
Component sharing for RSD, RFF and RBB: http://www.horgenhonning.net/sharing/



Registered User
579 posts

Would perhaps something like this simple RSD file be an example of the principle wanted please?

Frank


Registered User
579 posts

In case the RSD file posted above is not self-explanatory, the situation is as follows, with the row height of 2000px to allow scrolling.

(a) Picture-1 has a width of 100%, and therefore diminishes to zero size when its container has zero width.
(b) The container's regular state has -
height set at one pixel, so that it goes out of view immediately on scroll,
width set to match the width of the picture;
minimum width set to zero;
separate transition settings (duration 1 second) for the width and padding changes mentioned below.
(c) The container's out-of-view state has
width set to zero;
position fixed with top at 0px (ah, the magic of having something 'out of view' in a fixed position on screen);
two padding settings to keep the picture position stable during transition.

The above does the necessary transitioning on scroll. When a browser loads it seems at first to treat everything as having been 'out of view' and then coming into view. The picture therefore grows on load, and I decided to use a fixed-position duplicate picture to cover that problem.
(d) That picture's regular state has
position fixed at top 0px;
opacity set to zero;
transition for opacity set to 1 second like those in (b) above.
(e) That picture's out-of-view state has the opacity set to 1.

Frank

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.