Old and new photo interactive overlay...

User 219465 Photo


Registered User
324 posts

Hello all, Not sure if this would be the correct forum for this, but check out the website below. I ma looking to overlay old and new photos with an interactive option. Would Responsive Content Slider we able to do this?

https://www.theguardian.com/artanddesign/ng-interactive/2015/jun/22/american-civil-war-photography-interactive
User 2699991 Photo


Registered User
2,564 posts

Marc Nevue wrote:
Hello all, Not sure if this would be the correct forum for this, but check out the website below. I ma looking to overlay old and new photos with an interactive option. Would Responsive Content Slider we able to do this?

https://www.theguardian.com/artanddesign/ng-interactive/2015/jun/22/american-civil-war-photography-interactive


Hi Marc
One would be able to do something with old & new images, but not exactly like the example, (or at least not with the way RSC is, now), some outside code would be needed to get close to your example.
The Help You Need: When You Need It The Most
User 122279 Photo


Senior Advisor
12,675 posts

Would it perhaps be possible to use two containers on top of each other, one with the old, the other one with the new image, and then use the out-of-view state in connection with opacity change of the two images? Or maybe just the top image needs the opacity change? And in transitions set delay and duration? Just thinking...

Or if not the out-of-view, maybe some button to trigger the changes?
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 2699991 Photo


Registered User
2,564 posts

Inger wrote:
Would it perhaps be possible to use two containers on top of each other, one with the old, the other one with the new image, and then use the out-of-view state in connection with opacity change of the two images? Or maybe just the top image needs the opacity change? And in transitions set delay and duration? Just thinking...

Or if not the out-of-view, maybe some button to trigger the changes?


Can't do out of view etc in RCS at the moment (unless I have missed a couple of updates
The Help You Need: When You Need It The Most
User 2699991 Photo


Registered User
2,564 posts

Marc Nevue wrote:
Hello all, Not sure if this would be the correct forum for this, but check out the website below. I ma looking to overlay old and new photos with an interactive option. Would Responsive Content Slider we able to do this?

https://www.theguardian.com/artanddesign/ng-interactive/2015/jun/22/american-civil-war-photography-interactive


You could also do it easier with the Orbit Slider thingy (foundation) because you can have multiple orbit slider thingies on a page without messing about with ID changing etc (as you would have to do with RCS.

I have a component for Orbit, which uses a FADE effect, that's pretty neat, and is almost a pure crossfade.

But even this way the visitor would have to manually change the image (unless someone knows some js magic, that could change the image on scrolling
The Help You Need: When You Need It The Most
User 122279 Photo


Senior Advisor
12,675 posts

I was thinking of trying the out-of-focus thing in SD3. Sorry, I should have mentioned that.

Don't know, but I have a 'before/after building block in my sharing repository. Just for RSD at the moment, but it will work in SD3 too. It's not the same as on that web page, but...
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 283347 Photo


Registered User
344 posts

You might find this helpful??? I have no idea if it meets your needs or not, but it looks like it might.
http://www.dynamicdrive.com/dynamicindex4/beforeandafter.htm

Good luck.
MJ
User 122279 Photo


Senior Advisor
12,675 posts

Mark, I have used the one you mention in 'the old days', before the world got responsive. I've also tried to responsify it, but that didn't go very well.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 379556 Photo


Registered User
952 posts

I haven't found a way of doing it with Responsive Content Slider.

In SD V3 it seems possible.
1. I put a coloured picture on the page, and do the following in the Styles tab for it.
2. I push it out of view by content above it (or perhaps a top margin of, say, 110vh).
3. In the 'Out of View' state I go to Effects > Filters & Blend Modes and set Grayscale to 1.
4. Still in Effects I go to Transitions and set a Duration (say 1 second) and Delay (say 3 seconds).

The effect won't be seen in Preview, but will be seen in 'Preview on ...'. I don't seem to be able to test it in IE since the latest big Windows update, but I doubt it would work in that. It works in Edge.

Frank
User 122279 Photo


Senior Advisor
12,675 posts

Frank, I'm not able to make it work. I followed your steps exactly.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/



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.