Search code examples
htmlcssanimationcss-animationsresolution

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

so I've been messing with this and searching for answers anywhere for the past 2 days now.

I'm trying to make a scroll animation with the title and pictures.

I want the animation to stop on the top of the page (lower than the search bar) The title should go almost to the top and the pictures should stop with a small gap between the title.

I would also like to know how can I set the pages resolution so there wouldn't be a scrollbar on the bottom of the page.

/* 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>

Solution

  • You can use a container with a defined height and overflow:hidden to hide the scrolling block when it's to low. Like so:

    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>