CODEWITHSUNDEEP
htmlcssparallax
Steinar
Steinar

Reputation: 451

Animating Text with parallax background

I'm all new to this and I have this site that I'm using to learn the basics. I'm just put together a simple parallax scrolling effect, where the header is scrolling and contains one H1 element.

I've been trying to figure out if it's possible to put some scrolling animation on the text so the text behaves similar to the images in this video from DevTips: https://www.youtube.com/watch?v=WTZpNAbz3jg&feature=player_detailpage

I did try to put some jQuery together to target the H1 and use same technique as shown in the video, but it didn't work. Maybe my code is all wrong because the test he does where the scroll position is printed out in the console did not show for me.

Here's the html and css code that I'm working with. Unfortunately I can't add screenshots since I'm new here and lacking 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%;
}

Upvotes: 4

Views: 1067

Answers (1)

Ga&#235;l Barbin
Ga&#235;l Barbin

Reputation: 3919

Your code seems to work very well! Yet, the effect is not very apparent (but personally, I prefer discrete effects). Look at the snipppet in 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>

Upvotes: 2

Related Questions