HTML

Question

我正在尝试用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岁而且非常渴望解决方案所以请耐心等待我。

Answer 1

试用animate.css库。应该帮助你所需要的。

Answer 2

这是一种快速简便的解决方案。

＆＃13;

<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>

＆＃13;

  (def input-data
    [{:doc_id 1 :doc_seq 1  :doc_content "this is a very long "}
    {:doc_id 1 :doc_seq 2  :doc_content "sentence from a mainframe "}
    {:doc_id 1 :doc_seq 3  :doc_content "system that was built before i was "}
    {:doc_id 1 :doc_seq 4  :doc_content "born."}
    {:doc_id 2 :doc_seq 1  :doc_content "this is a another very long "}
    {:doc_id 2 :doc_seq 2  :doc_content "sentence from the same mainframe "}
    {:doc_id 3 :doc_seq 1  :doc_content "Ok here we are again. "}
    {:doc_id 3 :doc_seq 2  :doc_content "The mainframe only had 40 char per field so"}
    {:doc_id 3 :doc_seq 3  :doc_content "they broke it into multiple rows "}
    {:doc_id 3 :doc_seq 4  :doc_content "which seems to be common"}
    {:doc_id 3 :doc_seq 5  :doc_content " for the time. "}
    {:doc_id 3 :doc_seq 6  :doc_content "thanks for your help."}])

＆＃13;

Answer 3

要实现这一点，您必须使用CSS样式。

在每个$post_ids = Post::pluck('id')->toArray();元素后，您必须添加带有叠加样式和文字的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;
}

Answer 4

其他答案涉及悬停叠加或一般动画，但我认为你特别感兴趣的是让图像淡入并向上滚动后向上移动。

这就是诀窍。我对JS进行了评论。当心，它使用jquery。如果您有疑问，请告诉我。

＆＃13;

$('.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 {}
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

向上滑动并淡入动画

HTML

CSS

4 个答案: