<!DOCTYPE html>
<html>
<head>
<title>Image post transition</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<section class="articles">
<div class="row">
<article data-for="first-article">
<div class="image" style="background-image: url(image-1.jpeg);"></div>
<h3>How Are Mountains Formed?</h3>
<p>The world's tallest mountain ranges form when pieces of Earth's crust—called plates—smash against each other in a process called plate tectonics, and buckle up like the hood of a car in a head-on collision...</p>
</article>
</div>
<div class="row">
<article data-for="second-article">
<div class="image" style="background-image: url(image-2.jpeg);"></div>
<h3>Impact of Mountains on Habitats and Geopolitics</h3>
<p>Mountains often serve as geographic features that define natural borders of countries...</p>
</article>
</div>
</section>
<section id="first-article" class="full-article">
<div class="image" style="background-image: url(image-1.jpeg);">
<div class="title">
<div class="close">
<img src="left-arrow.svg"> <span>get back</span>
</div>
<h3>How Are Mountains Formed?</h3>
</div>
</div>
<div class="text">
<p>The world's tallest mountain ranges form when pieces of Earth's crust—called plates—smash against each other in a process called plate tectonics, and buckle up like the hood of a car in a head-on collision. The Himalaya in Asia formed from one such massive wreck that started about 55 million years ago. Thirty of the world’s highest mountains are in the Himalaya. The summit of Mount Everest, at 29,035 feet (8,850 meters), is the highest point on Earth.</p>
<p>The tallest mountain measured from top to bottom is Mauna Kea, an inactive volcano on the island of Hawaii in the Pacific Ocean. Measured from the base, Mauna Kea stands 33,474 feet (10,203 meters) tall, though it only rises 13,796 feet (4,205 meters) above the sea.</p>
<p>Volcanic mountains form when molten rock from deep inside the Earth erupts through the crust and piles up on itself. The islands of Hawaii were formed by undersea volcanoes, and the islands seen above water today are the remaining volcano tops. Well-known volcanoes on land include Mount St. Helens in Washington State and Mount Fuji in Japan. Sometimes volcanic eruptions break down mountains instead of building them up, like the 1980 eruption that blew the top off Mount St. Helens.</p>
<p>When magma pushes the crust up but hardens before erupting onto the surface, it forms so-called dome mountains. Wind and rain pummel the domes, sculpting peaks and valleys. Examples include the Black Hills of South Dakota and the Adirondack Mountains of New York. Plateau mountains are similar to dome mountains, but form as colliding tectonic plates push up the land without folding or faulting. They are then shaped by weathering and erosion.</p>
<p>Other types of mountains form when stresses within and between the tectonic plates lead to cracking and faulting of the Earth's surface, which forces blocks of rock up and down. Examples of fault-block mountains include the Sierra Nevada in California and Nevada, the Tetons in Wyoming, and the Harz Mountains in Germany.</p>
</div>
</section>
<section id="second-article" class="full-article">
<div class="image" style="background-image: url(image-2.jpeg);">
<div class="title">
<div class="close">
<img src="left-arrow.svg"> <span>get back</span>
</div>
<h3>Impact of Mountains on Habitats and Geopolitics</h3>
</div>
</div>
<div class="text">
<p>Mountains often serve as geographic features that define natural borders of countries. Their height can influence weather patterns, stalling storms that roll off the oceans and squeezing water from the clouds. The other side is often much drier. The rugged landscapes even provide refuge—and protection—for fleeing and invading armies.</p>
</div>
</section>
<script src="js/script.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}
.articles {
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 1000px;
margin: 100px 0;
}
.row {
display: flex;
justify-content: flex-start;
margin-bottom: 5rem;
}
.row:nth-child(2n) {
justify-content: flex-end;
}
article {
width: 60%;
cursor: pointer;
}
article .image {
padding-top: 56%;
background-size: cover;
background-position: center center;
margin-bottom: 2rem;
}
h3 {
color: rgba(0, 0, 0, 0.8);
margin-bottom: 1rem;
}
p {
line-height: 1.8;
color: rgba(0, 0, 0, 0.4);
}
.fake {
position: absolute;
left: 0;
top: 0;
background-size: cover;
background-position: center center;
pointer-events: none;
transition: all 1.3s cubic-bezier(0.63, 0.03, 0.21, 1), opacity 0s;
}
.full-article {
display: none;
opacity: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
background-color: #FFFFFF;
transition: opacity .5s cubic-bezier(0.63, 0.03, 0.21, 1);
}
.full-article .image {
display: flex;
justify-content: center;
align-items: flex-end;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
}
.full-article .image .title {
opacity: 0;
transition: opacity 1.5s cubic-bezier(0.63, 0.03, 0.21, 1);
}
.full-article .image .close {
display: inline-flex;
align-items: center;
margin-bottom: 20px;
padding: 10px 0;
cursor: pointer;
}
.full-article .image .close img {
width: 23px;
}
.full-article .image .close span {
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
color: #FFFFFF;
margin-left: 10px;
}
.full-article .image h3 {
display: block;
width: 1000px;
margin-bottom: 100px;
font-size: 6rem;
color: #FFFFFF;
}
.full-article .text {
width: 1000px;
margin: 100px auto;
}
.full-article .text p {
font-size: 1.15rem;
color: rgba(0, 0, 0, 0.8);
margin-bottom: 2rem;
}
/* Remove scrollbars */
body,
.full-article {
-ms-overflow-style: none;
scrollbar-width: none;
}
body::-webkit-scrollbar,
.full-article::-webkit-scrollbar {
display: none;
}
(function () {
let articles = document.querySelectorAll('article');
let cssStyle = document.styleSheets[0].rules[0].style;
articles.forEach((article) => {
article.addEventListener('click', function()
{
document.body.style.overflow = 'hidden';
let scrollTop = window.pageYOffset || 0;
let image = article.querySelector('.image');
let imageStyle = window.getComputedStyle(image, null);
image = {
self: image,
src: image.style.backgroundImage,
w: image.clientWidth,
h: image.clientHeight,
x: image.offsetLeft,
y: image.offsetTop,
topOffset: parseInt(imageStyle.getPropertyValue('padding-top'))
};
let fakeBlock = document.createElement('div');
fakeBlock.classList.add('fake', 'animateIn');
fakeBlock.style.width = image.w + 'px';
fakeBlock.style.height = image.h + 'px';
fakeBlock.style.left = image.x + 'px';
fakeBlock.style.top = image.y + 'px';
fakeBlock.style.backgroundImage = image.src;
document.body.appendChild(fakeBlock);
setTimeout(() => {
fakeBlock.style.top = scrollTop + 'px';
fakeBlock.style.left = '0';
fakeBlock.style.width = '100%';
fakeBlock.style.height = '100%';
}, 50);
let full = document.getElementById(article.dataset.for);
let fullTitle = full.querySelector('.title');
let close = fullTitle.querySelector('.close');
setTimeout(() => {
fakeBlock.style.opacity = 0;
full.style.opacity = 1;
full.style.display = 'block';
}, 1350);
setTimeout(() => {
fullTitle.style.opacity = 1;
}, 1450);
close.addEventListener('click', () => {
fakeBlock.style.top = scrollTop - full.scrollTop + 'px';
fullTitle.style.opacity = 0;
setTimeout(() => {
fakeBlock.style.opacity = 1;
fakeBlock.style.width = image.w + 'px';
fakeBlock.style.height = image.h + 'px';
fakeBlock.style.left = image.x + 'px';
fakeBlock.style.top = image.y + 'px';
full.style.opacity = '0';
document.body.style.overflow = 'unset';
}, 1500);
setTimeout(() => {
full.scrollTop = 0;
full.style.display = 'none';
fakeBlock.remove();
}, 2800);
});
});
});
})();