Blog 6: Urban Influence

Screen Shot 2015-04-27 at 2.06.59 AMUrban Influence is a design and creative strategy company. Their website contains a lot of cool CSS and jQuery features. The “work” page allows you to hover over multiple components in the grid, and it gradually changes color in an overlay and has animation with the line under the title. I decided to see what the code was for the hover effect, and it is applied in the CSS with the following code.The #c5a47e gives the yellow-ish color.

Screen Shot 2015-04-27 at 1.58.59 AM
.overlay,[class*="overlay"]{position:absolute;height:100%;width:100%;z-index:5;display:block;top:0;
left:0;z-index:2;background-color:rgba(0,0,0,0.6);-webkit-transition:background-color 1s ease;
-moz-transition:background-color 1s ease;transition:background-color 1s ease}
.overlay.overlay-alpha,.overlay-alpha{background-color:#c5a47e !important;opacity:.7 !important}

Blog 6: A election story in graphic novel form

61d80a7937f28a2c1d30a096e50fdd4c

The Guardian used comic and JavaScript to tell the presidential election story in a graphic novel form.

By scrolling down, readers can read the story frame by frame. In each frame, the JavaScript adds action to the story, something would move in the frame or something would pop up.

e54eaab444e76efd8ab573e63d9d6d84

The story is simple, but the JavaScript helps to create a vivid reading experience by simply scrolling down the page.

I think this kind of JavaScript effect works well for a story with a sense of humor.

Blog 6: NY Times Interactive Quiz

I decided to do the new york times multimedia quiz on how people talk. It was hard for me to figure out what actually created certain actions looking at the jQuery. However, I believe I definitely know what this does:

function surveyEnd() {

// fade out survey holder

$c.find(‘.quiz-container’)

.fadeTo(500, 0, function() {

$(this).hide();

// fade in the map holder

$(‘.map-container’).fadeTo(650,1);

})

// bring back map preloader

$c.find(‘#map-preloader’).show();

// get answer indices

$.each(responses, function(k,v) {

if ( v == ‘1’ )

answers.push(k);

})

This should be what happens when the survey ends and it fades out. The box goes away and a big map fades in. The .fadeTo is very simple but it makes for a clean switch. It is not distracting at all.

survey end and restuls
survey end and restuls

I wish I knew what the jquery was for the actual quiz. When the cursor goes over a possible answer, it is underlined and when it’s clicked it turns green and an X appears in the box. Once you hit next, a map will pop out on the side showing you a specific result for that answer. I wasn’t able to find it but I thought that was a simple, non distracting way to have answers be selected. Hopefully someone can help me figure this out.

Quiz
Quiz

Blog 6: White Frontier Brewery

The website I choose for this week’s blog is a brand website for a swiss beer company, White Frontier BreweryScreen Shot 2015-04-13 at 6.44.50 PM

The website is very beautifully designed by a company called McArnolds in Belgium. What’s interesting about this website is that the landing page asks if the visitor is above the legal drinking age in their country, if you click yes, the button would take you to the homepage, and if you click no, you will  go the the web-design company, McArnolds’s homepage.

The website uses a lot of javascript to reach its artistic look and interactive functions. The homepage, for example, is very visually focused. Each navigation section is actually a photo gallery, or even a videos. If you hover on one section, the images would change, and the videos would move as well. Such as the beer section, if you hover on it, the image of beer will change, but the background picture remains the same, and it looks great.

Because the website uses a lot of javascript functions, and many of them I’m not familiar with, and not sure how they correspond to the effects, so I’d like to talk about one basic language I picked up from the source code–VAR.

Screen Shot 2015-04-13 at 6.45.33 PM

var is a very keyword that declares a variable, optionally initializing it to a value. var affects the variable scope: Inside a function, all undeclared variables are global. Only those declared with var are local. This becomes very important when you have a lot of scripts running on the same page.

<script type=”text/javascript“>

//<![CDATA[
var controllerName=”home”;
var actionName=”index”;
var base=””;
var baseLang=”/en”;
var lang=”en”;
data={“showLegal”:true};//]]>

</script>

In Pieces – 30 Endangered species, 30 pieces

In pieces is an interactive exhibition turned study into 30 of the world’s most interesting and unfortunately endangered species.

The site is very interactive. All the animals are shown with lines and angles. The founder of the website is Bryan James, a 28 years old British website designer. He wanted to create something which not only worked as a project in itself, but also pushed this underused CSS polygons as far as possible.

The shard-shifting capabilities work in webkit-browsers only, which of course is a limitation but at the same time, it works on mobile which are almost completely webkit-based. Firefox does support the clip-path property, but as an SVG referenced shape and thus, the coding for movement works in an entirely different manner. He wanted to focus purely on the CSS route.

The code is: -webkit-clip-path: polygon( 40% 40%, 50% 60%, 60% 40% );

Even it looks pretty simple, it is scary to see the whole page of codes with enumerous -webkit-clip-path: polygon(%%%%%%). So it is not hard to imagine how many work James has put into this website. It is not something I can take from the website immediately but maybe I will be able to work on a project where I can put this into use.

Each shape is being morphed, moved and toyed with by a new set of co-ordinates, and as they are maintained as triangles throughout, this means 3 points, with CSS transitions to link up the movements. No tricks or tools have been used to get the illustrated results, code-wise or graphically. Point by point, shape by shape, each one has been handcrafted via a personally-created tracing JS function after illustration.
Each shape is being morphed, moved and toyed with by a new set of co-ordinates, and as they are maintained as triangles throughout, this means 3 points, with CSS transitions to link up the movements. No tricks or tools have been used to get the illustrated results, code-wise or graphically. Point by point, shape by shape, each one has been handcrafted via a personally-created tracing JS function after illustration.

Blog 6: The Russia Left Behind

I chose to study the New York Times story, The Russia Left Behind. It is a simple yet well-designed website that contains texts, slideshows, videos and interactive maps. After examining its codes, I found that this website uses a lot of “attr” in its jQuery.

Screen Shot 2015-04-13 at 1.20.56 AM

For instance, the website uses the codes below to make the effects of its slideshows:

container.append(“div”)

     .attr(“class”, “slideshow-button slideshow-button–next”)

     .on(“click”, function() { stopPlay(); showNext(); })

   .append(“svg”)

     .attr(“class”, “slideshow-button-arrow”)

     .attr(“width”, 22)

     .attr(“height”, 22)

   .append(“path”)

     .attr(“d”, “M3,1.008L20.742,9.045L3,17.083L6,8.917Z”);

W3Schools suggests that the attr( ) method sets or returns attributes and values of the selected elements. When the “attr” is used to return the attribute value, it returns to the value of the first matched element; while when used to set values, it can set one or more attribute or value pairs.

When it is used to set the attribute and value, it is always in the following format–$(selector). attr(attribute, value). So in the “.attr(“width”, 22)”, the attribute is width and the value is 22.

By using this method, the website can be more active and engaging.

Blog 6: Si digital

While snooping around in the code of a couple different websites, I ran into something interesting. I was looking at Si digital‘s site and liked how as you scrolled down, the text would appear.

Screen Shot 2015-04-12 at 9.59.26 PM

I attempted to find the source behind this. This whole site is very user-oriented. It looks nice and is extremely interactive. That made it kind of hard to tell what was what when I looked through the code.

Something that I did find interesting was the webkit-font-smoothing tag. I originally thought that had something to do with the text showing up as you scrolled, but after doing some more research, I realized that this was a way to make text look smoother and more appealing.

-webkit-font-smoothing: antialiased; was used often in this site, so I decided to look into it further. This site explains what exactly the difference is when you use this tag. It just adds a higher quality of font type if your particular font is not easy to read.

Screen Shot 2015-04-12 at 10.16.52 PM

Ultimately I didn’t really find what I was looking for, but I still found out something interesting along the way.