THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

Split.js Create Split Screen Effects on Website in Hindi

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;
}

No comments:

Post a Comment