@import url(http://fonts.googleapis.com/css?family=Montserrat); html, body { overflow: hidden; } .ct_section { background-size: cover; background-repeat: no-repeat; background-position: center center; overflow: hidden; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; height: 130vh; position: fixed; width: 100%; -webkit-transform: translateY(30vh); transform: translateY(30vh); -webkit-transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1); transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1); } .ct_section:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); } .ct_section:first-child { background-image: url(http://s8.postimg.org/lf2udl5np/4_Aihmii.jpg); -webkit-transform: translateY(-15vh); transform: translateY(-15vh); } .ct_section:first-child .content-wrapper { -webkit-transform: translateY(15vh); transform: translateY(15vh); } .ct_section:nth-child(2) { background-image: url(http://s8.postimg.org/ow4wgk4px/ugqti_Lg.jpg); } .ct_section:nth-child(3) { background-image: url(http://s8.postimg.org/grwsbtiat/x_ZMOBTj.jpg); } /* Set stacking context of slides */ .ct_section:nth-child(1) { z-index: 3; } .ct_section:nth-child(2) { z-index: 2; } .ct_section:nth-child(3) { z-index: 1; } .content-wrapper { height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; -ms-flex-flow: column nowrap; flex-flow: column nowrap; color: #fff; font-family: Montserrat; text-transform: uppercase; -webkit-transform: translateY(40vh); transform: translateY(40vh); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1); transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1); } .content-title { font-size: 12vh; line-height: 1.4; } .ct_section.up-scroll { -webkit-transform: translate3d(0, -15vh, 0); transform: translate3d(0, -15vh, 0); } .ct_section.up-scroll .content-wrapper { -webkit-transform: translateY(15vh); transform: translateY(15vh); } .ct_section.up-scroll + .ct_section { -webkit-transform: translate3d(0, 30vh, 0); transform: translate3d(0, 30vh, 0); } .ct_section.up-scroll + .ct_section .content-wrapper { -webkit-transform: translateY(30vh); transform: translateY(30vh); } .ct_section.down-scroll { -webkit-transform: translate3d(0, -130vh, 0); transform: translate3d(0, -130vh, 0); } .ct_section.down-scroll .content-wrapper { -webkit-transform: translateY(40vh); transform: translateY(40vh); } .ct_section.down-scroll + .ct_section:not(.down-scroll) { -webkit-transform: translate3d(0, -15vh, 0); transform: translate3d(0, -15vh, 0); } .ct_section.down-scroll + .ct_section:not(.down-scroll) .content-wrapper { -webkit-transform: translateY(15vh); transform: translateY(15vh); }