Monday, May 4, 2020


Art canvas making script depend on mouse move/hover on any site js and html






Lots of webs owners try to keep their users to stay on their website longer to increase site rank and decrease the Bounce Rate, which is most important for any website.

Today I am going to share a thing that can help you to stay a few moments of your users on your site.





.art {
background: url(image url);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size:cover;
height: 100%;
min-height: 650px;
}

.Bcontainer{
width:100%;
max-width:2550px;
margin:0 auto;
}
@media (max-width:991px){
.art .newsFeed {
position: absolute;
bottom: 45.5%;
background: #fff;
left: 5%;
padding: 25px;
max-width: 90%;
border-radius: 5px;
}
.art {
background: url(url image) 50% 50% no-repeat fixed;
background-size: cover;
height: 100%;
min-height: 650px;
background-position: center;
}}



Script


    var mousePressed = true;
    var lastX, lastY;
    var ctx;
    
    function InitThis() {
        ctx = document.getElementById('myCanvas').getContext("2d");
        $('#myCanvas').mousedown(function (e) {
            mousePressed = true;
            Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
        });
        
        $('#myCanvas').mousemove(function (e) {
            if (mousePressed) {
                Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
            }
        });
        
        $('#myCanvas').mouseup(function (e) {
            mousePressed = false;
        });
        $('#myCanvas').mouseleave(function (e) {
            mousePressed = true;
        });
    }
    
    function Draw(x, y, isDown) {
        if (isDown) {
            ctx.beginPath();
            ctx.strokeStyle ='#B00203';
            ctx.lineWidth = 6;
            ctx.lineJoin = "round";
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(x, y);
            ctx.closePath();
            ctx.stroke();
        }
        lastX = x; lastY = y;
    }


Try to use this into HTML formate or Wordpress theme file all things at once and let me know into the comment box if you have any ask.




If you have any question send me a message here- Click here to send a mail
Previous Post
Next Post
Related Posts

0 মন্তব্য(গুলি):

You may also read