Parallax Scrolling in Modern Web Design

With the advent of HTML5 and CSS3, developers and designers have a lot more freedom to explore creative forms of visualization on web interfaces. Often compared to Flash, HTML5, when used with CSS3 and Javascript , has the ability to create dynamic websites with animated transitions in a fast and easy way. Moreover, while flash websites required users to first download appropriate software to run the flash itself, HTML5 is supported in all modern browsers and loads extremely quickly.

The ability to create dynamic website opens many new doors for creativity. Web design trends follow technology, so as more and more features of HTML were being invented, new and innovative approaches for displaying media content and information were being made. Recently, the usage of parallax has gained popularity in web design.

The term “parallax” first came from the visual effect of 2D side scrolling videogames that used different background image movement speeds to create the illusion of depth during gameplay. This was generally done by making the background of the game move slower than the foreground in order to make it seem further away.

This same concept applies to parallax site design in which the background of the website moves at a different speed as the rest of the page for an impressive visual effect that allows for countless creative applications for online storytelling. Parallax design gives websites a great opportunity to wow viewers with page depth and animation, take a story-telling approach to guide visitors through the site, and provoke curiosity.

Let’s take a look at two websites that both use parallax web scrolling, but for different purposes. The first one is an online article from the New York Times. The article itself is a short story about cage fighter. As you scroll through the content, the illustrations come alive with clever parallax animations and alterations, allowing the viewer to fully immerse into the content.

Article: http://www.nytimes.com/projects/2013/tomato-can-blues/?hp

As you can see while scrolling through, the images come to life and aide in the storytelling process. This is achieved by having each element in a image be a separate image, and depending on where the user has scrolled, the separate images would move to slightly towards one direction. The scrolling interaction gradually exposes more of the story, revealing video, audio and image galleries at relevant points.

Another example of parallax scrolling can be seen in another type of website – a portfolio. Whereas the New York times article’s main purpose was to tell a story, this portfolio’s main purpose is to convey large amounts of information.

http://lamoulade.com/

In this site, the use of parallax scrolling is not to add dimension to a 2D website, but to add interesting transitions and effects. The entire website is designed as a single page scrolling site, but as the user scrolls through, the website plays through a series of animations that progressively adds content to the screen.

This use of parallax can be seen as either innovative and interesting, or distracting. On one hand, it is creative because of its animated content. Yet, the constant moving of things can distract the user away from the main content of the page.

The trend for parallax in modern websites shows no signs of stopping. As a technique it has been used by games designers and other artists for many years, and has only in the last two years taken off as a popular way for web designers and developers to show off their skills and get creative

Introducing Salt Water Intrusion

In 2012, India’s first Aquifer Atlas was released by the Central Ground Water Board. It served to confirm pre-existing studies showing that over-exploitation of groundwater resources had resulted in saline intrusion in many parts of Chennai city, rending ground water salty and unusable. According to the ‘Aquifer Vulnerable Map’ prepared as a part of the atlas, Chennai was classified as ‘Over-Exploited’, but was interestingly among only four places in the State of Tamil Nadu that were classified as such.

In 2007, the Public Words Department had demonstrated that sea water had contaminated aquifers as far as 15 kilometers away from the coast.  This was a cause for concern because aquifers were interlinked and that pollutants could potentially travel from one to another. Unsurprisingly, the focus of studies recently shifted to South Chennai. However, this was also attributed to rapid increase in water demand in those areas due to rapid urban expansion. On the whole, the Chennai dsistrict was marked as having Nitrate levels higher than the permissible limit of 45 mg/L.

Anonymous sources said that a major reason for such sea water intrusion was repeated violations of rules relating to restrictions placed on tube wells in coastal areas referred to as Coastal Regulation Zones (CRZ). Further, they questioned whether or not people were punished for violating these regulations.

—

This article presents a general picture of salt water intrusion in Chennai. It is one of the two major issues that has been resolved by rainwater harvesting, with the other one being water scarcity.

Source:

Yamunan, Sruthisagar. “Sea Water Intrusion a Big Challenge for City Aquifers.” The New Indian Express, October 8, 2012.

The Mercury Cycle

The Mercury Cycle: Mercury is released from both natural and anthropogenic sources. Volcanoes, land emissions, and geothermal vents are all sources of natural mercury emissions. The budget of these combined sources is estimated to be about 500 megagrams per year, but this number is uncertain. In order to determine the actual historical budget, it is necessary to distinguish between primary emissions and preindustrial secondary fluxes. Primary emissions refers to sources resulting from the lithosphere. Preindustrial secondary fluxes of mercury from the land result from soil mercury that originated from the atmosphere. Distinguishing between these is important to understanding how anthropogenic emissions will disturb mercury’s natural cycle. Anthropogenic emissions originate from mining and industrial processes, biomass combustion, and fossil fuel combustion. Mercury can also be found in commercial and consumer products and processes and further mercury emissions occur when these products are incinerated. In many developing nations, a large source of mercury emissions is artisanal and small-scale gold mining which employs mercury in the mining process. These anthropogenic contributions have altered the biogeochemical cycle of mercury. Because of these activities, more mercury is circulating through the cycle, and will continue to do so for hundreds and thousands of years. As mercury cycles through the atmosphere, ocean, and land, it has implications for both human and environmental health. This historical mercury has heightened the natural fluxes between the atmosphere and the ocean and between the atmosphere and the land. In the figure above, preindustrial fluxes and inventories are in black while anthropogenic contributions are in red.

Selin NE (2009) Global Biogeochemical Cycling of Mercury: A Review. Annual Review of Environment and Resources 34:43-63.

Social Life of Small Urban Spaces

Adam – I think you might find this video interesting (if you haven’t already seen it).  It’s a research project about effective and ineffective strategies in urban public spaces in New York city.  It was made in the 1970s and definitely looks it, but is still very relevant today.

Link

The book-in-progress I mentioned in class

A former classmate of mine, she seems to doing some interesting reporting on native innovation in Africa!

Objects from today’s class

Hi, here are the photos (plus one video) of your ‘inspirational’ objects from our first class

   

Hello, class!

Hello thesis prep class!

This blog is here to help you gather and articulate your thoughts related to your thesis topic.  Feel free also to upload any images/links/videos that you find compelling as well.  In addition to writing your own posts, it might be useful to read and comment on your classmates’ posts.  I’m really excited about your thesis ideas!  Welcome and have fun this semester!

Wenfei