I have a timeline like this. But if there are a lot of points, it does not look very nice. How can I add functionality like a slider? To be displayed (only the first 5 years) and the rest to appear after the transition between years.
How can i do this? Or maybe there are some libraries with such functionality.
function initProgress() {
var activeDist = $(".slide a.active").position();
activeDist = activeDist.left;
$(".after").stop().animate({
width: activeDist + "px"
});
}
initProgress();
$("a").click(function(e) {
e.preventDefault();
$(".slide a").removeClass("active");
$(this).addClass("active");
initProgress();
});
$(window).resize(function() {
initProgress();
});
body {
background: royalblue;
margin: 0;
padding: 0;
}
.container {
position: relative;
}
.container .before,
.container .after {
z-index: -1;
position: absolute;
top: 50%;
left: 0;
width: 100%;
margin-top: -3px;
height: 4px;
background: cornflowerblue;
}
.container .after {
width: 50%;
background: white;
}
.container:before,
.container:after {
content: "";
display: block;
position: absolute;
top: 50%;
bottom: 0;
margin-top: -3px;
width: 44px;
height: 4px;
background-color: green;
}
.container:before {
left: 0;
background: white;
background: linear-gradient(90deg, royalblue 0%, white 100%, white 100%);
}
.container:after {
right: 0;
background: linear-gradient(270deg, royalblue 0%, cornflowerblue 100%, cornflowerblue 0%);
}
.timeline {
display: table;
table-layout: fixed;
margin-top: 60px;
width: 100%;
}
.time {
display: table-cell;
text-align: center;
}
.slide a {
display: inline-block;
position: relative;
width: 10px;
height: 10px;
border: 2px solid white;
border-radius: 100%;
background: royalblue;
color: white;
transition: 0.3s all ease;
}
.slide a.active,
.slide a:hover {
border-color: white;
background: white;
}
a.deactive {
border: none;
width: 0px;
}
.slide i {
display: block;
position: absolute;
top: -40px;
left: -12px;
width: 30px;
height: 30px;
border-radius: 100%;
line-height: 30px;
color: white;
font-style: normal;
font-size: 11px;
}
.slide span {
display: none;
opacity: 0;
display: block;
position: fixed;
top: 150px;
left: 0;
right: 0;
color: white;
}
a.active>i {
transform:scale(5);
}
a.active~span {
display: block;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="before"></div>
<div class="after"></div>
<div class="container__track timeline">
<div class="slide time">
<a class="" href=""><i>1979</i></a><span> 1979 </span>
</div>
<div class="slide time">
<a class="active" href=""><i>1980</i></a><span> 1980 </span>
</div>
<div class="slide time">
<i>1981</i><span> 1981 </span>
</div>
<div class="slide time">
<i>1983</i><span> 1983 </span>
</div>
<div class="slide time">
<i>1984</i><span> 1984 </span>
</div>
</div>
</div>
I transparent the color of the scroll on the horizontal if you want to change it according to your taste
.slides :: - webkit-scrollbar-thumb {
background: transparent;
border-radius: 10px;
}
function initProgress() {
var activeDist = $(".slide a.active").position();
activeDist = activeDist.left;
$(".after").stop().animate({
width: activeDist + "px"
});
}
initProgress();
$("a").click(function(e) {
$(".slide a").removeClass("active");
$(this).addClass("active");
initProgress();
});
$(window).resize(function() {
initProgress();
});
* {
box-sizing: border-box;
}
.slider {
width: 100%;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/*
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
*/
}
.slides::-webkit-scrollbar {
width: 10px;
height: 0px;
}
.slides::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 100%;
height: 400px;
margin-right: 50px;
border-radius: 10px;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.slides > div:target {
/* transform: scale(0.8); */
}
.author-info {
background: rgba(0, 0, 0, 0.75);
color: white;
padding: 0.75rem;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
.author-info a {
color: white;
}
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slide > a {
display: inline-block;
position: relative;
width: 10px;
height: 10px;
border: 2px solid white;
border-radius: 100%;
background: royalblue;
color: white;
transition: 0.3s all ease;
}
.slide > a > i {
display: block;
position: absolute;
top: -40px;
left: -12px;
width: 30px;
height: 30px;
border-radius: 100%;
line-height: 30px;
color: white;
font-style: normal;
font-size: 11px;
}
.slide a.active,
.slide a:hover {
border-color: white;
background: white;
}
.slide a.deactive {
border: none;
width: 0px;
}
/* Don't need button navigation */
#supports (scroll-snap-type) {
.slider > a {
display: none;
}
}
html, body {
height: 100%;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, #74ABE2, #5563DE);
font-family: 'Ropa Sans', sans-serif;
}
.slide span {
display: none;
opacity: 0;
display: block;
position: fixed;
top: 150px;
left: 0;
right: 0;
color: white;
}
.slide a.active>i {
transform:scale(5);
}
.slide a.active~span {
display: block;
opacity: 1;
}
.time {
display: table-cell;
text-align: center;
}
.container {
position: relative;
}
.container .before,
.container .after {
z-index: -1;
position: absolute;
top: 50%;
left: 0;
width: 100%;
margin-top: -3px;
height: 4px;
background: cornflowerblue;
}
.container .after {
width: 50%;
background: white;
}
.container:before,
.container:after {
content: "";
display: block;
position: absolute;
top: 50%;
bottom: 0;
margin-top: -3px;
width: 44px;
height: 4px;
background-color: green;
}
.container:before {
left: 0;
background: white;
background: linear-gradient(90deg, royalblue 0%, white 100%, white 100%);
}
.container:after {
right: 0;
background: linear-gradient(270deg, royalblue 0%, cornflowerblue 100%, cornflowerblue 0%);
}
.timeline {
display: table;
table-layout: fixed;
margin-top: 60px;
width: 100%;
}
<div class="slider">
<div class="container">
<div class="before"></div>
<div class="after"></div>
<div class="container__track timeline">
<div class="slide time">
<i>1979</i>
</div>
<div class="slide time">
<i>1980</i>
</div>
<div class="slide time">
<i>1981</i>
</div>
<div class="slide time">
<i>1982</i>
</div>
<div class="slide time">
<i>1983</i>
</div>
<div class="slide time">
<i>1984</i>
</div>
</div>
</div>
<div class="slides">
<div id="slide-1">
<span> 1979 </span>
</div>
<div id="slide-2">
<span> 1980 </span>
</div>
<div id="slide-3">
<span> 1981 </span>
</div>
<div id="slide-4" >
<span> 1982 </span>
</div>
<div id="slide-5">
<span> 1983 </span>
</div>
<div id="slide-6">
<span> 1984 </span>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Related
I have a checkbox, that should trigger the menu to slide in from left side of the screen.The problem is when I got the menu hidden on the left, i can't make the function work. When I click the checkbox icon, it's animation works but nothing else happens. The menu is still hidden and I get no errors.
Here is a snippet of my code:
function showMenuSlider() {
var slider = document.querySelector(".menu-slider");
slider.classList.toggle("menu-slider-show");
var sliderOpacity = document.querySelector(".menu-slider-opacity");
sliderOpacity.classList.toggle("menu-slider-opacity-show")
}
* {
margin: 0;
padding: 0;
font-size: 16px;
font-family: Open Sans;
line-height: 1.6;
display: block;
}
html {
scroll-behavior: smooth;
}
main {
position: relative;
}
header {
width: 100%;
position: fixed;
top: 0;
z-index: 95;
box-shadow: 0px -2px 15px rgba(0, 0, 0, 1);
}
.header-container {
background-color: white;
display: flex;
flex-direction: column;
position: relative;
}
.header-upbar {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 50;
background-color: white;
width: 100%;
margin-top: 9px;
}
.header-upbar p {
font-size: 16px;
font-weight: 500;
color: grey;
}
.header-upbar-item2,
.header-upbar-item3 {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.header-upbar a {
text-decoration: none;
flex-basis: 50%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 8px;
border-bottom: 0.5px solid grey;
}
.header-upbar a:first-of-type {
border-right: 0.5px solid grey;
}
.header-upbar-item2 img {
height: 23px;
margin-right: 6px;
}
.header-upbar-item3 img {
height: 23px;
margin: 0px 6px 0px 0px;
}
.header-downbar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 51;
background-color: white;
}
.header-downbar-logo {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
}
.header-downbar-logo img {
margin: 18px 18px 18px 18px;
height: 30px;
}
.header-downbar-menu {
height: 40px;
width: 40px;
display: block;
position: fixed;
margin: 15px 18px 15px 18px;
z-index: 502;
right: 5px;
top: 50px;
z-index: 100;
}
#menu {
display: none;
}
.icon {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
}
.icon .menu,
.icon .menu::before,
.icon .menu::after {
content: '';
background-color: rgba(50, 50, 50, 1);
display: block;
position: absolute;
height: 4px;
width: 35px;
transition: background ease .3s, top ease .3s .3s, transform ease .3s;
}
.menu {
top: 17.5px;
}
.menu::before {
top: 12px;
}
.menu::after {
top: -12px;
}
#menu:checked+.menu {
background: transparent;
}
#menu:checked+.menu::before {
transform: rotate(45deg);
}
#menu:checked+.menu::after {
transform: rotate(-45deg);
}
#menu:checked+.menu::before,
#menu:checked+.menu::after {
top: 0;
transition: top ease 0.3s, transform ease 0.3s 0.3s;
}
.menu-slider-opacity {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 98;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider {
width: 200px;
height: 100vh;
background-color: white;
z-index: 99;
position: absolute;
;
top: 0;
left: -100%;
display: block;
}
.menu-slider-show {
left: 0;
}
.menu-slider-opacity-show {
left: 0;
}
<div class="header-downbar-menu" onclick="showMenuSlider()">
<label for="menu" class="icon"><input type="checkbox" id="menu">
<div class="menu"></div>
</label>
</div>
<div class="menu-slider-opacity"></div>
<div class="menu-slider"></div>
<header id="header">
<div class="header-container">
<div class="header-upbar">
<a href="mailto: ">
<div class="header-upbar-item2">
<img src="img/Fenix-e-mail-icon-white.png" alt="">
<p>blablablabla#o2.pl</p>
</div>
</a>
<a href="tel: ">
<div class="header-upbar-item3">
<img src="img/Fenix-phone-icon-white.png" alt="">
<p>+48 999 999 999</p>
</div>
</a>
</div>
<div class="header-downbar">
<div class="header-downbar-logo">
<img src="img/Fenix-logo-black.png" alt="">
</div>
</div>
</div>
</header>
The button is outside the header, because i need it to be on top of the dark opacity behind the menu. In the future I will make a nice white rounded background to it, so it won't invisible.
Of course if you know better way to do it, be my guest. I'm struggling with this for a while...
The problem is that you add the onclick handler on the header-downbar-menu and not on the checkbox. So when clicking the checkbox you also click on header-downbar-menu so the event is triggered twice. So the class is toggled twice ( added/removed in the same time...almost :) )
Add the click event on the input. ( you could use an onchange event instead of the click event to check the state checked or unchecked , that might help you )
function showMenuSlider() {
var slider = document.querySelector(".menu-slider");
slider.classList.toggle("menu-slider-show");
var sliderOpacity = document.querySelector(".menu-slider-opacity");
sliderOpacity.classList.toggle("menu-slider-opacity-show")
}
html {
scroll-behavior: smooth;
}
main {
position: relative;
}
header {
width: 100%;
position: fixed;
top: 0;
z-index: 95;
box-shadow: 0px -2px 15px rgba(0, 0, 0, 1);
}
.header-container {
background-color: white;
display: flex;
flex-direction: column;
position: relative;
}
.header-upbar {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 50;
background-color: white;
width: 100%;
margin-top: 9px;
}
.header-upbar p {
font-size: 16px;
font-weight: 500;
color: grey;
}
.header-upbar-item2,
.header-upbar-item3 {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.header-upbar a {
text-decoration: none;
flex-basis: 50%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 8px;
border-bottom: 0.5px solid grey;
}
.header-upbar a:first-of-type {
border-right: 0.5px solid grey;
}
.header-upbar-item2 img {
height: 23px;
margin-right: 6px;
}
.header-upbar-item3 img {
height: 23px;
margin: 0px 6px 0px 0px;
}
.header-downbar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 51;
background-color: white;
}
.header-downbar-logo {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
}
.header-downbar-logo img {
margin: 18px 18px 18px 18px;
height: 30px;
}
.header-downbar-menu {
height: 40px;
width: 40px;
display: block;
position: fixed;
margin: 15px 18px 15px 18px;
z-index: 502;
right: 5px;
top: 50px;
z-index: 100;
}
#menu {
display: none;
}
.icon {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
}
.icon .menu,
.icon .menu::before,
.icon .menu::after {
content: '';
background-color: rgba(50, 50, 50, 1);
display: block;
position: absolute;
height: 4px;
width: 35px;
transition: background ease .3s, top ease .3s .3s, transform ease .3s;
}
.menu {
top: 17.5px;
}
.menu::before {
top: 12px;
}
.menu::after {
top: -12px;
}
#menu:checked+.menu {
background: transparent;
}
#menu:checked+.menu::before {
transform: rotate(45deg);
}
#menu:checked+.menu::after {
transform: rotate(-45deg);
}
#menu:checked+.menu::before,
#menu:checked+.menu::after {
top: 0;
transition: top ease 0.3s, transform ease 0.3s 0.3s;
}
.menu-slider-opacity {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 98;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider {
width: 200px;
height: 100vh;
background-color: white;
z-index: 99;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider-show {
left: 0;
}
.menu-slider-opacity-show {
left: 0;
}
<div class="header-downbar-menu">
<label for="menu" class="icon"><input type="checkbox" id="menu" onclick="showMenuSlider()">
<div class="menu"></div>
</label>
</div>
<div class="menu-slider-opacity"></div>
<div class="menu-slider"></div>
<header id="header">
<div class="header-container">
<div class="header-upbar">
<a href="mailto: ">
<div class="header-upbar-item2">
<img src="img/Fenix-e-mail-icon-white.png" alt="">
<p>blablablabla#o2.pl</p>
</div>
</a>
<a href="tel: ">
<div class="header-upbar-item3">
<img src="img/Fenix-phone-icon-white.png" alt="">
<p>+48 999 999 999</p>
</div>
</a>
</div>
<div class="header-downbar">
<div class="header-downbar-logo">
<img src="img/Fenix-logo-black.png" alt="">
</div>
</div>
</div>
</header>
So i'm making a website, and i have a sort of a slider menu from top, and when i hover over a button everything appears, but when i hover out it doesn't disappear. In my js code i had to delay the disappearance with setTimeout() because there's a small gap between the button and the menu. So if someone would know how to make it disappear while keeping the timer thing so it doesn't disappear when going from button to the menu i'd be insanely grateful. Thanks in advance. Here's the code:
var timeout;
function mouseOver(){
document.getElementById('menu-roll').style.display = 'block';
timeout = setTimeout(function(){document.getElementById('menu-roll').style.display = 'none';}, 3000);
}
function mouseOut(){
clearTimeout(timeout);
}
:root{
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
*{
margin: 0;
padding: 0;
}
body{
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper{
height: 100vh;
width: 100%;
}
#navbar{
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a{
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover{
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper{
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup{
0%{
top: 150px;
}
100%{
top: 0;
}
}
#menu-wrapper{
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img{
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video{
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll{
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll{
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a{
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover{
text-decoration: underline;
}
ul{
list-style-type: none;
}
#h1-menu-tandoor{
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#h1-menu-restaurace{
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#information-section{
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction{
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1{
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3{
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p{
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider{
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos{
position: relative;
z-index: 6;
height: 10px;
}
.first-photo{
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info{
height: 407px;
}
#services-photo{
top: 50px;
}
#media screen and (max-width: 700px){
.first-photo{
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction{
width: 60%;
margin: 0 auto;
}
#divider{
margin-bottom: 10px;
}
#services-info{
height: 800px;
}
#services-photo{
top: 470px;
position: relative;
}
}
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>
I'm not sure that I understand everything but take a look at this code.
var timeout;
function mouseOver() {
document.getElementById('menu-roll').style.display = 'block';
clearTimeout(timeout);
}
function mouseOut() {
timeout = setTimeout(function() {
document.getElementById('menu-roll').style.display = 'none';
}, 1000);
}
:root {
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper {
height: 100vh;
width: 100%;
}
#navbar {
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover {
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper {
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup {
0% {
top: 150px;
}
100% {
top: 0;
}
}
#menu-wrapper {
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img {
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video {
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll {
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll {
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a {
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover {
text-decoration: underline;
}
ul {
list-style-type: none;
}
#h1-menu-tandoor {
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#h1-menu-restaurace {
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#information-section {
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction {
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1 {
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3 {
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p {
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider {
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos {
position: relative;
z-index: 6;
height: 10px;
}
.first-photo {
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info {
height: 407px;
}
#services-photo {
top: 50px;
}
#media screen and (max-width: 700px) {
.first-photo {
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction {
width: 60%;
margin: 0 auto;
}
#divider {
margin-bottom: 10px;
}
#services-info {
height: 800px;
}
#services-photo {
top: 470px;
position: relative;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/index.css">
<link rel="shortcut icon" href="styles/favicon.ico.png" />
<title>Tandoor</title>
</head>
<body>
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>
</body>
</html>
I've created a full page video background homescreen for a website and am wanting to add the next section "About" below the homepage however, the about-section is stuck to the top of the site and I can't figure out why. I'd like the video background to remain fixed so it covers the entire site, I also have a sidebar that pops in with menu options so I believe I'm going wrong somewhere with the positioning of it all.
#import url('https://fonts.googleapis.com/css2?family=Oswald:wght#300;400;500;700&family=Oxygen:wght#300;400;700&family=Space+Grotesk:wght#300;400;500;700');
#import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght#300;400;500;700');
:root {
--overlay-color: rgb(105, 104, 104);
--font-secondary: 'Oxygen', sans-serif;
--font-primary: 'Space Grotesk', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Oswald', sans-serif;
}
.showcase {
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #111;
color: #fff;
z-index: 2;
transition: 0.5s;
}
.showcase.active {
right: 300px;
}
.showcase header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo-container {
cursor: pointer;
position: relative;
left: -40px;
}
.logo {
width: 100px;
cursor: pointer;
}
.toggle {
position: relative;
width: 60px;
height: 60px;
background: url('images/menu.png');
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
right: -40px;
}
.toggle.active {
background: url('images/close.png');
filter: invert(1);
background-repeat: no-repeat;
background-size: 20px;
background-position: center;
}
.showcase video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--overlay-color);
mix-blend-mode: overlay;
}
.text {
position: relative;
z-index: 10;
margin: 0 auto;
}
.text h2 {
font-size: 5.5em;
font-weight: 700;
line-height: 1.1em;
text-transform: uppercase;
text-align: center;
z-index: 10;
}
.text p {
font-size: 1.2em;
margin-top: 30px;
font-weight: 300;
max-width: 700px;
font-family: var(--font-primary);
text-align: center;
line-height: 1.5em;
width: 490px;
}
.contact-container {
position: fixed;
bottom: 30px;
text-transform: uppercase;
color: #fff;
z-index: 10;
left: 75px;
font-size: 1.03em;
letter-spacing: 2px;
}
.contact-container a {
font-family: var(--font-primary);
text-decoration: none;
color: #fff;
}
.cool-link::after {
content: '';
display: block;
width: 0;
margin-top: 2px;
height: 2px;
background: #fff;
transition: width .3s;
}
.cool-link:hover::after {
width: 100%;
transition: width .3s;
}
/* SOCIAL ICONS */
.social {
position: fixed;
bottom: 18px;
right: 40px;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
}
.social li {
list-style: none;
}
.social-icon {
display: inline-block;
transform: scale(0.5);
margin-right: 25px;
transition: 0.5s;
font-size: 40px;
cursor: pointer;
}
.social-icon.active {
color: black;
}
.social-icon:hover {
transform: scale(0.5) translateY(-15px)
}
.menu {
position: absolute;
top: 0;
right: 0;
width: 300px;
/* background-color: white;
z-index: 100; */
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.menu ul {
position: relative;
list-style: none;
text-align: center;
}
.menu ul li a {
text-decoration: none;
font-size: 25px;
line-height: 2em;
color: #111;
}
.menu ul li a:hover {
color: var(--overlay-color);
}
/* HOME IMAGES */
.images {
position: absolute;
display: flex;
flex-direction: column;
}
.image1 {
position: relative;
top: 210px;
left: 220px;
}
.image1 img {
width: 170px;
opacity: .9;
}
.image2 {
position: relative;
left: 30px;
top: 235px;
}
.image2 img {
width: 300px;
opacity: .9;
}
.image3 {
position: relative;
left: 778px;
top: -255px;
}
.image3 img {
width: 300px;
height: 170px;
opacity: .9;
}
.image4 {
position: relative;
left: 995px;
top: -278px;
}
.image4 img {
width: 170px;
opacity: .9;
height: 230px;
}
/* ABOUT SECTION */
#about {
padding: 40px;
text-align: center;
}
#about p {
font-size: 1.2rem;
max-width: 600px;
margin: auto;
}
#about h2 {
margin: 30px 0;
color: var(--primary-color);
}
.social a {
margin: 0 5px;
}
/* MEDIA QUERIES */
#media(max-width: 798px) {
.showcase,
.showcase header {
padding: 40px;
}
.text h2 {
font-size: 3em;
}
}
<script src="https://kit.fontawesome.com/914efae9b6.js" crossorigin="anonymous"></script>
<section class="showcase">
<header>
<div class="logo-container">
<img class="logo" src="/images/logo.png" alt="">
</div>
<div class="toggle"></div>
</header>
<div class="overlay"></div>
<video src="/images/black.mp4" muted loop autoplay></video>
<div class="text">
<h2>Back Your</h2>
<h2>creators</h2>
</div>
<div class="images">
<div class="image1">
<img src="/images/cardmapr-E4s8t8EfDu4-unsplash.jpg" alt="">
</div>
<div class="image2">
<img src="/images/aronpw-0caikkln3Ag-unsplash.jpg" alt="">
</div>
<div class="image3">
<img src="/images/image.png" alt="">
</div>
<div class="image4">
<img src="/images/joshua-rawson-harris-oEEdL2vZKJg-unsplash.jpg" alt="">
</div>
</div>
<ul class="social">
<li class="social-icon"><i class="fab fa-facebook-f"></i></li>
<li class="social-icon"><i class="fab fa-instagram"></i></li>
<li class="social-icon"><i class="fab fa-tiktok"></i></li>
</ul>
<div class="contact-container">
<a class="cool-link" href="#">Contact</a>
</div>
<!-- Scroll arrow -->
<a class="ca3-scroll-down-link ca3-scroll-down-arrow" data-ca3_iconfont="ETmodules" data-ca3_icon=""></a>
</section>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Product</li>
<li>Contact</li>
</ul>
</div>
<section id="about">
<h1>About</h1>
<p>
This is a landing page with a full screen video background. This section will be for the about page
</p>
<h2>Follow Me On Social Media</h2>
<div class="social">
<i class="fab fa-twitter fa-3x"></i>
<i class="fab fa-facebook fa-3x"></i>
<i class="fab fa-github fa-3x"></i>
<i class="fab fa-linkedin fa-3x"></i>
</div>
</section>
Thanks in advance if anyone can point out where I'm going wrong!
you can do .showcase{ position: relative} so it will look like this:
.showcase {
position: relative
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #111;
color: #fff;
z-index: 2;
transition: 0.5s;
}
it will fix it, if you must have show case as absolute, so you can do
#about {
position:absolute;
top:100vh;
width:100vw;
}
I'm having issues making the hamburger icon be on top of the banner image. I've tried adjusting the z-index, setting the nav background-color to transparent, and placing the background image in the header instead of the banner section. I don't know what other steps to take. Any advice would be greatly appreciated.
function openNav() {
document.getElementById("main-nav").style.height = "100%";
}
function closeNav() {
document.getElementById("main-nav").style.height = "0%";
}
/*Nav*/
header {
background-color: transparent;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #567E3A;
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #fff;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #7F8C8D;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
.burger {
font-size: 2em;
cursor: pointer;
}
/*Banner*/
#banner {
background-image: url("http://res.cloudinary.com/dboauovcs/image/upload/c_scale,w_2000/v1521182602/camp3_xhp0d9.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100%;
display: grid;
}
.banner-text {
margin: auto;
text-align: center;
color: #fff;
}
.banner-text h1 {
margin: 2em 1.4em 1.4em 1.4em;
font-size: 2em;
line-height: 1.8;
color: #fff;
text-shadow: 3px 3px #000;
}
<header>
<nav id="main-nav" class="overlay">
×
<div class="overlay-content">
Destinations
Accomidation
Stories
Contact
</div>
</nav>
<span class="burger" onclick="openNav()">☰</span>
</header>
<section id="banner">
<div class="banner-text">
<h1>Lorem Lipsum</h1>
Book Today
</div>
</section>
Like this?
function openNav() {
document.getElementById("main-nav").style.height = "100%";
}
function closeNav() {
document.getElementById("main-nav").style.height = "0%";
}
/*Nav*/
header {
background-color: transparent;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #567E3A;
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #fff;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #7F8C8D;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
.burger {
font-size: 2em;
cursor: pointer;
position: absolute;
}
/*Banner*/
#banner {
background-image: url("http://res.cloudinary.com/dboauovcs/image/upload/c_scale,w_2000/v1521182602/camp3_xhp0d9.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100%;
display: grid;
}
.banner-text {
margin: auto;
text-align: center;
color: #fff;
}
.banner-text h1 {
margin: 2em 1.4em 1.4em 1.4em;
font-size: 2em;
line-height: 1.8;
color: #fff;
text-shadow: 3px 3px #000;
}
<header>
<nav id="main-nav" class="overlay">
×
<div class="overlay-content">
Destinations
Accomidation
Stories
Contact
</div>
</nav>
<span class="burger" onclick="openNav()">☰</span>
</header>
<section id="banner">
<div class="banner-text">
<h1>Lorem Lipsum</h1>
Book Today
</div>
</section>
A little explanation on what I've done here (presuming this is the treatment you are looking for): By positioning the hamburger as absolute, we pull it completely out of the static layout flow, so other elements ignore its existence when positioning. The element's location can then be controlled with left, right, top and bottom, and will position itself relative to the first ancestor element positioned absolutely, or the body if no element is positioned absolutely. You'll probably want to consider dialing in the positioning a bit with these attributes, as you might not want to rely on the browser to calculate its position with defaults.
function openNav() {
document.getElementById("main-nav").style.height = "100%";
}
function closeNav() {
document.getElementById("main-nav").style.height = "0%";
}
/*Nav*/
header {
background-color: transparent;
position: absolute;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #567E3A;
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #fff;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #7F8C8D;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
.burger {
font-size: 2em;
cursor: pointer;
}
/*Banner*/
#banner {
background-image: url("http://res.cloudinary.com/dboauovcs/image/upload/c_scale,w_2000/v1521182602/camp3_xhp0d9.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100%;
display: grid;
}
.banner-text {
margin: auto;
text-align: center;
color: #fff;
}
.banner-text h1 {
margin: 2em 1.4em 1.4em 1.4em;
font-size: 2em;
line-height: 1.8;
color: #fff;
text-shadow: 3px 3px #000;
}
<header>
<nav id="main-nav" class="overlay">
×
<div class="overlay-content">
Destinations
Accomidation
Stories
Contact
</div>
</nav>
<span class="burger" onclick="openNav()">☰</span>
</header>
<section id="banner">
<div class="banner-text">
<h1>Lorem Lipsum</h1>
Book Today
</div>
</section>
I'm trying to fix a script so that I can toggle another div and show the content inside that div with an slideshow animation in jQuery. It dosen't work at all, so some help would be appericated.
<script type="text/javascript">
function toggleDivs(currentDiv)
{
if (currentDiv == 'music')
{
var $inner = $("#music-box");
}
else
{
var $inner = $("#inner");
}
if($inner.position().left == 0)
{
$inner.animate({
left: "400px"
});
}
else
{
$inner.animate({
left: "0px"
});
});
});
</script>
Heres the DIVS:
<div id="shadow"></div>
<div id="header">
<div class="navigation">
ARTIST
MUSIC
ABOUT
CONTACT
</div>
</div>
<div id="content">
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F110558300"></iframe>
<iframe width="100%" height="166" scrollnig="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F108205158"></iframe>
<div id="target">
Dubstep
Electro House
</div>
<div class="contentbox">
<div id="inner">
<div id="music-box">
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer-widget">
<img src="http://dustla.com/images/soundcloud.png" alt="soundcloud"/>
<img src="http://dustla.com/images/twitter.png" alt="twitter"/>
<img src="http://dustla.com/images/facebook.png" alt="facebook"/>
<img src="http://dustla.com/images/youtube.png" alt="youtube"/>
</div>
</div>
Heres the CSS code:
/*************
STYLESHEET
*************************/
html, body {
height: 100%;
width: 100%;
position: absolute;
margin: 0 auto !important;
overflow-x: hidden;
font-family: verdana;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}
body{
}
#header
{
width: 100%;
height: 145px;
background-color: #fff;
background-image: url('http://dustla.com/images/lightpaperfibers.png');
position: relative;
z-index: 1;
}
#shadow
{
width: 100%;
height: 163px;
background-image: url('http://dustla.com/images/h_shadow.png');
background-repeat: repeat-x;
position: absolute;
z-index: 1;
margin-top: 30px;
}
.navigation a
{
border-bottom: 2px solid #000;
font-family: Comic Sans MS;
font-size: 24px;
color: #000;
margin-right: 50px;
text-decoration: none;
width: auto;
text-align: center;
}
.navigation
{
width: 600px;
margin: 0 auto;
padding-top: 50px;
}
.navigation a:hover
{
border-bottom: 5px solid #000;
}
#content
{
height: auto;
position: relative;
padding-top: 250px;
padding-bottom: 400px;
margin-bottom: -41px;
width: auto;
background-color: #ffF;
background-image: url('http://dustla.com/images/lightpaperfibers.png');
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.contentbox
{
width: 100%;
background-image: url('http://dustla.com/images/lightpaperfibers.png');
/*height: auto;
margin-top: -780px;
background-color: #fff;
position: relative;
padding-right: -200px;
max-height: 750px;*/
overflow: hidden;
}
#footer
{
width: 100%;
height: 72px;
position: relative;
bottom: 0;
background-image: url('img/bg.png');
margin: 0;
color: #fff;
opacity: 0.9;
margin-top: 25px;
}
#footer-widget
{
width: 260px;
height: 28px;
float: right;
margin-right: 5px;
margin-top: 15px;
}
#footer-widget a
{
margin-right: 20px;
}
/*********************
JQUERY SLIDESHOW
**********************/
#slideshow
{
background-color: #000;
width: 400px;
height: 200px;
margin: 0;
position: relative;
}
#inner
{
background-color: #F00;
width: 100%;
height: 200;
margin: 0;
position: absolute;
}