Week 6: Comic Project – Andrew Joslyn (Chen)

Link: http://imanas.shanghai.nyu.edu/~adj311/commlab/midterm/

This project was something that I thought would be much simpler to execute than it was. After laying down the initial code, I was running into big problems making any progress whatsoever. I used the jquery plugin jInvertScroll (https://www.pixxelfactory.net/jInvertScroll/) to do what we were trying to do, but had previously installed another plugin that turned horizontal scrolling into vertical scrolling (https://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/), but what we didn’t understand is that the plugin actually treats horizontal space as scrolling up and down, using the “width” of the div set in css for the scrolling space horizontally. So the two plugins basically cancelled each other out and a lot of backtracking had to be done. The end product is proof of concept, something close to what I had originally set out to do, which is to create a sort of 3D effect looking into train car windows, but I’m completely aware there is room for improvement for almost every component of this project. As a test of my coding skills, this was actually fairly difficult up to the point where it made sense what I was doing.

Some things I didn’t get to achieve: I wanted to randomize the pictures so that every time you load the page the order would change, but this meant that the dimensions of the pictures would need to be the same, and with the meager/limited help I had, I didn’t have time to go in and fix every picture, so I used css to format the pictures (sloppily) as a compromise. I would have liked to include more pictures as well but since I used a flex box in the initial div, and no other formatting methods seemed to work as well, adding pictures to the middle layer (3 layers: background, middle layer for pictures, and train car in front) messed up the ratio while scrolling, and I would have to readjust each picture’s position as well as the “width” of the div (scrolling speed) accordingly, so I included what I thought were 10-12 good pictures from the initial batch that I gathered and settled with that. I would’ve liked to do more, but finding content, funny or not, is actually time consuming, and I wanted to focus on the coding aspect. The last thing I kinda messed up was the rotating backgrounds. I set up a simple array to change the background randomly, but because of the plugin I used, found it quite difficult to position the background images correctly, since the plugin changes what “height” and “width” are (height changes image height, but page height is artificially fixed to a value set by the user in the plugin to determine the overall “scrolling length” of the page, width also becomes scrolling speed). I wish I had animated the background images to fade in and fade out, or took more time to position them more visibly instead of just having the skyline. I do like the movement of scrolling the train against the city, I think it adds to the achieving the effect. On a last note, my Photoshopping was pretty shoddy too, but it was what it was. I used this picture:

but would have liked to use this one instead maybe. Its a cleaner, higher res image.

Code:

Leave a Reply