文章/答案/技术大牛

发布

社区首页 >问答首页 >Stellar JS (视差插件)定位问题

问Stellar JS (视差插件)定位问题
EN

Stack Overflow用户

提问于 2013-01-15 12:49:16

回答 1查看 1.1K关注 0票数 0

我正在使用stellar创建一个视差站点，并且在定位“幻灯片”中的元素时遇到了严重的问题。我的所有元素都与给定的css完全对齐；但是，一旦我为图像添加了“data-stellar data”属性，它们的位置就完全混乱了。扭曲的偏移量没有可识别的模式，或者我只是调整css。

这是我的html

<body>
  <div id="scrollContainer">
    <div id="scroller">

        <section data-slide="1" class="slide" id="slide1" > <!-- Home Screen -->
            <img class="part" data-stellar-ratio="1.5"  src="images/vi.svg" alt="">
            <img class="part" data-stellar-ratio="2" src="images/nyl.svg" alt="">
            <img class="part" data-stellar-ratio="3"  src="images/vibe.svg" alt="">
            <img class="part" data-stellar-ratio="2.5"  src="images/whitaker.svg" alt="">
            <img class="part" data-stellar-ratio="1"  src="images/red.svg" alt="">
        </section> <!-- END Home -->

每个"section.slide“被设置为"position: relative;”，并且子图像被设置为绝对图像。这是我的css

    #scroller
    {
    text-align: left;
    width: 960px;
    margin: 0 auto;
    padding:0;
    }
    section.slide { position:relative; width:960px; height: 728px;}
    .part { position:absolute; }

    section#slide1 {background: #f2f2f2; width:100%;}
    section#slide1 .part:first-child  { width:524px; left:-297px; top:715px; } /* vi */
    section#slide1 .part:nth-child(2) { width:780px; left:159px; top:1072px; /*bottom:-344px;*/} /* nyl */
    section#slide1 .part:nth-child(3) { width:395px; left:357px; top: 525px; /*bottom:203px;*/ } /*vibe*/
    section#slide1 .part:nth-child(4) { width:641px; left:599px; top: 590px; /*bottom:138px;*/ } /*whitaker*/
    section#slide1 .part:nth-child(5) { width:424px; left:28px; top: 842px; /*bottom:-114px;*/ } /*red*/

有没有人知道合适的解决方案？谢谢你的帮助！！我已经尝试了3个小时，没有找到任何解决方案，也没有在网上找到解决方案。

jquery

css

position

offset

parallax

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-02-04 22:28:52

我记不清了，但我想我只是添加了horizontalScrolling:false.就解决了这个问题

$.stellar({
    horizontalScrolling:false
    // other options...
});

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/14331357

复制

相似问题

问Stellar JS (视差插件)定位问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Stellar JS (视差插件)定位问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Stellar JS (视差插件)定位问题
EN