how can I make a <div> element act like a background like the intro of this web jabarprov.go.id?
This is my codepen
http://codepen.io/anon/pen/RGEmxB
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 70;
if ($(window).scrollTop() > navHeight) {
$('nav').addClass('fixed');
}
else {
$('nav').removeClass('fixed');
}
});
});
#div1, #div2{
height:100vh;
}
#div1{background-color:cyan}
#div2{background-color:lightgrey}
nav {
position: absolute;
bottom: 0;
width: 100%;
background: Green;
padding:2px 0;
z-index:1;
}
.fixed {
position: fixed;
top: 0;
height: 70px;
z-index: 1;
}
section {
height: 100vh;
}
/* Screens Settings */
#screen1 {
background: #43b29d;
}
#screen1 p {
padding-top: 200px;
}
#screen2 {
background: #efc94d;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="div1" class="col-md-3">LEFT SECTION</div>
<div id="div2" class="col-md-9">RIGHT SECTION</div>
<nav class="main-bg">
<div class="container">
NAVIGATION HERE
</div>
</nav>
<section id="screen2"></section>
<section id="screen3"></section>
The problem is the intro my page is not fixed (acts like fixed background).
I modified your code.
Hope it is what you searched for
http://codepen.io/anon/pen/qaLGrp
I made a wrapper around div1 and 2 which is fixed and made change to sizes
wrapper
<div id="intro-wrapper">
<div id="div1" class="col-md-3">a</div>
<div id="div2" class="col-md-9">b</div>
</div>
wrapper css and sizes
body{
padding-top: 100vh;
}
#intro-wrapper{
z-index: -1;
position: fixed;
top: 0;
width: 100vw;
}
#div1, #div2{
height:calc(100vh - 70px);
}
navigation position
nav {
position: absolute;
top: calc(100vh - 70px);
width: 100%;
background: Green;
padding:2px 0;
z-index:1;
height:70px;
}
Related
I have a fullpage.js imported into my code and a progress bar indicator (div class="progress-section"). My question is, how do I change the progress bar indicator depending on the background color of a section? (E.g. progress indicator in black when section background color is white, and indicator in white when section bg is black.) I appreciate you all so much :)
I have added the code below:
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Aaron</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" integrity="sha512-4rPgyv5iG0PZw8E+oRdfN/Gq+yilzt9rQ8Yci2jJ15rAyBmF0HBE4wFjBkoB72cxBeg63uobaj1UcNt/scV93w==" crossorigin="anonymous"
referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
</head>
<body>
<!-- Navigation -->
<!-- <header>
<h4 class="logo">LIGHT</h4>
</a>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li> CONTACT</li>
</ul>
</nav>
</header> -->
<div class="progress-section">
<div class="progress-bar-wrap" data-bg="fuchsia">
<div class="progress-bar" ></div>
</div>
<div class="progress-num"></div>
</div>
<div>
<div id="fullpage">
<div class="section one">
Section ONE
</div>
<div class="section two">
Section TWO
</div>
<div class="section three">
Section THREE
</div>
<div class="section four">
Section FOUR
</div>
</div>
</div>
<!-- Main Container Ends -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js" integrity="sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps+4bLV5IEjhOZX+gg==" crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<script src="scripts.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color:#111111;
color: white;
}
body::-webkit-scrollbar {
display: none;
}
.progress-section {
position: fixed;
right: 50px;
top: 40%;
width: 60px;
height: 20%;
display: flex;
justify-content: space-between;
will-change: transform;
transition: 0.3s ease-out;
z-index: 1;
}
.progress-bar-wrap {
position: relative;
width: 1px;
border: 0;
border-radius: 10px;
overflow: hidden;
background-color: rgb(70, 70, 70);
}
.progress-bar {
position: absolute;
bottom: 0;
width: 100%;
height: 0%;
background-color: rgb(189, 189, 189);
}
.white {
background: white;
}
.one {
background: gray;
}
.two {
background: green;
}
.three {
background: blue;
}
.four {
background: purple;
}
#fullpage {
height: 1000px;
}
JAVASCRIPT
let progressSection = document.querySelector('.progress-section');
let progressBar = document.querySelector('.progress-bar');
let progressNum = document.querySelector('.progress-num');
let x, y;
function updateProgressBar() {
progressBar.style.height = `${getScrollPercentage()}%`;
progressNum.innerText = `${Math.ceil(getScrollPercentage())}%`
requestAnimationFrame(updateProgressBar)
}
function getScrollPercentage() {
return ((window.scrollY) / (document.body.scrollHeight - window.innerHeight) * 100)
};
updateProgressBar()
new fullpage('#fullpage', {
licenseKey: 'LICENSE',
autoScrolling: true,
scrollBar: true,
})
You can use fullpage.js state classes for that.
For example:
/* On section 2 slide 0 */
.fp-viewing-page2-0 #nav{
color: red
}
Here's a working example:
https://codepen.io/alvarotrigo/pen/VwbxbYR
I'd like my parent div to expand the height of the content, as my content will be dynamic. However, the content must be (I think) positioned absolutely so they can overlap each other vertically.
I've concluded I'll have to use JS to find the offset from the top to the bottom of the last element in the container, then set the height to that.
I'm currently doing something like this:
var lastElement = document.getElementById('three');
var bounds = lastElement.getBoundingClientRect();
var bottomOffset = bounds.top + $("#three").height();
$("#container").height(bottomOffset);
However this is clunky within my application, and the application of the height is not instantaneous, leading to a sluggy site.
Is there a better way?
var lastElement = document.getElementById('three');
var bounds = lastElement.getBoundingClientRect();
var bottomOffset = bounds.top + $("#three").height();
$("#container").height(bottomOffset);
body,
html {
height: 100% padding: 0;
margin: 0;
}
.absolute {
display: inline-block;
position: absolute;
background-color: blue;
width: 100px;
height: 100px;
}
#two {
top: 80px;
left: 120px
}
#three {
top: 160px;
left: 240px;
}
#container {
position: relative;
width: 100%;
;
background-color: yellow;
;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="absolute" id="one"></div>
<div class="absolute" id="two"></div>
<div class="absolute" id="three"></div>
</div>
View on JSFiddle
You can accomplish your result without any JS, but instead use CSS margin around the boxes to get the same result.
For the horizontal margin you can also use percentages (by request of OP).
For the vertical margins this will give unexpected results, since the percentage will still reference the width of the container (under "Property Values"), not the height.
html,body {height:100%; padding:0; margin:0;}
.container {
background-color: yellow;
}
.box {
display: inline-block;
width: 100px;
height: 100px;
margin-right: 2%;
background-color: blue;
}
.box.one {margin-top:0; margin-bottom:160px;}
.box.two {margin-top:80px; margin-bottom:80px;}
.box.three {margin-top:160px; margin-bottom:0;}
<div class="container">
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
</div>
pixel-margin: https://jsfiddle.net/xzq64tsh/
percent-margin: https://jsfiddle.net/xzq64tsh/3/
Perhaps taking out the getBoundingClientRect() function, using jQuery instead might speed it up and simplify it a bit.
var lastElement = $('#three');
var bottomOffset = lastElement.offset().top + lastElement.height();
$("#container").height(bottomOffset);
body,
html {
height: 100% padding: 0;
margin: 0;
}
.absolute {
display: inline-block;
position: absolute;
background-color: blue;
width: 100px;
height: 100px;
}
#two {
top: 80px;
left: 120px
}
#three {
top: 160px;
left: 240px;
}
#container {
position: relative;
width: 100%;
;
background-color: yellow;
;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="absolute" id="one"></div>
<div class="absolute" id="two"></div>
<div class="absolute" id="three"></div>
</div>
I am trying to create vertical content slider using jQuery, I have tried creating but its not working. I am trying to change the slide on scroll, any navigation is not required, only the content have to changed on scroll.
Here is the JSfiddle of my code
function rotateImages(){
$(".slide-item").animate({top: "-100%"}, 1000).delay(4000);
$(".slide-item").animate({top: "200%"}, 1000).delay(4000);
}
$(".slider-wrapper").scroll(function() {
rotateImages();
});
.slider-wrapper {
float: left;
width: 100%;
height: 500px;
background: #dedede;
border: 1px solid #ccc;
overflow: hidden;
position: relative;
}
.slide-item {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.item-one {
top: 0;
}
.item-two {
top: 100%
}
.slide-item > .img-block {
float: left;
width: 30%;
}
.slide-item > .img-block > img {
width: 100%;
height: auto;
}
.slide-item > .content-block {
float: right;
width: 70%;
padding: 0 20px;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slider-wrapper">
<div class="slide-item item-one">
<div class="img-block"><img src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067"></div>
<div class="content-block">
<h1>Slider Heading 1</h1>
<p>This is content related to slider. This is content related to slider. This is content related to slider. This is content related to slider. </p>
</div>
</div>
<div class="slide-item item-two">
<div class="img-block"><img src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067"></div>
<div class="content-block">
<h1>Slider Heading 1</h1>
<p>This is content related to slider. This is content related to slider. This is content related to slider. This is content related to slider. </p>
</div>
</div>
</div>
I would suggest using jquery-mousewheel because scroll event won't work until and unless there is scrollbar.
Fiddle demo
$('.slider-wrapper').on('mousewheel', function(event) {
console.log(event.deltaX, event.deltaY, event.deltaFactor);
rotateImages();
});
When I click on the "open" button,it fade out but "navigazione" div doesn't fade in. But If I try to put display: block; on the "navigazione ID" I can see the script working. Obviously I need that the "navigazione id" start with display none. where's the problem?? thank you in advance for your help!
JS
<script>
$(document).ready(function(e) {
$("#close-icon").on('click', function() {
$("#menu-butt").fadeIn();
$("#navigazione").fadeOut();
});
$("#menu-butt").on('click', function() {
$("#menu-butt").fadeOut();
$("#navigazione").fadeIn();
});
});
</script>
HTML
<div id="navigazione"> <div> <div id="button"> ciao </div> </div>
<div class="row menu-butt"><a href="#" id="menu-butt">open<a></div>
<div id="close-icon"><a href="#" id="close-icon">close<a></div>
CSS
#navigazione { height: 100vh;
width:100%;
position: fixed ;
top: 0px;
left: 0px;
background-color: rgba(28,82,23,0.95);
z-index:400;
display: none;
}
#close-icon{ position: fixed;
height: cover;
top: 20px;
right: 30px !important;
z-index: 450 ;
display: none;
}
Is this you are looking for -
$(document).ready(function(e) {
$("#close-icon").on('click', function() {
$("#menu-butt").fadeIn();
$("#navigazione").fadeOut();
});
$("#menu-butt").on('click', function() {
$("#menu-butt").fadeOut();
$("#navigazione").fadeIn();
});
});
#navigazione { height: 100vh;
width:100%;
position: fixed ;
top: 0px;
left: 0px;
background-color: rgba(28,82,23,0.95);
z-index:400;
display: none;
}
#close-icon{ position: fixed;
height: cover;
top: 20px;
right: 30px !important;
z-index: 450 ;
}
close-icon {
color:#000;
}
.menu-butt {
color:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navigazione"> <div id="button"> ciao </div> </div>
<div class="row menu-butt">open</div>
<div id="close-icon">close</div>
I'm trying to make a div on the left side that can close by sliding to the left While the content in the right div expands to 100% filling the space of the closed div. image example
I found a demo here but its only for the closable div.
<div id="intro-wrap">
<div class="open-intro">+</div>
<div class="close-intro">-</div>
<div id="contentWrap">
<h1 class="main-header">Here is a Title</h1>
<p class="main-desc">You can write whatever you want about yourself here. You can say you're a superhuman alien ant, arrived from the nether regions of Dwarf-Ant-Dom.</p>
</div>
</div>
It has some work to do, but it'll get you started.
$(function() {
"use strict";
var isOpen = true;
$('#open-close').on('click', function() {
if (isOpen) {
animate(false);
isOpen = false;
} else {
animate(true);
isOpen = true;
}
});
});
function animate(action) {
if (action) {
$('#left').animate({ width: "30vw" }, 600);
$('#right').animate({width: "70vw",marginLeft: "-5px"}, 600);
} else {
$('#left').animate({width: "0px"}, 600);
$('#right').animate({width: "99vw" }, 600);
}
}
* {
padding: 0;
margin: 0;
}
#wrapper{
width: 100vw;
height: 100px;
border: 2px solid purple;
}
#wrapper > *{
display: inline-block;
}
#left {
position: relative;
width: 30vw;
height: 100px;
background: green;
}
#right {
position: relative;
width: 65vw;
height: 100px;
background: navy;
}
#open-close {
position: absolute;
width: 10px;
height: 10px;
margin-top: 5px;
margin-left: 5px;
background: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="left"></div>
<div id="right">
<div id="open-close"></div>
</div>
</div>