文章/答案/技术大牛

发布

问Parallax.js和引导转盘
EN

Stack Overflow用户

提问于 2015-11-21 13:43:25

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

我一直在尝试让这个parallax.js在我的Bootstrap Carousel上工作，好消息是我已经让它工作得很好了，但是我不能让这个carousel使用data- image -src滑到下一个图像。标题改变了，但图像保持不变，我是不是遗漏了什么？不是真正擅长编码，所以您的帮助将是真正的感谢。提前感谢！

总之，下面是我的代码：

HTML

<!-- Wrapper for Slides -->
    <div id="top" class="carousel-inner">
               <div class="item active">
            <!-- Set the first background image using inline CSS below. -->
            <div class="fill parallax-window1" data-parallax="scroll" data-speed="0.5" data-image-src="images/slide4.jpg"></div>
            <div class="carousel-caption verticalcenter">
                <div class="full-width text-center">
                  <h1 class="captionhead" data-animation="animated fadeInUp">TITLE 1</h1>
                  <p data-animation="animated fadeInUp">Donec tempus risus eget bibendum sodales. Aenean efficitur mollis risus,nia nec.lacinia, lectus velit lobortis arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p><br><a class="learnmore" href="construction-update.html" data-animation="animated fadeInUp">LEARN MORE</a>
                </div>
            </div>
        </div>
        <div class="item">
            <!-- Set the second background image using inline CSS below. -->
            <div class="fill parallax-window2" data-parallax="scroll" data-speed="0.5" data-image-src="images/slide1.jpg"></div>
            <div class="carousel-caption verticalcenter">
                <div class="full-width text-center">
                <h1 class="captionhead" data-animation="animated fadeInUp">TITLE 2</h1>
                  <p data-animation="animated fadeInUp">Donec tempus risus eget bibendum sodales. Aenean efficitur mollis risus,nia nec.lacinia, lectus velit lobortis arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
                </div>
            </div>
        </div>
        <div class="item">
            <!-- Set the third background image using inline CSS below. -->
            <div class="fill parallax-window3" data-parallax="scroll" data-speed="0.5" data-image-src="images/slide3.jpg"></div>
            <div class="carousel-caption verticalcenter">
                <div class="full-width text-center">
                 <h1 class="captionhead" data-animation="animated fadeInUp">TITLE 3</h1>
                  <p data-animation="animated fadeInUp">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus risus eget bibendum sodales. Aenean efficitur mollis risus,nia nec.lacinia, lectus velit lobortis arcu.</p>
                </div>
            </div>
        </div>
    </div>

JAVASCRIPT

         <script>
     $('.parallax-window1').parallax({imageSrc: 'images/slide4.jpg'});
     $('.parallax-window2').parallax({imageSrc: 'images/slide1.jpg'});
     $('.parallax-window3').parallax({imageSrc: 'images/slide3.jpg'});
     </script>

希望有人能帮帮我。提前感谢！

carousel

parallax

回答 1

Stack Overflow用户

发布于 2017-01-26 00:22:13

我也在寻找它，我用http://untame.net/2013/04/how-to-integrate-simple-parallax-with-twitter-bootstrap/的parallax.js找到了解决方案

我使用的是bootstrap 3.3.7，并使用jQuery 1.12.x到2.x进行了测试

只需稍微修改一下jquery函数，它就可以在img上运行，而不是在后台运行：

$('section[data-type="background"]') => $('img[data-type="img"]')
var coords = '50% '+ yPos + 'px'; => var coords = yPos +'px';
$scroll.css({ backgroundPosition: coords }); => $scroll.css( 'top', coords );

这里是概念证明

// parallax.js from http://untame.net/2013/04/how-to-integrate-simple-parallax-with-twitter-bootstrap/
$(document).ready(function(){
   // cache the window object
   $window = $(window);
 
   $('section[data-type="background"]').each(function(){
     // declare the variable to affect the defined data-type
     var $scroll = $(this);
                     
      $(window).scroll(function() {
        // HTML5 proves useful for helping with creating JS functions!
        // also, negative value because we're scrolling upwards                            
        var yPos = -($window.scrollTop() / $scroll.data('speed'));
         
        // background position
        var coords = '50% '+ yPos + 'px';
 
        // move the background
        // $scroll.css({ backgroundPosition: coords });
        $scroll.css( 'background-position', coords );
      }); // end window scroll
   });  // end section function
   
   // http://stackoverflow.com/questions/33840128/parallax-js-and-bootstrap-carousel
   $('img[data-type="img"]').each(function(){
     // declare the variable to affect the defined data-type
     var $scroll = $(this);
                     
      $(window).scroll(function() {
        // HTML5 proves useful for helping with creating JS functions!
        // also, negative value because we're scrolling upwards                            
        var yPos = -($window.scrollTop() / $scroll.data('speed'));
         
        // background position
        var coords = yPos +'px';
 
        // move the background
        // $scroll.css({ backgroundPosition: coords });   
        $scroll.css( 'top', coords );
      }); // end window scroll
   });  // end section function
}); // close out script

// this function is for the navbar only
$(document).ready(function(){       
  var scroll_start = 0;
  var startchange = $('#startchange');
  var offset = startchange.offset();
  if (startchange.length){
    $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
        $(".navbar-default").css('background-color', '#ffffff');
      } else {
        $('.navbar-default').css('background-color', 'transparent');
      }
    });
  }
});

/* Create HTML5 element for IE */
document.createElement("section");

    #home { 
      background: url(http://placehold.it/2000x600/0033cc/ffffff) 50% 0 fixed; 
      height: auto;  
      margin: 0 auto; 
        width: 100%; 
        position: relative; 
        box-shadow: 0 0 50px rgba(0,0,0,0.8);
        padding: 200px 0;
    }
    #content1 { 
      background: url(http://placehold.it/2000x600/0033cc/ffffff) no-repeat center center fixed;
      height: auto;  
      margin: 0 auto; 
        width: 100%; 
        position: relative; 
        box-shadow: 0 0 50px rgba(0,0,0,0.8);
        padding: 200px 0;
    }
    #about { 
      background-color: black;
      height: auto;
      margin: 0 auto; 
        width: 100%; 
        position: relative; 
        box-shadow: 0 0 50px rgba(0,0,0,0.8);
        padding: 100px 0;
        color: #fff;
    }

/* Carousel base class */
.carousel {
  height: 600px;
  margin-bottom: 0;
}
.carousel-caption {
  color: black;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 600px;
  background-color: DimGray;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 120%;
  max-width: 120%;
}
@media (max-width: 767px) {
  .carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 120%;
  max-width: 120%;
    }
@media (min-width: 768px) {
  .carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 120%;
  max-width: 120%;
    }
@media (min-width: 992px) {
  .carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 120%;
  max-width: 120%;
    }

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Parallax Carousel Demo</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="http://untame.net/2013/04/how-to-integrate-simple-parallax-with-twitter-bootstrap/">source 1</a></li>
        <li><a href="http://www.bootply.com/zylyqLRmcj">source 2</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<!-- carousel #1 -->
<div id="bsCarouselHome" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-slide-to="0" data-target="#bsCarouselHome" class="active" ></li>
    <li data-slide-to="1" data-target="#bsCarouselHome"></li>
    <li data-slide-to="2" data-target="#bsCarouselHome"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img alt="First slide" src="http://placehold.it/1500x800" class="first-slide" data-speed="5" data-type="img">
      <div class="container">
        <div class="carousel-caption">
          <h3>parallax for img within carousel</h3>
          <hr class="half-rule">
                    <p>Image ratios are somewhat strange when resizing to small viewports because the whole carousel ratio changes too. You have to chose whether respect the size or the ratio.</p>
          <p>This is just proof of concept to show how to apply parallax to img as well, not just backgrounds.</p>

          <p><a role="button" href="career" class="btn btn-success btn-lg">Learn more</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <img alt="First slide" src="http://placehold.it/1500x1000" class="second-slide" data-speed="5" data-type="img">
      <div class="container">
        <div class="carousel-caption">
          <h3>parallax for img within carousel</h3>
          <hr class="half-rule">
          <p>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          <p><a role="button" href="#" class="btn btn-success btn-lg">View smth</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <img alt="Second slide" src="http://placehold.it/1500x1000" class="third-slide" data-speed="5" data-type="img">
      <div class="container">
        <div class="carousel-caption">
          <h3>parallax for img within carousel</h3>
          <p>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</p>
          <p><a role="button" href="#" class="btn btn-success btn-lg">Learn more</a></p>
        </div>
      </div>
    </div>
  </div>
  <a data-slide="prev" role="button" href="#bsCarouselHome" class="left carousel-control">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a data-slide="next" role="button" href="#bsCarouselHome" class="right carousel-control">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>


<!-- Section #2 -->
<section id="home" data-speed="2" data-type="background">
  <div class="container">
    <div class="row-fluid">
          <div class="col-md-4 well">
            <h2>Heading</h2>
            <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque cursus nisl consectetur et.</p>
            <p><a class="btn btn-success" href="#">View details &raquo;</a></p>
          </div><!-- /.span4 -->
          <div class="col-md-4">
            <h2>Heading</h2>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            <p><a class="btn btn-success" href="#">View details &raquo;</a></p>
          </div><!-- /.span4 -->
          <div class="col-md-4 well">
            <h2>Heading</h2>
            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum odio, dapibus ac in, massa justo sit amet.</p>
            <p><a class="btn btn-success" href="#">View details &raquo;</a></p>
          </div><!-- /.span4 -->
      </div>
    </div>
</section>

<!-- Section #3 -->
<section id="about">
  <div class="container">
    <div class="page-header">
      <h1>Final Section Headline <small>Some subtext goes here...</small></h1>
    </div>
    <div class="row-fluid">
          <div class="span4">
            <h2>More Details</h2>
            <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque cursus nisl consectetur et.</p>
            <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque cursus nisl consectetur et.</p>
            <p><a class="btn btn-success">View details &raquo;</a></p>
          </div><!-- /.span4 -->
          <div class="span4">
            <h2>Heading</h2>
            <div class="media">
          <a class="pull-left" href="#">
              <img class="media-object" src="images/check.png">
          </a>
          <div class="media-body">
              <h4 class="media-heading">Media heading</h4>
              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante.
          </div>
        </div>
            <div class="media">
          <a class="pull-left" href="#">
              <img class="media-object" src="images/check.png">
          </a>
          <div class="media-body">
              <h4 class="media-heading">Media heading</h4>
              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante.
          </div>
        </div>
            <div class="media">
          <a class="pull-left" href="#">
              <img class="media-object" src="images/check.png">
          </a>
          <div class="media-body">
              <h4 class="media-heading">Media heading</h4>
              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante.
          </div>
        </div>
          </div><!-- /.span4 -->
          <div class="span4">
            <h2>Log In</h2>
            <form class="form">
          <div class="control-group">
            <label class="control-label" for="inputEmail">Email</label>
            <div class="controls">
              <input type="text" id="inputEmail" placeholder="Email">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="inputPassword">Password</label>
            <div class="controls">
              <input type="password" id="inputPassword" placeholder="Password">
            </div>
          </div>
          <div class="control-group">
            <div class="controls">
              <label class="checkbox">
                <input type="checkbox"> Remember me <br><br>
              </label>
              <button type="submit" class="btn btn-success">Sign in</button>
            </div>
          </div>
        </form>
          </div><!-- /.span4 -->
      </div>
    </div>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

票数 0

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

原文链接：

https://stackoverflow.com/questions/33840128

复制

相似问题

问Parallax.js和引导转盘
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Parallax.js和引导转盘EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Parallax.js和引导转盘
EN