视差标题移动到首页

-4

我有标题“测试标题”的问题，因为在移动滚动后，标题闪到顶部。我需要与近距离图像同步字幕。视差标题移动到首页

[https://jsfiddle.net/ohamdcaL][1]

来源

2015-05-20 Prozack

不要绕过 “没有的jsfiddle没有链接码” 的限制吧。这是有原因的。将您的代码包含在问题主体中。 –

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>PARALLAX</title> 
<style type="text/css"> 
    body { 
     margin: 0px; 
     background: url(http://th09.deviantart.net/fs70/PRE/i/2013/215/a/3/bubble_background_by_diversekitty-d6giw39.png) fixed; 
     min-height: 2000px; 
    } 

    #content_layer { 
     position: absolute; 
     /*min-height: 100%;*/ 
    } 

    #paralax_div1 { 
     position:fixed; 
     background: url(http://www.agencjaface.com/wp-content/uploads/marek_wlodarczyk_icon.jpg) no-repeat 600px 400px; 
     width:100%; 
     height:800px; 
    } 

    #caption { 
     position: fixed; 
     top: 500px; 
     left: 300px; 
     font-size: 20px; 
     width:100%; 
    } 

</style> 

    <script> 
     function parallax() { 
      var paralax_div1 = document.getElementById("paralax_div1"); 
      var caption = document.getElementById("caption"); 

      paralax_div1.style.top = -(window.pageYOffset/80)+'px'; 
      caption.style.top = -(window.pageYOffset/80)+'px'; 


     } 

     window.addEventListener("scroll", parallax, false); 

    </script> 

</head> 
<body> 

    <div id="paralax_div1"></div> 
    <div id="caption"> TEST CAPTION </div> 
    <div id="content_layer"> 
     <script> 
      for(i =0; i < 100; ++i) { 
       document.write('HEHEHEHEHEH <BR/>'); 
      } 
     </script> 
    </div> 
</body> 
</html>

来源

2015-05-20 08:18:26 Prozack

视差标题移动到首页

回答

相关问题