I am a beginner and I am trying to make a sticky section change colour similar to this website (https://hydracup.com), where when you scroll it changes colour to the different products that it offers.
So far I have made the sections sticky, however I have no clue on how to make the colour change sections. Any help appreciated thanks.
<header>header</header>
<main>
<div class="sticky">STICKY</div>
</main>
<footer>footer</footer>
header {
height: 100vh;
background-color: blue;
background-size: cover;
}
main {
position: relative;
width: 100%;
position: sticky;
top: 0;
width: 100%;
height: 200vh;
background-color: red;
}
footer {
height: 100vh;
background-color: blue;
background-size: cover;
position: sticky;
top: 50%;
}
Related
About Us and Contact Us are my two sections. The contact us section's background property is working well. However, I now want to add a background picture to both divs' parent wrappers. Therefore, the background image may be seen above both divs. I am unable to identify the issue that is preventing me from displaying the background image.
index.html:
<div class="aboutus-contact-us-wrapper" >
<div class="about-us-section">
// content here
</div>
<div class="contact-us">
// content here
</div>
</div>
style.css:
.aboutus-contact-us-wrapper {
width: 100%;
position: relative;
background-image: url('./images/ourboardvector.png');
background-size: 100%;
background-position: right;
background-size: contain;
}
.contact-us {
width: 100%;
height: 100vh;
background-color: #181f2b;
position: relative;
border-bottom: 20px;
color: #ffffff;
position: relative;
}
.about-us-section {
position: relative;
width: 100%;
height: 100vh;
background-color: #F1F1F1;
font-family: 'Lato' !important;
}
Set z-index of both child divs to -1.
Z Index ( z-index ) is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index. Note: Z index only works on positioned elements ( position:absolute , position:relative , or position:fixed )
.aboutus-contact-us-wrapper {
width: 100%;
position: relative;
background-image: url('./images/ourboardvector.png');
background-size: 100%;
background-position: right;
background-size: contain;
}
.contact-us {
width: 100%;
height: 100vh;
background-color: #181f2b;
position: relative;
border-bottom: 20px;
color: #ffffff;
position: relative;
z-index: -1;
}
.about-us-section {
position: relative;
width: 100%;
height: 100vh;
background-color: #F1F1F1;
font-family: 'Lato' !important;
z-index: -1;
}
<div class="aboutus-contact-us-wrapper">
<div class="about-us-section">
// content here
</div>
<div class="contact-us">
// content here
</div>
</div>
So what I currently have is a parallax effect that works fine, but I can't figure out how to make one section "slide up" and reveal the next section, making it look like a smooth section transition. Currently my content on the second section just keeps scrolling down until it's in its place, and I can't seem to make it appear behind the first section. I currently have this: https://jsfiddle.net/165pw4ks/3/.
index.html:
<div class="parallax-wrapper">
<div class="frame-top"></div>
<section class="parallax-section part1">
<div class="frame-bottom"></div>
<div class="part1-sticky-container">
<div class="part1-sticky">
</div>
</div>
</section>
<section class="parallax-section part2">
<div class="part2-content">
<h1 class="part2-text">
Some text here
</h1>
</div>
</section>
</div>
style.css:
body {
margin: 0;
}
.parallax-wrapper {
top: 100vh;
}
.parallax-section {
position: relative;
}
.part1 {
background: url("https://place-hold.it/1920x1080") no-repeat;
width: 100vw;
height: 100vh;
background-size: cover;
z-index: 4;
}
.frame-bottom {
position: sticky;
z-index: 100;
top: calc(100vh - 40px);
height: 40px;
width: 100%;
background-color: #111;
}
.part2 {
margin: 0;
background: url("https://place-hold.it/1920x1080") no-repeat;
background-size: 100vw;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
}
.part2-content {
position: sticky;
width: 30rem;
height: 5rem;
z-index: 1;
background-attachment: scroll;
background-color: transparent;
margin-left: calc(50% - 15rem);
top: calc(50% - 2.5rem);
}
.part2-text {
margin: 0;
color: white;
font-size: 32px;
text-align: center;
}
What I am attempting to make is something like on this picture:
Any help would be appreciated.
I want to make a website where when it loads, there is a full screen image, and when you scroll down it has a white background which includes all of my about and contact information. How can I do it? I made a div called "top-background" which includes the source to the image, and in the css i used
z-index: -100;
height: 30%;
width: 100%;
top: 0%;
But it doesn't fullscreen or do what i want it to do.
You can do it like below
body {
margin: 0;
}
.bgone {
position:absolute;
width: 100%;
height: 100%;
background: blue;
background-image: url('yourimagehere.png');
background-size: cover;
color: white;
}
.bgtwo {
position: absolute;
width: 100%;
top: 100%;
height: 100px;
}
<div class='bgone'>On page load content</div>
<div class='bgtwo'>Scrolled content</div>
You can achieve this by creating two div's and making their height 100vh which stands for 100% of view height.
.background-1 {
background: blue;
height: 100vh;
}
.background-2 {
background: white;
height: 100vh;
}
<div class="background-1"></div>
<div class="background-2"></div>
i am Currently working on a Angular 2 Website.
I wanted to have a Landing section which covers the Full screen, a content Section, which is as large as the Content inside and a Footer at the Bottom as well as a navbar that stays always on top.
I'm more of a Backend-Developer, so CSS is not my biggest Strength.
My Current code for Testing is:
Global CSS:
html, body {
margin: 0px;
padding: 0px;
width: 100vw;
height: 100vh;
}
App-Component HTML and CSS:
<app-home></app-home>
<header>
Test
</header>
.
header {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 50px;
color: white;
background-color: rgba(0, 0, 0, 0.8);
}
And my Home-Component HTML / CSS:
<header></header>
<div class="content"></div>
<footer></footer>
.
header {
position: relative;
width: 100%;
height: 100%;
background: blue;
}
.content {
position: relative;
width: 100%;
height: 500px;
background: red;
}
footer {
position: relative;
width: 100%;
height: 50px;
background-color: yellow;
}
The Problem i Currently have is, that all my Containers are about 10px wider that the screen. Because of this there is a Horizontal Scrollbar at the bottom.
The weird thing is that this Problem only occurs when i add the content or footer section. When i only have the header Everything is fine.
Also the Navbar stays in the correct size.
Image of the Problem
Probalby it's just a stupid small mistake, but even with other solutions from Stack Overflow i tried it is still not working.
I appreciate all your Help!
just change width to 100% from width: 100vw for body; Like below:
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100vh;
}
My site has a div that scrolls up the page. It fills 100% of the screen, but for some reason there is a slight bit of horizontal scroll available and the background extends that extra bit.
I am attempting to get the div to match the width of the screen/background without any horizontal scrolling available. It is on the far right that the issue takes place.
HTML:
<body>
<div class="summaryPanel">
<p>Summary</p>
</div>
</body>
CSS:
body {
position: relative;
background-image: url(../images/trees.jpeg);
background-color: white;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
z-index: -2;
}
.summaryPanel {
position: absolute;
top: 10vh;
z-index: -1;
height: 100vh;
width: 100vw; // I also tried "100%"
background-color: #242A31;
border-top: 3px solid rgb(74, 74, 74);
}
You should try like this. Add a new class (wrapper) in place of body
*{margin:0;padding:0}
.wrapper {
position: fixed;
background-image: url(../images/trees.jpeg);
background-color: white;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
z-index: -2;
}
.summaryPanel {
position: relative;
top: 10vh;
z-index: -1;
height: 90vh;
width: 100vw;
background-color: #242A31;
border-top: 3px solid rgb(74, 74, 74);
}
<div class="wrapper">
<div class="summaryPanel">
<p>Summary</p>
</div>
</div>
I hope it will helps you.
$(document).ready(function(){
$(".summaryPanel").height($(window).height());
$(".summaryPanel").width($(window).width());
});
use jQuery to set the width and height of the div
I have not tested this but I think this will solve your problem...
body
{
margin: 0;
padding: 0;
width:100%;//if needed
height:100%;//if needed
}
#divID
{
margin: 0;
width: 100%;
height: 100%
background-color: red;//for test
}
100% is 100% of its parent, More Info here
I hope this helps.
Add to body tag
body{
overflow-x: hidden;
}