Geek Answers Handbook

Animation of text with parallax background.

I'm all new to this, and I have this site that I use to learn the basics. I just put together a simple parallax scroll effect where the title scrolls and contains one H1 element.

I’m trying to figure out if I can put some kind of scrolling animation in the text so that the text looks like the images in this video from DevTips: https://www.youtube.com/watch?v=WTZpNAbz3jg&feature=player_detailpage

I tried to compose some jQuery for targeting on H1 and use the same technique as in the video, but this did not work. Maybe my code is wrong because the test that it does when the scroll position is printed on the console didn't show up for me.

Here is the html and css code I'm working with. Unfortunately, I can’t add screenshots, as I am new here and not enough points.

Thanks a bunch!

Html

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Parallax</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="masthead">
        <h1>Some Text</h1>
    </div>

    <div class="page"></div>

    <script src="jquery-2.1.3.js"></script>
    <script src="function.js"></script>
  </body>
</html>

CSS

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0px;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}

body {
  overflow-y: auto;
  font-size: 120%;
  perspective: 1px;
  transform-style: preserve-3d;
}

h1 {
  color: #fff;
  font-size: 300%;
  text-align: center;
  padding-top: 200px;
}

.page {
  padding: 20px 20%;
  position: relative;
  top: 60%;
  background-color: #fff;
  height: 900px;
}

.masthead {
  position: absolute;
  background: url("000017.jpg");
  width: 100%;
  height: 60%;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 50% 50%;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: cover;
  transform: translateZ(-0.9px) scale(1.9);
  z-index: -900;
  top: -20%;
}
+4
source share
1 answer

Your code works very well! However, the effect is not very clear (but personally I prefer discrete effects). Look at the snippet on the full page.

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0px;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}

body {
  overflow-y: auto;
  font-size: 120%;
  perspective: 1px;
  transform-style: preserve-3d;
}

h1 {
  color: #fff;
  font-size: 300%;
  text-align: center;
  padding-top: 200px;
}

.page {
  padding: 20px 20%;
  position: relative;
  top: 60%;
  background-color: #fff;
  height: 900px;
}

.masthead {
  position: absolute;
  background: url("http://placehold.it/800x600/00ffff/66ffff&text=background") #55ffff;
  width: 100%;
  height: 60%;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 50% 50%;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: cover;
  transform: translateZ(-0.9px) scale(1.9);
  z-index: -900;
  top: -20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Parallax</title>
  </head>
  <body>
    <div class="masthead">
        <h1>Some Text</h1>
    </div>

    <div class="page"></div>

  </body>
</html>
Run code
+2
source

More articles:


All Articles