Image parallax effect on scroll using jQuery next label parallax effect
In the following section, we'll show you how to use HTML, CSS, and jQuery to generate an image parallax effect when you scroll. We provide this post with a special parallax effect concept.
You might like this
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="left_bottom-clip"></div>
<div class="top_right-clip"></div>
<div class="banner"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>
CSS Code
*,*:after,*:before{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body{
font-family: arial;
font-size: 16px;
margin: 0;
background: #fff;
color: #000;
}
.left_bottom-clip,
.top_right-clip{
clip-path: polygon(0% 0%, 40% 60%, 100% 100%, 0% 100%);
background: #03c5ff;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.top_right-clip{
clip-path: polygon(0% 0%, 60% 40%, 100% 100%, 100% 0%);
}
.banner{ background:url('https://images.unsplash.com/photo-1497215842964-222b430dc094?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1500&q=80') ;
background-size: cover;
background-position: center;
height: 100vh;
}
JavaScript Code
var counter =40;
var counter2 =60;
$(document).bind("mousewheel",function(event){
if(event.originalEvent.wheelDelta > 0){
if( counter < 50 ){
counter += 1;
counter2 -= 1;
//console.log(counter)
$(".left_bottom-clip").css({"clip-path":"polygon(0% 0%, "+counter+"% "+counter2+"%, 100% 100%, 0% 100%)"});
$(".top_right-clip").css({"clip-path":"polygon(0% 0%, "+counter2+"% "+counter+"%, 100% 100%, 100% 0%"})
}
}else{
if( counter < 51 && counter > 0){
counter -= 1;
counter2 += 1;
//console.log(counter)
$(".left_bottom-clip").css({"clip-path":"polygon(0% 0%, "+counter+"% "+counter2+"%, 100% 100%, 0% 100%)"});
$(".top_right-clip").css({"clip-path":"polygon(0% 0%, "+counter2+"% "+counter+"%, 100% 100%, 100% 0%"})
}
}
})
0 Comments