Jump to content

Archived

This topic is now archived and is closed to further replies.

mtaus

Editing RevSlider transition and text motion

Recommended Posts

mtaus

I'd like to change the way the text appears in RevSlider so that it fades more gently or just transitions in with the new image, rather than an abrupt slide in. I've tested all the transition effects and none of them seem to do the trick. I'm using the Fade transition, but the text still flashes in relatively abruptly.

 

Any suggestions?

 

Thanks

Share this post


Link to post
Share on other sites
Danny

Hi,

 

What code have you used ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
mtaus

I haven't edited the code at all, just tried a few of the transition options in the DMS panel. Is there a decent set of instructions that you can point me to?

Share this post


Link to post
Share on other sites
James B

Hi there,

 

Unfortunately this would be a custom css fix, therefore we don't have any specific instructions saved for this type of modification as they are outside of the DMS control panel etc.

 

The transition for the text is set in the core code for the slider,

 

.revslider-container .slider-content h2 .slider-text {
    transition: ...........;
}
 
There is a css guide and explanation on different css transitions which might help here - http://www.w3schools.com/css/css3_transitions.asp

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
James B

Excellent, glad it worked :-)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
sheilahoff

I found this post while searching for an answer to my question, which is basically the same thing. This sounds like you found a solution but it isn't really clear.

I'm working on a client site and she LOVES everything about the design EXCEPT the bouncing in and out of the RevSlider. I've tried everything to make it smooth and cannot figure out what I need to do. Can you help? Please spell it out for me. 

 

Dev site at http://www.testing.hoffmangraphics.com

Thanks.
Sheila


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
mtaus

sheilahoff I used the following:

 

.revslider-container .slider-content h2 .slider-text {.transition(all 2s linear); transition-duration:2s}
 
Good luck!

Share this post


Link to post
Share on other sites
sheilahoff

Thank you for responding. Sadly, that didn't do it for me. I suspect it was for the overlaid text. I need to control the background slides.

 

I've now removed the variable of the text, adding it to the slide in Photoshop (client wanted more typographic control). But even now the slides bounce as they transition. I emailed support for the underlying script on Code Canyon, Revolution Slider. It may be worth the $15 to try it.  Here's what they offered me:

 

thanks a lot for your feedback. It seems that some styling is missing from the containers. It miss the settings.css file or you copied into the compiled-css file and you lost some important settings during the copy.

 

i would advise to start again, and first use the examples, adding the header, content and script parts to your document. Once you done this and the slider works fine (without this Bouncing) than you can start to copy the css parts step by step to your main style sheet, acting on the order of the styles. there are soo many things different, that i need to look also longer to find the misstakes.

 

Please let me know when you added the example 1:1 to your current page, without compiling script parts from the plugin to your style sheet, and then i take a look again (if the problem still exist).

 

So I think part of the issue is just what we have included in DMS. I'm using a child theme and if someone could help, I'm betting there's some tweak in the js that would fix this.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
sheilahoff

I just want to close the loop on this and say

Never mind...I got it sorted out.

 

I’d had this to make the slides fit the full width of the box.

 

#site .slotholder img {

width: auto !important;

height: auto !important;

left: 0 !important;

top: 0 !important;

}

 

When I removed it the bounce was gone but it was cutting off the top of the images. So I added it back with height 100% and it seems fixed.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites

  • Similar Content

    • stijnxo
      By stijnxo+
      The Filtering of categories in the Masonic Gallery refreshes back to ALL categories when the DMS Revslider loads a new image?
      Anybody any idea? See Artists Category refreshes back to ALL when the DMS Revslider with images on the top loads a news image on http://www.18hrsfestival.nl/
    • carl
      By carl+
      Trying to convert a site over to PL5 from DMS2. Can we use revslider? Can any portion of DMS2 be editable or imported through PL5?
      I'm trying to wrap my head around the new PL5 os, but things have changed so much it like learning a new software. I DO like the new UI! Great job.
    • jennajonesdesign
      By jennajonesdesign+
      Hi Guys, 
      I just went live with this site. http://bikenet.org/
      I can see the video background in Firefox, Chrome and IE on my computer as well as my husband's computer and my phone. So I am not able to see any problem. 
      But, my client says she cannot see the video background in Chrome?? Any ideas? 
      Let me know. Thanks!
       
      Jenna
    • Bleuy
      By Bleuy+
      Problem: Full Screen Revslider content runs off the screen on mobile devices (particularly calls to action buttons).  I've used the <br> to break up the text, however the call to action buttons run off the screen.  Therefore without making the fix too technical (and I can see some VERY technical resolutions on here) my client just wants to simple centre justify the text when being viewed on a mobile device.  
      Any ideas on how best to achieve this in a simple, non too technical way?
      Thanks very much in advance
       
    • AliceNicholls
      By AliceNicholls+
      Hi there,
      I'm trying to place the menu bar on top of a Revslider image using negative top margins and z-scores to place the Revslider under the menu as per this forum post: https://forum.pagelines.com/topic/37996-menu-inside-full-width-slider/
      It looks great in Chrome and Safari but in Firefox the slider doesn't spread out across the page. Instead it stops when it collides with the items in the menu (i.e. logo and menu items). Any advice on what I'm doing wrong?
      The full site is here: http://seemly-hobby.flywheelsites.com/
      Thanks a lot!
      Al

×