How is this made? - Post ID 278754

User 122279 Photo


Senior Advisor
14,447 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 work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
4,782 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.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 187934 Photo


Senior Advisor
20,181 posts

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.

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 187934 Photo


Senior Advisor
20,181 posts

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.

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

No, it was not the same, Eric. ;)
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 379556 Photo


Registered User
1,533 posts

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

Frank
User 379556 Photo


Registered User
1,533 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.