Images slides to center than to position

info's Avatar

info

30 Nov, 2012 12:02 PM

Hello,

I've created a slideshow with two images on the foreground (like the palm tree in the animated blocks demo). However the first image slides vertically to about 50% and then jumps back to the bottom of the slideshow. The second images works as aspected while both images have the same code.

<img class="rsABlock samsungImg" data-fade-effect="none" data-move-effect="bottom" data-opposite="true" data-move-offset="275" data-delay="500" data-speed="300" data-easing="easeOutBack" src="/sites/all/themes/theme/images/samsungs3.png" />
<img class="rsABlock iphoneImg" data-fade-effect="none" data-move-effect="bottom" data-opposite="true" data-move-offset="275" data-delay="1000" data-speed="300" data-easing="easeOutBack" src="/sites/all/themes/theme/images/iphone.png" />

The CSS (with Compass) I used is:

#full-width-slider {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
  .rsContent {
    color: #FFF;
    font-size: 24px;
    line-height: 32px;
    float: left;
  }
  .bContainer {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
  }
  .rsABlock {
    position: relative;
    display: block;
    left: auto;
    top: auto;
  }
  .blockHeadline {
    font-size: 42px;
    line-height: 50px;
  }
  .blockSubHeadline {
    font-size: 32px;
    line-height: 40px
  }
  .txtCent {
    text-align: center; 
    width: 100%; 
  }
  .padding-top {
    padding-top: 25px;
  }
  .views-row-1 {
    .bContainer {
      color: #fff;
      top: 36%;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    }
  }
  .views-row-2 {
    .bContainer {
      color: #000;
      top: 25%;
    }
  }
  .views-row-3 {
    .bContainer {
      color: #fff;
    }
  }
  .iphoneImg {
    left: 50%;
    margin-left: -310px;
    top: auto;
    bottom: -120px;
    position: absolute;
  }
  .samsungImg {
    left: 50%;
    margin-left: -460px;
    top: auto;
    bottom: -120px;
    position: absolute;
  }
}

How can I make sure the first image also slides in like aspected?

Thanks!

  1. Support Staff 1 Posted by Dmytro Semenov on 30 Nov, 2012 02:43 PM

    Dmytro Semenov's Avatar

    Hello,

    It's hard to tell without looking at actual page, please send me link to it or attach files to messsage.

    Dmitry

  2. 2 Posted by info on 01 Dec, 2012 12:55 PM

    info's Avatar

    Hello,

    I've solved it by my one, it had something to do with the absolute/relative positioning of the blocks.

  3. info closed this discussion on 01 Dec, 2012 12:55 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac