[html]
<style>
.canvas-area{
box-shadow:0 0 10px -2px #999;
border-radius:5px;
width:100%;
height:300px;
background:cover; background:url(https://i.pinimg.com/originals/6d/ad/78 … 65c970.png);
overflow:hidden;
position:relative;
}
#stars-font,#stars-under{
margin-left:-500px;
overflow:hidden;
}
</style>
<script>
(function(){
//Canvas initialization
function init() {
starsFont = document.getElementById("stars-font");
ctx = starsFont.getContext("2d");
starsUnder = document.getElementById("stars-under");
ctx2 = starsUnder.getContext("2d");
drawAll();
}
//Rendering of canvas
/***************/
function drawAll() {
draw1();
draw2();
}
function draw1(){
ctx.clearRect(0, 0, 5000,300);
for(var i=0;i<5000;i++){
ctx.beginPath();
ctx.arc(Math.random()*5000,10+Math.random()*1000,3*Math.random()*1,0,Math.PI*2,true);
ctx.closePath()
ctx.shadowBlur = 10;
ctx.shadowColor = 'gray';
ctx.fillStyle = '#c6c6f5';
ctx.fill();
}
}
function draw2(){
ctx2.clearRect(0, 0, 5000,300);
for(var i=0;i<700;i++){
ctx2.beginPath();
ctx2.arc(Math.random()*5000,10+Math.random()*1000,3*Math.random()*2,0,Math.PI*2,true);
ctx2.closePath()
ctx2.shadowBlur = 10;
ctx2.shadowColor = 'white';
ctx2.fillStyle = '#c6c6f5';
ctx2.fill();
}
}
init();
/******************/
//Mouse event listener
var currentPositionX_;
$('body').mousemove(function(e){
setTimeout(function(){return currentPositionX_=e.pageX;},1);
var currentPositionX=e.pageX;
if(currentPositionX_>currentPositionX){
$('#stars-font').css("margin-left","+="+3+"px 0");
$('#stars-under').css("margin-left","+="+2+"px 0");
$('.canvas-area').css("background-position","+="+1+"px 0");
}else{
$('#stars-font').css("margin-left","+="+-3+"px 0");
$('#stars-under').css("margin-left","+="+-2+"px 0");
$('.canvas-area').css("background-position","+="+-1+"px 0");
}
});
})();
</script>
<div class="canvas-area">
<canvas id="stars-font" width="5000" height="600px" style="z-index:2;position:absolute;" ></canvas>
<canvas id="stars-under" width="5000" height="600px" style="z-index:1;position:absolute;"></canvas>
</div>
[/html]
- Вулкан
- Фаэтон
