cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <body>
    <div id="contenedor">
            <div id="monte3" class="monte"></div>
            <div id="monte2" class="monte"></div>
            <div id="monte1" class="monte"></div>
            <div id="onda1"></div>
            <div id="onda2"></div>
            <div id="onda3"></div>
            <div id="barca"></div>
            <div id="luciernaga"></div>
            <div id="luciernaga2"></div>
            <div id="luciernaga3"></div>
            <div id="luciernaga4"></div>
            <div id="luciernaga5"></div>
            <div id="luciernaga6"></div>
            <div id="estrella"></div>
            <div id="estrella2"></div>
            <div id="estrella3"></div>
            <div id="estrella4"></div>
            <div id="estrella5"></div>
            <div id="estrella6"></div>
            <div id="estrella7"></div>
    </div>

    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/soundjs-0.6.1.min.js"></script>
    <script src="js/charca.js"></script>

</body>
            
          
!
            
              body{
    background-color:#37353E;
    display: flex;
    justify-content: center;
}
#contenedor {
    margin-top: 20px;
    width: 60%; 
    height:550px;
    position:relative;
    z-index: 9;
    overflow: hidden;
    background-color: #0B243B;
    border-radius: 13px;
}

.monte{
    width: 100%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
}

#monte3{
    background-image: url(http://evasantos.com/ilustraciones/charca/img/monte3.svg);
    z-index: 2;

}
#monte2{
    background-image: url(http://evasantos.com/ilustraciones/charca/img/monte2.svg);
    z-index: 3;
}

#monte1 {
    background-image: url(http://evasantos.com/ilustraciones/charca/img/monte1.svg);
    z-index: 14;
}

#onda1{
    background-image: url(http://evasantos.com/ilustraciones/charca/img/onda1.svg);
    width: 100%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    z-index: 8;

-webkit-animation: mover_onda1 4s  6s infinite;
            opacity: 0;
    }

        @-webkit-keyframes mover_onda1{

        0%{
             opacity: 0;        
         }
        75%{
            opacity: 0.4;
        }
        100%{

            opacity: 0;
        }
    }

#onda2{
    background-image: url(http://evasantos.com/ilustraciones/charca/img/onda2.svg);
    width: 100%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    z-index: 8;

-webkit-animation: mover_onda2 6s 4s infinite;
            opacity: 0;
    }

        @-webkit-keyframes mover_onda2{

        0%{
             opacity: 0;        
         }
        75%{
            opacity: 0.4;
        }
        100%{

            opacity: 0;
        }
    }

 
#onda3{
    background-image: url(http://evasantos.com/ilustraciones/charca/img/onda3.svg);
    width: 100%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    z-index: 8;

-webkit-animation: mover_onda3 8s  2s infinite;
            opacity: 0;
    }

        @-webkit-keyframes mover_onda3{

        0%{
             opacity: 0;        
         }
        75%{
            opacity: 0.4;
        }
        100%{

            opacity: 0;
        }
    }
 #barca{
    background-image: url(http://evasantos.com/ilustraciones/charca/img/barca.svg);
    width: 100%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    z-index: 12;
    -webkit-animation: mover_barca 5s Ease infinite;
         }
        @-webkit-keyframes mover_barca{

        0%{
            -webkit-transform: translate(+0pt, +5pt);
        }
      
        50%{
            -webkit-transform: translate(-0pt, -5pt);
        }
         100%{
            -webkit-transform: translate(+0pt, +5pt);
        }
    }
#estrella, #estrella4, #estrella6{
        background-image: url(http://evasantos.com/ilustraciones/charca/img/estrella.svg);

}
#estrella2, #estrella5{
        background-image: url(http://evasantos.com/ilustraciones/charca/img/estrella2.svg);

}
#estrella3, #estrella7{
        background-image: url(http://evasantos.com/ilustraciones/charca/img/estrella3.svg);

}
#estrella{
    width: 73px;
    height: 68px;   
    top: 170px;
    left: 230px;
    z-index: 0;
    background-repeat: no-repeat;
    position: absolute;
-webkit-animation: mover_estrella 3s infinite;
    }

        @-webkit-keyframes mover_estrella{

        0%{
             opacity: 0.8;        
         }
        75%{
            opacity: 1;
        }
        100%{

            opacity: 0.6;
        }
    }


#estrella2{
top: 100px;
left: 50px;
z-index: 0;
width: 57px;
height: 68px;
background-repeat: no-repeat;
position: absolute;


-webkit-animation: mover_estrella2 3s infinite;
    }

        @-webkit-keyframes mover_estrella2{

        0%{
             opacity: 0.7;        
         }
        75%{
            opacity: 1;
        }
        100%{

            opacity: 0.8;
        }
    } 

#estrella3 {
width: 73px;
height: 68px;
position: absolute;
background-repeat: no-repeat;
top: 37px;
left: 790px;
z-index: 0;


-webkit-animation: mover_estrella3 3s infinite;
    }

        @-webkit-keyframes mover_estrella3{

        0%{
             opacity: 0.7;        
         }
        75%{
            opacity: 1;
        }
        100%{

            opacity: 0.8;
        }
    } 

#estrella4{
width: 73px;
height: 68px;
position: absolute;
background-repeat: no-repeat;
top: 30px;
left: 320px;
z-index: 0;

-webkit-animation: mover_estrella4 3s infinite;
    }

        @-webkit-keyframes mover_estrella4{

        0%{
             opacity: 0.7;        
         }
        75%{
            opacity: 1;
        }
        100%{

            opacity: 0.8;
        }
    } 

 #estrella5{
 width: 73px;
height: 68px;
position: absolute;
background-repeat: no-repeat;   
top: 30px;
left: 130px;
z-index: 0;

-webkit-animation: mover_estrella5 5s infinite;
    }

        @-webkit-keyframes mover_estrella5{

        0%{
             opacity: 0.8;        
         }
        75%{
            opacity: 1;
        }
        100%{

            opacity: 0.6;
        }
    }

#estrella6{
background-repeat: no-repeat;   
width: 73px;
height: 68px;
position: absolute;
top: 60px;
left: 690px;
z-index: 0;


-webkit-animation: mover_estrella6 3s infinite;
    }

        @-webkit-keyframes mover_estrella6{

        0%{
             opacity: 0.8;        
         }
        75%{
            opacity: 1;
        }
        100%{

            opacity: 0.6;
        }
    }
#estrella7{
width: 73px;
height: 68px;
position: absolute;
background-repeat: no-repeat;
top: 120px;
left: 590px;
z-index: 0;

-webkit-animation: mover_estrella7 3s infinite;
    }

        @-webkit-keyframes mover_estrella7{

        0%{
             opacity: 0.8;        
         }
        75%{
            opacity: 1;
        }
        100%{

            opacity: 0.6;
        }
    }


#luciernaga, #luciernaga6, #luciernaga5{
    background-image: url(http://evasantos.com/ilustraciones/charca/img/luciernaga.svg);
    width: 48px; height: 48px;
    position: absolute;
    background-repeat: no-repeat;
    z-index: 18;
}

#luciernaga2, #luciernaga3{
    background-image: url(http://evasantos.com/ilustraciones/charca/img/luciernaga2.svg);
    width: 59px; height: 59px;
    position: absolute;
    background-repeat: no-repeat;
    z-index: 19;
}

#luciernaga4{
    background-image: url(http://evasantos.com/ilustraciones/charca/img/luciernaga3.svg);
    width: 59px; height: 59px;
    position: absolute;
    background-repeat: no-repeat;
    z-index: 24;
}

            
          
!
            
              $(document).ready(function() {

    $('#contenedor').mousemove(function(e){
    var amountMovedX = (e.pageX * -1 / 10);
    var amountMovedY = (e.pageY * -1 / 15);
    $('#monte3').css('background-position', amountMovedX + 'px ' + amountMovedY + 'px');
    var amountMovedX2 = (e.pageX * -1/ 2);
    var amountMovedY2 = (e.pageY * -1 / 14);
    $('#monte2').css('background-position', amountMovedX2 + 'px ' + amountMovedY2 + 'px');
    $('#onda1').css('background-position', amountMovedX2 + 'px ' + amountMovedY2 + 'px');
    $('#onda2').css('background-position', amountMovedX2 + 'px ' + amountMovedY2 + 'px');
    $('#onda3').css('background-position', amountMovedX2 + 'px ' + amountMovedY2 + 'px');
    $('#barca').css('background-position', amountMovedX2 + 'px ' + amountMovedY2 + 'px');

    var amountMovedX3 = (e.pageX * -1/ 1);
    var amountMovedY3 = (e.pageY * -1 / 13);
    $('#monte1').css('background-position', amountMovedX3 + 'px ' + amountMovedY3 + 'px');
    
    });


    animateDiv();
  
function makeNewPosition(){
    
    var h = $(window).height() - 40;
    var w = $(window).width() - 40;
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
    
    return [nh,nw];    
    
}

function animateDiv(){
    var newq = makeNewPosition();
    var oldq = $('#luciernaga').offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);
    
    $('#luciernaga').animate({ top: newq[0], left: newq[1] }, speed, function(){
      animateDiv();        
    });
    
};

function calcSpeed(prev, next) {
    
    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);
    
    var greatest = x > y ? x : y;
    var speedModifier = 0.4;
    var speed = Math.ceil(greatest/speedModifier);
    return speed;

}
animateDiv2();  

function makeNewPosition2(){
    
    var h = $(window).height() - 60;
    var w = $(window).width() - 40;
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
    
    return [nh,nw];    
    
}

function animateDiv2(){
    var newq = makeNewPosition2();
    var oldq = $('#luciernaga2').offset();
    var speed = calcSpeed2([oldq.top, oldq.left], newq);
    
    $('#luciernaga2').animate({ top: newq[0], left: newq[1] }, speed, function(){
      animateDiv2();        
    });
    
};

function calcSpeed2(prev, next) {
    
    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);
    var greatest = x > y ? x : y;
    var speedModifier = 0.2;
    var speed = Math.ceil(greatest/speedModifier);
    return speed;
}

animateDiv3();  
function makeNewPosition3(){
    
    var h = $(window).height() - 60;
    var w = $(window).width() - 40;
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
    
    return [nh,nw];    
    
}

function animateDiv3(){
    var newq = makeNewPosition3();
    var oldq = $('#luciernaga3').offset();
    var speed = calcSpeed3([oldq.top, oldq.left], newq);
    
    $('#luciernaga3').animate({ top: newq[0], left: newq[1] }, speed, function(){
      animateDiv3();        
    });
    
};

function calcSpeed3(prev, next) {
    
    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);
    var greatest = x > y ? x : y;
    var speedModifier = 0.2;
    var speed = Math.ceil(greatest/speedModifier);
    return speed;

}

animateDiv4();  

function makeNewPosition4(){
    
    var h = $(window).height() - 60;
    var w = $(window).width() - 40;
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
    return [nh,nw];       
}

function animateDiv4(){
    var newq = makeNewPosition4();
    var oldq = $('#luciernaga4').offset();
    var speed = calcSpeed4([oldq.top, oldq.left], newq);
    
    $('#luciernaga4').animate({ top: newq[0], left: newq[1] }, speed, function(){
      animateDiv4();        
    });
    
};

function calcSpeed4(prev, next) {
    
    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);
    var greatest = x > y ? x : y;
    var speedModifier = 0.1;
    var speed = Math.ceil(greatest/speedModifier);

    return speed;

}
animateDiv5();  

function makeNewPosition5(){
    
    var h = $(window).height() - 60;
    var w = $(window).width() - 40;
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
    
    return [nh,nw];    
    
}

function animateDiv5(){
    var newq = makeNewPosition5();
    var oldq = $('#luciernaga5').offset();
    var speed = calcSpeed5([oldq.top, oldq.left], newq);
    
    $('#luciernaga5').animate({ top: newq[0], left: newq[1] }, speed, function(){
      animateDiv5();        
    });
    
};

function calcSpeed5(prev, next) {
    
    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);
    var greatest = x > y ? x : y;
    var speedModifier = 0.1;
    var speed = Math.ceil(greatest/speedModifier);
    return speed;
}

animateDiv6();  

function makeNewPosition6(){
    
    var h = $(window).height() - 60;
    var w = $(window).width() - 40;
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
    
    return [nh,nw];    
    
}

function animateDiv6(){
    var newq = makeNewPosition6();
    var oldq = $('#luciernaga6').offset();
    var speed = calcSpeed6([oldq.top, oldq.left], newq);
    
    $('#luciernaga6').animate({ top: newq[0], left: newq[1] }, speed, function(){
      animateDiv6();        
    });
    
};

function calcSpeed6(prev, next) {
    
    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);
    var greatest = x > y ? x : y;
    var speedModifier = 0.1;
    var speed = Math.ceil(greatest/speedModifier);
    return speed;
  }
});
            
          
!
999px
Loading ..................

Console