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.

Advertisements

2 thoughts on “Blog Six: jQuery Scrolling

  1. I really like the pop-up effect of those four icons, which makes the website more interactive and special. As you observed, the designer uses the scroll as the function, which makes the website more active without putting extra work on the users.

    The W3 school suggests that the scroll() method triggers the scroll event, or attaches a function to run when a scroll event occurs. And as the designer set an “if” sentence, the event occurs when it meets the condition.

    In addition, as you observed, the designer also defines “did scroll” and “has scrolled” as true and false to make sure that this effect would only occur once no matter how many times the users scroll the website. This design minimizes the noises.

    The website overall is neat and well-designed. The designer adds a lot of animated movement in her page, offering the readers a pleasant and interactive using experience.

    Like

  2. I think the pop-up effect is nice. It adds movement to the webpage but not distract readers from the content. I also like it’s activated by scrolling instead of clicking or mouseover. The readers can simply scroll down the page and don’t need to take extra effort to trigger the movement.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s