<main class="container">
	<section class="sec sec01 sec-black sec-right">
		<div class="content">
			<div class="content-inner">
				<h2 class="sec-head">officia labore numquam</h2>
				<div class="sec-exp">
					<p>Asperiores accusamus tempore adipisci ducimus voluptatem ab perferendis similique quas.</p>
				</div>
				<div class="sec-txt">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet quaerat, neque, deleniti dicta hic, voluptates accusamus maiores inventore iusto nostrum qui? Beatae obcaecati laboriosam, quidem neque aliquid ipsum minus similique.</p>
					<p>Expedita, officia earum pariatur. Ad architecto fugiat provident quo, laborum atque aliquid eaque iusto, quisquam, minima distinctio optio veritatis. Consequatur aliquid porro atque tempore minus doloribus, soluta facilis consectetur cumque!</p>
					<p>Totam, aut recusandae. Molestias provident totam repellendus, eos, tempora maiores soluta sunt et iure. Veritatis vel reprehenderit placeat nobis praesentium voluptatum recusandae pariatur ut, vero, rem illum quod, dolorem accusamus.</p>
					<p>Odio et, alias dignissimos ipsam ad laboriosam velit mollitia iusto aliquid distinctio enim molestias unde amet modi illo quo deserunt exercitationem quod pariatur molestiae magnam tempora, dolore omnis aliquam. Accusamus!</p>
					<p>Quisquam accusamus aspernatur sed ex, iure dignissimos cumque, nulla voluptatem possimus! Numquam sapiente, aliquam praesentium dignissimos veritatis. Culpa, minus architecto sed voluptas atque, quidem assumenda, et repellendus tempora rem asperiores.</p>
					<p>Esse eaque nobis laudantium, voluptas ullam nulla, eveniet ipsam officia officiis culpa deserunt quas natus. Dolores eum nemo quasi, aliquam aut, consectetur culpa eos voluptate officiis omnis, facilis vel reiciendis.</p>
					<p>Rerum provident, expedita velit accusamus, nam sed cupiditate! Dolorem quam, repudiandae omnis esse molestias nihil reprehenderit dignissimos fugit nulla odio veniam eligendi ipsa asperiores ipsum dicta natus quia sed voluptatum.</p>
					<p>Inventore, quos, amet. Obcaecati beatae modi repellendus molestiae consequuntur fuga, suscipit sequi provident voluptatibus velit nisi ea quod esse est vero in culpa! Nam quisquam necessitatibus iure reiciendis, nemo asperiores!</p>
					<p>Excepturi laudantium quod assumenda officia labore numquam, cupiditate, ipsam temporibus voluptate blanditiis nam nulla atque sit commodi mollitia quasi consequatur velit maxime ad esse facere repellendus rem debitis. Maxime, quisquam.</p>
					<p>Mollitia sapiente excepturi consequatur, laborum dignissimos quisquam, autem eveniet veritatis illum minima debitis in libero architecto recusandae eligendi temporibus earum asperiores dolorum aspernatur odit nam, facere nostrum tenetur cumque. Non.</p>
					<p>Impedit, maxime. Dolor accusamus vel consectetur, esse numquam voluptas veniam quidem, qui laborum impedit maiores, obcaecati doloribus labore! Ducimus tempora enim laboriosam rem, totam eveniet. Repellat vitae dignissimos sit molestiae!</p>
				</div>
			</div>
		</div>
	</section>
	<section class="sec sec02 sec-white sec-left">
		<div class="content">
			<div class="content-inner">
				<h2 class="sec-head">tempore expedita laudan</h2>
				<div class="sec-exp">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe voluptatum earum, non dolorum quaerat ut inventore odio tempore expedita laudantium necessitatibus, neque voluptatem, dolores! Minima facere, voluptas aliquam natus maiores.</p>
				</div>
				<div class="sec-txt">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis perspiciatis cupiditate quo rem reiciendis corporis, provident quia ducimus neque odio repellendus illo sint aspernatur, quasi debitis laborum numquam eveniet inventore.</p>
					<p>Ducimus et, sapiente officia quo. Velit magni vero deleniti officia, praesentium. Amet maiores, praesentium laudantium porro, laboriosam ea. Corrupti harum hic vel! Temporibus rerum sed ipsam voluptatum sapiente, obcaecati nisi!</p>
					<p>Reprehenderit iusto accusamus ab, iure odit esse maxime natus mollitia unde deserunt, ducimus consectetur aspernatur magni nemo. Facere ipsum, consectetur, repellendus illum distinctio dolor dignissimos sed adipisci, suscipit quasi autem.</p>
					<p>Laudantium ducimus minima incidunt, sunt corporis odit suscipit deserunt alias illo dignissimos omnis voluptatibus assumenda esse atque dolore laborum accusamus rem recusandae neque sed cupiditate dolores pariatur nulla dolorem aperiam.</p>
					<p>Distinctio officiis amet voluptas soluta dignissimos velit cumque repellat aut quam maxime, optio, tempora consequatur enim itaque tenetur iusto, dolores! Sunt optio dolor, hic dolore, harum facere odit veniam accusamus!</p>
					<p>Tempore libero amet, ad commodi veniam doloremque rerum dolores expedita nobis in accusantium dolor impedit labore blanditiis ratione itaque aspernatur ab magni doloribus reiciendis adipisci cum obcaecati. Rerum, possimus, voluptatem.</p>
					<p>Laudantium, quasi sapiente, voluptas eligendi vel reiciendis repudiandae dolorem odio dignissimos atque libero natus praesentium beatae. Quasi assumenda nulla ex obcaecati ipsam illo. Nostrum illo reiciendis voluptatum nobis error sequi?</p>
					<p>Animi ipsa magnam, reiciendis porro, aperiam vitae exercitationem cupiditate id molestias ad hic delectus, quia sed, voluptatibus fugiat atque voluptas maiores quaerat. Vel cumque minus sit neque, non possimus illum.</p>
					<p>Quae amet nisi maxime, soluta quos deserunt, quas a eaque repellat consectetur totam distinctio dolores, itaque quasi labore consequuntur laborum ratione perspiciatis natus. Veritatis, doloremque, possimus! Quo quibusdam inventore ab.</p>
					<p>Rem, impedit? Dolorem debitis, reiciendis quos assumenda commodi id sapiente quae cupiditate placeat officiis dolores aspernatur doloremque, numquam repudiandae? Officiis quasi, consequuntur reiciendis harum quo minima dignissimos aliquid provident incidunt.</p>
				</div>
			</div>
		</div>
	</section>
	<section class="sec sec03 sec-black sec-right">
		<div class="content">
			<div class="content-inner">
				<h2 class="sec-head">enim sapiente iusto neque</h2>
				<div class="sec-exp">
					<p>Illum vero enim doloribus, blanditiis distinctio ducimus sapiente omnis nesciunt possimus molestias. tempore expedita laudantium necessitatibus, neque voluptatem, dolores! Minima facere, voluptas aliquam natus maiores. cupiditate dolores pariatur nulla dolorem aperiam. reiciendis voluptatum nobis error sequi? praesentium laudantium porro, laboriosam ea. Corrupti harum hic vel! Temporibus rerum sed ipsam voluptatum sapiente, obcaecati nisi!</p>
				</div>
				<div class="sec-txt">
					<p>Atque maxime porro iste totam facilis deserunt quidem accusantium aut laboriosam. Inventore eum voluptatem animi aliquid id, officia possimus, ex dignissimos omnis atque tenetur, pariatur rem labore soluta, suscipit reiciendis!</p>
					<p>Officia eum doloremque at provident laudantium. Labore velit, consectetur rem eaque perferendis repellendus officiis optio expedita modi necessitatibus qui laboriosam delectus tempora, natus quia eligendi, veniam facilis nam quo impedit?</p>
					<p>Saepe ad maxime officia alias, exercitationem in consequatur facilis beatae consectetur harum, assumenda itaque temporibus similique aut qui inventore, nihil mollitia impedit aliquid. Eius, quasi, placeat! Quidem soluta, aut quas.</p>
					<p>Expedita repellat ratione amet eveniet sunt dolorum in a dolorem, distinctio aliquid eius, cum cumque veritatis? Placeat consectetur vitae minima saepe, commodi rerum reprehenderit qui quam architecto minus animi aspernatur.</p>
					<p>Sunt dolore sed velit necessitatibus, tempore fugiat, magnam illo sint fuga provident labore possimus assumenda dolorem obcaecati error rerum quod voluptatum perspiciatis facilis voluptas esse, cum quasi adipisci debitis. Non.</p>
					<p>Delectus perferendis iste accusantium quas doloremque itaque atque facere eveniet neque at quaerat molestiae, dolor sunt obcaecati adipisci, est, praesentium minima eaque? Nihil deleniti, reiciendis totam quas odio illum voluptate.</p>
					<p>Facilis cumque nulla, fugit vel in beatae unde tempore assumenda accusamus placeat nostrum omnis, natus quas odit. Enim ut doloremque, nam sapiente ad voluptate, ducimus animi iure fugiat praesentium quisquam.</p>
					<p>Beatae, aliquid itaque doloremque laborum laudantium placeat eos sunt deleniti accusantium iure. Nobis repellendus dolor repudiandae cumque fugiat officiis, nam eligendi cum maxime magni at assumenda vitae aliquam corporis sed.</p>
					<p>Quae vel assumenda, dolorem nesciunt perspiciatis in nobis magnam. Vero magnam blanditiis dolor aliquid. Quo exercitationem temporibus optio necessitatibus, voluptatibus aut minima nobis consequuntur illo, soluta beatae. Hic, ea, qui.</p>
					<p>Magnam alias harum voluptates porro facilis ducimus quos totam, provident modi voluptatum nisi architecto ad voluptatibus maxime animi nemo, dolorum obcaecati. Sit placeat quibusdam, dolore hic maxime, natus esse tempora.</p>
					<p>Officiis, expedita! Sunt repellendus, nobis id tempora eveniet laudantium debitis explicabo veniam quasi enim porro possimus distinctio magnam est libero numquam fugit molestiae, quis nesciunt placeat. Molestias consectetur, dolor voluptatibus.</p>
					<p>Animi deleniti, accusamus perspiciatis delectus ab consequatur nihil. Quaerat deserunt, voluptatum eum. Accusamus natus reiciendis ad, blanditiis cum adipisci deserunt similique, fugit veniam qui iusto ex, quidem doloremque laudantium nihil.</p>
					<p>Explicabo tempore cumque magni delectus cupiditate ipsam nemo quam consectetur laudantium repudiandae non, repellendus! Quas sit soluta facere quo assumenda debitis totam sequi voluptatem dolorem impedit placeat, suscipit id explicabo!</p>
					<p>Accusamus aperiam culpa reprehenderit, assumenda iste quaerat, laudantium recusandae unde odit quasi amet repellendus quo asperiores voluptatum magnam vitae, praesentium eius perspiciatis laboriosam. Totam maxime aliquam quam, doloribus deleniti expedita?</p>
				</div>
			</div>
		</div>
	</section>
</main>
:root {
	font-size: 30px;
}
@media only screen and (min-width: 401px) and (max-width: 800px){
	:root {
		font-size: 17px;
	}
}
@media only screen and (max-width: 400px){
	:root {
		font-size: 12px;
	}
}

html,body {
	margin: 0;
	padding: 0;
}
ul,li,p {
	display: block;
	margin: 0;
	padding: 0;
}

.sec {
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
	background-size: cover;
	z-index: 1;
}
.sec .content {
	width: auto;
	height: auto;
	margin: 0 0 0 auto;
	position: relative;
	z-index: 1;
	box-sizing: border-box;
}
.sec .content-inner {
	width: 50%;
  min-width: 300px;
	margin: 0;
	padding: 2rem;
	box-sizing: border-box;
}
.sec-left .content-inner {
  margin-right: auto;
}
.sec-right .content-inner {
  margin-left: auto;
}
.sec .sec-head {
	display: block;
	width: 100%;
	font-family: 'impact';
	font-size: 3rem;
  font-weight: normal;
}
.sec .sec-exp {
	text-align: justify;
	text-justify: distribute;
	margin: 1rem -0px;
	padding: .5rem;
	font-size: 18px;
	line-height: 1.5;
	font-weight: bold;
}
.sec .sec-txt {
	font-size: 18px;
	line-height: 1.5;
	padding: 0 2rem 2rem;
	font-weight: bold;
}

/* BG-BLACK */
.sec-black .content-inner {
	background-color: rgba(0, 0, 0, .3);
}
.sec-black .sec-head {
	color: #fff;
}
.sec-black .sec-exp {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	color: #fff;
}
.sec-black .sec-txt {
	color: #fff;
}

/* BG-WHITE */
.sec-white .content-inner {
	background-color: rgba(255, 255, 255, .3);
}
.sec-white .sec-head {
	color: #000;
}
.sec-white .sec-exp {
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	color: #000;
}
.sec-white .sec-txt {
	color: #000;
}

/* BACKFACE */
.sec01 {
 	background-image: url(//unsplash.it/2000/1500?image=1073);
}
.sec02 {
	background-image: url(//unsplash.it/2000/1500?image=1069);
}
.sec03 {
	background-image: url(//unsplash.it/2000/1500?image=1044);
}
$(function(){
	var $w = $(window),
		parallax = 1.5,
		pageControl = {
		init: function() {
			this.paralaxControl();
		},
		paralaxControl: function() {
			var $sec = $('.sec'),
				old_ww = 0,
				wt, ww, wh;
			$w.on('scroll resize load', function(e){
				// wwが変わらない限り、whを再取得しない
				wt = $w.scrollTop();
				ww = $w.width();
				if(old_ww !== ww){
					wh = $w.height();
				}
				if(wh > ww){
					$sec.css('background-size', "auto " + ( wh * parallax ) + "px" );
				} else {
					$sec.css('background-size', ( ( wh * parallax ) / wh * ww ) + "px auto" );
				}
				$sec.each(function(r){
					var tt = $(this).offset().top,
						th = $(this).height(),
						ct = ( wt - tt ) * ( 1 - ( wh / th * ( parallax - 1 ) ) );
					$(this).css( 'background-position', 'center ' + ct + 'px' );
				});
			});
		}
	};
	pageControl.init();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js