In my fiddle at the bottom of the page there will be a footer. If you click on the 'more info' link it hides the div and shows the other.
<div ng-app="myApp">
<div class="footer">
<div ng-if="!visible" class="footer-bar">
more info
</div>
<div ng-if="visible" class="footer-drawer">
hide info
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusamus eos ea impedit perferendis alias sit beatae
nulla, at, vitae debitis nesciunt, obcaecati laudantium iure
quo voluptatem in assumenda ad doloribus.
</p>
</div>
</div>
</div>
angular.module("myApp", [])
.directive("footer", [
function footer() {
return {
restrict: "C",
link: function($scope, element, attrs, ctrl) {
$scope.visible = false;
$scope.toggle = function toggle() {
$scope.visible = !$scope.visible;
}
}
};
}
]);
What I'm trying to get is a slidedown animation if you toggle the extra info. The page must also slide downwards so that the info is directly visible without scrolling down.
You need to use scrollTop() function .scrollTop() and then add watch to your visible value.
There is need to take your content div to your app div to easy access it from jQuery. Refer jsfiddle
angular.module("myApp", [])
.directive("footer", [
function footer() {
return {
restrict: "C",
link: function($scope, element, attrs, ctrl) {
$scope.visible = false;
$scope.$watchCollection('visible', function(newValue) {
if (newValue) {
$(element).parent().parent().scrollTop($(element).parent().parent()[0].scrollHeight);
}
});
$scope.toggle = function toggle() {
$scope.visible = !$scope.visible;
}
}
};
}
]);
Refer this question
This is work solution with animate and scroll.
Live example on jsfiddle.
angular.module("myApp", ['ngAnimate'])
.directive("footer", ["$timeout",
function footer($timeout) {
return {
restrict: "A",
link: function(scope, element, attrs, ctrl) {
scope.visible = false;
scope.toggle = function toggle() {
scope.visible = !scope.visible;
if (scope.visible)
$timeout(function() {
$(document.body).scrollTop($(document.body)[0].scrollHeight)
}, 100);
}
}
};
}
]);
.sample-show-hide {
padding: 10px;
border: 1px solid black;
background: white;
}
.sample-show-hide {
-webkit-transition: all linear 1.5s;
transition: all linear 1.5s;
}
.sample-show-hide.ng-hide {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<body ng-app="myApp">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, enim. Impedit vitae illo laudantium similique inventore cum, consequatur quae sit dignissimos tempora placeat minus sequi dicta unde ad doloribus cupiditate!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam laborum praesentium non. Dignissimos odit illum hic distinctio libero, adipisci? Dolorum necessitatibus, labore natus similique quaerat tenetur odio quisquam voluptatem saepe.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sapiente delectus itaque rerum exercitationem, pariatur deleniti iusto dolores beatae inventore! Officiis quis asperiores magnam impedit atque quae fugit iste blanditiis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, enim. Impedit vitae illo laudantium similique inventore cum, consequatur quae sit dignissimos tempora placeat minus sequi dicta unde ad doloribus cupiditate!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam laborum praesentium non. Dignissimos odit illum hic distinctio libero, adipisci? Dolorum necessitatibus, labore natus similique quaerat tenetur odio quisquam voluptatem saepe.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sapiente delectus itaque rerum exercitationem, pariatur deleniti iusto dolores beatae inventore! Officiis quis asperiores magnam impedit atque quae fugit iste blanditiis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, enim. Impedit vitae illo laudantium similique inventore cum, consequatur quae sit dignissimos tempora placeat minus sequi dicta unde ad doloribus cupiditate!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam laborum praesentium non. Dignissimos odit illum hic distinctio libero, adipisci? Dolorum necessitatibus, labore natus similique quaerat tenetur odio quisquam voluptatem saepe.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sapiente delectus itaque rerum exercitationem, pariatur deleniti iusto dolores beatae inventore! Officiis quis asperiores magnam impedit atque quae fugit iste blanditiis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, enim. Impedit vitae illo laudantium similique inventore cum, consequatur quae sit dignissimos tempora placeat minus sequi dicta unde ad doloribus cupiditate!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam laborum praesentium non. Dignissimos odit illum hic distinctio libero, adipisci? Dolorum necessitatibus, labore natus similique quaerat tenetur odio quisquam voluptatem saepe.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sapiente delectus itaque rerum exercitationem, pariatur deleniti iusto dolores beatae inventore! Officiis quis asperiores magnam impedit atque quae fugit iste blanditiis!</p>
</div>
<div>
<div footer>
<button ng-click="toggle()"><span ng-show="visible">hide info</span><span ng-show="!visible">more info</span></button>
<div ng-show="visible" class="sample-show-hide">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus eos ea impedit perferendis alias sit beatae nulla, at, vitae debitis nesciunt, obcaecati laudantium iure quo voluptatem in assumenda ad doloribus.
</p>
</div>
</div>
</div>
<div ng-init="checked=true">
<label>
<input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;"> Is Visible...
</label>
<div class="sample-show-hide" ng-show="checked" style="clear:both;">
Visible...
</div>
</div>
</body>
Related
Left side there is a menu, right side the content.
A flex box is used. Why menu scroll, if I scroll in right side? Why it is not keep fixed? How can I fix it?
CSS is inline in React.js.
const DashboardLayout = ({ children }: Props) => {
const isDesktop = useMediaQuery('(min-width: 575px)')
return (
<Layout isNavbarTransparent={false}>
<section className={`section-base`}>
<div style={{ display: 'flex' }}>
{isDesktop ? (
<>
<div style={{ flexBasis: '350px' }}>
<DashboardSidebar embeddedIn={'dashboard'} />
</div>
<div>{children}</div>
</>
) : (
<div>{children}</div>
)}
</div>
</section>
</Layout>
)
}
I tried to set this for right content:
overflow: hidden;
height: 100px;
Did not help.
You can use position: sticky; to make it work. Attached a working example (no React but the concept is there). See this for further information.
Note: There may be various solution to this depending what you want to get, this answer was made with the context you provide. Hope it helps!
.top-bar {
width: 100%;
height: 40px;
background-color: black;
}
.dashboard {
display: flex;
width: 100%;
}
.menu {
width: 30%;
margin: 20px;
}
.sticky-container {
position: sticky;
top: 0; /* set top for sticky to work */
padding-top: 10px;
}
.content {
width: 70%;
}
<div>
<div class="top-bar"></div>
<div class="dashboard">
<div class="menu">
<div class="sticky-container">
<li>Options</li>
<li>Options</li>
<li>Options</li>
<li>Options</li>
</div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia laborum ab ducimus, consequatur itaque modi dolores dolorem optio assumenda ad doloribus eveniet voluptas, asperiores maiores deleniti, cupiditate dolor necessitatibus aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad maxime beatae quod ea excepturi libero reprehenderit. Animi, voluptates? Obcaecati illum quis asperiores molestias, autem dolorum. Sapiente quis voluptate voluptatibus ipsa?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia laborum ab ducimus, consequatur itaque modi dolores dolorem optio assumenda ad doloribus eveniet voluptas, asperiores maiores deleniti, cupiditate dolor necessitatibus aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad maxime beatae quod ea excepturi libero reprehenderit. Animi, voluptates? Obcaecati illum quis asperiores molestias, autem dolorum. Sapiente quis voluptate voluptatibus ipsa?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia laborum ab ducimus, consequatur itaque modi dolores dolorem optio assumenda ad doloribus eveniet voluptas, asperiores maiores deleniti, cupiditate dolor necessitatibus aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad maxime beatae quod ea excepturi libero reprehenderit. Animi, voluptates? Obcaecati illum quis asperiores molestias, autem dolorum. Sapiente quis voluptate voluptatibus ipsa?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia laborum ab ducimus, consequatur itaque modi dolores dolorem optio assumenda ad doloribus eveniet voluptas, asperiores maiores deleniti, cupiditate dolor necessitatibus aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad maxime beatae quod ea excepturi libero reprehenderit. Animi, voluptates? Obcaecati illum quis asperiores molestias, autem dolorum. Sapiente quis voluptate voluptatibus ipsa?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia laborum ab ducimus, consequatur itaque modi dolores dolorem optio assumenda ad doloribus eveniet voluptas, asperiores maiores deleniti, cupiditate dolor necessitatibus aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad maxime beatae quod ea excepturi libero reprehenderit. Animi, voluptates? Obcaecati illum quis asperiores molestias, autem dolorum. Sapiente quis voluptate voluptatibus ipsa?</p>
</div>
</div>
</div>
Solution:
overflow: scroll;
height: calc(100vh - 64px);
I have this problem that I am not sure is related to CSS grid. I want a layout with a fixed footer like this.
The problem that I am facing is that when the content on RIGHT or LEFT is bigger than their parents, the parent doesn't increase in height and I end with this. I would like to have both LEFT and RIGHT sections increase in height according to their contents so their respective background-colors are visible.
#app {
height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;
grid-template-areas: 'main' 'footer';
}
#app main {
grid-area: main;
overflow: auto;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 100%;
grid-template-areas: 'left right';
background-color: red;
}
#app main .main-left {
grid-area: left;
background-color: #ff8127;
border-right: 1px solid #e5e5e5;
display: grid;
grid-template-columns: 1fr 70% 1fr;
grid-template-rows: 100%;
}
#app main .main-left .logo {
grid-area: 1 / 1 / 2 / 4;
max-width: 100%;
max-height: 90%;
width: fit-content;
align-self: center;
justify-self: center;
}
#app main .main-left .text-logo {
grid-area: 1 / 2 / 2 / 3;
display: grid;
text-align: center;
font-size: 19px;
font-weight: 600;
color: black;
grid-template-columns: 1fr;
grid-template-rows: 300px;
align-content: center;
align-items: center;
}
#app main .main-left .text-logo .text {
display: grid;
}
#app main .main-left .text-logo p {
margin: 1.5em 0;
}
#app main .main-right {
grid-area: right;
background-color: blue;
border-left: 1px solid #e5e5e5;
}
#app footer {
grid-area: footer;
padding: 13px;
font-size: 13px;
background-color: white;
border-top: 2px solid #e5e5e5;
}
#app footer p {
margin: 0;
padding: 0;
font-weight: 600;
text-align: center;
color: #5a5a5a;
}
<html>
<head>
<meta charset="UTF-8" />
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="app">
<main>
<section class="main-left">
<img class="logo" src="https://w7.pngwing.com/pngs/505/824/png-transparent-logo-drawing-lion-lion-illustration-vertebrate-flower-fictional-character.png" alt="logo" />
<div class="text-logo">
<div class="text">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi doloribus fugit sunt at iste, dignissimos quam voluptas adipisci illo rerum maxime quis incidunt consequatur corporis velit maiores minima laboriosam. Iusto! Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Odit beatae veniam sed eveniet molestiae deleniti modi nostrum, obcaecati perferendis sapiente similique totam voluptatem eos corporis minus libero, et cumque aperiam. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Amet ab enim inventore illum voluptas, quaerat possimus aliquid natus? Corporis cumque quas sit. Ullam distinctio doloribus molestiae nihil reiciendis? Ut, sequi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis maxime
porro, quibusdam iure provident esse nam, eius veritatis autem facilis officia dolorum iusto culpa eveniet corrupti facere deserunt ipsam voluptate. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reiciendis, architecto
aperiam nisi minus necessitatibus doloribus ad aut vitae libero impedit quidem illo mollitia obcaecati repudiandae temporibus voluptate quam! Nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, cupiditate perferendis. Saepe
illo quas ab quo veniam voluptas voluptatem ad architecto quia. Dolore quisquam molestias illo debitis voluptatum nesciunt repellendus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum suscipit animi sunt natus quae hic dolorem
distinctio, laboriosam itaque dolorum vitae nihil cum voluptatem dolores ea, delectus repudiandae ducimus non. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quo iste nulla magni et. Accusantium ex, voluptatibus blanditiis
mollitia architecto accusamus necessitatibus quisquam tempora enim, ea, sint laborum quos adipisci? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi doloribus fugit sunt at iste, dignissimos quam voluptas adipisci illo rerum
maxime quis incidunt consequatur corporis velit maiores minima laboriosam. Iusto! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit beatae veniam sed eveniet molestiae deleniti modi nostrum, obcaecati perferendis sapiente similique
totam voluptatem eos corporis minus libero, et cumque aperiam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet ab enim inventore illum voluptas, quaerat possimus aliquid natus? Corporis cumque quas sit. Ullam distinctio doloribus
molestiae nihil reiciendis? Ut, sequi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis maxime porro, quibusdam iure provident esse nam, eius veritatis autem facilis officia dolorum iusto culpa eveniet corrupti facere deserunt
ipsam voluptate. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reiciendis, architecto aperiam nisi minus necessitatibus doloribus ad aut vitae libero impedit quidem illo mollitia obcaecati repudiandae temporibus voluptate
quam! Nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, cupiditate perferendis. Saepe illo quas ab quo veniam voluptas voluptatem ad architecto quia. Dolore quisquam molestias illo debitis voluptatum nesciunt repellendus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum suscipit animi sunt natus quae hic dolorem distinctio, laboriosam itaque dolorum vitae nihil cum voluptatem dolores ea, delectus repudiandae ducimus non. Lorem ipsum dolor sit
amet consectetur adipisicing elit. Fugiat quo iste nulla magni et. Accusantium ex, voluptatibus blanditiis mollitia architecto accusamus necessitatibus quisquam tempora enim, ea, sint laborum quos adipisci?
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi doloribus fugit sunt at iste, dignissimos quam voluptas adipisci illo rerum maxime quis incidunt consequatur corporis velit maiores minima laboriosam. Iusto! Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Odit beatae veniam sed eveniet molestiae deleniti modi nostrum, obcaecati perferendis sapiente similique totam voluptatem eos corporis minus libero, et cumque aperiam. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Amet ab enim inventore illum voluptas, quaerat possimus aliquid natus? Corporis cumque quas sit. Ullam distinctio doloribus molestiae nihil reiciendis? Ut, sequi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis maxime
porro, quibusdam iure provident esse nam, eius veritatis autem facilis officia dolorum iusto culpa eveniet corrupti facere deserunt ipsam voluptate. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reiciendis, architecto
aperiam nisi minus necessitatibus doloribus ad aut vitae libero impedit quidem illo mollitia obcaecati repudiandae temporibus voluptate quam! Nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, cupiditate perferendis. Saepe
illo quas ab quo veniam voluptas voluptatem ad architecto quia. Dolore quisquam molestias illo debitis voluptatum nesciunt repellendus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum suscipit animi sunt natus quae hic dolorem
distinctio, laboriosam itaque dolorum vitae nihil cum voluptatem dolores ea, delectus repudiandae ducimus non. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quo iste nulla magni et. Accusantium ex, voluptatibus blanditiis
mollitia architecto accusamus necessitatibus quisquam tempora enim, ea, sint laborum quos adipisci? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi doloribus fugit sunt at iste, dignissimos quam voluptas adipisci illo rerum
maxime quis incidunt consequatur corporis velit maiores minima laboriosam. Iusto! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit beatae veniam sed eveniet molestiae deleniti modi nostrum, obcaecati perferendis sapiente similique
totam voluptatem eos corporis minus libero, et cumque aperiam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet ab enim inventore illum voluptas, quaerat possimus aliquid natus? Corporis cumque quas sit. Ullam distinctio doloribus
molestiae nihil reiciendis? Ut, sequi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis maxime porro, quibusdam iure provident esse nam, eius veritatis autem facilis officia dolorum iusto culpa eveniet corrupti facere deserunt
ipsam voluptate. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reiciendis, architecto aperiam nisi minus necessitatibus doloribus ad aut vitae libero impedit quidem illo mollitia obcaecati repudiandae temporibus voluptate
quam! Nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, cupiditate perferendis. Saepe illo quas ab quo veniam voluptas voluptatem ad architecto quia. Dolore quisquam molestias illo debitis voluptatum nesciunt repellendus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum suscipit animi sunt natus quae hic dolorem distinctio, laboriosam itaque dolorum vitae nihil cum voluptatem dolores ea, delectus repudiandae ducimus non. Lorem ipsum dolor sit
amet consectetur adipisicing elit. Fugiat quo iste nulla magni et. Accusantium ex, voluptatibus blanditiis mollitia architecto accusamus necessitatibus quisquam tempora enim, ea, sint laborum quos adipisci?
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi doloribus fugit sunt at iste, dignissimos quam voluptas adipisci illo rerum maxime quis incidunt consequatur corporis velit maiores minima laboriosam. Iusto! Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Odit beatae veniam sed eveniet molestiae deleniti modi nostrum, obcaecati perferendis sapiente similique totam voluptatem eos corporis minus libero, et cumque aperiam. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Amet ab enim inventore illum voluptas, quaerat possimus aliquid natus? Corporis cumque quas sit. Ullam distinctio doloribus molestiae nihil reiciendis? Ut, sequi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis maxime
porro, quibusdam iure provident esse nam, eius veritatis autem facilis officia dolorum iusto culpa eveniet corrupti facere deserunt ipsam voluptate. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reiciendis, architecto
aperiam nisi minus necessitatibus doloribus ad aut vitae libero impedit quidem illo mollitia obcaecati repudiandae temporibus voluptate quam! Nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, cupiditate perferendis. Saepe
illo quas ab quo veniam voluptas voluptatem ad architecto quia. Dolore quisquam molestias illo debitis voluptatum nesciunt repellendus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum suscipit animi sunt natus quae hic dolorem
distinctio, laboriosam itaque dolorum vitae nihil cum voluptatem dolores ea, delectus repudiandae ducimus non. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quo iste nulla magni et. Accusantium ex, voluptatibus blanditiis
mollitia architecto accusamus necessitatibus quisquam tempora enim, ea, sint laborum quos adipisci? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi doloribus fugit sunt at iste, dignissimos quam voluptas adipisci illo rerum
maxime quis incidunt consequatur corporis velit maiores minima laboriosam. Iusto! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit beatae veniam sed eveniet molestiae deleniti modi nostrum, obcaecati perferendis sapiente similique
totam voluptatem eos corporis minus libero, et cumque aperiam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet ab enim inventore illum voluptas, quaerat possimus aliquid natus? Corporis cumque quas sit. Ullam distinctio doloribus
molestiae nihil reiciendis? Ut, sequi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis maxime porro, quibusdam iure provident esse nam, eius veritatis autem facilis officia dolorum iusto culpa eveniet corrupti facere deserunt
ipsam voluptate. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reiciendis, architecto aperiam nisi minus necessitatibus doloribus ad aut vitae libero impedit quidem illo mollitia obcaecati repudiandae temporibus voluptate
quam! Nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, cupiditate perferendis. Saepe illo quas ab quo veniam voluptas voluptatem ad architecto quia. Dolore quisquam molestias illo debitis voluptatum nesciunt repellendus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum suscipit animi sunt natus quae hic dolorem distinctio, laboriosam itaque dolorum vitae nihil cum voluptatem dolores ea, delectus repudiandae ducimus non. Lorem ipsum dolor sit
amet consectetur adipisicing elit. Fugiat quo iste nulla magni et. Accusantium ex, voluptatibus blanditiis mollitia architecto accusamus necessitatibus quisquam tempora enim, ea, sint laborum quos adipisci?
</p>
</div>
</div>
</section>
<section class="main-right">RIGHT</section>
</main>
<footer>
<p>© 2022 Company</p>
</footer>
</div>
</body>
</html>
I was able to debug your code, it seems that the grid-template-rows are affecting the content of your website.
Remove grid-template-rows on:
#app main
#app main .main-left .text-logo
because if you fix or specify some size in the row, your content will try to fit to that size, I don't use it when it comes to content creation sections.
It seems simple enough to centre a message vertically and horizontally using css flexbox but im struggling to use it to create a full page overlay. The flexbox always pushes other content. Maybe flex isn't the thing to use and i should stick to older css?
The overlay needs to be display: none; or hidden so that it can be shown at the appropriate time using javascript.
<div id="overlay"><span id="overlay-message">No Internet Connection</span></div>
Im prepending this html to the body when its needed. I suppose this could be removed instead of hidden and then prepended again when needed.
body {
overflow:hidden;
padding:0;
margin:0;
}
#overlay {
background:magenta;
height:100vh;
width:100vw;
display:flex;
justify-content:center;
align-items:center;
}
#overlay-message {
color:#fff;
font-family:sans-serif;
font-size:40px;
}
<div id="overlay"><span id="overlay-message">No Internet Connection</span></div>
Is that what you want?
or
body {
padding:0;
margin:0;
font-family:monospace;
font-size:24px;
}
p {
text-indent:40px;
}
#overlay {
background:magenta;
height:30vh;
width:30vw;
display:flex;
align-items:center;
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
#overlay-message {
color:#fff;
font-family:sans-serif;
font-size:16px;
text-align:center;
width:100%;
}
<div id="overlay"><span id="overlay-message">No Internet Connection</span></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
I suppose that's what you want.
body {
padding:0;
margin:0;
font-family:monospace;
font-size:24px;
}
p {
text-indent:40px;
}
#overlay {
background:magenta;
height:30vh;
width:30vw;
display:flex;
align-items:center;
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
#overlay::before {
content:'';
position:fixed;
background:transparent;
height:100vh;
width:100vw;
left:-35vw;
}
#overlay-message {
color:#fff;
font-family:sans-serif;
font-size:16px;
text-align:center;
width:100%;
}
<div id="overlay"><span id="overlay-message">No Internet Connection</span></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
With a little javascript, it disappears when you click on it.
function hide () {
document.getElementById("overlay").style.display = "none";
}
document.getElementById("overlay").onclick = function() {hide()};
I have a div which is position absolute causing the proceeding content to sit over it which is understandable, I was wondering how I can have the div remain as position: absolute but have the content continuing as if the div was still in the document flow? Would this call for a padding bottom trick on the absolute content?
HTML
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet provident aperiam consequuntur veniam repellendus eaque repudiandae, modi architecto aut fugit esse nostrum quidem quo molestiae quasi! Sed facilis, molestias perspiciatis.</p>
<div class="absolute">
<h2>Position absolute content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem distinctio hic quidem vero tenetur ad mollitia voluptas libero, voluptates dolore quasi doloremque id cum! Facilis qui similique facere commodi quisquam.</p>
</div>
<div>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium voluptas non dolor facilis natus nam. Voluptas commodi illum aut quasi voluptatibus cupiditate doloribus at officia voluptates. Reiciendis placeat delectus repellendus.</p>
</div>
</div>
CSS
.absolute {
position: absolute;
}
JsFiddle: https://jsfiddle.net/mz41jzqd/
function updateTopMargin(){
var abs = $('.absolute').eq(0);
abs.next().css({'margin-top':abs.outerHeight()+'px'});
}
$(window).on('load resize', updateTopMargin);
$('.absolute').on('resize', updateTopMargin);
.absolute {
position: absolute;
}
.absolute + * {
padding-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet provident aperiam consequuntur veniam repellendus eaque repudiandae, modi architecto aut fugit esse nostrum quidem quo molestiae quasi! Sed facilis, molestias perspiciatis.</p>
<div class="absolute">
<h2>Position absolute content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem distinctio hic quidem vero tenetur ad mollitia voluptas libero, voluptates dolore quasi doloremque id cum! Facilis qui similique facere commodi quisquam.</p>
</div>
<div>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium voluptas non dolor facilis natus nam. Voluptas commodi illum aut quasi voluptatibus cupiditate doloribus at officia voluptates. Reiciendis placeat delectus repellendus.</p>
</div>
</div>
I am trying to implement parallax scrolling with only CSS3. I am following this guide. But it is not working.
Doing this kind of perspective projection without Javascript should lead to a much smoother and more efficient effect.
This is the code that I have written.
Below are my CSS and HTML.
.page {
height: 100vh;
width: 100%;
background-color: #aaa;
perspective: 1px;
overflow-x: hidden;
overflow-y: auto;
text-align: center;
}
.parallax {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.page h1 {
color: #fff;
transform: translateZ(0px);
}
.page p {
color: #fff;
transform: translateZ(-1px);
}
<section class="page">
<h1 class="parallax">Katalyst</h1>
<p class="parallax">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quos laborum voluptates ab, temporibus accusantium nobis odio eos. Porro sed officiis aut enim placeat inventore vitae, veniam dignissimos ut minus. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore
nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod
laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur,
ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum
totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique
laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quos laborum voluptates ab, temporibus accusantium nobis odio eos. Porro sed officiis aut enim placeat inventore vitae, veniam dignissimos ut minus. Lorem ipsum
dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore
nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod
laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur,
ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum
totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quos laborum voluptates ab, temporibus accusantium nobis odio eos. Porro sed officiis aut enim placeat inventore vitae, veniam dignissimos
ut minus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor
sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt
neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam
quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque
recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quos laborum voluptates ab, temporibus accusantium nobis odio eos. Porro sed officiis aut enim placeat inventore
vitae, veniam dignissimos ut minus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore
vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit
amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt
neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero!
</p>
</section>
<section class="page">
<h1 class="parallax">Katalyst</h1>
<p class="parallax">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quos laborum voluptates ab, temporibus accusantium nobis odio eos. Porro sed officiis aut enim placeat inventore vitae, veniam dignissimos ut minus. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore
nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod
laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur,
ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum
totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique
laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quos laborum voluptates ab, temporibus accusantium nobis odio eos. Porro sed officiis aut enim placeat inventore vitae, veniam dignissimos ut minus. Lorem ipsum
dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore
nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod
laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur,
ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum
totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quos laborum voluptates ab, temporibus accusantium nobis odio eos. Porro sed officiis aut enim placeat inventore vitae, veniam dignissimos
ut minus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor
sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt
neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam
quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque
recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quos laborum voluptates ab, temporibus accusantium nobis odio eos. Porro sed officiis aut enim placeat inventore
vitae, veniam dignissimos ut minus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore
vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit
amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt
neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero!
</p>
</section>
Interestingly, I find when I follow the example from the guide, it works without problem. Followup is below the code. Here is my code:
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer--base {
transform: translateZ(0);
padding-left: 15px;
width: 400px;
}
.parallax__layer--back {
transform: translateZ(-2px) scale(3);
}
.parallax__layer--base p {
color: white;
font-family: "Arial", Helvetica, sans-serif;
}
.parallax__layer--base h1 {
color: white;
font-family: "Arial", Helvetica, sans-serif;
}
.parallax__layer--base h2 {
color: white;
font-family: "Arial", Helvetica, sans-serif;
}
<div class="parallax">
<div class="parallax__layer parallax__layer--back">
<img
style="height: 1500px"
src="https://upload.wikimedia.org/wikipedia/commons/7/73/Pale_Blue_Dot.png" />
</div>
<div class="parallax__layer parallax__layer--base">
<h1>Pale Blue Dot (exerpt)</h1>
<h2>by Carl Sagan</h2>
<p>Look again at that dot.</p>
<p>That's here.</p>
<p>That's home.</p>
<p>That's us.</p>
<p>
On it everyone you love, everyone you know, everyone you ever heard of, every human being who ever was, lived out their lives.
</p>
<p>
The aggregate of our joy and suffering, thousands of confident religions, ideologies, and economic doctrines, every hunter and forager, every hero and coward, every creator and destroyer of civilization, every king and peasant, every young couple
in love, every mother and father, hopeful child, inventor and explorer, every teacher of morals, every corrupt politician, every "superstar," every "supreme leader," every saint and sinner in the history of our species lived there-on a mote of dust
suspended in a sunbeam.
</p>
<p>
The Earth is a very small stage in a vast cosmic arena.
</p>
<p>
Think of the endless cruelties visited by the inhabitants of one corner of this pixel on the scarcely distinguishable inhabitants of some other corner, how frequent their misunderstandings, how eager they are to kill one another, how fervent their hatreds.
</p>
<p>
Think of the rivers of blood spilled by all those generals and emperors so that, in glory and triumph, they could become the momentary masters of a fraction of a dot.
</p>
<p>
Our posturings, our imagined self-importance, the delusion that we have some privileged position in the Universe, are challenged by this point of pale light.
</p>
<p>
Our planet is a lonely speck in the great enveloping cosmic dark.
</p>
<p>
In our obscurity, in all this vastness, there is no hint that help will come from elsewhere to save us from ourselves.
</p>
<p>
The Earth is the only world known so far to harbor life.
</p>
<p>
There is nowhere else, at least in the near future, to which our species could migrate.
</p>
<p>
Visit, yes.
</p>
<p>
Settle, not yet.
</p>
<p>
Like it or not, for the moment the Earth is where we make our stand.
</p>
<p>
It has been said that astronomy is a humbling and character-building experience.
</p>
<p>
There is perhaps no better demonstration of the folly of human conceits than this distant image of our tiny world.
</p>
<p>
To me, it underscores our responsibility to deal more kindly with one another, and to preserve and cherish the pale blue dot, the only home we've ever known.
</p>
</div>
</div>
The reason yours does not work is that you basically aren't following the layout he gives at all. Here is the layout you need:
<div class="parallax">
<div class="parallax__layer parallax__layer--back">
...
</div>
<div class="parallax__layer parallax__layer--base">
...
</div>
</div>
Note that there are two ... areas. The first is the stuff you want to be in the background. The second is the stuff you want to be in the foreground.
Simply use his CSS, and keep this structure for your html, and it will work.