• Meta

  Added 3 months ago

• Categories

  • Slider
  • Scrolling
  • Drag and Drop

• Links of interest

  1. Original Source
  2. At Twitter: @_versions
  3. jQuery UI

// Fontes (c)

Cufon.replace('.unilight', {
  hover: true,
  fontFamily: 'Uni Sans Light'
});
Cufon.replace('.unibold', {
  hover: true,
  fontFamily: 'Uni Sans SemiBold'
});



// Squares: Mouse Events

$(function() {
  $('.sq').hover(

  function() {
    $(this).stop().animate({
      'opacity': '+=0.5'
    }, 'fast');
  }, function() {
    $(this).stop().animate({
      'opacity': '-=0.5'
    }, 'fast');
  });
});



// Squares: Scroll

$(window).scroll(function() {
  if ($(window).scrollTop() < 550) {
    $('#squares_esq, #squares_dir').css({
      'top': ($(window).scrollTop() * 2) + 'px'
    });
  }
});



// Botão Home: Scroll

$(window).scroll(function() {
  if ($(window).scrollTop() > 250 && $(window).scrollTop() < 750) {
    $('#botao_scroll_home').css({
      'top': ($(window).scrollTop() - 250) + 'px'
    });
  }
  if ($(window).scrollTop() >= 600) {
    $('#botao_scroll_home p').fadeOut();
  } else {
    $('#botao_scroll_home p').fadeIn();
  }
});



// Botão Quem Somos: Scroll

$(window).scroll(function() {
  if ($(window).scrollTop() > 1400 && $(window).scrollTop() < 1950) {
    $('#botao_scroll_quem_somos').css({
      'top': ($(window).scrollTop() - 1400) + 'px'
    });
  }
  if ($(window).scrollTop() >= 1700) {
    $('#botao_scroll_quem_somos p').fadeOut();
  } else {
    $('#botao_scroll_quem_somos p').fadeIn();
  }
});



// Thumbs do Portfólio: Animação

$(function() {
  $('div.thumb').hover(

  function() {
    if ($.browser.msie) {
      $(this).find('img.preview').stop().animate({
        'margin-top': '-219px'
      }, 'fast');
      $(this).find('div#zoom').stop().animate({
        'margin-top': '-17px'
      }, 'fast');
    } else {
      $(this).find('img.preview').stop().animate({
        'margin-top': '-205px'
      }, 'fast');
    }
  }, function() {
    if ($.browser.msie) {
      $(this).find('img.preview').stop().animate({
        'margin-top': '0px'
      }, 'fast');
      $(this).find('div#zoom').stop().animate({
        'margin-top': '0px'
      }, 'fast');
    } else {
      $(this).find('img.preview').stop().animate({
        'margin-top': '0px'
      }, 'fast');
    }
  });
});



// Portfólio: "Galerização :P"

$(function() {

  var galeria = $('ul#itens');
  var total = $('ul#itens li').size();
  var anterior = $('.anterior');
  var proxima = $('.proxima');
  var classe_ativo = 'ativo';
  var classe_inativo = 'inativo';
  var iniciais = 4;
  var atual = iniciais;
  var largura = 250;
  var scroll = 1;
  var velocidade = 300;

  if (scroll >= iniciais) {
    scroll = iniciais;
  }

  if (total > iniciais) {
    $(anterior).addClass(classe_inativo);
    $(proxima).addClass(classe_ativo);
  }

  $(proxima).click(function() {
    if (atual >= total || total < iniciais) {
      return false;
    } else {
      $(galeria).animate({
        'margin-left': '-=' + (largura * scroll)
      }, velocidade, function() {
        // callback se precisar
      });
      if (scroll > 1) {
        atual = atual + scroll;
      } else {
        atual++;
      }
      $(anterior).removeClass(classe_inativo);
      $(anterior).addClass(classe_ativo);
      if (atual >= total) $(this).addClass(classe_inativo);
      return false;
    }
  });

  $(anterior).click(function() {
    if (atual == iniciais) {
      return false;
    } else {
      $(galeria).animate({
        'margin-left': '+=' + (largura * scroll)
      }, velocidade, function() {
        // callback se precisar
      });
      if (scroll > 1) {
        atual = atual - scroll;
      } else {
        atual--;
      }
      $(proxima).removeClass(classe_inativo);
      $(proxima).addClass(classe_ativo);
      if (atual == iniciais) $(this).addClass(classe_inativo);
      return false;
    }
  });

});



// Botão Portfólio: Scroll

$(window).scroll(function() {
  if ($(window).scrollTop() > 2600 && $(window).scrollTop() < 3100) {
    $('#botao_scroll_portfolio, #fix_scroll_portfolio').css({
      'top': ($(window).scrollTop() - 2600) + 'px'
    });
  } else {
    $('#botao_scroll_portfolio, #fix_scroll_portfolio').css({
      'top': 16 + 'px'
    });
  }
  if ($(window).scrollTop() >= 2770) {
    $('#botao_scroll_portfolio p, #fix_scroll_portfolio').fadeOut();
  } else {
    $('#botao_scroll_portfolio p, #fix_scroll_portfolio').fadeIn();
  }
});



// Scroll de Navegação Principal

$(function() {
  $('#botao_scroll_home a, .menu a, #logo_contato, #botao_scroll_contato a, #botao_scroll_quem_somos a, #fix_scroll_portfolio, .voltar_home').click(function() {
    var local = $(this).attr('href');
    $('html, body').animate({
      scrollTop: ($("#" + local).offset().top) - 15
    }, 1000);
    return false;
  });
});



// Validação e Funcionamento do Formulário

$(function() {
  $('#enviar').click(function() {


    if ($('#nome').val() == '') {
      $('#nome').addClass('input_erro');
    } else if ($('#email').val() == '') {
      $('.input_erro').removeClass('input_erro');
      $('#email').addClass('input_erro');
    } else if ($('#mensagem').val() == '') {
      $('.input_erro').removeClass('input_erro');
      $('#mensagem').addClass('input_erro');
    } else {
      $('.input_erro').removeClass('input_erro');
      $('#form').animate({
        'opacity': 0.2
      }, 400, function() {
        $('p#loading').fadeIn();

        nome = $('#nome').val();
        email = $('#email').val();
        msg = $('#mensagem').val();

        $.post('jquery_form.php', {
          nome: nome,
          email: email,
          msg: msg
        }, function(data) {
          if (data) {
            $('#form').fadeOut(300, function() {
              $('p#loading').fadeOut();
              $('#msg_sucesso').fadeIn(300);
            });
          } else {
            $('#form').animate({
              'opacity': 1.0
            }, 400, function() {
              alert('Ocorreu um erro. Por favor tente novamente.');
            });
          }
        });

      });
    }

  });
});



// Caso Volte do Formulário...

$(function() {
  $('.voltar_home').click(function() {

    $('.frase1').html('Agora você nos');
    $('.frase2').html('conhece :)');

    Cufon.replace('.unilight', {
      hover: true,
      fontFamily: 'Uni Sans Light'
    });
    Cufon.replace('.unibold', {
      hover: true,
      fontFamily: 'Uni Sans SemiBold'
    });

    $('.label').remove();
    $('.label_subir').show();

    $('#msg_sucesso').fadeOut(300, function() {
      $('#form').show();
      $('#form').css('opacity', 1.0);
      $('input[type=text], textarea').val('');
    });

  });
});



// vBox: Exibição do Portfólio

$(function() {
  $('div.thumb a').click(function() {

    var titulo = $(this).parent().parent().find('h3').text();
    var img = $(this).attr('href');
    var desc = $(this).parent().parent().find('p').html();
    var link = $(this).attr('alt');

    var estrutura = '<div id="modal"> \
							<div id="wrapper_exibicao"> \
								<a href="#" id="fechar_modal"></a> \
								<h1 id="titulo_job" class="unibold">lorem ipsum</h1> \
									<div id="zoom_job"> \
										<img src="imagens/imac.png" width="476" height="409" border="0"> \
									</div> \
									<div id="resumo_job"> \
										<h1 id="titulo_detalhes_job">Detalhes do job:</h1> \
										<p id="descricao_job">Um trabalho com a qualidade Versions.</p> \
										<a href="#" id="link_job" target="_blank"></a> \
										<a href="#" id="voltar_modal">Voltar</a> \
									</div> \
							</div> \
						</div>';

    $('body').append(estrutura);

    $('#titulo_job').text(titulo);
    $('#zoom_job').css('background-image', 'url("' + img + '")');
    $('#resumo_job p#descricao_job').html(desc);
    $('#resumo_job a#link_job').attr('href', link);
    $('#resumo_job a#link_job').text(link);

    Cufon.replace('.unibold', {
      hover: true,
      fontFamily: 'Uni Sans SemiBold'
    });

    $('#modal').css({
      'width': $(window).width(),
      'height': $(window).height(),
      'top': $(window).scrollTop()
    });

    $(window).scroll(function() {
      $('#modal').animate({
        'top': $(window).scrollTop()
      }, {
        queue: false,
        duration: 300
      });
    });

    $(window).resize(function() {
      $('#modal').css({
        'width': $(window).width(),
        'height': $(window).height()
      });
    });

    $('#fechar_modal, #voltar_modal').click(function() {
      $('#secoes').css('opacity', '1.0');
      $('#modal').fadeOut(400, function() {
        if ($(window).height() <= 675) {
          $('html, body').animate({
            scrollTop: ($("#portfolio").offset().top) + 140
          }, 500);
        } else {
          $('html, body').animate({
            scrollTop: ($("#portfolio").offset().top) - 15
          }, 500);
        }
        $('#modal').remove();
      });
      return false;
    });


    // Ready? Go! :D

    $('#modal').fadeIn(300, function() {
      $('#secoes').css('opacity', '1.0');
    });

    return false;

  });
});



// Soluções Drag and Drop

$(function() {

  $('ul#solucoes li a').click(function() {
    return false;
  });

  $('ul#solucoes li a').draggable({
    revert: true,
    helper: 'clone'
  });

  $('#recebe_solucao').droppable({

    activeClass: 'recebe_ativo',
    hoverClass: 'recebe_hover',

    drop: function(event, ui) {

      $(this).addClass('recebe_highlight');

      $(this).animate({
        backgroundColor: '#585858'
      }, 600, function() {
        $(this).css('background-color', '');
        $(this).removeClass('recebe_highlight');
      });

      var txt_solucao = $(ui.draggable).attr('alt');

      $('#txt_solucao p').fadeOut(200, function() {
        $(this).text(txt_solucao);
        $(this).fadeIn(400);
      });

    }

  });

});



// Fix Placeholders

$(function() {
  if ($.browser.msie) {

    var campos = $('input[type=text], textarea');

    for (var i = 0; i < campos.length; i++) {

      $(campos[i]).val($(campos[i]).attr('placeholder'));

      $(campos[i]).click(function() {
        if ($(this).val() == $(this).attr('placeholder')) {
          $(this).val('');
        }
      });

      $(campos[i]).blur(function() {
        if ($(this).val() == '') {
          $(this).val($(this).attr('placeholder'));
        }
      });

    }

  }
});

// Fontes (c)

Cufon.replace('.unilight' , { hover: true, fontFamily: 'Uni Sans Light' });
Cufon.replace('.unibold' , { hover: true, fontFamily: 'Uni Sans SemiBold' });



// Squares: Mouse Events

$(function(){
	$('.sq').hover(
		function() {
			$(this).stop().animate({'opacity': '+=0.5'}, 'fast');
		},
		function() {
			$(this).stop().animate({'opacity': '-=0.5'}, 'fast');
		}
	);
});



// Squares: Scroll

$(window).scroll(function(){
	if($(window).scrollTop() < 550) {
		$('#squares_esq, #squares_dir').css({
			'top': ($(window).scrollTop() * 2) + 'px'
		});
	}
});



// Botão Home: Scroll

$(window).scroll(function(){
	if($(window).scrollTop() > 250 && $(window).scrollTop() < 750) {
		$('#botao_scroll_home').css({
			'top': ($(window).scrollTop() - 250) + 'px'
		});
	}
	if($(window).scrollTop() >= 600) {
		$('#botao_scroll_home p').fadeOut();
	} else {
		$('#botao_scroll_home p').fadeIn();
	}
});



// Botão Quem Somos: Scroll

$(window).scroll(function(){
	if($(window).scrollTop() > 1400 && $(window).scrollTop() < 1950) {
		$('#botao_scroll_quem_somos').css({
			'top': ($(window).scrollTop() - 1400) + 'px'
		});
	}
	if($(window).scrollTop() >= 1700) {
		$('#botao_scroll_quem_somos p').fadeOut();
	} else {
		$('#botao_scroll_quem_somos p').fadeIn();
	}
});



// Thumbs do Portfólio: Animação

$(function(){
	$('div.thumb').hover(
		function() {
			if ($.browser.msie) {
				$(this).find('img.preview').stop().animate({'margin-top': '-219px'}, 'fast');
				$(this).find('div#zoom').stop().animate({'margin-top': '-17px'}, 'fast');
			} else {
				$(this).find('img.preview').stop().animate({'margin-top': '-205px'}, 'fast');
			}
		},
		function() {
			if ($.browser.msie) {
				$(this).find('img.preview').stop().animate({'margin-top': '0px'}, 'fast');
				$(this).find('div#zoom').stop().animate({'margin-top': '0px'}, 'fast');
			} else {
				$(this).find('img.preview').stop().animate({'margin-top': '0px'}, 'fast');
			}
		}
	);
});



// Portfólio: "Galerização :P"

$(function(){

	var galeria = $('ul#itens');
	var total = $('ul#itens li').size();
	var anterior = $('.anterior');
	var proxima = $('.proxima');
	var classe_ativo = 'ativo';
	var classe_inativo = 'inativo';
	var iniciais = 4;
	var atual = iniciais;
	var largura = 250;
	var scroll = 1;
	var velocidade = 300;

	if(scroll >= iniciais) {
		scroll = iniciais;
	}

	if(total > iniciais) {
		$(anterior).addClass(classe_inativo);
		$(proxima).addClass(classe_ativo);
	}

	$(proxima).click(function(){
		if(atual >= total || total < iniciais) {
			return false;
		} else {
			$(galeria).animate({
				'margin-left': '-='+(largura*scroll)
			}, velocidade, function(){
				// callback se precisar
			});
			if(scroll > 1) {
				atual = atual+scroll;
			} else {
				atual++;
			}
			$(anterior).removeClass(classe_inativo);
			$(anterior).addClass(classe_ativo);
			if(atual >= total) $(this).addClass(classe_inativo);
			return false;
		}
	});

	$(anterior).click(function(){
		if(atual == iniciais) {
			return false;
		} else {
			$(galeria).animate({
				'margin-left': '+='+(largura*scroll)
			}, velocidade, function(){
				// callback se precisar
			});
			if(scroll > 1) {
				atual = atual-scroll;
			} else {
				atual--;
			}
			$(proxima).removeClass(classe_inativo);
			$(proxima).addClass(classe_ativo);
			if(atual == iniciais) $(this).addClass(classe_inativo);
			return false;
		}
	});

});



// Botão Portfólio: Scroll

$(window).scroll(function(){
	if($(window).scrollTop() > 2600 && $(window).scrollTop() < 3100) {
		$('#botao_scroll_portfolio, #fix_scroll_portfolio').css({
			'top': ($(window).scrollTop() - 2600) + 'px'
		});
	} else {
		$('#botao_scroll_portfolio, #fix_scroll_portfolio').css({
			'top': 16 + 'px'
		});
	}
	if($(window).scrollTop() >= 2770) {
		$('#botao_scroll_portfolio p, #fix_scroll_portfolio').fadeOut();
	} else {
		$('#botao_scroll_portfolio p, #fix_scroll_portfolio').fadeIn();
	}
});



// Scroll de Navegação Principal

$(function(){
	$('#botao_scroll_home a, .menu a, #logo_contato, #botao_scroll_contato a, #botao_scroll_quem_somos a, #fix_scroll_portfolio, .voltar_home').click(function(){
		var local = $(this).attr('href');
		$('html, body').animate({ scrollTop: ($("#"+local).offset().top)-15 }, 1000);
		return false;
	});
});



// Validação e Funcionamento do Formulário

$(function(){
	$('#enviar').click(function(){


	if($('#nome').val() == '') {
		$('#nome').addClass('input_erro');
	} else if($('#email').val() == '') {
		$('.input_erro').removeClass('input_erro');
		$('#email').addClass('input_erro');
	} else if($('#mensagem').val() == '') {
		$('.input_erro').removeClass('input_erro');
		$('#mensagem').addClass('input_erro');
	} else {
		$('.input_erro').removeClass('input_erro');
		$('#form').animate({
			'opacity': 0.2
		}, 400, function(){
			$('p#loading').fadeIn();

			nome = $('#nome').val();
			email = $('#email').val();
			msg = $('#mensagem').val();

			$.post('jquery_form.php', { nome: nome, email: email, msg: msg },
			function(data) {
				if(data) {
					$('#form').fadeOut(300, function(){
						$('p#loading').fadeOut();
						$('#msg_sucesso').fadeIn(300);
					});
				} else {
					$('#form').animate({
						'opacity': 1.0
					}, 400, function(){
						alert('Ocorreu um erro. Por favor tente novamente.');
					});
				}
			});

		});
	}

	});
});



// Caso Volte do Formulário...

$(function(){
	$('.voltar_home').click(function(){

		$('.frase1').html('Agora você nos');
		$('.frase2').html('conhece :)');

		Cufon.replace('.unilight' , { hover: true, fontFamily: 'Uni Sans Light' });
		Cufon.replace('.unibold' , { hover: true, fontFamily: 'Uni Sans SemiBold' });

		$('.label').remove();
		$('.label_subir').show();

		$('#msg_sucesso').fadeOut(300, function(){
			$('#form').show();
			$('#form').css('opacity', 1.0);
			$('input[type=text], textarea').val('');
		});

	});
});



// vBox: Exibição do Portfólio

$(function(){
	$('div.thumb a').click(function(){

		var titulo = $(this).parent().parent().find('h3').text();
		var img = $(this).attr('href');
		var desc = $(this).parent().parent().find('p').html();
		var link = $(this).attr('alt');

		var estrutura = '<div id="modal"> \
							<div id="wrapper_exibicao"> \
								<a href="#" id="fechar_modal"></a> \
								<h1 id="titulo_job" class="unibold">lorem ipsum</h1> \
									<div id="zoom_job"> \
										<img src="imagens/imac.png" width="476" height="409" border="0"> \
									</div> \
									<div id="resumo_job"> \
										<h1 id="titulo_detalhes_job">Detalhes do job:</h1> \
										<p id="descricao_job">Um trabalho com a qualidade Versions.</p> \
										<a href="#" id="link_job" target="_blank"></a> \
										<a href="#" id="voltar_modal">Voltar</a> \
									</div> \
							</div> \
						</div>';

		$('body').append(estrutura);

		$('#titulo_job').text(titulo);
		$('#zoom_job').css('background-image', 'url("'+img+'")');
		$('#resumo_job p#descricao_job').html(desc);
		$('#resumo_job a#link_job').attr('href', link);
		$('#resumo_job a#link_job').text(link);

		Cufon.replace('.unibold' , { hover: true, fontFamily: 'Uni Sans SemiBold' });

		$('#modal').css({
			'width': $(window).width(),
			'height': $(window).height(),
			'top': $(window).scrollTop()
		});

		$(window).scroll(function(){
			$('#modal').animate({
				'top': $(window).scrollTop()
			}, {
				queue: false,
				duration: 300
			});
		});

		$(window).resize(function(){
			$('#modal').css({
				'width': $(window).width(),
				'height': $(window).height()
			});
		});

		$('#fechar_modal, #voltar_modal').click(function(){
			$('#secoes').css('opacity', '1.0');
			$('#modal').fadeOut(400, function(){
				if($(window).height() <= 675) {
					$('html, body').animate({ scrollTop: ($("#portfolio").offset().top)+140 }, 500);
				} else {
					$('html, body').animate({ scrollTop: ($("#portfolio").offset().top)-15 }, 500);
				}
				$('#modal').remove();
			});
			return false;
		});


		// Ready? Go! :D

		$('#modal').fadeIn(300, function(){
			$('#secoes').css('opacity', '1.0');
		});

		return false;

	});
});



// Soluções Drag and Drop

$(function(){

	$('ul#solucoes li a').click(function(){
		return false;
	});

	$('ul#solucoes li a').draggable({
		revert: true,
		helper: 'clone'
	});

	$('#recebe_solucao').droppable({

		activeClass: 'recebe_ativo',
		hoverClass: 'recebe_hover',

		drop: function(event, ui) {

			$(this).addClass('recebe_highlight');

			$(this).animate({ backgroundColor: '#585858' }, 600, function() {
				$(this).css('background-color', '');
				$(this).removeClass('recebe_highlight');
			});

			var txt_solucao = $(ui.draggable).attr('alt');

			$('#txt_solucao p').fadeOut(200, function(){
				$(this).text(txt_solucao);
				$(this).fadeIn(400);
			});

			}

	});

});



// Fix Placeholders

$(function(){
	if ($.browser.msie) {

		var campos = $('input[type=text], textarea');

		for(var i=0; i<campos.length; i++) {

			$(campos[i]).val($(campos[i]).attr('placeholder'));

			$(campos[i]).click(function(){
				if($(this).val() == $(this).attr('placeholder')) {
					$(this).val('');
				}
			});

			$(campos[i]).blur(function(){
				if($(this).val() == '') {
					$(this).val($(this).attr('placeholder'));
				}
			});

		}

	}
});