Monthly Archives: October 2013

CSS Image Hover effect: Grey to Color.

Link to the site: http://www.jeremyholmesstudio.com/

What I like about this website is its design on image thumbnails. As you can see from the screenshots below, these grey thumbnails turn into color when you move the mouse over the image. I like this effect because it creates a sense of movement as if the users are “revitalizing” the image.

Screen Shot 2013-10-30 at 1.39.36 PM

(When you move the mouse over the image…)

Screen Shot 2013-10-30 at 1.39.50 PM

I looked into the website’s HTML, and found out it actually used javascript as listed in its <head> section. I would assume it helps the hover effect. The “id” for black and white images are “project_thumb”. and for the original color image the “id” is “cardthumb.”

<script type=”text/javascript”>
$(document).ready(function(){
createHover();
});
function createHover() {
$(“.project_thumb”).unbind(‘mouseenter’).unbind(‘mouseleave’); // reset the hover to prevent doubling
$(“.project_thumb”).bind(“mouseenter”,function() { // create hover
$(“img”, this).fadeTo(10, .1); // Sets the opacity to 70% on hover
}).bind(“mouseleave”,function(){
$(“img”, this).fadeTo(10, 1.0); // Sets the opacity back to 100% on mouseout
});

</script>

 

The actual HTML for the black and white image contains this part that is related to the hover effect:

<div id=”item_3627254″ name=”3627254″ page=”1″ spot=”-1″>

<div id=”pr_contain_item_3627254″>

<a href=”/The-Green-Guide-for-Horse-Owners-and-Riders” onmouseover=”this.className=’hover’;” onmouseout=”this.className=’nohover’;” id=”p3627254″ rel=”history” name=”jeremyholmesstudio” onfocus=”this.blur()”>

<div class=”loader_holder” id=”load_3627254″>

<img src=”/_gfx/loadingAnim.gif” style=”opacity: 1;”>

</div>

<div class=”cardimgcrop notitle_notag” id=”cardthumb_3627254″ name=””>

<img src=”http://payload66.cargocollective.com/1/5/190228/3627254/prt_184x184_1344956617.jpg&#8221; border=”0″ rel=”testprt_1344956617.jpg” style=”opacity: 1;”>

</div>

</a>

</div></div>

 

 

And in the CSS stylesheet, “project_thumb”, “cropimgcrop” and “cardthumb” are defined:

 

 

.project_thumb {
    float: left;
    margin: -5px 0px 32px 31px;
    padding: 0px 0px 0px 0px;
    position: relative;
    text-align: left;
}

.project_thumb .hover {
    cursor: pointer;
    text-decoration: none;
}

.project_thumb .nohover {
    text-decoration: none;
}

.project_thumb:hover .cardimgcrop img {
    opacity: 0;
    filter: alpha(opacity=0);
}

.cardimgcrop img {
    opacity: 1;
    filter: alpha(opacity=100);

    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
}

.project_thumb .hover .thumb_title span {
    text-decoration: none;
}

.project_thumb .cardimgcrop:active {
    margin: 0px 0px 0px 0px;
    border:0px solid #ffffff;
    -moz-box-shadow: 0px 0px 0px #888888;
    -webkit-box-shadow: 0px 0px 0px #888888;
    box-shadow: 0px 0px 0px #888888;
}

.project_thumb.active .cardimgcrop {
    border: 0px solid #2d86ff;
    -moz-box-shadow: 0px 0px 0px #888888;
    -webkit-box-shadow: 0px 0px 0px #888888;
    box-shadow: 0px 0px 0px #888888;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}

.project_thumb.active .thumb_title span {
    text-decoration: none;
}

.cardimgcrop {
    background: #ffffff;
    border: 0px solid #ffffff;
    margin: 0px 0px 0px 0px;
    padding: 0 0 0 0px;
    position: relative;
    min-width: 184px;
    min-height: 134px;
}

.cardimgcrop.notitle_notag {
    margin-bottom: 0px;
}
#cardthumb_3627254 {
    background-image: url(https://dl.dropbox.com/u/13148572/JHStudio_Web/btn/projects/horsecolor_btn.jpg); 
margin: 0 0px 0 0px;}

The coding is quite complicated as the designer created different parts of image using photoshop. So it’s important to have everything sorted out in mind and create correct <div> to arrange them, and matching CSS to define the effect.

The Kitchen Community: Beautiful Minimalistic Interactive Design

I love this site. I found it by chance (googling interactive html websites, go figure). I like this site because it is simple, versatile, and easy to navigate, while still being beautiful and having a clear and visually appealing design.

Image

The main page has a photo background, and information, which can be navigated with left and right arrows, which when clicked create an interesting effect of sliding the page over to reveal the next page.

The page also has a transparent top horizontal menu bar. When you hover over each link, a menu box appears.
Image

All of the navigation and menu bars, while there are many, are transparent and float nicely over the background image, creating a slick and minimalistic design — even for a site with a lot of content on it.

Some of the menu items appear as a slide-up box which you can “open” and “close”. This is a nice little interactive technique that allows users to see small bits of information without leaving the original page.

Image

Image

Other menu item content comes up as a black “popup” window within the page, with an additional black overlay. This is a nice interactive feature because it doesn’t feel like you are moving to new content, and the black-out effect makes it easy to focus on the information at hand. An X at the bottom of the box makes navigation easy to understand how to bring you back to the main page.

Image

Clicking one of the menu items will bring you to a new more text heavy page. This is set up similarly with a floating transparent box over a background image. The interesting effect here is that you  scroll only the text box, while the background image remains fixed.

Image

I think any of these elements would provide useful interactive navigation for our next website. By creating minimalistic and simple navigations and information boxes, the rest of the site is allowed to be very visual and colorful.

For the HTML/CSS, their coding was very convoluted and not tagged or noted (something I will be sure to do more, looking through this code to try to find distinct elements was not fun…).

However, here is some of the coding that I found for doing some of the box overlays. (I know, it hurt my brain to look at it too)

<div></div>’, gallery_markup: ‘<div> \ <a href=”#”>Previous</a> \ <div> \ <ul> \ {gallery} \ </ul> \ </div> \ <a href=”#”>Next</a> \ </div>’, image_markup: ‘<img id=”fullResImage” src=”{path}” />’, flash_markup: ”, quicktime_markup: ”, iframe_markup: ”, inline_markup: ‘<div>{content}</div>’, custom_markup: ”, social_tools: false }); }); }); /* ]]> */ </script> <script type=”text/javascript”> /* <![CDATA[ */ jQuery(document).ready(function($) { // setup mediaelementplayer $(‘video’).mediaelementplayer( /* Options */ ); // setup overlay for external page $(“.wp_lightbox_url_content_trigger”).overlay({ expose: ‘#789’, onBeforeLoad: function() { // grab wrapper element inside content var wrap = this.getOverlay().find(“.contentWrap”); // load the page specified in the trigger wrap.load(this.getTrigger().attr(“href”)); } }); // setup overlay actions to a href $(“.wp_lightbox_html_overlay_trigger”).overlay({ expose: ‘#789’, onLoad: function(content) {}, onClose: function(content) { if (navigator.userAgent.indexOf(“Firefox”) == -1) { var count = 0; $(“video”).each(function() { $(“video”)[count].player.pause(); count = count + 1; if (count > 20) { return false; } }); } } }); }); /*]]>*/ </script>

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.

The Escape Committee’s beautiful HTML/CSS techniques

When I visited the Escape Committee’s website, I knew immediately I wanted to copy its CSS technique for my next website.

The creators of this site appeared to use a grid system when designing the home page; the page consists four rows of three photos and/or projects. Not all of the boxes are the same size, which adds an asymmetrical touch to the grid pattern.

Screen shot 2013-10-29 at 3.00.05 PM

While inspecting the home page’s HTML, I realized the site’s developers used a code I was unfamiliar with. The following is  small chunk of code the developers used to design the page:

<div class=”m-home_content” >
<div class=”grid-pageContentContainer” >
<div class=”grid-homeContent style-white u-clearfix” >
<div class=”grid-homeContent_itemA grid-homeContent_itemDouble” >

Another design feature I love about this site is the hovering effect we see when we scroll over one of the photos. When we move our computer mouse over a photo, the photo becomes darker, and text appears that tells us the name of that project. We now also have the option to click on “View Article.”

Screen shot 2013-10-29 at 3.01.08 PM

The HTML I found for this effect is as follows:

<div class=”c-imageBlock c-imageBlock_verticalAlign c-hideContentUntilHover” style=”background-image:url(http://www.escapecommittee.com/wp-content/uploads/2013/05/11-580×400.jpg >

The site’s grid pattern adds organization to the site, and its hover effect allows the user to know what he or she will see once he or she clicks on one of the squares. I would like to use these techniques when I create my next website.

Hover effect using Javascript

http://codecanyon.net/item/jfade-jquery-hover-effect/full_screen_preview/124433

In this website, when you hover over one image, the rest images will have a decreased opacity. This is very effective in drawing people’s attention to this particular image.

In order to do this, we first need to copy paste the following javascript into the head section of the html file.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js&#8221; type=”text/javascript”></script>

<script type=’text/javascript’ src=’js/jfade.js’></script>

This step is to link the html file to one particular javascript file called jfade.js.

Also in the html file, the following code is needed in the body:

$().ready(function() {
$(‘.jfade_image’).jfade();
$(‘.portfolio’).jfade({
start_opacity: “.4”,
high_opacity: “1”,
low_opacity: “.2”,
timing: “500”
});
$(‘.button’).jfade({
start_opacity: “1”,
high_opacity: “1”,
low_opacity: “.4”,
timing: “500”
});
$(‘.text’).jfade({
start_opacity: “1”,
high_opacity: “1”,
low_opacity: “.7”,
timing: “500”
});
$(‘.links’).jfade({
start_opacity: “.9”,
high_opacity: “1”,
low_opacity: “.2”,
timing: “500”
});
});

And in the jfade.js file, the code is as follows:

$(function($) {
$.fn.jfade = function(settings) {

var defaults = {
start_opacity: “1”,
high_opacity: “1”,
low_opacity: “.5”,
timing: “500”
};
var settings = $.extend(defaults, settings);
settings.element = $(this);

//set opacity to start
$(settings.element).css(“opacity”,settings.start_opacity);
//mouse over
$(settings.element).hover(

//mouse in
function () {
$(this).stop().animate({opacity: settings.high_opacity}, settings.timing); //100% opacity for hovered object
$(this).siblings().stop().animate({opacity: settings.low_opacity}, settings.timing); //dimmed opacity for other objects
},

//mouse out
function () {
$(this).stop().animate({opacity: settings.start_opacity}, settings.timing); //return hovered object to start opacity
$(this).siblings().stop().animate({opacity: settings.start_opacity}, settings.timing); // return other objects to start opacity
}
);
return this;
}

})(jQuery);

The last step is to add a class to each image you the effect to apply. Here the class is called jfade_image. And the name should be consistent in the html file and the js file.

Parallax scrolling technique

In this website project, I’d like to use parallax scrolling technique, which gives users a 3-D like experience when navigating the site.

Here’s an example: http://boy-coy.com/#contact

It does not merely use CSS, but javascript as well. We need to connect to jQuery, which is “a multi-browser (cf. cross-browser) JavaScript library designed to simplify the client-side scripting of HTML” according to Wikipedia.

For instance, in a simple two-photo site (source), the html file will be written in this way:

<!doctype html>
<html class=”no-js” lang=”en”>
<head>
<meta charset=”utf-8″>
<!– CSS Code –>
<link rel=”stylesheet” href=”css/style.css”>
<link rel=”stylesheet” href=”css/reset.css”>
<!– JS Code –>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script&gt;
<script src=”js/script.js”></script>
</head>

Additionally, we need to have <section id=”home” data-speed=”10″ data-type=”background”> in <body> part.

And then, in the reset.css file, we need to set lots of stuff “block” in order to create the feeling of 3-D.

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

Javascript allows auto position adjusting, and to be honest, I’m still learning, and IT IS HARD!

Site Critique: Invisible Children

This project once swept the nation, then, I know, a lot of controversy bursted out. And that’s why I decided to take a look at the website of Invisible Children.

Screen Shot 2013-10-10 at 2.34.47 PM

The first thing that got my eyes was the color contrast between vibrant blue and black-and-white photo background. In addition, the white navigation bar with black letters on stand out against the background, and I think it makes the site’s information very easy to find and read for the audience.

Screen Shot 2013-10-10 at 2.36.28 PM

This page is under “#ZEROLRA” tab, and you can really see that the site’s main colors: bright blue, gray, white and black. I like how the website mainly uses only these colors and keeps its simplicity, letting the viewers to focus on its content rather than its look.

Screen Shot 2013-10-10 at 2.36.40 PM

Another feature that I found interesting was also on “#ZEROLRA” page. This illustration gives a brief explanation on the process of escape from the war scene, which the group is currently the most focused on. If you bring your cursor over an illustration…

Screen Shot 2013-10-10 at 2.37.19 PM

…the information box pops up. Using this, a reader can get essential information in one seating, and I think it’s a very convenient feature especially in such site with so many information.

Screen Shot 2013-10-10 at 2.38.03 PM

And because the group focuses and depends A LOT on donation, the site has a little timeline of goal donation to achieve their projects. However, I don’t really like that you can see this information in different forms in every page of the site. I understand it’s really important and donation is a main goal for this website, but it’s just too much. It makes me feel like I don’t want to make a donation because every page of the site asks a viewer for money.

Screen Shot 2013-10-10 at 2.41.04 PM Screen Shot 2013-10-10 at 2.41.25 PM

Another informative feature that’s helpful to understand the website is this timeline. This shows the story that Invisible Children group is concerned about and what the group has been doing to solve the concern. If you click a year, you can see a list of significant events happened that year. It’s another convenient overview of the story, and it’s very easy to navigate and understand.

Screen Shot 2013-10-10 at 2.43.45 PM

 

In addition to donation, the group’s another big focus is on social network services and promotion of itself. You can see this box of email sign up and the group’s SNS information at the bottom of every page, but it’s not as bothering as the donation information on each page.

Overall, I like how this website is simple and easy to navigate. I like how it uses few point colors (blue, teal..) to accentuate important information from more plain background. Also, the page is informative and ongoing at the same time. The group updates new concerns, stories, and promotions often, and these updates would provide new information frequently to the site’s subscribers. I think the site’s intended audience could be from any group, no limit on age, gender, race, etc. But this wouldn’t attract those who are not so passionate about human issues. Personally, I don’t think I’m the group’s intended audience. I have been interested in the background story of Joseph Kony and the group’s projects since that viral video hit America few years ago, but I became hesitant in its truth because of continuous controversy on the group. But this is just me; I believe that people who are more passionate in human and society issues would enjoy this informative, creative website a lot.