Question

我正在研究视差CSS3滑块 http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/

我正在尝试重新排列图像位置，但面临的问题就是我无法找到左侧或右侧图像的位置。您是否知道如何从左侧或右侧轻松移动图像？

这是CSS3代码：

.da-slider{
    width: 100%;
    min-width: 520px;
    height: 768px; /*400px;*/
    position: relative;
    overflow: hidden;
    background: transparent url(../images/waves.gif) repeat 0% 0%;
    border-top: 8px solid #efc34a;
    border-bottom: 8px solid #efc34a;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.2), 0px -2px 1px #fff;
    -webkit-transition: background-position 1.4s ease-in-out 0.3s;
    -moz-transition: background-position 1.4s ease-in-out 0.3s;
    -o-transition: background-position 1.4s ease-in-out 0.3s;
    -ms-transition: background-position 1.4s ease-in-out 0.3s;
    transition: background-position 1.4s ease-in-out 0.3s;
}
.da-slide{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    text-align: left;
}
.da-slide-current{
    z-index: 1000;
}
.da-slider-fb .da-slide{
    left: 100%;
}
.da-slider-fb  .da-slide.da-slide-current{
    left: 0px;
}
.da-slide h2,
.da-slide p,
.da-slide .da-link,
.da-slide .da-img{
    position: absolute;
    opacity: 0;
    left: 110%;
}
.da-slider-fb .da-slide h2,
.da-slider-fb .da-slide p,
.da-slider-fb .da-slide .da-link{
    left: 10%;
    opacity: 1;
}
.da-slider-fb .da-slide .da-img{
    left: 60%;
    opacity: 1;
}
.da-slide h2{
    color: #fff;
    font-size: 66px;
    width: 50%;
    top: 60px;
    white-space: nowrap;
    z-index: 10;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    font-family: 'Economica', Arial, sans-serif;
    font-weight: 700;
}
.da-slide p{
    width: 45%;
    top: 155px;
    color: #916c05;
    font-size: 18px;
    line-height: 26px;
    height: 80px;
    overflow: hidden;
    font-style: italic;
    font-family: 'Economica', Arial, sans-serif;
    font-weight: 400;
    font-style: italic;
}
.da-slide .da-img{
    text-align: center;
    width: 30%;
    top: 200px;
    height: 256px;
    line-height: 320px; /*60%*/
    position: absolute;
    right: 0px;
}
.da-slide-current h2,
.da-slide-current p,
.da-slide-current .da-link{
    left: 10%;
    opacity: 1;
}
.da-slide-current .da-img{
    left: 60%;
    opacity: 1;
}

HTML是：

<div id="da-slider" class="da-slider">
                <div class="da-slide">
                    <h2>Easy management</h2>
                    <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
                    <a href="#" class="da-link">Read more</a>
                    <div class="da-img"><img src="images/2.png" alt="image01" /></div>
                </div>
                <div class="da-slide">
                    <h2>Revolution</h2>
                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
                    <a href="#" class="da-link">Read more</a>
                    <div class="da-img"><img src="images/3.png" alt="image01" /></div>
                </div>
                <div class="da-slide">
                    <h2>Warm welcome</h2>
                    <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
                    <a href="#" class="da-link">Read more</a>
                    <div class="da-img"><img src="images/1.png" alt="image01" /></div>
                </div>
                <div class="da-slide">
                    <h2>Quality Control</h2>
                    <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
                    <a href="#" class="da-link">Read more</a>
                    <div class="da-img"><img src="images/4.png" alt="image01" /></div>
                </div>
                <nav class="da-arrows">
                    <span class="da-arrows-prev"></span>
                    <span class="da-arrows-next"></span>
                </nav>
        </div>

Answer 1

使用jQuery，简单如：$('#imgid').css(top : -20, left : -20)

Answer 2

如果通过“尝试重新排列图像位置”来表示动画或更改动画的方式，则应该查看这些css类：

.da-slide-fromright
.da-slide-fromleft
.da-slide-toright
.da-slide-toleft

从问题中发布的链接可以看出，这些类包含animation CSS3样式。这用于调用@keyframes CSS3动画，这是大多数场景中最快的动画。

因此，要更改动画，请更新@keyframes动画中的左侧位置。

例如：

@keyframes fromRightAnim1{
    0%{ left: 110%; opacity: 0;}
    100%{ left: 10%; opacity: 1;}
}

到

@keyframes fromRightAnim1{
    0%{ left: 110%; opacity: 0; top: 0%;}
    100%{ left: 10%; opacity: 1; top: 15%; }
}

编辑：

尝试在style.css

的末尾添加此类

.da-slide-current .da-img{
    top:20px;
    left:10px;
}

编辑2：

jQuery方式

$('.da-img').css({ top: '10px', left: '10px' });

CSS3滑块重新排列图像位置

2 个答案: