Built with blockbuilder.org
Last active
February 23, 2018 14:50
-
-
Save smokbel/049a9e691820f2d345b444e4a10bf8ec to your computer and use it in GitHub Desktop.
scrollerpractice
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| .heading { | |
| text-align: center; | |
| margin-top: 20vh; | |
| margin-bottom: 20vh; | |
| position: relative; | |
| height: 200px; | |
| } | |
| body { | |
| font-family: Helvetica, Arial; | |
| } | |
| #container { | |
| position: relative; | |
| z-index: 100; | |
| } | |
| #viz { | |
| position: absolute; | |
| top: 50vh; | |
| right: 10%; | |
| width: 35%; | |
| height: 50vh; | |
| z-index: 50; | |
| background-color: DarkGrey; | |
| } | |
| .text { | |
| width: 50%; | |
| padding-left: 200px; | |
| padding-top: 25vh; | |
| padding-bottom: 25vh; | |
| } | |
| .text:first-child { | |
| padding-top: 45vh; | |
| } | |
| .text:last-child { | |
| padding-bottom: 45vh; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="viz"> | |
| </div> | |
| <div id="container" style="height: 100vh; overflow: scroll"> | |
| <div id="sections"> | |
| <div class="heading"> | |
| <h2> Data Story Title Placed Here</h2> | |
| <h4> Short intriguing paragraph summarizing the below data will be described here.</h4> | |
| </div> | |
| <div class="text"> | |
| <p>This will describe the first piece of data</p> | |
| </div> | |
| <div class="text"> | |
| <p>This will describe the second piece of data</p> | |
| </div> | |
| <div class="text"> | |
| <p>This will describe the third piece of data</p> | |
| </div> | |
| <div class="text"> | |
| <p>This will describe the fourth piece of data</p> | |
| </div> | |
| <div class="text"> | |
| <p>This will describe the fifth piece of data</p> | |
| </div> | |
| <div class="text"> | |
| <p>This will describe the sixth piece of data</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment