Question

当我向下滚动页面时，我试图使这两个框像动画一样从两侧滑入。有人可以告诉我如何，我一直在尝试在Google上查找它，但找不到它。

.row{ 
display: inline-block;
margin-top: 60px;
}
.image-happy {
	height: 300px;
	width: 455px;
	float: left;
	 background: url(/TeknikSnabben/assets/image/happy.jpg);
	 border-radius: 50px 20px;
}
.text-happy {
	float: left;
	width: 450px;
	height: 300px;
	margin: 20px;
		font-size: 14px;
		font-weight: 300; 
		font-family: 'Open Sans', sans-serif;
}
.text-happy p{
		font-size: 18px;
		font-weight: 300; 
		font-family: 'Open Sans', sans-serif;
		opacity: 0.6;
}
.text-happy h3{
		font-size: 23px;
		font-weight: 400px; 
		font-family: 'Open Sans', sans-serif;
		opacity: 0.5;
}

			<div class="row">
            <div class="image-happy"></div>
            <div class="text-happy"><h3>NÖJDA KUNDER<hr width="200px"></h3><p> möjligt sa ser vi till att ge det en chans.</p></div>
            </div>

Answer 1

您会考虑使用图书馆吗？有一些很棒的功能，例如http://scrollmagic.io/，可让您根据滚动位置触发事件。

Answer 2

因此，当用户使用html，css和javascript向下滚动时，您想从相反的方向移动两个元素。首先，我们需要在html文件中设置div（或其他元素）：

Index.html

<html>
  <head>
    <link rel='stylesheet' href='style.css'>
  </head>
  <body>
    <div class='txt_1' id='txt_1'>Left</div>
    <div class='txt_2' id='txt_2'>Right</div>
    <script src='script.js'></script>
  </body>
</html>

接下来，我们将不得不设置CSS，我们将使用CSS过渡，这样就不必处理凌乱的javascript动画。

Style.css

.txt_1 {

  width: 500px; /* or whatever you want */
  height: 100px; /* or whatever you want */
  background-color: red; /* so you can see it */
  position: absolute; /* allows to set the position of the element */
  top: 5000px; /* this is most likely off your screen */
  left: -500px; /* the width of the element with a "-" sign before it :3 */
  transition: 0.5s; /* a generic way of css animation (I was too lazy to put webkit stuffs) */

}

.txt_2 {

  width: 500px; /* or whatever you want */
  height: 100px; /* or whatever you want */
  background-color: orange; /* so you can see it */
  position: absolute; /* allows to set the position of the element */
  top: 4000px /* because its not 5000px */
  right: 500px; /* the width of the element*/
  transition: 0.5s; /* a generic way of css animation (I was too lazy to put webkit stuffs) */

}

接下来，我们将只需要使用一些逻辑来在用户滚动时更改元素的位置。

Script.js

document.body.onscroll = function () {
  // scroll height + height of window > txt_1 Y position (parseInt(document.getElementById('txt_1').style.top, 10))
  if (window.scrollY + window.innerHeight > 5000) {

    // top of div is on screen, if you add or subtract numbers to the first part of the if statement, you will change the offset at wich is slides in
    // gives div new position of right on screen border (or float left)
    document.getElementById('txt_1').style.left = 0;

  }

  // scroll height + height of window > txt_2 Y position (document.getElementById('txt_2').style.top)
  if (window.scrollY + window.innerHeight > 4000) {

    // top of div is on screen, if you add or subtract numbers to the first part of the if statement, you will change the offset at wich is slides in
    // gives div new position of right on screen border (or float right)
    document.getElementById('txt_2').style.right = 0;

  }

}

那应该回答您的问题（如何滚动显示元素幻灯片？）。该代码应该可以工作，但是我是即时编写的，所以...它有一个或两个错误。 任何错误都应该很容易解决，例如添加分号

向下滚动时，有什么方法可以使这两个框从两侧滑动？

2 个答案: