Some Cool Techniques On My New Personal Site

I recently launched a new (and long overdue) iteration of my personal site, josiahspence.com. It’s a pretty simple site overall, but I did use a few handy techniques, and I thought I would share them with all of you lovely folks.

Matching The Window Height With jQuery

Each section (especially the introductory Welcome section) really needs to be at least the height of the browser window. So, I used the technique outlined in my previous post about Defining The Fold. That article is pretty thorough, so check it out if you want to see how it was done.

SlabText

52261f7b2f7cc63b60000113

For the block of text with my name and the tagline, I needed the text to scale so that each line matches the width of the container. This is almost impossible to do reliably with CSS alone, especially on a responsive site, but the excellent SlabText jQuery plugin makes it super easy.

Incidentally, I also use SlabText on the Code Carpenter site for the logo.

Background-size: Cover

It’s not exactly groundbreaking at this point, but I made use of the new(ish) CSS3 background-size property to make the hero background image fill the entire screen. This combines with background-position: fixed for a fancy sort of effect.

An interesting quirk that I discovered while building this site is that combining background-size: cover with background-position: fixed only really works the way you might expect if the container fills the entire width of the screen. In my Projects section, where each container is only half the width of the screen, you only get half of the image. It makes sense if you think about it, since the image must be big enough for a full scroll, but it feels pretty counter-intuitive to me.

Animated Scrolling Anchor Links

Instead of just jumping to a section of the page when an anchor link is clicked, it is much cooler to have an animated scroll down. I use this on pretty much every single page scroller site. I won’t explain all of the details in this article, but the jQuery looks like this:

/*Animated scroll to anchor*/
var main = main = $('nav ul');

$('nav a').click(function(event) {

    event.preventDefault();

    var full_url = this.href,
        parts = full_url.split('#'),
        trgt = parts[1],
        target_offset = $('#'+trgt).offset(),
        target_top = target_offset.top;

    $('html, body').animate({scrollTop:target_top}, 800);
	location.hash = trgt;  //attach the hash (#jumptarget) to the pageurl

    /* Remove active class on any li when an anchor is clicked */
    main.children().removeClass('active');

    /* Add active class to clicked anchor's parent li */
    $(this).parent().addClass('active');

});

Link Highlighting On Scroll

The above code adds a class of ‘active’ when you click a link to a new section, but what about if you scroll through the sections manually? To solve this, I used a bit of fancy jQuery to determine the scroll index of each element and assign a class of ‘active’ to whatever section is currently in view. That code looks like this:

/*Highlight Link On Scroll To*/
$("nav a").each(function(index, value) {
	var $this = $(this);
    var sectionid = ( $this.attr('href'));
	var sectionTop = ($(sectionid).offset().top);
	var sectionBottom = (($(sectionid).offset().top) + ($(sectionid).height()));

	$(window).on('scroll', function(){
		if ($(window).scrollTop() >= sectionTop && $(window).scrollTop() < sectionBottom && !($this.parent('li').hasClass("active"))
) { $('nav li').removeClass("active"); $this.parent('li').addClass("active"); if(history.pushState) { history.pushState({}, "", sectionid); } } }); });

Sticky Navigation Menu

For the Welcome section, I wanted to have the nav at the bottom, but for every other section, I wanted it to remain fixed at the top. The solution? Use jQuery to add a class of ‘affix’ when the scroll index becomes greater than the height of the Welcome section:

// the 'active' class every time the user scrolls the window
$(window).scroll(function() {
    // get the amount the window has scrolled
    var scroll = $(window).scrollTop();
    // add the 'active' class to the correct li based on the scroll amount
    if (scroll >= ($(window).height())-$('nav').outerHeight()) {
        $("nav").addClass("affix");
    }
    else {
        $("nav").removeClass("affix");
    }
});

Icon Font By IcoMoon

522633cb2f7cc63b6000012e

I’ve mentioned it before on this bog, but IcoMoon is a great way to use vector graphics on a site. This site uses icon fonts aplenty!

One Response to “Some Cool Techniques On My New Personal Site”

  1. Jordan

    It’s a good design, ya done good son. I hadn’t heard about slab text before (okay, I didn’t realize it had a name) – very cool… may need to look into that.

    Reply

Leave a Reply