jQuery和CSS3的視差窗簾顯示效果

Question

很難解釋我的意思是什么。 但是，讓我嘗試。 :)

當您向下滾動一個帶文本的DIV時，Block會移到帶有背景圖像的固定背景DIV上。 現在，當頂部的DIV離開底部區域並移至視口頂部時，您可以看到一半（后來是完整的）新背景圖像。 但是背景圖像沒有移動，它們是固定的。 向下滾動時，只有帶有文本塊的頁面內容會移動。

如果您仍然看到問號，請訪問此網站，在那里您可以看到正在使用的概念。

所以我的問題是，如何僅使用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 個解決方案

解決方案1
1 2014-05-23 15:58:19

jQuery和CSS3的視差窗簾顯示效果

問題描述

1 個解決方案

解決方案1 1 2014-05-23 15:58:19

解決方案1
1 2014-05-23 15:58:19