JSFiddle

  • Animation effect on Placeholder

    Este é um efeito de animação para o Placeholder, ideal para formulários e telas de login e senha.

    $('.form').find('input, textarea').on('keyup blur focus', function (e) {
    
      var $this = $(this),
          label = $this.prev('label');
    
    	  if (e.type ...
  • Verificador de Conexão

    Com a API Navigator é possível verificar conexão com a Internet usando poucas linhas de JavaScript.

    function updateNetStat(e){
    			return navigator.onLine ? alert('Online') : alert('Offline');
    		}
    
    		window.addEventListener('online', updateNetStat )
    		window.addEventListener('offline', updateNetStat )
    
    		updateNetStat()
  • Navbar with Flexbox

    Barra de navegação responsiva feita com Flexbox CSS3.

    <ul class="navigation">
      <li><a href="#">Home</a></li>
      <li><a href="#">Produtos</a></li>
      <li><a href="#">Portifolio</a></li>
      <li><a href="#">Sobre</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contato</a></li>
    </ul>
  • Grid com Flexbox

    Demonstração simples de um grid responsivo feito com Flexbox.

    <ul class="flex-container">
      <li class="flex-item">1</li>
      <li class="flex-item">2</li>
      <li class="flex-item">3</li>
      <li class="flex-item">4</li>
      <li class="flex-item">5</li>
      <li class="flex-item">6</li>
    </ul>
  • Efeito Rotação CSS3

    Animação em CSS3 com efeito de rotação.

    <div id="animated_ball"></div>
  • button - back to top

    Botão com efeitos em jquery para voltar ao topo da página.

    $(document).ready(function(){
        $(window).scroll(function(){
            if ($(this).scrollTop() > 100) {
                $('a[href="#myTopo"]').fadeIn();
            } else {
                $('a[href="#myTopo"]').fadeOut();
            }
        });
    
        $('a ...
  • Componente ReactJS #2 is the latest revision

    Componente basico do React, utilizando o Babel mais JSX.

    var MyComponent = React.createClass({
      render: function() {
        return (
          <div>
            <h1>Simples Componente com React</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis ...</p></div>
  • Componente em ReactJS (non-JSX)

    Componente em ReactJS.

    var Hello = React.createClass({
      displayName: 'Hello',
      render: function() {
        return React.createElement("div", null, "Hello ", this.props.name);
      }
    });
    
    ReactDOM.render(
      React ...