I have been researching and trying to imagine different ways users could navigate through digital poems. I think there is a lot of possibility here for innovation.

{{map out and add visual here of the possible ways that users could navigate poems 1) networked media idea 2) this 3) D3 and zoom js}}

I am broadly thinking about this navigation in two categories
{{make visual for}}

1) Linear

2) Non-linear

This post will regard the first type of linear navigation I am working on developing, which is a scroll method. The idea being that users would scroll down through the poem, with each new stanza animating into the viewport on user scroll. This idea is connected to some cool presentation solutions I have seen using D3. I have been particularly inspired by Jim Vallandingham’s “So You Want to Build A Scroller”. His presentation ‘deck’ from the 2013 OpenViz conference is a good example of this.

For my solution I am going to try and use P5 to access the data (the poem is stored in a json file (for more on the data structure of the poem see this post {{Link }}), and then I am going to try and use one of the many scroll libraries

# scroll js libraries I tried

– scroll magic
– Scroll Trigger
– scrollReveal

I ended up going with scrollReveal.

The solution for writing a program that would achieve the poem navigation through user scroll ends up being a pretty simple piece of code, which is both very nice-and disguises the immense difficulty I had in actually writing the program and getting it to work. That is to say, the working code-being what is left and necessary for function, is a sly mask for the entirety of the process and all of the code and libraries that have been cycled through. I imagine this is what trying to write good programs is in some way.

As an demonstration of what I mean, here is a screen shot from project folder after getting it to work and before cleaning it up

Going through the code

Loading up the header. As you can see below, in the header I loaded my google font for this project, as well as the p5 libraries, jquery, and my javascript file (sketch.js) and then finally my css page.

And then the body of the index.html page is very simple. It is just an headline for the project, and then loading slabtext, which is a javacript library for bold responsive headlines. And finally loading the scroll reveal js library which I will use to create the user scroll interaction.

The Javascript

Here is an image of the entire javascript portion

1) Load the poem
First I load the json file that is holding my poem, and then add a callback function as the second argument, so that p5 will load my json and then move on to the function I identified as ‘startUp.’


function setup(){
the_poem = loadJSON('poem.json', startUp)
noCanvas();
}


2) Write the poem to DOM

Remembering the the poem is in a son file with this structure

index: letter
lines: poem for that letter

I am iterating through the json the holds the poem, and for each entry in the json file I am

– creating a div to hold the entry
– adding a class to that div of divHolder, which I will use to style the elements using css
– creating an h2 element from the value of index
– creating a paragraph element out of the value of lines
– adding classes to each of the h2 and p elements-again for styling through css
– appending the index and lines (now called alphabet and stanza) to the parent div created as the first step


function startUp(the_poem){
for (var i = 0; i < the_poem.length; i++) { var divHolder = createElement('div', " ") divHolder.addClass('divHolder') var alphabet = createElement('h2', the_poem[i].index); var stanza = createElement('p', the_poem[i].lines) stanza.addClass('stanza') alphabet.addClass('letter') alphabet.parent(divHolder) stanza.parent(divHolder) }

3) Add scrolling to each element, and set the Animation

I struggled with this part the most. I have been struggling with trying to use external javascript libraries on dynamically generated elements from javacript. For example, it was very easy for me to use the scroll reveal library on elements that I wrote in html on the index.html page, but when trying to select elements created by javascript to manipulate in some way using a js library I have been getting errors. I have been looking into this for a while, and had managed to figure out there was some issue with the dynamically created elements not being appened to the DOM at the right time, or that there was some programmtic confusion where the external js libraries could select pre-existing dom elements but not dynamically created one. I was able to figure this out for scroll reveal js, using the following code placed at the bottom of my sketch.js file which holds all the additional javascript for the project. And placing the link to the js library at the very end of my body section of index.html, directly before the closing body tag.

In the example below I am defining what kind of animation I want each element to has as it enters the screen by user scroll. I am setting the time it takes to trigger the animation, and then the distance it travels in the animation, and the 'easing' is the behavior of motion for my elements. I imagine 'easing' as applying some real world physics, like the paths we actually move in and how we speed up and slow down our movements based on how close and far we are from starting and ending, and applying these to the movements of digital objects. Then I'm setting the rotation of the element, and finally the starting scale of the element-as it animates in towards a scale of 1, which would be it's default size set through css. So in the example below, the text will appear at .1 their normal scale, and as they animate in move up towards a scale of 1 for their final position. All of which will hapeen very fast. I haven't found a way to set the length of the animation using scoll reveal js, which I would really like to do. Otherwise I would look towards a greensock timeline for this kind of feature in the future.

And after defining my animation for when elements come into the viewport through user scroll, I select all elements with the class 'divHolder' which is the class I assigned to each div in the previous step, and then I call scroll reveal and attach my animation as the second argument along with my selected class

var fooReveal = {
delay : 100,
distance : '90px',
easing : 'ease-in-out',
rotate : { z: 10 },
scale : .1
};

window.sr = ScrollReveal({ reset: true }).reveal(document.getElementsByClassName('divHolder'), fooReveal);
}

CSS

The only really interesting css stuff is pictured below

I am floating the stanza's right, so that each letter appears with it's corresponding stanza in the same horizontal space.

The key to this whole experiment was figuring out the 'height: 100vh;' line of code, which sets the height of each element with the class divHolder to take up the entire viewport. This creates the effect where each stanza animated in as your scroll and takes up the entire screen. It took me a lot of experimenting and searching to even find the css attribute 'vh' and I haven't found a lot about it online. There is this article from the wonderful css-tricks website called 'Viewport Sized Typography.'

Here are images of the javascript code and the resulting project

[su_row][su_column size="1/2"]

[/su_column]

And here is a before and after of the project folder/file structure

[su_row][su_column size="1/2"]Before:
[/su_column]
[su_column size="1/2"]After
[/su_column]
[/su_row]
Before:

And here is a link to the website where you can go through the poem yourself

[su_button url="http://danielsilber-baker.com/bhm_poem_scroll/" target="blank" background="#d65459" size="6" wide="yes" center="yes" radius="10" icon="icon: tencent-weibo"]Here[/su_button]

Next Steps:
- user testing and iterate
- build into a framework that can be used as the UI for any poem given json x
- build out and document the second UI/UX for this poem, D3 style