在Y屏幕位置显示CSS动画(Showing CSS animation on Y screen position)
在访客在屏幕Y位置滚动后，有没有可能显示css动画的方法。 例如。 我有2个100％宽度的部分，在第一部分，有一些图像，文本等..但在第二部分有2个图像，当访客在Y位置滚动时应该动画。 （y位置应包含图片的高度）。
这是我的代码示例：
[http://codepen.io/anon/pen/mVZJRy][1]（这些图片是.png）
HTML代码
<section class="section3"> <div id="left"> <img src="img/blue.png"> </div> <div id="right"> <img src="img/black.png"> </div> </div>CSS代码
*{ padding:0; margin:0; } .section1{ width:100%; height:670px; text-align:left; background-color:white; border-bottom:2px solid rgba(0, 0, 0, 0.1); box-shadow:0px 2px 0px #DFDFDF; } .section3{ width:100%; height:550px; background-color:#f2f2f2; } #right{ position:absolute; left:51vw; top:856px; width:400px; height:400px; } #right img{ width:170px; height:290px; opacity:0; animation-fill-mode: forwards; animation-delay:1.1s; animation-name: slideLeft; -webkit-animation-name: slideLeft; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideLeft { 0% { transform: translateX(150%); opacity:1; } 50%{ transform: translateX(-8%);opacity:1; } 65%{ transform: translateX(4%);opacity:1; } 80%{ transform: translateX(-4%);opacity:1; } 95%{ transform: translateX(2%);opacity:1; } 100% { transform: translateX(0%);opacity:1; } } @-webkit-keyframes slideLeft { 0% { -webkit-transform: translateX(150%);opacity:1; } 50%{ -webkit-transform: translateX(-8%);opacity:1; } 65%{ -webkit-transform: translateX(4%);opacity:1; } 80%{ -webkit-transform: translateX(-4%);opacity:1; } 95%{ -webkit-transform: translateX(2%);opacity:1; } 100% { -webkit-transform: translateX(0%);opacity:1; } } #left{ position:absolute; width:300px; height:357px; left:39vw; top:850px; } #left img{ width:300px; height:357px; animation-fill-mode: forwards; opacity:0; animation-delay:1.1s; animation-name: b; -webkit-animation-name: b; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes b { 0% { transform: translateX(-150%);opacity:1 } 50%{ transform: translateX(8%);opacity:1 } 65%{ transform: translateX(-4%);opacity:1 } 80%{ transform: translateX(4%);opacity:1 } 95%{ transform: translateX(-2%);opacity:1 } 100% { transform: translateX(0%);opacity:1 } } (-4%);opacity:1; } 95%{ -webkit-transform: translateX(2%);opacity:1; } 100% { -webkit-transform: translateX(0%);opacity:1; } }Is there any possible way to show css animation, after visitor scroll on screen Y position. For example. I have 2 sections with 100% width, in the first section, there are some images, text etc.. but in the second one there are 2 images that should be animated when a visitor scroll on that Y position. (y position should contain height of the pictures).
Here is my code example:
[http://codepen.io/anon/pen/mVZJRy][1](these pictures are .png)
HTML CODE
<section class="section3"> <div id="left"> <img src="img/blue.png"> </div> <div id="right"> <img src="img/black.png"> </div> </div>CSS CODE
*{ padding:0; margin:0; } .section1{ width:100%; height:670px; text-align:left; background-color:white; border-bottom:2px solid rgba(0, 0, 0, 0.1); box-shadow:0px 2px 0px #DFDFDF; } .section3{ width:100%; height:550px; background-color:#f2f2f2; } #right{ position:absolute; left:51vw; top:856px; width:400px; height:400px; } #right img{ width:170px; height:290px; opacity:0; animation-fill-mode: forwards; animation-delay:1.1s; animation-name: slideLeft; -webkit-animation-name: slideLeft; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideLeft { 0% { transform: translateX(150%); opacity:1; } 50%{ transform: translateX(-8%);opacity:1; } 65%{ transform: translateX(4%);opacity:1; } 80%{ transform: translateX(-4%);opacity:1; } 95%{ transform: translateX(2%);opacity:1; } 100% { transform: translateX(0%);opacity:1; } } @-webkit-keyframes slideLeft { 0% { -webkit-transform: translateX(150%);opacity:1; } 50%{ -webkit-transform: translateX(-8%);opacity:1; } 65%{ -webkit-transform: translateX(4%);opacity:1; } 80%{ -webkit-transform: translateX(-4%);opacity:1; } 95%{ -webkit-transform: translateX(2%);opacity:1; } 100% { -webkit-transform: translateX(0%);opacity:1; } } #left{ position:absolute; width:300px; height:357px; left:39vw; top:850px; } #left img{ width:300px; height:357px; animation-fill-mode: forwards; opacity:0; animation-delay:1.1s; animation-name: b; -webkit-animation-name: b; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes b { 0% { transform: translateX(-150%);opacity:1 } 50%{ transform: translateX(8%);opacity:1 } 65%{ transform: translateX(-4%);opacity:1 } 80%{ transform: translateX(4%);opacity:1 } 95%{ transform: translateX(-2%);opacity:1 } 100% { transform: translateX(0%);opacity:1 } } (-4%);opacity:1; } 95%{ -webkit-transform: translateX(2%);opacity:1; } 100% { -webkit-transform: translateX(0%);opacity:1; } }最满意答案
在右侧位置滚动时，可以向图像添加一些className。 并在此课程中设置您的CSS动画。 它可能是这样的：
window.onscroll = function() { var scrolled = window.pageYOffset || document.documentElement.scrollTop, imgRight = document.getElementById('right').children[0], imgLeft= document.getElementById('left').children[0]; if (scrolled => imgRight.height) { imgRight.className = 'slideLeft'; } if (scrolled => imgLeft.height) { imgLeft.className = 'b'; } }我在css中添加了一些修正http://codepen.io/anon/pen/gPNpzM?editors=0110
You can add some className to images, when scroll on the right position. And set your css animaion on this class. It might be something like that:
window.onscroll = function() { var scrolled = window.pageYOffset || document.documentElement.scrollTop, imgRight = document.getElementById('right').children[0], imgLeft= document.getElementById('left').children[0]; if (scrolled => imgRight.height) { imgRight.className = 'slideLeft'; } if (scrolled => imgLeft.height) { imgLeft.className = 'b'; } }I add some correction in css http://codepen.io/anon/pen/gPNpzM?editors=0110
更多推荐
发布评论