JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top">
		<div class="top_box">
			<h1>Жажда</h1>
			<h1>победы</h1>

			<h2>Ген победителя – явление крайне редкое, но очень важное.
				Именно благодаря жажде победы, умноженной на силу
				воли и упорный труд, достигаются результаты, которыми
				впоследствии гордится весь мир.</h2>
		</div>
	</div>
	<div id="block_1">
		<div class="container">
			<p>Для того чтобы понять, с чего начинается
				успех и какие качества для его достиже-
				ния надо развить, мы познакомились
				с уникальными украинскими спор-
				тсменками, каждая из которых олицетворяет собой
				чистую и прекрасную победу над обстоятельствами,
				ограничениями и сомнениями. Анна Ризатдинова,
				Юлия Левченко и Виктория Мазур рассказали о том,
				какой путь прошли, чтобы стать чемпионками, а также
				поделились секретами красоты, гармонии и любви к
				себе. Профессиональный израильский бьюти-бренд
				Christina, миссия, философия, принципы и продукты
				которого в полной мере отображают стремление к по-
				беде, объединился с Cosmo для того, чтобы вдохновить
				тебя на большее.</p>
		</div>
	</div>
	<div class="line">
	</div>
	<div id="first">
		<div class="container center">
			<h2>Юлия Левченко</h2>
			<h4>украинская прыгунья в высоту, серебряный призер
				чемпионата мира 2017 года, участница летних Олимпийских
				игр 2016 года, олимпийская чемпионка среди юниоров 2014 года</h4>
		</div>
		<div class="photo_box">
			<div id="first_img" style="top:20%; left: 10%; display: none;"><img src="img/crst/1R9A8096.jpg" alt="" width="45%"></div> 
			<div class="second_img"><img src="img/crst/1R9A8105.jpg" alt="" width="45%"></div> 
			<div class="third_img" style="display: none;" >fd</div>
		</div>
	</div>

CSS

/* flex  */

.f_box {display: flex;justify-content: space-around; align-items: center;}

/* end */


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.container {
	width: 80%;
	margin: auto;
}

.center {text-align: center;}

h2, h3, h4, p {font-family: 'Open Sans', sans-serif;}

h1 {
	font-family: 'Marck Script', cursive;
	font-size: 11em;
}

h2 {
	font-size: 24px;
	font-weight: 400;
	width: 60%;
	margin: auto;
	text-align: center;
}

h4 {width: 40%; margin: auto;}


#top {
	height: 100vh;
	background-image: url(../img/crst/PR-Christina2.jpg);
	background-position: 100% 0%;
	background-repeat: no-repeat;
	background-color: #FFFDF8;
}

.top_box {
	width: 45%;
	margin-left: 10%;

}

.top_box h1:nth-child(1) {
	color: #DAA072;
	text-align: left;
	padding-top: 10%;
}

.top_box h1:nth-child(2) {
	color: #000;
	text-align: right;
	font-size: 6em;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	padding: 5% 0 10% 0;
}

#block_1 p {
	text-align: left;
	width: 50%;
	padding: 4% 0;
	font-size: 21px;
}

#block_1 p::first-letter {
	font-family: 'Marck Script', cursive;
	font-size: 200px;
	letter-spacing: 0.01em;
	line-height: 0.01em;
}

.line {
	width: 50%;
	height: 2px;
	background-color: #AD6944;
	margin: 3% auto;
}

#first h2 {
	font-size: 33px;
	font-weight: 500;
	width: 60%;
	margin: auto;
	margin-bottom: 2%;

}

.photo_box {
	margin-top: 2%;
	text-align: center;
	width: 100%;
	height: 900px;
	background-color: #D08B7B;
	position: relative;
}



#first_img, .second_img, .third_img  {
	display: inline-block;
	position: absolute;
}



.second_img {
	top: 10%;
	right: 10%;
}

JavaScript

$(document).ready(function(){

     
    
   

   
//     function slideImg() {
//     console.log($(window).scrollTop());
//      if ($(window).scrollTop() > 1300) {     
      
//             $('#first_img').fadeIn(2500);
          
//     first_img.style.left=3+'%';   
    
// }


//     // if ($(window).scrollTop() < 700) {     
      
//     //         $('#first_img').fadeOut(800);    
//     // }
    

// //     };
//     window.onscroll = function() {
//       slideImg();
//   }
$(window).scroll(function() {
  console.log('scroll');
  if (Abc()) {
    Show_block();
  }
});

  var $first = $('#block_1');

  function Abc() {

    var do_bloka = $(window).scrollTop + $(window).height();
    var konec_bloka = $first.offset().top + $('#block_1').height();
    return do_bloka >= konec_bloka;

  };

console.log(Abc());

  function Show_block() {
    $('#third_img').show(1000);
  }




});