HTML
<p class="demo">Developed By Codeconvey.com
</p>
<h3>Mouse Scroll To see Effect</h3>
<div class="horizontalScroll">
<div class="item">
<div class="bg" style="background-image: url(https://images.unsplash.com/photo-1468014187448-46f9ba8890a2?dpr=1&auto=compres)"></div>
</div>
<div class="item">
<div class="bg" style="background-image: url(https://images.unsplash.com/photo-1466496224275-4cbf790b285b?dpr=1&auto=compres)"></div>
</div>
<div class="item">
<div class="bg" style="background-image: url(https://images.unsplash.com/photo-1437315306147-0923bdb3fc12?dpr=1&auto=compress)"></div>
</div>
<div class="item">
<div class="bg" style="background-image: url(https://images.unsplash.com/44/C3EWdWzT8imxs0fKeKoC_blackforrest.JPG?dpr=1&auto)"></div>
</div>
<div class="item">
<div class="bg" style="background-image: url(https://images.unsplash.com/photo-1481093903765-de0b1d88f1a5?dpr=1&auto=compres)"></div>
</div>
<div class="item">
<div class="bg" style="background-image: url(https://images.unsplash.com/photo-1480914362564-9f2c2634e266?dpr=1&auto=compress)"></div>
</div>
</div>
CSS
/* http://codeconvey.com/pure-css-horizontal-scroll-with-mouse-wheel/ */
::-webkit-scrollbar {
width: 1px;
height: 1px;
}
::-webkit-scrollbar-button {
width: 1px;
height: 1px;
}
*,
*::after,
*::before {
box-sizing: border-box;
}
body {
overflow: hidden;
background:#111;
}
.horizontalScroll {
width: 100vh;
height: 100vw;
overflow-y: auto;
overflow-x: hidden;
background: #2E2E2E;
padding: 30px;
-webkit-transform-origin: right top;
transform-origin: right top;
-webkit-transform: rotate(-90deg) translate3d(0, -100vh, 0);
transform: rotate(-90deg) translate3d(0, -100vh, 0);
}
.horizontalScroll > * {
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transform: rotate(90deg) translate3d(0, calc(-100vh + 60px), 0);
transform: rotate(90deg) translate3d(0, calc(-100vh + 60px), 0);
}
.item {
width: calc(100vh - 60px);
height: calc(100vh - 60px);
background: #FDFFFC;
position: relative;
}
.item:not(:first-child) {
margin-top: 30px;
}
.item .bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: no-repeat center center / cover;
opacity: .8;
background-blend-mode: luminosity;
}
/* Demo Purpose Only*/
.demo {
font-family: 'Raleway', sans-serif;
color:#fff;
display: block;
margin: 0 auto;
padding: 15px 0;
text-align: center;
}
.demo a{
font-family: 'Raleway', sans-serif;
color: #2ecc71;
}
h3{
font-family: 'Raleway', sans-serif;
color:#fff;
display: block;
margin: 0 auto;
padding: 15px 0;
text-align: center;
}
4 Responses