似乎无法让我的滚动动画停止，解决问题。 | CSS & HTML

Question

所以过去 2 天我一直在搞乱这个问题并到处寻找答案。

我正在尝试制作带有标题和图片的滚动动画。

我希望动画停在页面顶部（低于搜索栏）标题应该几乎到顶部，图片应该以标题之间的小间隙停止。

我也想知道如何设置页面分辨率，这样页面底部就不会出现滚动条了。

/* Background Image */
body 
    {
      background-image: url('bg.jpg');
      background-repeat: repeat;
      background-attachment: fixed;
      background-position: center;
    }


/* Page Layout */ 

/* Animation stuffy */

        #titles
          {
            position: absolute; 
            color: white;
            width: 200vh;
            height: 50em;
            bottom: 0;
            left: 50%;
            margin-left: -9em;
            font-size: 400%;
            line-height: 50px;
            font-weight: bold;
            font-style: italic;
            text-align: center;
            overflow: hidden;
            transform-origin: 50% 100%;
          }

        #titlecontent
          {
            position: absolute;
            top: 25%;
            animation: scroll 80s linear 0s;

          }

          @keyframes scroll
          {
            0% { top: 100%; }
            100% { top: -160%; }
          }

img
  {
    src: width: 150px; height: 250px;
  }

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8" />
    <title>Webpage</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
  </head>
  <body>

   <div id="titles"><div id="titlecontent">

      <h1> The</h1>
      <h1>Title</h1>

      <p>
         <img src="Images/Keito.jpg" alt="1">
        <img src="Images/Keio.JPG" alt="2">
         <img src="Images/Koit.jpg" alt="4">
         <img src="Images/Rene.jpg" alt="5">
         <img src="Images/Priit.jpg" alt="8">
      </p>

   </div> </div>

  </body>
</html>

Answer 1

您可以使用具有已定义高度的容器和 overflow:hidden 在滚动块太低时隐藏它。像这样：

html,
body {
  height: 98%;
}

.container {
display:bock;
  width: 100%;
  height: 99%;
  overflow: hidden;
  position: relative;
}

.scroll-block {
  display:block;
  margin: 15px;
  position: absolute;
}

h1 {
  margin: 15px auto;
}

.illus-elem {
  display: block;
  width: 250px;
  height: 100px;
  margin: 5px 0;
}

.illus-elem_bkg-blue {
  background: blue;
}

.illus-elem_bkg-yellow {
  background: yellow;
}

.illus-elem_bkg-red {
  background: red;
}

.illus-elem_bkg-green {
  background: green;
}

/*-- ANIMATION: FUNCTION --*/

@keyframes scrolltotop {
  from {top: 1000px;}
  to {top: 10px;}
}

/*-- ANIMATION: APPLY --*/
.scroll-block {
  animation-name: scrolltotop;
  animation-duration: 4s;
  animation-iteration-count: 1;
}

<div class="container">
<div class="scroll-block">
    <h1>The title</h1>
    <div class="illus-elem illus-elem_bkg-blue"></div>
    <div class="illus-elem illus-elem_bkg-yellow"></div>
    <div class="illus-elem illus-elem_bkg-red"></div>
    <div class="illus-elem illus-elem_bkg-green"></div>
  </div>
 </div>

似乎无法让我的滚动动画停止，解决问题。 | CSS & HTML

Can't seem to get my scroll animation to stop, resolution problems. | CSS & HTML

html

css

animation

resolution

css-animations