Split.js create Split Screen Effects on Website
Create a split view with an array of selectors or HTML elements. By default, Split.js modifies the CSS width property and nothing else. You are responsible for adding other CSS properties to create a layout.
HTML CODE
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="spiltjs.css">
</head>
<body>
<main>
<div class="side-a a"> DONATION FOR SUPPORT: PhonePay = vinodbahadur@ybl GooglePay: vbthapa55@oksbi
</div>
<div class="side-b b"> Believe me all this money will be used to make more quality videos and to make my channel grow. So that I can always provide you awesome free videos :) </div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.5.9/split.min.js"></script>
<script>
Split(['.a', '.b'], {
gutterSize: 3,
sizes: [25, 75],
})
</script>
</body>
</html>
CSS CODE
*{ margin: 0; padding: 0; }
body {
margin: 0;
height: 100vh;
}
main{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.side-a{
background-image: url('cute.jpg');
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
.side-b{
background-image: url('cute.jpg');
width: 100%;
height: 100vh;
filter: grayscale(100%);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.gutter {
cursor: w-resize;
height: 100%;
background: grey;
}
