I'm trying to create a simple parallax effect using Jquery (without plugins). Basically I have a few different images layered on-top of each-other and need them to move slightly upwards at different speeds when a user scrolls down, similar to a parallax scrolling effect.
Here's the layout so far (excuse the sloppy code):
body {
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
background-color: #ededed;
z-index: 4;
display: table;
}
.header {
position: relative;
width: 100%;
background-color: #ffde15;
height: 900px;
margin-left: auto;
margin-right: auto;
}
.headertopimg {
position: absolute;
width: 100%;
z-index: 10;
}
.headerbehindimg {
position: absolute;
width: 100%;
z-index: 9;
top:0%;
}
.headerbehindbehindimg {
position: absolute;
width: 100%;
z-index: 8;
margin-top: 8%;
}
.headerbgimg {
position: absolute;
width: 70%;
z-index: 7;
left: 50%;
margin-left: -35%;
}
<body>
<div class="header">
<div class="headertop"><img src="http://i.imgur.com/z2DORfA.png" class="headertopimg"> </div>
<div class="headerbehind"><img src="http://i.imgur.com/o1Yl0PD.png" class="headerbehindimg"></div>
<div class="headerbehindbehind"><img src="http://i.imgur.com/VQxs9LD.png" class="headerbehindbehindimg"></div>
<div class="headerbg"><img src="http://i.imgur.com/t5fTRZe.png" class="headerbgimg"></div>
</div>
</body>
Any help would be much appreciated!
Related
I'm trying to make a navigation bar that overlap my header and stick to the top of the window on scroll.
It will start at top: 45px and stick at top: 0 on scroll.
My first approach was to set it at position: fixed; top: 45px and change the value with JS on a scroll event. But Firefox gave me the warning about "asynchronous panning" discussed on this post.
I have been able to do it with a bit of CSS trickery, but I am wondering if there is a simpler CSS way or a valid JS approach to do this (not throwing a warning).
body {
position: relative;
height: 100%;
width: 100%;
background-color: grey;
overflow-x: hidden;
margin: 0;
}
.container {
position: absolute;
top: 0;
left: -1px;
width: 1px;
bottom: 0;
padding-top: 45px;
overflow: visible;
}
nav {
position: sticky;
top: 0;
transform: translateX(-50%);
margin-left: 50vw;
width: 300px;
height: 70px;
background-color: red;
}
header {
height: 50vh;
background-color: blue;
}
main {
height: 200vh;
width: 100%;
background-color: green;
}
<div class="container">
<nav></nav>
</div>
<header>
</header>
<main>
</main>
You can simplify your code and avoid using an extra container:
body {
background-color: grey;
margin: 0;
}
nav {
position: sticky;
top: 0;
width: 300px;
height: 70px;
margin:45px auto -115px; /* 115 = height + margin-top */
background-color: red;
}
header {
height: 50vh;
background-color: blue;
}
main {
height: 200vh;
background-color: green;
}
<nav></nav>
<header>
</header>
<main>
</main>
I need to build a tv guide almost exactly like this one:
tv guide
If the user scrolls horizontally in the guide, the timebar should scroll but the channel list should stay fixed.
If the user scrolls vertically in the guide, the timebar should stay fixed but the channel list should scroll.
Is this possible with only using CSS? I'd rather not use JS to solve this because this would be laggy/glitchy.
I tried to make 2 scroll containers, 1 horizontal and 1 vertical, but I am only able to get 1 of the prerequisites right.
Here's the CodePen: CodePen
HTML:
<div class="page">
<div class="horscroll">
<div class="timebar">timeline</div>
<div class="vertscroll">
<div class="channel-list">channel list</div>
<div class="content">grid</div>
</div>
</div>
</div>
CSS:
body {
background-color: #333;
}
.page {
width: 1000px;
height: 1000px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.horscroll {
width: 1000px;
overflow-x: scroll;
overflow-y: hidden;
position: relative;
}
.timebar {
background-color: red;
width: 5000px;
height: 50px;
position: absolute;
top: 0;
}
.vertscroll {
width: 5000px;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
position: relative;
margin-top: 50px;
}
.channel-list {
background-color: green;
width: 200px;
height: 10000px;
position: absolute;
top: 0;
left: 0;
}
.content {
width: 5000px;
height: 10000px;
margin-left: 200px;
background-color: cyan;
}
Can you guys help me?
Many thanks in advance!
I have a container DIV that has two DIVs inside. The first DIV (my-canvas) needs to be positioned absoulte at 0 0 inside the container. I want the second DIV to take up the remaining 50% of space below. The finished product needs to be responsive. I am stuck on how to position the second DIV.
I have the following HTML:
<div class="container map-container">
#include('maps.world-map')
<div id="my-canvas"></div>
<div id="their-canvas"></div>
</div>
My CSS is:
.map-container {
position: relative;
display: inline-block;
width: 100%;
max-width: 1728px;
max-height: 1080px;
overflow: hidden;
margin: 50px auto 0 auto;
}
#my-canvas,
#their-canvas {
padding: 0;
text-align: center;
position: absolute;
max-width: 1728px;
max-height: 540px;
width: 100%;
height: 50%;
z-index: 999998;
opacity: 0.8;
}
#my-canvas {
left: 0;
top: 0;
}
I am trying to figure out the CSS for the canvas below
#their-canvas {
????
}
Thanks!
You can set second div using botton:0px, height: 50%;. check updated snippet below
$('.map-container').height($(window).height()-55);
$(window).resize(function(){
$('.map-container').height($(window).height()-55);
})
body {
padding: 0px;
margin: 0px;
}
.map-container {
position: relative;
display: inline-block;
width: 100%;
max-width: 1728px;
max-height: 1080px;
overflow: hidden;
margin: 50px auto 0 auto;
}
#my-canvas,
#their-canvas {
padding: 0;
text-align: center;
position: absolute;
max-width: 1728px;
max-height: 540px;
width: 100%;
height: 50%;
z-index: 999998;
opacity: 0.8;
}
#my-canvas {
left: 0;
top: 0;
background: red;
}
#their-canvas {
height: 50%;
bottom: 0px;
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container map-container">
<div id="my-canvas">my-canvas</div>
<div id="their-canvas">their-canvas</div>
</div>
It is unclear what you mean by "it needs to be responsive".
But if you want to put your second canvas below, you can set a top: 50%; property. Since you are using relative values for the height and top of your canvas, its parent needs to have a defined height or min-height
See https://jsfiddle.net/NotANumber/3k2go0qf/
Try following code, Using CSS itself you can achieve,
*{
padding:0px;
margin:0px;
}
.map-container {
position: absolute;
display: block;
width: 100%;
max-width: 1728px;
max-height: 1080px;
height:100%;
}
#my-canvas,
#their-canvas {
text-align: center;
position: absolute;
max-width: 1728px;
max-height: 540px;
width: 100%;
height: 50%;
z-index: 999998;
opacity: 0.8;
}
#my-canvas {
background: red;
}
#their-canvas {
bottom: 0px;
background: green;
}
<div class="container map-container">
<div id="my-canvas"></div>
<div id="their-canvas"></div>
</div>
I am working on a site.Is it possible to make a div with a curved bottom by using html5 css3 and javascript. It's look like
Curved header bottom
.container {
width: 100%;
height: 400px;
background-color: lightgray;
position: relative;
overflow: hidden;
}
.inner {
position: absolute;
background-color: black;
top: -200px;
left: -50%;
height: 400px;
width: 200%;
border-radius: 50%;
}
<div class='container'>
<div class='inner'>
</div>
</div>
I would like to create a boxed layout, where the boxed / frame stays in place and the content scroll within it. However I don't want to use the old fashioned scrolling frame method, where you have a panel scroll bar on that panel.
I want to achieve something similar to this > https://pixelgrade.com/demos/themes/?product=border - for this purpose, ignore the content, however you can see the white frame/border that stays in place - that is what I want. And the window has the standard scroll bar, not the frame itself.
I guess I might need to use something link sticky-kit.js however apologies if this is a red herring.
Can anyone point me in the right direction for what my search should begin. And before you ask, I have tried to look into this myself :)
The simplest thing I can think of is using some fixed divs along the edges to create a border for your box.
.container {
border: 1px solid red;
width: 100%;
}
.content {
height: 1000px;
background-color: lightblue;
padding: 50px;
}
.top {
background-color: white;
height: 40px;
position: fixed;
width: 100%;
top: 0;
}
.left {
background-color: white;
width: 40px;
position: fixed;
height: 100%;
left: 0;
top: 0;
bottom: 0;
}
.right {
background-color: white;
width: 40px;
position: fixed;
height: 100%;
right: 0;
top: 0;
bottom: 0;
}
.bottom {
background-color: white;
height: 40px;
position: fixed;
width: 100%;
bottom: 0;
}
<section class="container">
<section class="content">
this is my content...
</section>
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</section>
Here's the alternative solution which allows the border to be transparent (in order to show a background image). It's a little hack that simply hides the scrollbar of the inner div. I highly recommend that if you choose to use this alternative, to make sure that it is apparent that there is more content on the page since there will be no visible scrollbars.
body,
html {
margin: 0;
padding: 0;
}
.container {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/cc/ESC_large_ISS022_ISS022-E-11387-edit_01.JPG');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.wrapper {
position: absolute;
top: 40px;
bottom: 40px;
left: 40px;
right: 40px;
background-color: lightblue;
overflow: hidden;
}
.wrapper2 {
overflow-y: scroll;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin-right: -20px;
padding: 20px;
}
.content {
height: 1000px;
}
<div class="container">
<div class="wrapper">
<div class="wrapper2">
<div class="content">
This is my content...
</div>
</div>
</div>
</div>