Fusion Room « »

Meta

Added about 1 year ago
Categories
- Slider
- Ajax
- Location
- Parallax
- Scrolling
Links of interest

/* Parallax scroll | http://www.marklawrencedesign.com/ */
$(window).load(function() {
  $(window).scroll(function(e) {

    var delay = 0;
    var bg_speed = 0.6;
    var object_speed = 0.5;
    var object_speed2 = 1.2;
    var object_speed3 = 1.5;
    var object_speed4 = 0.3;
    var object_speed5 = 0.6;

    var container_offset = -300;

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

    $("#mainContainer").stop().animate({
      top: 0 - scroll_position
    }, delay);
    $("#mainContainer2").stop().animate({
      top: 0 - scroll_position
    }, delay);

    if (scroll_position >= 0 && scroll_position <= 1908) {
      $(".concrete").stop().animate({
        top: container_offset - (-435 * bg_speed) + (scroll_position * bg_speed)
      }, delay);
      $(".copper").stop().animate({
        top: (120 * object_speed) + (scroll_position * object_speed)
      }, delay);
      $(".copper").stop().animate({
        left: (145 * object_speed * 2) + (scroll_position * object_speed)
      }, delay);
      $(".copper-shadow").stop().animate({
        top: (250 * object_speed4) + (scroll_position * object_speed4)
      }, delay);
      $(".copper-shadow").stop().animate({
        left: (263 * object_speed4) + (scroll_position * object_speed4)
      }, delay);
      $(".glass").stop().animate({
        top: (1215 * object_speed) + (scroll_position * object_speed)
      }, delay);
      //$(".glass").stop().animate({ left : (1400 * object_speed ) + (scroll_position * object_speed)}, delay);
      $(".office").stop().animate({
        top: (1600 * object_speed * .2) + (scroll_position * object_speed)
      }, delay);
      $('.office').css('background-position', '0 0');
    }

    if (scroll_position >= 0 && scroll_position <= 708) {
      $(".wwd_bg").stop().animate({
        top: (232 * object_speed2 * 2) + (scroll_position * object_speed2)
      }, delay);
      $('.office').css('background-position', '0 -1024px');
    }

    if (scroll_position >= 1248 && scroll_position <= 3608) {
      $(".brilliant_bg").stop().animate({
        top: (-1292 * object_speed * .8) + (scroll_position * object_speed)
      }, delay);
    }

    if (scroll_position >= 848 && scroll_position <= 3408) {
      $(".wood").stop().animate({
        top: (-2200 * object_speed2) + (scroll_position * object_speed2)
      }, delay);
      $(".wood").stop().animate({
        left: (-3800 * object_speed * 1) + (scroll_position * object_speed)
      }, delay);
    }

    if (scroll_position >= 1500 && scroll_position <= 4200) {
      $(".office2").stop().animate({
        top: (-1425 * object_speed * 2) + (scroll_position * object_speed)
      }, delay);
    }

    if (scroll_position >= 2300 && scroll_position <= 4450) {
      $(".ow_bg").stop().animate({
        top: (-1602 * object_speed * 2) + (scroll_position * object_speed)
      }, delay);
    }

    if (scroll_position >= 3500 && scroll_position <= 5200) {
      $(".purple_bg").stop().animate({
        top: container_offset - (3100 * bg_speed) + (scroll_position * bg_speed)
      }, delay);
    }

    if (scroll_position >= 5200 && scroll_position <= 6600) {
      $(".contact_image").stop().animate({
        top: (-2650 * object_speed) + (scroll_position * object_speed)
      }, delay);
    }

    if (scroll_position >= 3700 && scroll_position <= 5800) {
      $(".black_bar").stop().animate({
        top: (-3600 * object_speed) + (scroll_position * object_speed)
      }, delay);
      $(".black_bar").stop().animate({
        left: (-3000 * object_speed2 * 2) + (scroll_position * object_speed2)
      }, delay);
    }

    if (scroll_position >= 5000 && scroll_position <= 6700) {
      $(".pink_bar").stop().animate({
        top: (-5700 * object_speed) + (scroll_position * object_speed)
      }, delay);
      $(".pink_bar").stop().animate({
        left: (-1200 * object_speed4 * 2) + (scroll_position * object_speed4)
      }, delay);
    }
    if (scroll_position >= 900 && scroll_position <= 1608) {
      $(".black_bar2").stop().animate({
        top: (-1950 * object_speed) + (scroll_position * object_speed)
      }, delay);
      $(".black_bar2").stop().animate({
        left: (-1200 * object_speed2 * 2) + (scroll_position * object_speed2)
      }, delay);
    }


    //Changing navigation arrows
    if (scroll_position >= 0 && scroll_position <= 708) {
      $('.firstSN').css('display', 'block');
      $('.secondSN').css('display', 'none');
    }

    if (scroll_position >= 708 && scroll_position <= 2500) {
      $('.thirdSN, .firstSN').css('display', 'none');
      $('.secondSN').css('display', 'block');
    }

    if (scroll_position >= 2500 && scroll_position <= 3800) {
      $('.fourthSN, .secondSN').css('display', 'none');
      $('.thirdSN').css('display', 'block');
    }

    if (scroll_position >= 3800 && scroll_position <= 5500) {
      $('.fifthSN, .thirdSN').css('display', 'none');
      $('.fourthSN').css('display', 'block');
    }

    if (scroll_position >= 5500 && scroll_position <= 7000) {
      $('.fourthSN').css('display', 'none');
      $('.fifthSN').css('display', 'block');
    }

  });
});


//jQuery
$(function() {
  //Work items
  $("#dev-handiwork li a").mouseenter(function() {
    $(this).find('.csDescription').fadeTo(10, 1).css('display', 'block');
  });
  $("#dev-handiwork li a").mouseleave(function() {
    $(this).find(".csDescription").fadeTo(10, 0);
  });


  //Get total width
  var totalwidth = 0;
  $('.csFullDetail, #dev-handiwork').each(function() {
    e = $(this);
    dim = [e.width(), e.height() + 50];
    w = e.width
    $(this).css({
      width: dim[0]
    });

    totalwidth += $(this).width();

    $('#workContent').width(totalwidth + 50);
  });


  //Slides
  $('.slides, .logoSlides').slides({
    preload: true,
    preloadImage: 'assets/images/loading.gif',
    generateNextPrev: true,
  });

  //Tooltips
  $('.tt').each(function() {
    $(this).mouseenter(function() {
      $(this).find('.tooltip').fadeIn('slow');
    });
    $(this).mouseleave(function() {
      $(this).find('.tooltip').fadeOut('fast');
    });
  });
  $('.tooltip').append('<div class="tooltipBottom"></div>');

  //What we do accords	
  $('.acrd').click(function() {
    var clicked_acrd = $(this);

    if (clicked_acrd.find('.accord_content').hasClass('active')) {
      clicked_acrd.find('.accord_content').slideUp().removeClass('active');
      clicked_acrd.removeClass('active');
    } else {
      $.each($('.acrd'), function() {
        if (clicked_acrd != $(this)) {
          $(this).find('.accord_content').slideUp().removeClass("active");
          $(this).removeClass('active');
        }
      });
      $(this).find('.accord_content').toggleClass("active").slideToggle();
      $(this).toggleClass('active');
    }
  });

  var $workTarget = $('#work');
  $('#dev-handiwork li a').click(function() {
    $workTarget.scrollTo({
      top: 0,
      left: 1048
    }, 500);
    //$('#csFullDetailContent').fadeIn(500);
  });
  $('.backToCS, .arrowNav a, nav a').click(function() {
    $workTarget.scrollTo({
      top: 0,
      left: 0
    }, 500);
    $('#csFullDetailContent').delay(1000).empty();
    $('#helper').remove();
    $('#helper').remove();
  });


  //Localscroll settings
  $('nav, .arrowNav').localScroll({
    hash: true,
    duration: 3000,
    queue: true,
    target: 'body',
    axis: 'xy',
    onBefore: function(e, anchor, $target) {},
    onAfter: function(anchor, settings) {}
  });
  $.localScroll.hash({
    target: 'body',
    queue: true,
    duration: 3000,
  });

  //Fusebox Switches http://www.devirtuoso.com/2011/05/toggle-switches-with-jquery-and-checkboxes/
  $('.checkbox').after(function() {
    if ($(this).is(":checked")) {
      return "<a href='#' class='toggle checked " + $(this).attr("id") + " ' ref='" + $(this).attr("id") + "'></a>";
    } else {
      return "<a href='#' class='toggle " + $(this).attr("id") + "' ref='" + $(this).attr("id") + "'></a>";
    }
  });

  $('.toggle').click(function(e) {
    var checkboxID = $(this).attr("ref");
    var checkbox = $('#' + checkboxID);

    if (checkbox.is(":checked")) {
      checkbox.removeAttr("checked");

    } else {
      checkbox.attr("checked", "true");
    }
    $(this).toggleClass("checked");

    e.preventDefault();

  });

});


//History
(function($) {
  var origContent = "";

  function loadContent(hash) {
    if (hash != "") {
      if (origContent == "") {
        origContent = $('#csFullDetailContent').html();
      }
      $('#csFullDetailContent').load('csPages/' + hash + '.html', function() {
        //After new content loads

        var elm = document.createElement("script");
        elm.src = "assets/js/helper.js";
        elm.id = "helper";
        document.getElementsByTagName("head")[0].appendChild(elm);

/*if ($("#page_init").is('*') {
						  //$workTarget.scrollTo( { top:0, left:1110}, 500 );
						  alert('hello');
						};*/

        jQuery.fn.exists = function() {
          return this.length > 0;
        }

        if ($('#page_init').exists()) {
          $('#work').scrollTo({
            top: 0,
            left: 1048
          }, 500);
          $('body').scrollTo('#work', 3000);
        }


      });
    } else if (origContent != "") {
      $('#csFullDetailContent').html(origContent);
    }
  }

  $(document).ready(function() {
    $.history.init(loadContent);
    $('#handiwork a').not('.external-link').click(function(e) {
      var url = $(this).attr('href');
      url = url.replace(/^.*#/, '');
      $.history.load(url);
      return false;
    });
  });
})(jQuery);

/* Parallax scroll | http://www.marklawrencedesign.com/ */
$(window).load(function(){
$(window).scroll(function(e) {
	
	var delay = 0;
	var bg_speed = 0.6;
	var object_speed = 0.5; 
	var object_speed2 = 1.2; 
	var object_speed3 = 1.5;
	var object_speed4 = 0.3;
	var object_speed5 = 0.6;
	
	var container_offset = -300;
	
	var scroll_position = $(window).scrollTop();

	$("#mainContainer").stop().animate({ top : 0 - scroll_position}, delay);
	$("#mainContainer2").stop().animate({ top : 0 - scroll_position}, delay);
	
	if (scroll_position >= 0 && scroll_position <= 1908) {
		$(".concrete").stop().animate({ top: container_offset - (-435 * bg_speed) + (scroll_position * bg_speed)}, delay);
		$(".copper").stop().animate({ top : (120 * object_speed) + (scroll_position * object_speed)}, delay);
		$(".copper").stop().animate({ left : (145 * object_speed * 2) + (scroll_position * object_speed)}, delay);
		$(".copper-shadow").stop().animate({ top : (250 * object_speed4) + (scroll_position * object_speed4)}, delay);
		$(".copper-shadow").stop().animate({ left : (263 * object_speed4) + (scroll_position * object_speed4)}, delay);
		$(".glass").stop().animate({ top : (1215 * object_speed ) + (scroll_position * object_speed)}, delay);
		//$(".glass").stop().animate({ left : (1400 * object_speed ) + (scroll_position * object_speed)}, delay);
		$(".office").stop().animate({ top : (1600 * object_speed *.2) + (scroll_position * object_speed)}, delay);
		$('.office').css('background-position', '0 0');
	}
	
	if (scroll_position >= 0 && scroll_position <= 708) {
		$(".wwd_bg").stop().animate({ top : (232 * object_speed2 * 2) + (scroll_position * object_speed2)}, delay);
		$('.office').css('background-position', '0 -1024px');
	}
	
	if (scroll_position >= 1248 && scroll_position <= 3608) {
		$(".brilliant_bg").stop().animate({ top : (-1292 * object_speed * .8) + (scroll_position * object_speed)}, delay);
	}
	
	if (scroll_position >= 848 && scroll_position <= 3408) {
		$(".wood").stop().animate({ top : (-2200 * object_speed2 ) + (scroll_position * object_speed2)}, delay);
		$(".wood").stop().animate({ left : (-3800 * object_speed * 1) + (scroll_position * object_speed)}, delay);
	}	

	if (scroll_position >=1500 && scroll_position <= 4200) {
		$(".office2").stop().animate({ top : (-1425 * object_speed * 2) + (scroll_position * object_speed)}, delay);	
	}	
	
	if (scroll_position >=2300 && scroll_position <= 4450) {
		$(".ow_bg").stop().animate({ top : (-1602 * object_speed * 2) + (scroll_position * object_speed)}, delay);
	}
	
	if (scroll_position >= 3500 && scroll_position <= 5200) {
		$(".purple_bg").stop().animate({ top: container_offset - (3100 * bg_speed) + (scroll_position * bg_speed)}, delay);
	}	

	if (scroll_position >= 5200 && scroll_position <= 6600) {
		$(".contact_image").stop().animate({ top : (-2650 * object_speed) + (scroll_position * object_speed)}, delay);
	}	

	if (scroll_position >= 3700 && scroll_position <= 5800) {
		$(".black_bar").stop().animate({ top : (-3600 * object_speed ) + (scroll_position * object_speed)}, delay);
		$(".black_bar").stop().animate({ left : (-3000 * object_speed2 * 2 ) + (scroll_position * object_speed2)}, delay);
	}
	
	if (scroll_position >= 5000 && scroll_position <= 6700) {
		$(".pink_bar").stop().animate({ top : (-5700 * object_speed ) + (scroll_position * object_speed)}, delay);
		$(".pink_bar").stop().animate({ left : (-1200 * object_speed4 * 2 ) + (scroll_position * object_speed4)}, delay);
	}
	if (scroll_position >= 900 && scroll_position <= 1608) {
		$(".black_bar2").stop().animate({ top : (-1950 * object_speed ) + (scroll_position * object_speed)}, delay);
		$(".black_bar2").stop().animate({ left : (-1200 * object_speed2 * 2 ) + (scroll_position * object_speed2)}, delay);
	}
	
	
	//Changing navigation arrows
	if (scroll_position >= 0 && scroll_position <= 708) {
		$('.firstSN').css('display', 'block');
		$('.secondSN').css('display', 'none');
	}
	
	if (scroll_position >= 708 && scroll_position <= 2500) {
		$('.thirdSN, .firstSN').css('display', 'none');
		$('.secondSN').css('display', 'block');
	}
	
	if (scroll_position >= 2500 && scroll_position <= 3800) {
		$('.fourthSN, .secondSN').css('display', 'none');
		$('.thirdSN').css('display', 'block');
	}
	
	if (scroll_position >= 3800 && scroll_position <= 5500) {
		$('.fifthSN, .thirdSN').css('display', 'none');
		$('.fourthSN').css('display', 'block');
	}
	
	if (scroll_position >= 5500 && scroll_position <= 7000) {
		$('.fourthSN').css('display', 'none');
		$('.fifthSN').css('display', 'block');
	}
	
	});
});


//jQuery
$(function() {
	//Work items
	$("#dev-handiwork li a").mouseenter(function () {
		$(this).find('.csDescription').fadeTo(10, 1).css('display', 'block');
	});
	$("#dev-handiwork li a").mouseleave(function () {
		$(this).find(".csDescription").fadeTo(10, 0);
	});
	
	
	//Get total width
	var totalwidth = 0;
    $('.csFullDetail, #dev-handiwork').each(function(){
          e = $(this);
          dim = [e.width(),e.height()+50];
		  w = e.width
          $(this).css({width: dim[0]});
		  
		  totalwidth += $(this).width();
		  
		  $('#workContent').width(totalwidth+50);
      });
	

	  //Slides
	  $('.slides, .logoSlides').slides({
		  preload: true,
		  preloadImage: 'assets/images/loading.gif',
		  generateNextPrev: true,
	  });
	  
	  //Tooltips
	  $('.tt').each(function(){
		  $(this).mouseenter(function(){
		  	$(this).find('.tooltip').fadeIn('slow');
		  });
		  $(this).mouseleave(function(){
		  	$(this).find('.tooltip').fadeOut('fast');
		  });
	  });
	  $('.tooltip').append('<div class="tooltipBottom"></div>');
	  
  	//What we do accords	
	$('.acrd').click(function() {
	    var clicked_acrd = $(this);
		
	    if (clicked_acrd.find('.accord_content').hasClass('active')) {
	        clicked_acrd.find('.accord_content').slideUp().removeClass('active');
			clicked_acrd.removeClass('active');
	    }
	    else {
	        $.each($('.acrd'), function() {
	            if (clicked_acrd != $(this)) {
	                $(this).find('.accord_content').slideUp().removeClass("active");
					$(this).removeClass('active');
	            }
	        });
	        $(this).find('.accord_content').toggleClass("active").slideToggle();
			$(this).toggleClass('active');
	    }
	});

	var $workTarget = $('#work');
	$('#dev-handiwork li a').click(function() {
	       $workTarget.scrollTo( { top:0, left:1048}, 500 );
		   //$('#csFullDetailContent').fadeIn(500);
	   });
	   $('.backToCS, .arrowNav a, nav a').click(function(){
		   $workTarget.scrollTo( { top:0, left:0}, 500 );
		   $('#csFullDetailContent').delay(1000).empty();
		   $('#helper').remove();
		   $('#helper').remove();
	   });
		
	 
	  //Localscroll settings
	  $('nav, .arrowNav').localScroll({
		  hash: true,
		  duration: 3000,
		  queue: true,
		  target: 'body',
		  axis:'xy',
		  onBefore:function( e, anchor, $target ){
		  },
		  onAfter:function( anchor, settings ){
		  }
	  });
	  $.localScroll.hash({
		target: 'body',
		queue: true,
		duration: 3000,
	});
	
 	//Fusebox Switches http://www.devirtuoso.com/2011/05/toggle-switches-with-jquery-and-checkboxes/
      $('.checkbox').after(function(){
        if ($(this).is(":checked")) {
          return "<a href='#' class='toggle checked "+$(this).attr("id")+" ' ref='"+$(this).attr("id")+"'></a>";
        }else{
          return "<a href='#' class='toggle "+$(this).attr("id")+"' ref='"+$(this).attr("id")+"'></a>";
        }
      });

     $('.toggle').click(function(e) {
        var checkboxID = $(this).attr("ref");
        var checkbox = $('#'+checkboxID);

        if (checkbox.is(":checked")) {
          checkbox.removeAttr("checked");

        }else{
          checkbox.attr("checked","true");
        }
        $(this).toggleClass("checked");

        e.preventDefault();

     });
	
});


//History
(function($){
    var origContent = "";

    function loadContent(hash) {
        if(hash != "") {
            if(origContent == "") {
                origContent = $('#csFullDetailContent').html();
            }
            $('#csFullDetailContent').load('csPages/' + hash + '.html',
			function(){ 
						//After new content loads
						
						var elm = document.createElement("script");
						elm.src = "assets/js/helper.js";
						elm.id = "helper";
						document.getElementsByTagName("head")[0].appendChild(elm);

						/*if ($("#page_init").is('*') {
						  //$workTarget.scrollTo( { top:0, left:1110}, 500 );
						  alert('hello');
						};*/
						
						jQuery.fn.exists = function(){return this.length>0;}

						if ($('#page_init').exists()) {
						  $('#work').scrollTo( { top:0, left:1048}, 500 );
						  $('body').scrollTo( '#work', 3000 );
						}
						
						
				   });		   
        } else if(origContent != "") {
            $('#csFullDetailContent').html(origContent);
        }
    }

    $(document).ready(function() {
            $.history.init(loadContent);
            $('#handiwork a').not('.external-link').click(function(e) {
                    var url = $(this).attr('href');
                    url = url.replace(/^.*#/, '');
                    $.history.load(url);
                    return false;
                });
        });
})(jQuery);

Plain Beautified Raw

Use jQuery

Fusion Room « »

Meta

Categories

Links of interest

Categories

Blog Posts

Partner

Links Of Interest

Get started and stay fit

Latest Site

Tandems