我试图在CSS或JS中创建一个类似于这样的动画：qazxsw poi
因此，当用户向下滚动到图像上时，它会略微上升并淡入。我已经为此创建了基本结构：
http://oshinewptheme.com/v29/
<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>
我不确定如何让动画工作，如果你有任何想法，这将是伟大的这里是项目：.gallery{
align-content: center;
margin-left: 200px;
margin-right: 200px;
margin-top: 500px;
}
非常感谢你提前我只有13岁并非常渴望解决方案所以请耐心等待我。
其他答案涉及悬停叠加或一般动画，但我认为你特别感兴趣的是让图像淡入并向上滚动后向上移动。
这样就可以了。我评论过JS。当心，它使用jquery。如果您有疑问，请告诉我。
https://codepen.io/Hamzaw_GD/pen/zRQxZo
$('.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> .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>图书馆。应该帮助你所需要的。
要实现这一点，您必须使用CSS样式。
在每个animate.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;
}