Telling Better Stories With Bootstrap and Parallax

Ethan Ryan
Aug 9, 2017 · 4 min read

Life’s all about storytelling.

I’ve loved telling stories since I was a little kid.

I was obsessed with comic books growing up, and that lead to an obsession with regular books, the comicless kind, full of plain old words.

While I focused on telling stories with words over pictures, there’s no denying that stories can be enhanced with images. And one of the cool things about the internet is how easy it is to add images to HTML.

Bootstrap is an awesome, easy to use frontend framework, and Parallax is an awesome, easily created effect where background content moves at a different speed than foreground content as someone scrolls down the page.

Together, Bootstrap and Parallax can add new dimensions to stories told with only text.

I’ve taken a story I wrote a while ago and spiced it up with some code.

For anyone interested in achieving the same effect, here’s how i did it.

1 — initialize a new GitHub repository and clone it to your computer

Version tracking makes building anything with code much easier.

Follow the directions here on how to create a new repo onGitHub.

I initialized my repo with a README, then cloned the repo to my computer.

2 — create a local folder to hold your story files

cd into your new repo. This is where you’ll be creating your story.

Bootstrap has a great getting started tutorial.

I’m using the first Starter template provided by Bootstrap.

I added the following to the head of the index.html page to load Bootstrap via the CDN, and took out the rest of the stuff from the head section:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Karla:400,700" rel="stylesheet">

I also changed the css file name to ‘stylesheet’.

Now when I open that index.html page in the browser, I see some text on a barebones HTML document, which is exactly what I want to get started.

For now, all I’m going to do is change the title in the head and the h1 in the body to the title of my story, Mail Order Vampire.

adding story title

Then in Terminal, typing git status shows me:

Cool. Git recognizes we’ve added two files to our story project folder. As the last line indicates, those untracked files need to be added in order to commit them to our repo. We do this by typing:

git add .
git commit -m "adding index and stylesheet pages"
git push

running ‘git status’ again tells us that our branch is up-to-date with ‘origin/master’, and that we’ve got nothing to commit, as our working directory is clean.

3 — copy and paste our story text into our html file

Since I’ve already written my story, this step is easy.

Make no mistake, writing is hard!

Creating a piece of fiction that you’re proud of takes time and energy. It takes creativity and lots of typing and editing, and agonizing over word choices and murdering darlings.

Writing is rewriting, and rewriting seemingly never ends.

But once your story is in a shape you’re mostly happy with, copying and pasting that text into an HTML page is easy.

4 — style text with CSS

After pasting my story into the body of my HTML page, I wrapped the story in a div and added a class to my CSS page to style all that text in one shot.

.story-text {
white-space: pre-wrap;
}

The pre-wrap property preserves white space on new lines, spaces and tabs, and also wraps text.

I’ll want to add margins to the left and right of the page on big screen sizes, but I’ll come back to that later.

adding story text

Now, the fun stuff. Adding parallax images!

5 — Adding Parallax Images

Parallax is a really cool effect that’s easy to implement.

Here’s a quick tutorial from the site everyone loves to hate, w3schools.

Now that my story’s got some background images with some cool scrolling effects, it’s really starting to come together.

A little bit of code goes a long way both toward telling better stories, and toward telling stories better.

final title

Check out my story here: mailordervampire.com

Note: Unfortunately, resizing a browser window is not the same as viewing a site on an actual phone. Although Bootstrap makes websites responsive to different screen sizes, parallax images appear blurry on phones, so I set my images as background rather than background-image for small screens. This way the images appear on phones, but without that cool parallax effect. Hopefully they still look OK on tablets, I don’t have a tablet to test it on.

Ethan Ryan

Written by

// I dream in JavaScript // https://www.ethanryan.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade