[英]Image sliding right to cover text then revealing new text as it slides back
I have an effect I want to achieve, but I'm having trouble thinking of exactly how I could achieve it. 我有一个想要达到的效果,但是我很难思考如何实现它。 Here are some images that show the progression of the effect I want to achieve: http://imgur.com/a/In6IK 以下是一些图像,这些图像显示了我想要达到的效果的进度: http : //imgur.com/a/In6IK
So essentially, I have multiple slides containing text which I want to automatically display one by one. 因此,从本质上讲,我有多张幻灯片,其中包含要自动显示的文本。 In order to hide the current slide and show the next one, I want an image (which sits to the left of the text) to slide to the right, covering/hiding the text as it goes, and then when it slides back to its original position, the text for the next slide is shown. 为了隐藏当前幻灯片并显示下一张幻灯片,我希望图像(位于文本左侧)向右滑动,以覆盖/隐藏文本,然后将其滑动回其位置时原始位置,则显示下一张幻灯片的文本。
So how would I go about achieving this effect? 那么我将如何实现这种效果呢?
Here is a raw idea. 这是一个原始想法。 Maybe you can make use of :after
and :before
and position them so that they hide the text, making it disappear. 也许您可以使用:after
和:before
并放置它们的位置,以便它们隐藏文本,使其消失。
HTML would be something like: HTML类似于:
<div class="main">
<div class="over"></div>
<div class="text">This is some text</div>
</div>
And for CSS look in this fiddle http://jsfiddle.net/Zs2MU/ 对于CSS,请看这个小提琴http://jsfiddle.net/Zs2MU/
Maybe it will help you in your situation. 也许它将对您的情况有所帮助。
UPD Here is updated solution which supports multiline text http://jsfiddle.net/Zs2MU/2/ UPD这是更新的解决方案,支持多行文本http://jsfiddle.net/Zs2MU/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.