Results 1 to 2 of 2

Thread: Slowing Fade effect using Featured Content Slider v2.4

  1. #1
    Join Date
    Jul 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Slowing Fade effect using Featured Content Slider v2.4

    1) Script Title: Featured Content Slider v2.4

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentslider.htm

    3) Describe problem: Is there a way to slow down the fade between text blocks? I can easily set the length of time a div stays visible, but want a nicer, slower transition between text divs. Here's an example:

    http://shortlands.co.uk/shortlands_2012/index.html

    The transition is just a little too fast for me.

    Thank you,
    Marita

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,371
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Go with a lower value for enablefade:

    Code:
    enablefade: [true, 0.1],  //[true/false, fadedegree]
    That's the increment of change. Each increment takes 50 milliseconds. At 0.5 it takes just two increments (100 milliseconds) to go from 0 to 1. At 0.1, ten increments (500 milliseconds - half a second) are required.

    I suppose you could even try 0.05, which would require 1000 milliseconds (one second). Or 0.02, that will make it a really gradual transition.

    Also, in the contentslider.css file, you need background and full width for the content divisions. Otherwise the transitions suffer from bleed through and look messy. Add the highlighted as shown:

    Code:
    .sliderwrapper .contentdiv{
    	visibility: hidden; /*leave as is*/
    	position: absolute; /*leave as is*/
    	left: 0;  /*leave as is*/
    	top: 0;  /*leave as is*/
    	padding: 5px;
    	/* [disabled]background: white; */
    	/* [disabled]width: 390px; */ /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
    	height: 100%;
    	width: 100%;
    	background: url(images/bg.jpg) -57px -561px #252525;
    
    filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
    	-moz-opacity: 1;
    	opacity: 1;
    }
    Last edited by jscheuer1; 07-11-2012 at 08:22 PM. Reason: saw missing bg color, later saw it was an image
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •