滚动触发页面（长页面）

body{background: url(../css/imgs/1.jpg) no-repeat 50% 0;font-family: 'helvetica Neue', sans-serif;color: #FFF;background-size: cover;}#slogan1,#slogan2,#slogan3{position: relative;height: 500px;}#slogan1{padding-top: 200px;text-align: center;opacity: 0;-webkit-transition: all 2s .5s;transition: all 2s .5s;}#slogan1.show{opacity: 1;}#slogan1 h1{font-size: 81px;text-transform: uppercase;}#slogan1 h2{font-size: 32px;font-weight: 100;}#slogan2{padding-top: 50px;text-align: center;}#slogan2 h1{display: inline-block;padding-top: 20px;padding-bottom: 20px;border-top: 5px solid #fff;border-bottom: 5px solid #fff;opacity: 0;-webkit-transform: scaleY(0);transform: scaleY(0);-webkit-transition: all 1s;transition: all 1s;}#slogan2 h2{font-size: 26px;opacity: 0;-webkit-transform: scaleX(0);transform: scaleX(0);-webkit-transition: all 1s .5s;transition: all 1s .5s;}#slogan2 h1.scrolled{opacity: 1;-webkit-transform: scaleY(1);transform: scaleY(1);}#slogan2 h2.scrolled{opacity: 1;-webkit-transform: scaleX(1);transform: scaleX(1);}#slogan3 h1{position: absolute;font-size: 72px;left: 10%;top: 60px;opacity: 0;-webkit-transform: translateX(-200px);transform: translateX(-200px);-webkit-transition: all 1s;transition: all 1s;}#slogan3 h2{position: absolute;font-size: 24px;left: 10;width: 650px;top: 200px;opacity: 0;-webkit-transform: translateX(200px);transform: translateX(200px);-webkit-transition: all 1s .25s;transition: all 1s .25s;}#slogan3 img{position: absolute;left: 60%;top: 100px;opacity: 0;-webkit-transform: translateX(200px);transform: translateX(200px);-webkit-transition: all 1.5s .5s;transition: all 1.5s .5s;}#slogan3 h1.scrolled,#slogan3 h2.scrolled,#slogan3 img.scrolled{opacity: 1;-webkit-transform: translateX(0px);transform: translateX(0px);}
Done fringilla
Aenean cursus metus nec sem aliquet maximus in ut felis
Pellentesque
Aenean cursus metus nec sem aliquet maximus in ut felis
Vestibuilum
Aenean cursus metus nec sem aliquet maximus in ut felis