HTML5 Parallax Slider Support Product Page

Answered

Outgoing duration stops outgoing slide

Asked 22 Jan 2013 13:39:36
1
has this question
22 Jan 2013 13:39:36 Jamie oates posted:
hey guys having a slight problem with the plugin, when ever I add a timing to the outgoing duration its stops the slide effect on outgoing.
Instead it fades out......

Replies

Replied 22 Jan 2013 14:47:02
22 Jan 2013 14:47:02 Vulcho Vulev replied:
Hello Jamie.

can you specify the exact values you had filed in the user interface of the product?

Regards:Vulcho.
Replied 22 Jan 2013 16:28:10
22 Jan 2013 16:28:10 Jamie oates replied:
Hi Vulcho

I have two sliders created both presenting the same problem, probley best if I provide you the code of the two...
Hope its not to much
All values have been entered using the DW interface.

Slide 1:

<div class="dmxParallaxSlider" id="dmxParallaxSlider1" style="width:1000px;height:300px" data-slide-

title="Slide 1" data-selected-slide="4">
    <div class="dmxParallaxSliderSlide" data-slide-title="Slide 1">
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index:30; left:-43px;top:36px" 

data-delayout="520" data-delayin="20"><img src="Images/slider/girl_shoping.png" width="220" height="260" 

alt="ecommerce onlineshop"></div>
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index:30; left:219px; top:36px" 

data-delayin="220" data-delayout="320"><img src="Images/slider/man_dance.png" width="220" height="260" 

alt="Entertainment"></div>
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index:30; left:98px; top:36px" 

data-delayin="120" data-delayout="420"><img src="Images/slider/girl_office.png" width="220" height="260" 

alt="Business &amp; Enterprise"></div>
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index:50; left:443px; top:46px" 

data-delayin="260" data-delayout="0">
        <p>What ever the purpose...</p>
      </div>
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index:50; left:513px; top:105px" 

data-delayin="300" data-delayout="120">
        <p>We create the Site You need!</p>
      </div>
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index:50;left:500px;top:157px; 

width:547px" data-delayin="350" data-delayout="240">
        <h1>Business, Ecommerce, Entertainment!</h1>
      </div>
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index:60;left:580px;top:250px">
        <div class="btn"><a href="#" onClick="dmxParallaxSliderAction('dmxParallaxSlider1', 'jump', 

'2')">Ecommerce</a></div>
      </div>
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index:70;left:845px;top:250px">
        <div class="btn"><a href="#" onClick="dmxParallaxSliderAction('dmxParallaxSlider1', 'jump', 

'3')">Business</a></div>
      </div>
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index:80;left:705px;top:250px">
        <div class="btn"><a href="#" onClick="dmxParallaxSliderAction('dmxParallaxSlider1', 'jump', 

'4')">Entertainment</a></div>
      </div>
    </div>
    <div class="dmxParallaxSliderSlide" data-slide-title="Slide 2">
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index:10; left:5px; top:57px;"><img 

src="Images/slider/laptop.png" width="304" height="226" alt="Laptop Screens"></div>
      <div class="dmxParallaxSliderElement" style="position: absolute;z-index:30;left:241px;top:57px" data-

delayin="250" data-durationin="50"><img src="Images/slider/mobile.png" width="67" height="132" alt="Mobile 

Screens"></div>
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index:20; left:440px; top:51px;">
        <p>Maximum Compatibility</p>
      </div>
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index:30; left:531px; top:132px;">
        <h4>Various Screen Sizes</h4>
      </div>
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index:40; left:645px; top:204px;">
        <h2>Mobile Websites</h2>
      </div>
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index:50;left:860px;top:245px">
        <div class="btn"><a href="">Information</a></div>
      </div>
      <div class="dmxParallaxSliderElement" style="position: absolute;z-index:20; left:289px;top:253px" 

data-speed="20" data-delayin="480" data-delayout="300" data-durationout="30"><img 

src="Images/slider/browsers.png" width="190" height="31" alt="browsers"></div>
    </div>
    <div class="dmxParallaxSliderSlide" data-slide-title="Slide 3">
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index:10; left: 19px; top:8px;" 

data-speed="30">
        <h1>Ecommerce Solutions</h1>
      </div>
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index:10; left:88px; top:39px;" 

data-delayin="20" data-speed="10"><img src="Images/slider/girl_shoping.png" width="220" height="260" 

alt="ecommerce onlineshop"></div>
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index:20; left:381px; top:47px;">
        <p>Our Online shops are very extensive and full of features, your customers will be satisfied!</p>
      </div>
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index:30; left:600px;top:93px" 

data-delayin="50" data-delayout="50">
        <ul class="pslider">
          <li>Paypal Payments</li>
          <li>Credit Card payments</li>
          <li>Various Shipping options</li>
          <li>Back store/Product management</li>
          <li>Tax rates</li>
          <li>Product Galleries/Sliders</li>
          <li>Built in Blog</li>
          <li>Automatic Social posting</li>
        </ul>
      </div>
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index: 40; left: 352px; top: 256px;" 

data-delayin="90" data-speed="20" data-delayout="60" data-durationin="20" data-durationout="20"><img 

src="Images/slider/ecommerce.png" width="150" height="35" alt="ecommerce"></div>
    </div>
    <div class="dmxParallaxSliderSlide" data-slide-title="Slide 4">
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index: 10; left: 12px; top: 17px;" 

data-speed="30">
        <h1>Business Solutions</h1>
      </div>
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index: 10; left: 91px; top: 

40px;"><img src="Images/slider/girl_office.png" width="220" height="260" alt="Business &amp; 

Enterprise"></div>
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index: 20; left: 336px; top: 46px;">
        <p>What ever your Business needs we can provide it, with effective data solutions.</p>
      </div>
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index: 30; left: 585px; top: 114px;" 

data-delayin="50" data-delayout="50">
        <ul class="pslider">
          <li>Paypal Payment options</li>
          <li>Groups and Memberships</li>
          <li>Data Catalogue and Storage</li>
          <li>Content Management System</li>
        </ul>
      </div>
      <div class="dmxParallaxSliderElement" style="position:absolute;z-index:40;left:352px;top:256px" data-

speed="20" data-delayin="90" data-delayout="60" data-durationin="20" data-durationout="20"><img 

src="Images/slider/buisness.png" width="150" height="35" alt="business"></div>
    </div>
    <div class="dmxParallaxSliderSlide" data-slide-title="Slide 5">
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index: 10; left: 11px; top: 14px;" 

data-speed="30">
        <h1>Entertainment Solutions</h1>
      </div>
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index: 10; left: 83px; top: 

40px;"><img src="Images/slider/man_dance.png" width="220" height="260" alt="Entertainment"></div>
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index: 20; left: 352px; top: 58px;">
        <p>We add that WOW factor to your site, with multimedia options and visualisations.</p>
      </div>
      <div class="dmxParallaxSliderElement" style="position: absolute; z-index: 30; left: 539px;top:123px" 

data-delayin="50" data-delayout="50">
        <ul class="pslider">
          <li>Audio Player with Visual Effects</li>
          <li>Video Player</li>
          <li>Full sized Image Galleries/Sliders</li>
          <li>Social Interactions</li>
          <li>Image Sliders</li>
          <li>Automatic Social posting</li>
        </ul>
      </div>
      <div class="dmxParallaxSliderElement" style="position:absolute;z-index:40;left:352px;top:256px" data-

speed="20" data-delayin="90" data-delayout="60" data-durationin="20" data-durationout="20"><img 

src="Images/slider/entertainment.png" width="150" height="35" alt="entertainment"></div>
    </div>
  </div>



Slide 2:
<div class="dmxParallaxSlider" id="dmxParallaxSlider1" style="width:950px;height:360px" data-slide-

title="Slide 1" data-selected-slide="1">
        <div class="dmxParallaxSliderSlide" data-slide-title="Slide 1">
          <div class="dmxParallaxSliderElement" style="position: absolute; z-index: 10; left: 

40px;top:21px"><img src="Images/projects/site_0001.png" width="503" height="338" alt="project designs"></div>
          <div class="dmxParallaxSliderElement" style="position: absolute; z-index: 10; left: 594px; top: 

97px;" data-delayin="40" data-delayout="30" data-durationin="20" data-durationout="20">
            <h2>Functional Platforms</h2>
            <ul>
              <li>Offer your Services!</li>
              <li>Various Form options</li>
              <li>Database and CMS solutions</li>
              <li>Multimedia sliders</li>
              <li>Inter activity</li>
            </ul>
          </div>
          <div class="dmxParallaxSliderElement" style="position: absolute; z-index: 30; left: 93px; top: 

319px;"><img src="Images/icons/msg.png" width="32" height="32" alt="comment">  Webasedhome.com creates the 

applications, platforms and sites you need!</div>
        </div>
        <div class="dmxParallaxSliderSlide" data-slide-title="Slide 2">
          <div class="dmxParallaxSliderElement" style="position:absolute;z-index:10;left:40px;top:21px"><img 

src="Images/projects/site_0002.png" width="421" height="338" alt="project designs"></div>
          <div class="dmxParallaxSliderElement" style="position:absolute;z-index:10;left:594px;top:97px" 

data-delayin="40" data-delayout="30" data-durationin="20" data-durationout="20">
            <h2>So many options available</h2>
            <ul>
              <li>Cloud Applications</li>
              <li>Local Solutions available</li>
              <li>Websites - Blogs</li>
              <li>Mobile Sites</li>
              <li>Social Interactions</li>
            </ul>
          </div>
          <div class="dmxParallaxSliderElement" style="position:absolute;z-index:20;left:93px;top:319px"><img 

src="Images/icons/msg.png" width="32" height="32" alt="comment">  Webasedhome.com designs are functional, 

unique and beautiful!</div>
        </div>
        <div class="dmxParallaxSliderSlide" data-slide-title="Slide 3">
         <div class="dmxParallaxSliderElement" style="position:absolute;z-index:10;left:40px;top:21px"><img 

src="Images/projects/site_0003.png" width="421" height="338" alt="project designs"></div>
          <div class="dmxParallaxSliderElement" style="position:absolute;z-index:10;left:594px;top:97px" 

data-delayin="40" data-delayout="30" data-durationin="20" data-durationout="20">
            <h2>Ecommerce Possibilities</h2>
            <ul>
              <li>Shopping Carts</li>
              <li>Paypal Stores</li>
              <li>Delivery Options</li>
              <li>Product Ratings</li>
              <li>Product Videos/Galleries</li>
            </ul>
          </div>
          <div class="dmxParallaxSliderElement" style="position:absolute;z-index:20;left:93px;top:319px"><img 

src="Images/icons/msg.png" width="32" height="32" alt="comment">  Don't just sell your Products, Showcase 

them!</div>
      </div>
      </div>
Replied 22 Jan 2013 16:28:51
22 Jan 2013 16:28:51 Jamie oates replied:
just to note both sliders are in separate pages
Replied 23 Jan 2013 09:32:03
23 Jan 2013 09:32:03 Vulcho Vulev replied:
Hello Jamie.

You can avoid such fading effect by decreasing the effect duration time default value.

Regards: Vulcho.
Replied 23 Jan 2013 13:33:50
23 Jan 2013 13:33:50 Jamie oates replied:
the effect duration is I believe still set at the default of 2500, reducing this to 2000 still presents the issue on some slides, reducing this timer further to 1500 also still presents the issue on some slides, yes it does improve but of course the effect is so fast it kind of defeats the idea of using the paralax effects.....
As they are not seen.

Is there no other way to improve the timing to allow the default timing?
As in reality I would prefer to have it actually take longer to actually show the effect than speed it up so fast it simply isn't noticeable.

Regards
Jamie
Replied 23 Jan 2013 14:06:11
23 Jan 2013 14:06:11 Jamie oates replied:
reducing effect duration down to 800 still presents the same problem.
reducing further to 500 all effects of parallax are gone, is so fast now a simple slider would present the same effect......
Sorry but this ticket is not solved unless u want to change the name from parallax slider to basic slider?

An alternative please so that I could use the DEFAULT speed
Replied 23 Jan 2013 14:12:52
23 Jan 2013 14:12:52 Vulcho Vulev replied:
Hello Jamie.

Can you try with Slide duration:4000/5000 and effect duration:500/800 ?

Regards:Vulcho.
Replied 28 Jan 2013 11:24:35
28 Jan 2013 11:24:35 Jamie oates replied:
duration at 5000 and effect at 500 or faster, otherwise the slides vanish....
not the greatest solution but i guess it does the trick..

Reply to this topic