Question

我很难解释我的意思是什么样的效果。但是，让我试试吧。：）

当您向下滚动一个DIV时，文本块会在带有背景图像的固定背景DIV上移动。现在，当顶部的DIV离开底部区域并移动到视口的顶部时，您可以看到一半（以及后面的全部）新背景图像。但是背景图像没有移动，它们是固定的。向下滚动时，只有带有文本块的页面内容会移动。

如果您仍然看到问号，请查看此website，您可以看到正在使用的概念。

所以我的问题是如何只用CSS3和jQuery（没有YUI等）重新创建这个效果？我真的不明白这需要的逻辑。我如何为DIV设置动画，以及将它放在HTML文档中的哪个位置。

下面你会找到我做的一些测试（但它们不起作用）

<!DOCTYPE HTML>
<html lang="en">
<head> 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui">
    <title>Agency</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
    <script>
 $(document).ready(function() {
 $("div.blankItem").css("min-height", $(window).innerHeight()-44);
 $("div.red").css("min-height", $(window).innerHeight()-44);
 var windowHeight = $(window).innerHeight()+ 44;
 var total = - windowHeight - 400;
 $('div.red').css('-webkit-transform', 'translate3d(0,' + total + 'px,0)');
 //$("div.pageContentBackground").css("bottom", -$(window).innerHeight()+44 + "px");
 //$("div.pageContentBackground").css("bottom", -$(window).innerHeight()-44);

 $(window).resize(function() {
 $("div.blankItem").css("min-height", $(window).innerHeight()-44);
 $("div.red").css("min-height", $(window).innerHeight()-44);
 //$("div.pageContentBackground").css("bottom", -$(window).innerHeight()+44 + "px");
 //$("div.pageContentBackground").css("bottom", -$(window).innerHeight()-44);
 });

 $(function(){
 $(window).bind({scroll: Scroll, touchmove: Scroll});
 });


 function Scroll(){
 //  var op = (window.pageYOffset-$(window).innerHeight()-44-356);
// $("div.pageContentBackground").css("bottom", + op);
var scrollTop = $(window).scrollTop();
var pageYDoc = 1300;
var factor = 0.8;
var pageYViewport = pageYDoc - scrollTop;
var imageY = -1 * parseInt(pageYViewport * factor);
//var tr = -200; // You'd need to calculate this value
/**$('div.red').css("-webkit-transform", "translate3d(0, " + tr + "px, 0)");
*/
//var offset = total + $(window).scrollTop()+400;
$('div.red').css({'-webkit-transform': 'translate3d(0, '+ imageY + '%, 0)'});
// $('div.blue').stop().css('bottom', $(window).scrollTop() -       $(window).innerHeight()-44-400 + "px");
console.log(offset);
}
});
</script>
<style>
 * {
 padding: 0;
 margin: 0;
 }
 ul, li {
 margin: 0;
 padding: 0;
 }
 a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-moz-tap-highlight-color: rgba(0,0,0,0);
tap-highlight-color: rgba(0,0,0,0);
text-decoration: none;
 }

 html {
 -ms-text-size-adjust: none;
 -webkit-text-size-adjust: none;
 }

body { 
transition:all .2s linear; 
-o-transition:all .2s linear; 
-moz-transition:all .2s linear; 
-webkit-transition:all .2s linear;
font-family: 'Open Sans', Helvetica;
color: #F0F2ED;
-webkit-font-smoothing: subpixel-antialiased !important;
}
    div.pageMenu {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 44px;
    background-color: #333;
    z-index: 10;
    opacity: 0.99;
    }
    a.pageMenuButton {
    position: fixed;
    top: 8px;
    right: 44px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    }
    div.pageHeader {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #daddda;
    z-index: 1;
    padding-bottom: 10px;
    }
    div.pageContent {
    position: absolute;
            top: 100%;
            width: 100%;
            z-index: 5;
            max-width: 100%;
            overflow: hidden;
    }
    div.pageContentBackground {
    position: fixed;
    left: 0px;
    width: 100%;

    }
    div.red {
    background-color: red;
    z-index: 2;
    }
    div.blue {
    background-color: blue;
    z-index: 3;
    }
    div.pageContentBody {
    width: 100%;
    z-index: 2;
    }
    div.pageContentBodyItem {
    width: 100%;
    height: 400px;
    background-color: #fff;
    display: block;
    }
    div.blankItem {
    background: transparent;
    width: 100%;

    display: block;
    }
    </style>
</head>
<body>
    <div class="pageMenu">
        <div class="pageMenuLogo">
        </div>
        <a href="#" class="pageMenuButton">&#9776;</a>
    </div>
    <div class="pageHeader">
    </div>
    <div class="pageContentBackground red">
        </div>
    <!--<div class="pageContentBackground blue">
        </div>-->
    <div class="pageContent">
        <div class="pageContentBody">
            <div class="pageContentBodyItem">
            </div>
            <div class="blankItem">
            </div>
            <div class="pageContentBodyItem">
            </div>
            <div class="blankItem">
            </div>
            <div class="pageContentBodyItem">
            </div>
            <div class="blankItem">
            </div>
            <div class="pageContentBodyItem">
            </div>
            <div class="blankItem">
            </div>
            <div class="pageContentBodyItem">
            </div>
        </div>
    </div>
    <div class="pageContentFooter">
    </div>
    </div>
</body>

Answer 1

这是我的尝试：http://codepen.io/rafaelcastrocouto/pen/bCxAd

尽管网站存在很多差异，但它们仍然有点相似。请注意，我的视差只能在大屏幕上进行。

JS非常小：

var lastScrollTop = 0;
var backgroundImages = $('.backgroundImage'); 
$(window).scroll(function(e){
  var st = $(this).scrollTop();
  var ah = $(this).height();
  backgroundImages.each(function(i){
    var img = $(this);
    var pos = img.position().top;
    var hei = img.height();
    if ((st + ah) > pos && st < (pos + hei)){
      var p = ((pos - st)/ah) + 0.25;
      if(i == 1) console.log(p);
      img.css('background-position', '50%'+(p*100)+'%');
    }
  });
  lastScrollTop = st;
});
$(window).scroll();

视差窗帘显示jQuery和CSS3的效果

1 个答案: