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
4,782 posts
Online Now

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.
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 122279 Photo


Senior Advisor
14,447 posts
Online Now

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 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:
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
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 2699991 Photo


Registered User
4,782 posts
Online Now

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


Senior Advisor
14,447 posts
Online Now

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


User 283347 Photo


Registered User
388 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
14,447 posts
Online Now

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


User 379556 Photo


Registered User
1,533 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
14,447 posts
Online Now

Frank, I'm not able to make it work. I followed your steps exactly.
Ha en riktig god dag!
Inger, Norway

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



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.