4 ответа

Лучший ответ

Другие ответы касались наложения при наведении или общей анимации, но я подумал, что вы особенно заинтересованы в том, чтобы изображения появлялись и двигались вверх после прокрутки вниз.

Это делает трюк. Я прокомментировал 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>
1
Ingo86 4 Мар 2018 в 18:24

Для этого вам нужно использовать стили 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>
1
Timi Hraš 4 Мар 2018 в 16:59

Это быстрое и простое решение.

	.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>
1
Matthew 4 Мар 2018 в 16:02

Попробуйте animate.css библиотеку. Должно помочь с тем, что вам нужно.

1
Alexander 4 Мар 2018 в 16:56