时间戳

首页 > 解决方案 > 无法在 jsfiddle 上复制这种水平视差效果

javascript - 无法在 jsfiddle 上复制这种水平视差效果

问题描述

我正在尝试复制这个 JS fiddle 水平视差效果Horizo​​ntal Parallax effect

它甚至无法正确加载简单页面，请帮助。这是我的代码。

skrollr.init();
#container {
    background-color:black;
    width:500px;
    height:300px;
    overflow:hidden;

}
div {position:fixed;}

.bg {
  width:500px; 
  height:300px; 
   }
<!DOCTYPE html>
<html>
<head>
	<title></title>



<link rel="stylesheet" type="text/css" href="styles/style.css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
<script type="text/javascript">
	skrollr.init();
</script>

</head>
<body>
<div id="container">

        <div class="bg" style="background-color:red" 
			data-0="transform:translate3d(0%,0%,0); opacity:1" 	
			data-5000="transform:translate3d(-100%,0%,0); opacity:0">
		</div>
	
		<div class="bg" style="background-color:green; " 
			data-0="transform:translate3d(100%,0%,0); opacity:0" 	
			data-5000="transform:translate3d(0%,0%,0);opacity:1"
			data-10000="transform:translate3d(-100%,0%,0);opacity:0">
		</div>

		<div class="bg" style="background-color:orange" 
			data-5000="transform:translate3d(100%,0%,0); opacity:0" 	
			data-10000="transform:translate3d(0%,0%,0); opacity:1">
		</div>
</div>
</body>
</html>

标签： javascripthtmlcss

解决方案

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>   
<style>
    #container {
        background-color:black;
        width:500px;
        height:300px;
        overflow:hidden;

    }
    div {position:fixed;}

    .bg {
      width:500px; 
      height:300px; 
       }

    </style>
    <div id="container">

            <div class="bg" style="background-color:red" 
                data-0="transform:translate3d(0%,0%,0); opacity:1"  
                data-5000="transform:translate3d(-100%,0%,0); opacity:0">
            </div>

            <div class="bg" style="background-color:green; " 
                data-0="transform:translate3d(100%,0%,0); opacity:0"    
                data-5000="transform:translate3d(0%,0%,0);opacity:1"
                data-10000="transform:translate3d(-100%,0%,0);opacity:0">
            </div>

            <div class="bg" style="background-color:orange" 
                data-5000="transform:translate3d(100%,0%,0); opacity:0"     
                data-10000="transform:translate3d(0%,0%,0); opacity:1">
            </div>
    </div>

    <script>
    skrollr.init();
    </script>

在正文之后初始化 skrollr 它将起作用

推荐阅读