Category Archives: Uncategorized

哥伦比亚中文学校

hkhkljkljljkjbjhgjkj

Advertisements

Wrapper’s Delight: JQuery & JavaScript

I decided to take a look at The Telegraph’s story, “Wrappers delight,” by Richard Preston. The interactive site examines the success of Scottish sweet company, Tunnocks

Image

My favorite thing about the site is the design. The boldness in color and clarity of the photos grabs the readers’ attention, and gives them the initial reaction that the site is aesthetically pleasing.  It was a good designing decision not to add too many other fancy designs, as to not overwhelm the eye.  

Image

The way the text was arranged with simple and clean, with a white and black color scheme. An impressive feature of the site is the static background photos and the scrolling overlayed text. Paired together, it gives the user the illusion that both are moving on the page. 

Image

The way the text is broken up between pictures really encourages the user to scroll to continue reading the story. The text scrolls up or down at the move of your mouse, which allows the content to either conceal or reveal the next photo in the story, which also adds to the user experience. 

Here I could see the I see some of the different divs in the website that signal the change of photos….

Image

…as well as which effects were JQuery functions were coded. 

Overall all, I enjoyed the site because it the information was presented clearly without much distraction and yet, still being visually pleasing and interesting. 

Javascript: Polygon

Screen Shot 2013-12-09 at 6.25.27 PM

 

The Javascript in Polygon’s website is pretty cool, but is also a little distracting to me. I think that is the borderline that Java always straddles. When you first get to the page, the screen shot above is what you see, but as you scroll down you get to the actual page.

Screen Shot 2013-12-09 at 6.25.47 PM

 

I like that it seems like we have a cover page and are moving into a book, but I don’t think it necessarily matches with the rest of the website. The code is below.

// Check cookie outside DOM ready so there’s no flash
if (!$.cookie(‘console_launch_cover_both_nov-2013’)){
$(‘body’).addClass(‘polygon-cover-running’);
$(‘#polygon-fp-cover’).show();
$(‘#polygon-fp-cover’).height($(window).height());
} else {
$(‘#polygon-cover-teaser’).show();
$(‘#polygon-cover-teaser’).on(‘click’, function(e){
e.preventDefault();
$.removeCookie(‘console_launch_cover_both_nov-2013’, { path: ‘/’ });
document.location.reload();
});
}
$(function(){
var windowHeight;
var coverScrollDistance;
var mostRecentScrolledPosition;
var handleResize = function() {
windowHeight = $(window).height();
coverScrollDistance = windowHeight / 3;
var $cover = $(‘.m-fp-cover’);
$cover.height(windowHeight);
};
var coverSetup = function() {
var $cover = $(‘.m-fp-cover’);
var coverElement = $(‘.m-fp-cover’).get(0);
var $wrapper = $(‘.l-global-wrapper’);
var $body = $(‘body’);
handleResize();
$body.addClass(‘polygon-cover-running’);
$cover.height(windowHeight);
var mostRecentScrolledPosition = 0;
var wasAdded = false;
var wasRemoved = false;
var scrollHandler = function() {
mostRecentScrolledPosition = $(window).scrollTop();
setCoverPosition();
}
var setCoverPosition = function() {
// If we’ve scrolled more than the height of of the window than behave normally
if (mostRecentScrolledPosition > coverScrollDistance) {
if(!wasRemoved){
$body.removeClass(‘polygon-cover-running’);
$wrapper.removeClass(‘polygon-cover-running’);
$cover.css({‘margin-top’:’0′, ‘display’:’none’});
$wrapper.css(‘margin-top’, coverScrollDistance);
$.cookie(‘console_launch_cover_both_nov-2013’, ‘true’, { expires: 30, path: ‘/’ });
wasRemoved = true;
wasAdded = false; // reset this
}
} else if (mostRecentScrolledPosition >= 0) {
// This is where we move the cover
coverElement.style.top = -(mostRecentScrolledPosition * 2)+”px”;
if(!wasAdded){
$cover.css({‘display’:’block’});
$wrapper.css(‘margin-top’, ‘0’);
$wrapper.addClass(‘polygon-cover-running’);
$body.addClass(‘polygon-cover-running’);
wasAdded = true;
wasRemoved = false; // reset this
}
}
};
$(document).scroll(_.throttle(scrollHandler, 50));
$(‘.m-scroll-instructor’).on(‘click’, function(e){
e.preventDefault();
$(‘html,body’).animate({
scrollTop: windowHeight / 3
}, 800);
});
};
if(!$.cookie(‘console_launch_cover_both_nov-2013’) && !Vox.Environment.touch()) {
handleResize();
$(window).resize(_.debounce(handleResize, 300));
coverSetup();
} else if (Vox.Environment.touch()) {
$.cookie(‘console_launch_cover_both_nov-2013’, ‘true’, { expires: 30, path: ‘/’ });
}
if (navigator.msMaxTouchPoints > 0) {
$(‘.m-fp-cover’).css(‘position’, ‘static’);
}
});

‘Forty Days of Dating’ Design

I came across this website through facebook and spent a couple hours reading the entire thing. I’m not sure if that is directly related to the design, but it definitely didn’t hurt. The basic premise is that two friends date for forty days and document every day of the experience. The website is completely beautiful. Each day of dating has it’s own page that opens up, there is a sticky nav at the top and when you hover over the flowing list of days each one shows what day it represents.

Screen Shot 2013-12-09 at 6.38.53 PM

 

When you click on each day you get an interview with the couple and there are usually doodles, photos, gifs, or videos.

Screen Shot 2013-12-09 at 6.41.34 PM

 

I thought this website was really cool because it’s not necessarily a piece of journalism (although you do learn a lot about relationships and it is non-fiction) but I think this general idea for a design could be easily used on a news website. I like the way it condenses and opens up, it feels as though you are unfolding an accordion as you read. Overall, this is a really cool way to design a longer-form story.

Church of the Atom — Cool way to look at beer

This was a cool site I found the on Fueled Blog where I visit every now and then for design inspiration. This week they had Church of the Atom site as one of their top favorites. I found this site to be a really cool way of organizing information, much like the secrets we have to organize. The colors are awesome and the navigation bar is aesthetically pleasing and very functional.

Screen shot 2013-11-29 at 3.36.06 PM

This is the home page ^^^. It’s very simple and contains a great photograph. You click on the text to enter the site. The text was a separate image that contained a link to the site containing the content. Once you enter you see this.

Screen shot 2013-11-29 at 3.36.31 PM

When you scroll, the nav bar stays at the top of the screen. This was done my putting the nav bar under the class “fixed.”

Screen shot 2013-11-29 at 4.04.59 PMIn CSS, it looked like this:

.fixed {
position:fixed;
margin: 0 auto;
top: 10px;
}

This was pretty cool to me, because jquery wasn’t used to keep the nav bar sticky, like I have learned in the past. Fixed was all it took.

When you click on the triangle, the page moves up and down to the picture it is linked to. From looking at the code, I found they site designers used a vertical carousel using Jquery. This allowed the user to click arrows on the sides to view the label of the beer and then a sort description of the beer. This would be a great feature for the secrets project.

Screen shot 2013-11-29 at 3.36.51 PM

After looking at the code and other aspects of carousels, I found a web site that somewhat explains and shows the code for the different styles of carousels including vertical. Here is the link: http://bxslider.com/examples/carousel-demystified

Banana Cafe

Banana Cafe is a fashion website that I stumbled upon on the Internet while searching for sites with impressive use of JQUERY and other design. The page catches attention right away as it pumps upbeat music on a loop right when you enter the page, additionally the use of primary colors as the blocks in a chaotic layout creates a bold feel, which works since it is a fashion website. 

Image

 

A really awesome element of this site that I thought made it unique is the snowboarding video in the background that loops repeatedly. At first I assumed that this would be a JQUERY trick, but after looking at the coding it seems to be an element that is embedded in the html. 

Image

 

This site DOES use JQUERY in it’s design, it uses it to link elements so if users click on a link like “Lookbook” or “Marca” the page automatically scrolls down to that element. This is something that I would like to include on my interactive site, one continuous page of elements instead of everything being linked for separate pages. Another cool aspect that I found is that when you scroll over one of the colored block elements that has clothes on it, it rotates to the back side, revealing that these squares are actually 3D cubes. When the mouse is moved, it rotates back to the front. 

Image

 

This site uses some advanced techniques for making it interactive in a way that is intriguing and unique, but still totally functional for users. My goal is that I will be able to take some of the original ideas from this site and tweak them in a way that works for me as well while designing my site. 

Mammoth Media CSS

Mammoth Media is a website dedicated to visual storytelling. The general feel is a sense of adventure and originality.

The first page on the site prompts users to watch a short video meant to give them a feel for the kind of work the company creates. It is a brief compilation of clips from a variety of their projects set to the tone of relaxing music. At the end it offers the opportunity to click on other work.

Image
One of the features of this website that I particularly like and wanted to learn for my assignment was how to have my photos become transparent when I scrolled the mouse over it though I could still see the picture. It also displays the title of the project. The only thing that I would criticize is the fact that clicking on the photo box itself does not take you to the page.
Image
Another element I like about this design is that the side navigation bar is fixed and everything that scrolls is constrained to the box with all of the projects. The elements are right next to each other, but the organized grid makes it so that it doesn’t look overwhelming. Overall this is an easy to use site with great CSS that makes it visually appealing and easy to function for users.