https://github.com/hayanisaid/spilt-in-css3-javascript
Awesome split using CSS3 and Javascript
https://github.com/hayanisaid/spilt-in-css3-javascript
Last synced: 2 months ago
JSON representation
Awesome split using CSS3 and Javascript
- Host: GitHub
- URL: https://github.com/hayanisaid/spilt-in-css3-javascript
- Owner: hayanisaid
- Created: 2017-10-02T19:05:15.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-01-15T00:21:04.000Z (over 7 years ago)
- Last Synced: 2025-01-05T20:41:43.307Z (4 months ago)
- Language: CSS
- Size: 507 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Spilt-in-Css3-Javascript
Awesome split using CSS3 and Javascript
##crate an awesome split using Javascript and CSS
** index.html**
```
Awsome split Using css3 && javascript
Look sharp
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
Stay Cool
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
```
**style.css**
```
body{
margin:0;
padding: 0;
font-size: 100%;
line-height: 1.6;
font-family: Arial halvetica,sans-serif;
}
#wrapper{
position: relative;
width: 100%;
height: 55vw;
min-height: 55vw;
overflow: hidden;
}
.layer{
position: absolute;
width: 100vw;
min-height: 55vw;
overflow: hidden;
}
.layer .wrapper-content{
position: absolute;
width: 100vw;
min-height: 55vw;
}
.layer .wrapper-body{
width: 25%;
top: 50%;
position: absolute;
text-align: center;
transform: translateY(-50%);
color:#fff;
}
.layer img{
position: absolute;
width: 35%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.layer h1{
font-size: 2em;
}
.bottom{
background: #222;
z-index: 1;
}
.bottom .wrapper-body{
right: 5%;
}
.bottom h1{
color: #FDAB00;
}
.top{
width: 50vw;
background: #eee;
color: #222;
z-index: 2;
}
.top .wrapper-body{
left: 5%;
color: #222;
}
.handle{
position: absolute;
height: 100%;
left: 50%;
top: 0;
background: #FDAB00;
width: 5px;
z-index: 3;
bottom: 0;
display: block;
}
.skwed .handle{
top: 50%;
transform: rotate(30deg) translateY(-50%);
height: 200%;
transform-origin: top;
}
.skwed .top{
transform: skew(-30deg);
margin-left: -1000px;
width: calc(50vw + 1000px);
}
.skwed .top .wrapper-content{
transform:skew(30deg);
margin-left: 1000px;
}
@media(max-width: 768px){
body{
font-size: 75%;
}
}
```
##JavaScript
***main.js**
```
document.addEventListener("DOMContentLoaded" ,function(){
var wrap=document.getElementById('wrapper');
var topLayer=wrap.querySelector(".top");
var handle=wrap.querySelector(".handle");
var skew=0;
var delta=0;
if (wrap.className.indexOf("skwed")!=-1) {
skew=1000;
}
wrap.addEventListener("mousemove",function(e){
delta=(e.clientX - window.innerWidth /2)*0.5;
handle.style.left=e.clientX + delta + "px";
topLayer.style.width=e.clientX + skew + delta + "px";
})
})
```