Slide in panels - Post ID 255537

User 2879688 Photo


Registered User
172 posts

Has anyone tried adding a slide in panel. These seem to be jqueery or css. There are a couple here over the two pictures at the bottom of the page. This is just an example. I was hoping to get a text box to appear from the RHS of the screen using the same sort of effect.
http://seriftemplates.com/pictora/about.html

Any ideas how to add the code etc.

Thanks T.
When did Noah build the ark?
‘Before the rain Gladys, before the rain!’
User 38401 Photo


Senior Advisor
10,951 posts

Have you tried CC's new content slider? That will do everything you're needing if the website is showing me correctly. I own it as well, but haven't had a chance to try it yet, planning on it with the site I'm working on right now. Might want to take it for a Trial spin and see if you like it. You can see what it all has on this site here:
http://www.coffeecup.com/responsive-content-slider/
User 2879688 Photo


Registered User
172 posts

Hay Jo
Thanks for the reply. I have RCS. I was stuck with how to start the slide movement by touching or scrolling over the picture and also how to stop the slider from repeating or looping. If you have any further info I would be glad to here it.
Thanks Tim
When did Noah build the ark?
‘Before the rain Gladys, before the rain!’
User 38401 Photo


Senior Advisor
10,951 posts

Wish I could help you there, hopefully some others that have delved into the app can chime in here as although I have it, I haven't tried it yet. When I look at the website page for it though it looks like it does some pretty amazing things so I'm sure some others will come help on it some. :)
User 271657 Photo


Senior Advisor
3,816 posts

Do you mean the 2 images under "Who We Are"?
Here's a nice example with included CSS/HTML:
http://jsfiddle.net/realseanp/c4e08hy7/9/
You can experiment with the transition (top, bottom...) on there as well.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 434929 Photo


Ambassador
937 posts

How about this sample, purely done with Responsive Site Designer, no jQuery nothing.

it could be even better if I spend little more time .
Attachments:
Guys at coffeecup are awesometacular.
User 2879688 Photo


Registered User
172 posts

Thanks for all the responses everyone.
Mansour ... brilliant!! a slider without a slider!!
Without going into massive detail, as i can probably analyse you RSD file; Can i possibly ask you about the basic principles you have used to achieve this please or areas i should look at. Have you used any code snippets etc.

Thanks Tim
When did Noah build the ark?
‘Before the rain Gladys, before the rain!’
User 2879688 Photo


Registered User
172 posts

Hi Mansour
I thought perhaps this might make an excellent article or tutorial if you wanted to take it up with the CC guys?
thanks Tim
When did Noah build the ark?
‘Before the rain Gladys, before the rain!’
User 434929 Photo


Ambassador
937 posts

The concept quite simple

Add two container into column,
step 1- One with background image attached plus as required height
step 2 - Second container with your text, image element and etc.. with max & min height as 50px with negative margin to overlay on first container plus overflow hidden.
Step 3 - on hover add transition and positioning either with padding and margin or relative and absolute positioning and transparent background to cover corner to corner of first container.
you are done:)
Not needed but you can try to play around with negative y axis translate effect on hove state too.

Note: not sure how behaves on mobile as mobile doesn't support hover.

Hope I am clear :)
Guys at coffeecup are awesometacular.
User 271657 Photo


Senior Advisor
3,816 posts

The example on JSFiddle above only requires HTML and CSS.
It uses CSS/CSS transitions for the slide in effect, direction, speed and opacity. No JS. And no worry about hover states. :)
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.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.