I'm trying to figure out how to set up a full screen landing page that has multiple backgrounds. I want the user to be able to scroll once and have the next background take up the entire screen. I also want to keep track of which section of the landing page the user is on similar to the position tracker on the right.
I'm trying to emulate the design on this page https://purpose.nike.com/
How would one accomplish this?
If you want to achieve the wallpaper thing as nike as done you would have to add some transitions to make it look good. To achieve it add the background to each div you want and add following css.
.bg{
height: 100vh;
width: 100vw; }
.bg_url1 { background: url1 }
.bg_url2 { background: url2 }
<div class="bg bg_url1"/>
<div class="bg bg_url2"/>
add this to each wallpaper then you can combine it with javascript/jquery to add transitions to make it look good.
I found a solution on jquery scrollify. Please see my example code where I make fullscreen div scrollable and console print (div position or index when finish scrolling).
$(function() {
$.scrollify({
section : ".full_sc_div",
after: function(index){
console.log(index);
}
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scrollify</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.js"></script>
</head>
<body>
<div class="full_sc_div" style="background-color: red;">div 1</div>
<div class="full_sc_div" style="background-color: green;">div 2</div>
<div class="full_sc_div" style="background-color: blue;">div 3</div>
<div class="full_sc_div" style="background-color: white;">div 4</div>
<div class="full_sc_div" style="background-color: black;">div 5</div>
</body>
</html>
You can try fullpage js : https://projects.lukehaas.me/scrollify/#home
<div id="fullpage">
<div class="section">Section 1</div>
<div class="section">
<div class="slide" data-anchor="slide1">Slide 2.1</div>
<div class="slide" data-anchor="slide2">Slide 2.2</div>
</div>
<div class="section">Section 3</div>
<div class="section">Section 4</div>
</div>
<script>
new fullpage('#fullpage', {
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
});
</script>
The page you are talking about is nothing but multiple background placed under one another in different divisions
<div>..Walpaper1..</div>
<div>..Walpaper2..</div>
<div>..Walpaper3..</div>
<div>..Walpaper4..</div>
then provide Id's to all the dives and place all the content into the different div's associate do that div
Related
I have a canvas inside a div with threeJS, and would like to display the purple bar (which will be for user settings) on the right side of the threejs window. The problem is that for some reason bootstrap is not recognising that I want to put these 2 columns together in a row and is placing them on separate rows. I would expect what I have currently to work, and can't see anything wrong with it... I have a similar situation somewhere else in the project, but with only divs, which is working fine. There is no lay-out scss code other than one thats resetting the margin and padding. there are also no other html files in use for this component.
const threeCanvas = document.getElementById('threejs-canvas') as HTMLCanvasElement;
this.renderer = new THREE.WebGLRenderer({ canvas: threeCanvas });
<div class="row" style="background-color: whitesmoke; height: 100px"></div>
<div class="row">
<div class="col">
<canvas id="threejs-canvas">
<app-threejs [width]=400 [height]=350></app-threejs>
</canvas>
</div>
<div class="col-2" style="background: blueviolet; height: 621px;">test</div>
</div>
EDIT: Desired result would be something like this:
https://www.elfskot.nl/wp-content/uploads/2018/08/thumbnail-configurator-780x520.png
SOLVED: I had ng-bootstrap installed without bootstrap...
Your HTML and class usages is fine, please check if your Bootstrap CSS files are loading and applying to your page.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="row" style="background-color: whitesmoke; height: 100px"></div>
<div class="row">
<div class="col">
<img src="https://placehold.it/400x350">
</div>
<div class="col-2" style="background: blueviolet; height: 621px;">test</div>
</div>
</body>
</html>
I want to place a div at top of page source. When users visit page they will see this div at bottom of page.
For example:
When you open page you will see as below
aaaa
bbbb
cccc
some text
But page source will be shown as below:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="top">Some text</div>
<p>aaaa</p>
<p>bbbb</p>
<p>cccc</p>
</body>
</html>
How can I do it?
There's no need for JavaScript or jQuery to achieve this. Only some CSS flexbox is needed to achieve this. See this small example that puts the div with class top as the last child of the body, while it remains as the first item in the page source.
.container {
display: flex;
flex-flow: column wrap;
}
.top {
order: 2;
}
<div class="container">
<div class="top">Bottom</div>
<div>Block 1</div>
<div>Block 2</div>
<div>Block 3</div>
</div>
So i created a footer with a green background and added a green backgroun inside a container as you can see on the image. But somehow the length of the green is longer than the other container.
CODE HERE
HTML
CSS
I will suggest put your green class inside container not with container. Check below snippet, you will see the difference.
.green {
background: green;
}
.container {
background: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="green">
<div class="row">
<div class="col-xs-3">3</div>
<div class="col-xs-4">4</div>
<div class="col-xs-5">5</div>
</div>
</div>
</div>
I hope this will help.
Looking at your html code it seems that you are using twitter bootstrap framework.
if you want to use the column structure then you should follow the markup standard set by bootstrap
HTML STRUCTURE
<div class="container">
<div class="row">
<div class="col-md-3">
HTML code
</div>
</div>
<div>
don't forget to set the hierarchy as per standards.
checkout the documentation for more details https://getbootstrap.com/docs/4.0/layout/grid/
Given this html:
<div id="wrapper">
<div id="header-holder">
<div class="header">header 1</div>
<div class="header">header 2</div>
</div>
<div id="project">project data</div>
</div>
I want to apply a style to element in .header only if #project exists. I'd like to do this with css. Is this possible?
The trouble with cascading style sheets is they cascade. They go down layer by layer and don't come back up. If your structure were set where your <div id="project"> was above your <div id="header-holder"> you could use:
div#wrapper #project + #header-holder .header { ... }
However, if you are unable to restructure your HTML, then you'll need to use javascript. If you have access to jQuery you could try the following:
$('#wrapper:has(#project) .header').addClass("has_project");
Then in CSS:
.header.has_project{ ... }
Lots of answers of how nesting a container inside of a container-fluid is a bad idea. So without doing that, how do I make the background-color of my non-fluid rows take up the width of the entire screen?
You can see Bootstrap does this on thier own website with the purple but viewing the source was not helpful for me. Any ideas?
You can wrap your container in a another div and apply the background color to this parent div. Please see http://codepen.io/panchroma/pen/aNgvoJ
HTML
<div class="wrap">
<div class="container">
<div class="row">bootstrap row</div>
</div>
</div>
CSS
.wrap{
background-color:teal
}
Update
This is good but for alternating row background colours, one must use
wrap -> container -> row for each row?
If you need alternating rows each with full width background colours, it would be cleaner to use a container-fluid for your page, then use a nested container on each row: http://codepen.io/panchroma/pen/GZbqLV
<div class="container-fluid">
<div class="row one">
<div class="container">
<div class="row">one</div>
</div> <!-- end nested container -->
</div> <!-- end row -->
... <!-- repeat above for each row -->
</div> <!-- end parent container -->
CSS
.one{
background-color:pink:
}
something like this maybe
<style>
.cont {
background-color: yellow;
height: 20em;
width: 100%;
}
</style>
</head>
<body>
<div class="cont">
<!-- content -->
</div>