向上滑动并淡入动画
[英]Slide up and fade in animation
问题描述
我试图在CSS或JS类似动画中创建动画： http ://oshinewptheme.com/v29/
因此，当用户向下滚动到图像时，它会略微上升并逐渐消失。为此我创建了基本结构：
HTML
<body>
<div class="gallery" align="center">
<img src="1.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
<img src="8.jpg">
<img src="9.jpg">
</div>
</body>
CSS
.gallery{
align-content: center;
margin-left: 200px;
margin-right: 200px;
margin-top: 500px;
}
如果您有任何想法，我不确定如何使动画工作，这将是一个很棒的项目： https : //codepen.io/Hamzaw_GD/pen/zRQxZo
提前非常感谢您，我只有13岁，非常渴望获得解决方案，因此请耐心等待我。
4 个解决方案
解决方案1
1 2018-03-04 15:44:07
尝试animate.css库。 应该帮助您所需。
解决方案2
1 2018-03-04 16:02:01
这是快速简便的解决方案。
.gallery{ margin-left:auto; margin-right:auto; max-width:600px; } IMG {width:100%; max-width:500px;} IMG:hover{width:110%; max-width:550px;}
<div class="gallery" align="center"> <img src="https://media.springernature.com/full/nature-static/assets/v1/image-assets/531S56a-i1.jpg"> <img src="http://www.samoaobserver.ws/images/cache/600x400/crop/images%7Ccms-image-000009332.jpg"> <img src="http://www.worddive.com/blog/wp-content/uploads/2014/06/nature-and-environment-course.jpg"> <img src="https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/4037855/300/200/m2/fpc/wm0/ofj73imzdnhtoxcvlmowaxbdmbbtf2yixqwhacy3wwsjctvxybw0ggbjs9y7hr1h-.jpg?1519205483&s=10ea078a417885590d11783ca8a43b52"> <img src="https://lucysmagazine.com/wp-content/uploads/2017/04/Screen-Shot-2017-04-01-at-8.58.36-AM.jpg"> <img src="http://img.fotocommunity.com/alte-hoehenburg-9eebdd0f-f85d-40d7-9944-c15672ca0242.jpg?height=400"> </div>
解决方案3
1 2018-03-04 16:59:19
为此，您必须使用CSS样式。
在每个img元素之后，您必须添加一个带有叠加样式和文本的div元素。
.gallery-item { position: relative; width: 50%; } img { width: 100%; height: 100%; } .img-overlay { display: flex; justify-content: center; align-items: center; background-color: lightgray; position: absolute; z-index: 1; top: 0; right: 0; bottom: 4px; left: 0; opacity: 0; transition: opacity 0.3s linear; } .gallery-title { height: 0; transition: all 0.3s linear; } .gallery-item:hover .img-overlay { opacity: 1; } .gallery-item:hover .gallery-title { height: 2em; }
<html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> </head> <body> <div class="gallery" align="center"> <div class="gallery-item"> <img src="https://media.springernature.com/full/nature-static/assets/v1/image-assets/531S56a-i1.jpg"> <div class="img-overlay"> <div class="gallery-text"> <div class="gallery-title">FASHION MODELS</div> <div class="gallery-tags">Mobile, Web</div> </div> </div> </div> <div class="gallery-item"> <img src="http://www.samoaobserver.ws/images/cache/600x400/crop/images%7Ccms-image-000009332.jpg"> <div class="img-overlay"> <div class="gallery-text"> <div class="gallery-title">FASHION MODELS</div> <div class="gallery-tags">Mobile, Web</div> </div> </div> </div> <div class="gallery-item"> <img src="http://www.worddive.com/blog/wp-content/uploads/2014/06/nature-and-environment-course.jpg"> <div class="img-overlay"> <div class="gallery-text"> <div class="gallery-title">FASHION MODELS</div> <div class="gallery-tags">Mobile, Web</div> </div> </div> </div> </div> </body> </html>
解决方案4
1 已采纳 2018-03-04 18:24:38
其他答案是关于悬停叠加或一般动画的，但是我认为您特别想让图像淡入并在向下滚动时向上移动。
这可以解决问题。 我对JS发表了评论。 当心，它使用jQuery。 如果您有任何问题，请告诉我。
$('.gallery img').addClass('hidden'); $(window).on('scroll', function(){ // Get the vertical offset of the first gallery image that is hidden. var p = $('.gallery .hidden').offset(); p = p.top; // Check for the current scroll position. var s = $('body').scrollTop(); // Get the height of the window. var h = $(window).height(); // Just logging the results for better understanding. console.clear(); console.log(s + h, p); // Triggering the fade in when the image is partially reached by scrolling (in this case 100px) if((s + h) >= p) { // Find the first element within <gallery> that has the class 'hidden'. Then fade it in by adding the class 'fadeIn' and removing the class 'hidden' so it is taken out of the rotation. $('.gallery').find('.hidden').first().addClass('fadeIn').removeClass('hidden'); } else {} });
.gallery { margin-left: auto; margin-right:auto; margin-top:100vh; max-width:600px; position:relative; } .gallery__help { text-align:center; transform: translateY(-50vh); } .gallery img { opacity:0; max-width:600px; } .hidden { transform: translateY(100px); } .fadeIn { opacity:1 !important; transform: translateY(0); -webkit-transition: all 2s ease; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="gallery"> <p class="gallery__help">Please Scroll Down</p> <img src="https://media.springernature.com/full/nature-static/assets/v1/image-assets/531S56a-i1.jpg"> <img src="http://www.samoaobserver.ws/images/cache/600x400/crop/images%7Ccms-image-000009332.jpg"> <img src="http://www.worddive.com/blog/wp-content/uploads/2014/06/nature-and-environment-course.jpg"> <img src="https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/4037855/300/200/m2/fpc/wm0/ofj73imzdnhtoxcvlmowaxbdmbbtf2yixqwhacy3wwsjctvxybw0ggbjs9y7hr1h-.jpg?1519205483&s=10ea078a417885590d11783ca8a43b52"> <img src="https://lucysmagazine.com/wp-content/uploads/2017/04/Screen-Shot-2017-04-01-at-8.58.36-AM.jpg"> <img src="http://img.fotocommunity.com/alte-hoehenburg-9eebdd0f-f85d-40d7-9944-c15672ca0242.jpg?height=400"> </div>
连续滑动和淡化Div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.