似乎無法讓我的滾動動畫停止，解決問題。

所以我一直在搞亂這個現在對於最近兩天尋找答案的任何地方。似乎無法讓我的滾動動畫停止，解決問題。 | CSS和HTML

我試圖與標題和圖片滾動動畫。

我希望動畫停止頁面（比搜索欄下）的頂部標題應該差不多到頂部和圖片應與冠軍差距很小停止。

我也想知道我怎麼可以設置網頁的分辨率所以不會在頁面底部的滾動條。

/* 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"> 
 
     \t <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>

來源

2016-11-18 Rene F.

可以使用具有定義高度和溢出容器：隱躲滾動塊時，它的低。像這樣：

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>

來源

2016-11-18 16:15:40 Dexter0015

這完美地工作！ –

似乎無法讓我的滾動動畫停止，解決問題。 | CSS和HTML

回答

相關問題