Single Web Page Design

Design — Tags: javascript, jQuery — Posted by Starck on May 17, 2013

jquery
bootstrap javascript
modernizr
plugins.js
- FancyBox
- jQuery.ScrollTo
- array.reverse
SMINT

app.js

(function($){
  $(function(){

    // fancybox
    if($(window).width() >= 768){

      $('a.thumb[href$=.png], a.thumb[href$=.jpg], a.thumb[href$=.gif]').fancybox({
          'titleShow': false
        , 'transitionIn': 'elastic'
        , 'transitionOut': 'elastic'
      });

    // scrolling
    var nav = $('#topbar') // nav element
      , navY = nav.offset().top // default position
      , navHeight = nav.height() * 2 // nav height for calculating offsets
      , navLinks = nav.find('a[href^="#"]') // on-page links in nav
      , pageHeight = $('body').height()
      , sections = $('article[role=main]').find('section').reverse() // reversed set of nav sections
      , scrollPos = $(window).scrollTop(); // where are we on the page?
        $(window).scroll(function(){
          scrollPos = $(this).scrollTop();
          // get the active nav item
          navLinks.removeClass('active');
          if(scrollPos &lt; 30){
            $('a[href=#top]').addClass('active');
            $('body').removeClass('scrolled');
          }else{
            $('body').addClass('scrolled');
            sections.each(function(){
              if(scrollPos + navHeight >= $(this).offset().top){
                navLinks.filter('a[href=#' + $(this).attr('id') + ']').addClass('active');
                return false;
              }
            });
          }
        });

        // scrollTo on nav click
        navLinks.click(function(e){
          e.preventDefault();
          var destination = $( $(this).attr('href') ).offset().top,
            distance;
          // have we taken the nav out of flow? offset by navHeight if so
          if(destination > navY){
            destination -= navHeight;
          }
          // distance to scroll as a percent of total height of page
          distance = Math.abs((scrollPos - destination) / pageHeight);
          // sqrt the distance to compress the difference a bit
          // otherwise, short distances will appear to scroll too fast, long ones too slowly
          // goal is to feel as 'proportional' as possible without actual linearity
          // this is based on a 1s scroll time for the whole page, adjust as needed
          $(window).scrollTo(destination, Math.sqrt(distance) * 1000, {
            easing: 'swing'
            });
        });

        //set active state on domready
        $(window).scroll()
          // update anything that could be affected by image heights
          .load(function(){
            navY = nav.offset().top;
            pageHeight = $('body').height();
          })
          .mousemove(function(evt){
            if(evt.clientY &lt; 30){
              $('body').addClass('trigger-menu');
            }else{
              $('body').removeClass('trigger-menu');
            }
          });
    } // window constraint

  });
})(jQuery);

(function($){

$(function(){

// fancybox

if($(window).width() >= 768){

$('a.thumb[href$=.png], a.thumb[href$=.jpg], a.thumb[href$=.gif]').fancybox({

'titleShow': false

, 'transitionIn': 'elastic'

, 'transitionOut': 'elastic'

});

// scrolling

var nav = $('#topbar') // nav element

, navY = nav.offset().top // default position

, navHeight = nav.height() * 2 // nav height for calculating offsets

, navLinks = nav.find('a[href^="#"]') // on-page links in nav

, pageHeight = $('body').height()

, sections = $('article[role=main]').find('section').reverse() // reversed set of nav sections

, scrollPos = $(window).scrollTop(); // where are we on the page?

$(window).scroll(function(){

scrollPos = $(this).scrollTop();

// get the active nav item

navLinks.removeClass('active');

if(scrollPos < 30){

$('a[href=#top]').addClass('active');

$('body').removeClass('scrolled');

}else{

$('body').addClass('scrolled');

sections.each(function(){

if(scrollPos + navHeight >= $(this).offset().top){

navLinks.filter('a[href=#' + $(this).attr('id') + ']').addClass('active');

return false;

}

});

}

});

// scrollTo on nav click

navLinks.click(function(e){

e.preventDefault();

var destination = $( $(this).attr('href') ).offset().top,

distance;

// have we taken the nav out of flow? offset by navHeight if so

if(destination > navY){

destination -= navHeight;

}

// distance to scroll as a percent of total height of page

distance = Math.abs((scrollPos - destination) / pageHeight);

// sqrt the distance to compress the difference a bit

// otherwise, short distances will appear to scroll too fast, long ones too slowly

// goal is to feel as 'proportional' as possible without actual linearity

// this is based on a 1s scroll time for the whole page, adjust as needed

$(window).scrollTo(destination, Math.sqrt(distance) * 1000, {

easing: 'swing'

});

//set active state on domready

$(window).scroll()

// update anything that could be affected by image heights

.load(function(){

navY = nav.offset().top;

pageHeight = $('body').height();

})

.mousemove(function(evt){

if(evt.clientY < 30){

$('body').addClass('trigger-menu');

}else{

$('body').removeClass('trigger-menu');

}

});

} // window constraint

});

})(jQuery);

Comments (0)