Category Archives: category six

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.

Advertisements

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.

Blog Post 6: jQuery Number Counter

The website I chose this week is the 10 years review done by the PSD2HTML.

Screen Shot 2015-04-12 at 21.37.47

No doubt, this is a well-designed website. But I think the most attractive element there is those changing numbers. They give readers a direct look at the progress PSD2HTML has made in the past ten years. This effect is consistent with the nature of numbers and it makes this website more interactive.

Screen Shot 2015-04-12 at 22.16.49

After examining the code, I found that it used jQuery to make this happen.

The script code is as follows:

function initNumber() {

            jQuery(‘span.number, div.number’).each(function(i) {

                        new NumberCounter({

                                    holder: this

                        });

            });

}

function NumberCounter(options) {

            this.options = jQuery.extend({

                        holder: null,

                        counterSpeed: 600,

                        step: 5,

                        divider: ‘.’,

                        activeClass: ‘active’

            }, options);

            return this.init();

}

NumberCounter.prototype = {

            init: function() {

                        this.findElements();

                        this.attachEvents();

                        this.reset();

            },

I think using number counter s a really useful way to display multiple numbers. Instead of using just the steady numbers, it gives the website more diversities.

Blog Six: jQuery Scrolling

So for this week’s critique I stumbled upon a really cool animated web portfolio site. As I scrolled down the page I noticed four icons pop up. I liked how this added to the interactivity of the site so I looked at the code and found they were each named by icon, called design, development, newsletter and social icons.

Screen Shot 2015-04-12 at 4.25.22 PM

Then in the html I found script code:

<script>

$(window).scroll(function)() {

$(‘#designIcon’).each(function(){

var imagePos = $(this).offset().top;

var topOfWindow = $(window).scrollTop();

if (imagePos < topOfWindow+500) {

$(this).addClass(“fadeIn”);

}

});

});

</script>

Instead of the “click” command that we learned in class, this code used scroll as the function to bring in the icons, which I think is really neat and doesn’t require extra work or more clicking by the user.

W3schools says that scroll can be used for all scrollable elements, in their example a div, and in browser windows, as was done on this site. I think to indicate when the icons should drop in, the coding uses the if and pos/position, and if the user is at less than the “topOfWindow”, the icon appears. The code also used a “fadeIn” command to style the transition as well.

Additional lines of coding are necessary to make this effect work so well, like defining “did scroll,” and “has scrolled” as true and false, and setting an interval.

$(window).scroll(function(event)

{

didScroll = true;

});

setInterval(function() {

if (didScroll) {

hasScrolled();

didScroll = false;

}

}, 250);

There’s definitely a lot involved in the coding to make this work (and I’m still not sure 100% how) but the way this designer used the scroll and fadeIn in combination helped create this cool effect.

Blog Six: jQuery mouseenter() and mouseleave()

I would like to dig deep into the website I analyzed in Blog 5, where I explained why I like the design style. There are many jQuery skills that I want to learn from it and apply to my own website, among which, I found that MouseEnter() and MouseLeave() is very practical.

When I hover mouse over the circle, it will turn to pink from dark grey, the font will be white from black, and the size will be bigger.

jquery

The effect is to execute an activity when hover mouse over the element or move the mouse out of the element. I grab this part of codes which contain this function

{var p,f,m=0,v=0,y=0;s.on({“touchstart.houdini mousedown.houdini”:function(t){var e=u.getEvent(t);m=e.pageX},”touchmove.houdini mousemove.houdini”:function(t){var e=u.getEvent(t);y=e.pageX-function(){return p||m}(),p=e.pageX,f=Date.now()},”touchend.houdini touchcancel.houdini mouseup.houdini”:function(){endTime=Date.now(),deltaTime=endTime-f,v=Math.abs(p-m),500>deltaTime&&v>50&&(t.isFunction(o.onManualNav)&&o.onManualNav(),y>0?s.previous():0>y&&s.next())}})}o.autoPlay&&(s.play(),o.pauseOnHover&&(s.on({“mouseenter.houdini”:s.pause,”mouseleave.houdini”:s.play})

“houdini” is an animation library, which determines the details of colors, fonts and sizes. The jQuery part is to via MouseEnter and MouseLeave function.

w3school introduced the difference of MouseOver and MouseEnter: Unlike the mouseover event, the mouseenter event only triggers when the mouse pointer enters the selected element. The mouseover event is triggered if a mouse pointer enters any child elements as well.

The fundamental format of the event is:

$(document).ready(function(){
$(“p”).mouseenter(function(){
$(“p”).css(“background-color”, “yellow”);
});
$(“p”).mouseleave(function(){
$(“p”).css(“background-color”, “lightgray”);
});

These code will trigger the background-color from lightgray when it’s still to yellow when it’s hovered over.

Blog Post Six: CrimeTimeline (Javascript & JQuery)

Screen Shot 2015-04-12 at 2.13.11 PM
     One website that features great Javascript work is crimetimeline.io
CrimeTimeline is a great website that tracks where crime has occurred by simply searching a street, address, or specific location. This website uses public APIs to pull in data that occurs in Britain. Using this mapping device this website shows you exactly where a crime occurred giving a very detailed description of the event that occurred there. This site is one that I found very interesting because its extremely interactive and very easy to use.
      This site uses Javascript and Jquery plug-ins to generate a data slider that is featured at the bottom of the page as well as manage the Ajax calls. This site also uses JavaScript to detects user interaction. One thing that I really enjoyed about this site is how much of an emphasis they put on collecting data and ensuring that it is all current and up to date. This feature shows that the use of JavaScript and JQuery help to highlight where crime occurs using moving images of maps to detect the location. I think that they did an excellent job at providing a way to truly highlight how important the use of JavaScript and JQuery can be to a website. If this site did not use these features it would be a simple website that did not show much of an interesting view of the crime sites. However, with the use of these plug-ins the site is more visually appealing and creates a way for viewers to see high crime areas and provides more clickability. Another feature that I also enjoy is that at the bottom the JQuery plug-in aggregates all of the crimes that occurred within a specific month and allows viewers to go back and click and review that information. Overall, this is a website that does a great job at presenting many of the features and tools that using JQuery and JavaScript can provide.