スクロールアニメーションを停止するように見えない、解決の問題。

だから私はこれをやめて、過去2日間どこでも答えを探しています。スクロールアニメーションを停止するように見えない、解決の問題。 | 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

答えて

関連する問題