Responsive alignment of two divs with pure text for parallax - javascript

I am building a parallax site and have problems making two divs in a section become absolutely perfectly aligned while still maintaining its responsive nature.
Unfortunately when the window size is changed the two elements do not behave as intended. I have included a image illustrating what i am trying to achieve. The yellow lines indicate the control i am looking for. The text THIS IS should be perfectly inline with the orange text on the horizontal axis, while edge of SO AWESOME should be vertically aligned with the orange text.
How do i achieve this?
Fiddle: https://jsfiddle.net/76z982zn/2/
CSS
body,
html {
height: 100%;
background-color: black;
}
section {
height: 100%;
position: relative;
}
section > div {
position: absolute;
}
* {
padding: 0;
margin: 0;
}
.header_container__1 {
font-size: 2vw;
line-height: 2vw;
color: orange;
top: 42vh;
left: 35vw;
}
.header_container__2 {
text-align: right;
font-size: 10vw;
line-height: 10vw;
color: red;
top: 50vh;
right: 0;
transform: translate(0%, -50%);
}
HTML
<section>
<div class="header_container__1">
<p>This is some text i want perfectly </p>
<p>This is some text i want perfectly </p>
<p>This is some text i want perfectly </p>
<p>This is some text i want perfectly </p>
</div>
<div class="header_container__2">
<p>THIS IS</p>
<p>SO AWESOME</p>
</div>
</section>

Not much to say, just a combination of several css alignment attributes:
body {
width:100%;
height: 100vh;
margin: 0px;
background: black;
}
#supercontainer {
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#container {
display: inline-block;
position: relative;
}
#a1 {
display: inline-block;
font-size: 0;
color: tomato;
margin-right: 0px;
margin-left: auto;
position: relative;
text-align: right;
margin: 0px;
font-size: 4em !important;
vertical-align: top;
line-height: 0.8em;
}
#a1::first-line {
line-height:1em;
}
#a2 {
position: absolute;
top: 0;
left: 0;
font-size: 0.7em;
line-height: 2px;
font-weight: bold;
color: gold;
vertical-align: baseline;
}
#a2::first-line {
line-height: 0px;
}
<div id=supercontainer>
<div id=container>
<div id=a1>THIS IS<br>SO AWESOME</div>
<div id=a2>
<p>This is some text i want perfectly </p>
<p>This is some text i want perfectly </p>
<p>This is some text i want perfectly </p>
<p>This is some text i want perfectly </p>
</div>
</div>
</div>

As a quick fix, remove the transform from header_container__2 and set the two containers' top attributes to be equal. Fiddle
Edit - Aligned at 50%
body,
html {
height: 100%;
background-color: black;
}
section {
height: 100%;
position: relative;
}
section > div {
position: absolute;
}
* {
padding: 0;
margin: 0;
}
.header_container__1 {
display: inline-block;
float: left;
font-size: 2vw;
line-height: 2vw;
color: orange;
}
.header_container__2 {
text-align: right;
font-size: 10vw;
line-height: 10vw;
color: red;
top: 50vh;
right: 0;
transform: translate(0%, -50%);
}
<section>
<div class="header_container__2">
<div class="header_container__1">
<p>This is some text i want perfectly</p>
<p>This is some text i want perfectly</p>
<p>This is some text i want perfectly</p>
<p>This is some text i want perfectly</p>
</div>
THIS IS
<p>SO AWESOME</p>
</div>
</section>

Related

How to turn an overlay into a giant button

I was wondering how would I turn an overlay into a button? What I don't want is a button that one manually presses to reveal an overlay. What I'd like is automatically when one enters the browser, an overlay is there, and in order to remove it they can click anywhere on the screen and it disappears, letting them interact with the page itself.
Below is the code of the overlay itself, but what would I need to incorporate into it to make it an accessible imaginary button?
...
<style>
body {
margin: 0;
padding: 0;
}
section {
width: 100%;
height: 650px;
background: url("https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png?w=590&h=800&756A88D1-C0EA-4C21-92BE0BB43C14B265");
background-size: cover;
position: relative;
overflow: hidden;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(105, 105, 105, .9);
}
#Title {
padding-top: 60px;
font-size: 30px;
color: red;
font-family: 'Rock Salt', cursive;
-webkit-text-stroke: 1px black;
}
#sub-text {
font-family: 'Covered By Your Grace', cursive;
color: red;
font-size: 25px;
-webkit-text-stroke: .5px black;
}
</style>
</head>
<body>
<section>
<div class = "overlay">
<div id = "Title">
<h1 align = "center"> Title </h1>
</div>
<div id = "sub-text">
<h2 align = "center">Subtext</h2>
</div>
</div>
</section>
</body>
</html>
...
You don't necessarily need JS :)
#overlay {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
bottom: 0;
right: 0;
transition: 2s;
background: gold;
display: flex;
align-items: center;
justify-content: center;
visibility: visible;
}
#overlay-handler:checked ~ #overlay {
visibility: hidden;
opacity: 0;
}
<input id="overlay-handler" type="radio" hidden>
<label for="overlay-handler" id="overlay">
<h2>WELCOME.<br>Click anywhere to continue</h2>
</label>
<h1>Hi there...</h1>
If you set the overlay to have position: fixed and proper z-index it would cover the page by default.
Then declare a click listener on it to either set its display to none or remove it from the DOM.
Just don't use it as a container for the real content
document.addEventListener('DOMContentLoaded', e => {
document.querySelector('#overlay').addEventListener('click', clickEvent => {
clickEvent.target.classList.add('invisible');
});
});
#overlay {
position: fixed;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 10000;
background-color: rgba(100, 100, 100, 0.5);
padding: 4em 10%;
text-align: center;
font-weight: bold;
}
#overlay.invisible {
display: none;
}
<div id="overlay">
Click me to interact
</div>
<div>
This is the real content But you can't click me without closing the overlay
</div>
You can make the overlay disappear when the body of the HTML is clicked.
<body onclick="document.getElementsByClassName('overlay')[0].style.display = 'none'">
...
</body>

Change a div's appearance on hover of another div with absolute positioning (not-repeat)

I have several divs with absolute position on top of primary div which has relative position (duh). I am trying to make one div change its background-color etc when hovering another div within same parent div.
Now, I'm aware of adjacent-div classes but they don't seem to work (maybe because of absolute positioning).
Below is an example of my code (actual is a lot bigger). What would be best way to change for e.g. m2wrap-back width & color when hovering on m2wrap-hover (which overlays 100% on other divs)?
P.S. If CSS alone ain't an option, a jQuery solution can also work.
<div class="m2wrap">
<div class="m2wrap-back">
<h3 class="m2wrap-back-title">Title</h3>
</div>
<h3 class="xhfb-text"> Some text here.. </h3>
<div class="m2wrap-bz1"></div>
<div class="m2wrap-bz2"></div>
<div class="m2wrap-hover"></div>
</div>
<style>
.m2wrap {
position: relative
}
.m2wrap-back {
position: absolute;
top: 15px;
left: 0;
width: 110px;
height: 0;
text-align: center;
vertical-align: middle;
}
.m2wrap-hover {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
border-radius: 4px;
opacity: 0.6;
cursor: pointer;
}
div.m2wrap-hover:hover {
background-color: #bf0000;
}
</style>
You can not do it with pure css and your current html structure, need javascipt or jquery to do this.
Example:
$('.m2wrap-hover').hover(function() {
$(this).closest('.m2wrap').find('.m2wrap-back').addClass('hover');
}, function() {
$(this).closest('.m2wrap').find('.m2wrap-back').removeClass('hover');
})
.m2wrap {
position: relative
}
.m2wrap-back {
position: absolute;
top: 15px;
left: 0;
width: 110px;
height: 0;
text-align: center;
vertical-align: middle;
}
.m2wrap-hover {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
border-radius: 4px;
opacity: 0.6;
cursor: pointer;
}
div.m2wrap-hover:hover {
background-color: #bf0000;
}
.m2wrap-back.hover {
width: 120px;
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="m2wrap">
<div class="m2wrap-back">
<h3 class="m2wrap-back-title">Title</h3>
</div>
<h3 class="xhfb-text"> Some text here.. </h3>
<div class="m2wrap-bz1"></div>
<div class="m2wrap-bz2"></div>
<div class="m2wrap-hover">hover here</div>
</div>
Or if you want to use just css, you need to change the order of your elements (because it has position: absolute so the order doesn't matter):
.m2wrap {
position: relative
}
.m2wrap-back {
position: absolute;
top: 15px;
left: 0;
width: 110px;
height: 0;
text-align: center;
vertical-align: middle;
}
.m2wrap-hover {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
border-radius: 4px;
opacity: 0.6;
cursor: pointer;
}
div.m2wrap-hover:hover {
background-color: #bf0000;
}
.m2wrap-hover:hover + .m2wrap-back {
width: 120px;
color: red;
}
<div class="m2wrap">
<h3 class="xhfb-text"> Some text here.. </h3>
<div class="m2wrap-bz1"></div>
<div class="m2wrap-bz2"></div>
<div class="m2wrap-hover">hover here</div>
<div class="m2wrap-back">
<h3 class="m2wrap-back-title">Title</h3>
</div>
</div>

Change text in fixed div as you scroll through website

I'm trying to get the text in the fixed div to change as you scroll past the main divs that contain the images. I tried following the solution in Changing div content based on scroll position but it won't work. Here is my attempt using that method: http://jsfiddle.net/st6q1Lmo/5/.
I'm a beginner so it's hard for me to write code from scratch. I must be doing something wrong... I would appreciate any help. Thank you!
This is my HTML and CSS without any JS (http://jsfiddle.net/7tdnw1eb/6/):
UPDATE: Thanks to the lead #tera_789 gave me, I've almost got it to work. For the first and third div it works, but for the second the content won't update in the fixed div. I know it could be because the video is only 90vh and the video itself won't scroll in the container... However I need it to be 90vh. How can I get around this? jsfiddle.net/7tdnw1eb/12
body {
background-color: #797979;
color: black;
font-family: serif;
font-size: 2vw;
line-height: 1.1em;
}
#about {
padding-bottom: 1em;
}
#wrapper {
max-width: 100vw;
max-height: 100vh;
overflow: scroll;
padding-top: 1em;
padding-bottom: 1em;
}
.project {
background-color: transparent;
width: 100vw;
height: 100vh;
position: sticky;
top: 0;
padding: 0 2em;
overflow: scroll;
}
.content__container {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#count {
color: black;
width: 20%;
display: block;
position: fixed;
top: 0;
right: 0;
padding: 1em 2em 2em 0;
z-index: 99999999999;
}
img {
max-width: 100%;
}
<div id="wrapper">
<div id="count">
<p>1/3</p>
</div>
<div id="about">
Wassup everyone
</div>
<div class="project">
<div class="content__container">
<img src="https://www.what-dog.net/Images/faces2/scroll001.jpg">
</div>
</div>
<div class="project">
<div class="content__container">
<img src="https://static.boredpanda.com/blog/wp-content/uploads/2017/09/funny-dog-thoughts-tweets-1.jpg">
</div>
</div>
<div class="project">
<div class="content__container">
<img src="https://ksrpetcare.com/wp-content/uploads/2017/04/41059-Cute-Yellow-Labrador-puppy-in-play-bow-white-background.jpg">
</div>
</div>
</div>
Take a look at this: onscroll event

How to fix an element to the right of div?

I have a button which i want to fix it's position to the right of a div, the button is toggling the visibility of it's left div, problem is the button loses it's position once the resolution is changing...
Here is an Example
And here is what I've done so far:
$('.results_toggle').on('click', function() {
$(this).toggleClass('left_hide');
$('.left').toggle();
});
.cont {
width: 100vw;
}
.left {
position: relative;
width: 50vw;
height: 100vh;
background-color: grey;
float: left;
border-left: 2px solid white;
}
.right {
height: 100vh;
width: 50vw;
float: left;
}
.results_toggle:before {
content: "\f054";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: black;
font-size: 24px;
padding-right: 0.5em;
position: absolute;
top: 14px;
left: 5px;
}
.results_toggle {
background-color: grey;
height: 60px;
width: 30px;
position: absolute;
z-index: 106;
top: 45vh;
right: 223px;
border-bottom-right-radius: 110px;
border-top-right-radius: 110px;
border-bottom: 0;
}
.left_hide {
left: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<div class="left">
</div>
<div class="results_toggle">
<!-- the button -->
</div>
<div class="right">
</div>
</div>
The simplest solution to this would be to put the toggle within the .right div, and position it at left: 0 so that it is always adjacent to the .left div, something like this:
<div class="cont">
<div class="left"></div>
<div class="right">
<div class="results_toggle"></div>
</div>
</div>
.right {
position: relative; /* add this */
}
.results_toggle {
/* remove 'right' */
left: 0; /* add this */
}
Working example
The advantage of this method is that it will be completely unaffected by any change in screen resolution.
You use viewport units , so the values of them will change when changing the viewport size ( resolution ) .
If you want the arrow to stay in the middle ( and so, on the right side of the grey div ) , you should center it this way
See snippet below
$('.results_toggle').on('click', function() {
$(this).toggleClass('left_hide');
$('.left').toggle();
});
.cont {
width: 100vw;
}
.left {
position: relative;
width: 50vw;
height: 100vh;
background-color: grey;
float: left;
border-left:2px solid white;
}
.right {
height: 100vh;
width: 50vw;
float: left;
}
.results_toggle:before {
content: "\f054";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: black;
font-size: 24px;
padding-right: 0.5em;
position: absolute;
top: 14px;
left: 5px;
}
.results_toggle {
background-color: grey;
height: 60px;
width: 30px;
position: absolute;
z-index: 106;
top: 50%;
right:50%;
transform:translate(100%,-50%);
border-bottom-right-radius: 110px;
border-top-right-radius: 110px;
border-bottom: 0;
}
.left_hide{
left:0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<div class="left">
</div>
<div class="results_toggle">
</div>
<div class="right">
</div>
</div>
For me the best approach to align elements is to use Flexbox attributes. With those attributes, you can place element as boxes in a row, column...In your case you have a main box .cont with a left side and a right side. This is the result with a Flexbox placement :
The main div is represented by the red background. Inside you have your left div and aligned with your right button.
Here is the code to make this :
<html>
<head>
<meta charset='utf-8' />
<style type="text/css">
.cont
{
display: flex;
align-items: center;
background-color: red;
color: white;
}
.left
{
background-color: blue;
margin: 5px;
}
button
{
background-color: green;
}
</style>
</head>
<body>
<div class="cont">
<div class="left">
<p>Left div</p>
</div>
<div class="results_toggle">
<button>Right button</button>
</div>
<div class="right"></div>
</div>
</body>
</html>
not sure if that's what you meant, but i simply changed the leftattribute of the button to 50vw, the same as your grey box.
Here's a fiddle
edit:
another option: position: relative and float: left without left or right property
updated fiddle
It's because you've fixed each property.
You can fix an element at the right of his parent using absolute and relative position. And add the width of you child.
Example
.parent{
width:200px;
height:200px;
background-color:#ccc;
position:relative;
}
.child{
position:absolute;
right:0;
top:100px;
transform:translateX(100%) translateY(-50%);
}
<div class="parent">
<button class="child">btn</button>
</div>

How to center elements together <div> and <h1>, top to bottom?

I'm trying to mimic the following site: http://weareundefined.be/ and once you get passed the first page by clicking it on it, there is a computer and a short paragraph below it.
After analyzing the site using dev webtool, I still am not able to center the elements properly. I attempted the top: 50% with position: relative, yet it is not centered correctly.
I tried to break down to the necessary CSS, but still not able to recreate it.
Code:
<div style={{height: '100%’}}>
<div className="container">
<div id="rotate-container">
<div>
Center Me
</div>
</div>
<h1> We are undefined</h1>
<p>We're a creative agency with a focus on digital.</p>
</div>
</div>
CSS (SCSS):
.container {
height: 100%;
position: relative;
padding: .5em;
margin: 0 auto;
max-width: 400px;
text-align: center;
top: 50%;
}
#rotate-container {
div {
color: #fb3131;
font-size: 40px;
font-weight: bold;
display: block;
}
}
What could I be missing or doing incorrectly? And how are they handling the resizing of elements? Any suggestions or guidance would be greatly appreciated it.
Thank you in advance and will be sure to accept and upvote answer.
You're close. both html and body need to be height: 100%;, too, otherwise it's children won't be 100% of the viewport.
.container doesn't need height: 100%;. Since you already have .container at top: 50%;, just use transform: translateY(-50%); to shift it back up 50% of it's own width so the center of it is in the center of the browser.
body, html {
height: 100%;
}
.container {
position: relative;
padding: .5em;
margin: 0 auto;
max-width: 400px;
text-align: center;
top: 50%;
transform: translateY(-50%);
}
#rotate-container div {
color: #fb3131;
font-size: 40px;
font-weight: bold;
display: block;
}
<div style="height:100%;">
<div class="container">
<div id="rotate-container">
<div>
Center Me
</div>
</div>
<h1> We are undefined</h1>
<p>We're a creative agency with a focus on digital.</p>
</div>
</div>
You can also use flexbox with align-items: center;
body,
html {
height: 100%;
}
.container {
position: relative;
padding: .5em;
margin: 0 auto;
max-width: 400px;
text-align: center;
}
#rotate-container div {
color: #fb3131;
font-size: 40px;
font-weight: bold;
display: block;
}
<div style="height:100%; display: flex; align-items: center;">
<div class="container">
<div id="rotate-container">
<div>
Center Me
</div>
</div>
<h1> We are undefined</h1>
<p>We're a creative agency with a focus on digital.</p>
</div>
</div>
Try:
body {
min-width: 970px;
padding-top: 70px;
padding-bottom: 30px;
}
.container {
width: 970px;
max-width: none !important;
padding-right: 10px;
padding-left: 10px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
And adjust accordingly

Categories