I made this, I would like this to be the background of the site. it is currently scalable, because the number of hexagons is calculated during a refresh. However, if you enlarge the page, or zoom it out. The number of hexagon is no longer sufficient and is not recalculated automatically. How can I automatically scale the hex count based on page size, even if it changes?
Each hexagon (which is a div) in a line has the class name "hexagon" they are all in a "row" div, there are as many as the number of rows. And these lines are in a "container" div
I would also like to add information over the background (text, image, etc.) I need more than one screen, so I would like to be able to scroll down but that this background is fixed to it (or goes down the same size as the rest by having a straight end), that it is not affected by the scroll.
Thanks in advance, I really need help
//js
function wndsize(){
var w = 0;var h = 0;
//IE
if(!window.innerWidth){
if(!(document.documentElement.clientWidth == 0)){
//strict mode
w = document.documentElement.clientWidth;h = document.documentElement.clientHeight;
} else{
//quirks mode
w = document.body.clientWidth;h = document.body.clientHeight;
}
} else {
//w3c
w = window.innerWidth;h = window.innerHeight;
}
return {width:w,height:h};
}
var wnc = Math.ceil(wndsize().width/100);
var hnc = Math.ceil(wndsize().height/84);
for (let i = 0; i < hnc; i ) {
let div = document.createElement('div');
div.className = 'row';
var divs = [];
for (let i = 0; i < wnc; i ) {
divs[i] = document.createElement('div');
divs[i].className = 'hexagon';
div.appendChild(divs[i]);
}
document.getElementsByClassName('container')[0].appendChild(div);
} /*css*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
cursor: crosshair;
}
{
scrollbar-width: none;
}
::-webkit-scrollbar {
width: 0px;
}
body{
background: #000;
min-height: 100vh;
}
.container{
position: relative;
overflow: hidden;
height: 100vh;
animation: animate 3s linear infinite;
}
@keyframes animate{
0%{
filter: hue-rotate(0deg);
}
100%{
filter: hue-rotate(360deg);
}
}
.row{
display: inline-flex;
margin-left: -50px;
margin-top: -32px;
overflow: hidden;
}
.row:nth-child(even){
margin-left: 1px;
}
.hexagon{
position: relative;
height: 110px;
width: 100px;
background: #111;
margin: 1px;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
transition: 0.5s;
}
.hexagon:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
pointer-events: none;
background: rgba(255, 255, 255, 0.02);
}
.hexagon:hover{
transition: 0s;
background: #0f0;
} <!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div >
</div>
<script src="responsive background.js"></script>
</body>
</html>CodePudding user response：
You should use a function that's attached to the window resize event and repaint the hexagons on resize. I added such a function below.
I went ahead an delete the checks for older browsers for brevity assuming IE 8 support is not needed. window.innerWidth support is pretty good these days (https://caniuse.com/mdn-api_window_innerwidth).
I also added a content div. I disabled mouse interaction so the hover state is sent to the background layer. This comes with some consequences such as: links will not work in the content div. If you want to have both, hover effect and clickable links I guess the only solution would be to use JS to measure mouse position and use this information to light up the hexagons.
Happy coding!
//js
const container = document.getElementsByClassName('container')[0];
const resizeHandler = () => {
let wnc = Math.ceil(window.innerWidth/100);
let hnc = Math.ceil(window.innerHeight/84);
// remove all divs from container
let child = container.lastElementChild;
while (child) {
container.removeChild(child);
child = container.lastElementChild;
}
for (let i = 0; i < hnc; i ) {
let div = document.createElement('div');
div.className = 'row';
let divs = [];
for (let i = 0; i < wnc; i ) {
divs[i] = document.createElement('div');
divs[i].className = 'hexagon';
div.appendChild(divs[i]);
}
document.getElementsByClassName('container')[0].appendChild(div);
}
}
resizeHandler();
window.addEventListener('resize', resizeHandler);/*css*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
cursor: crosshair;
}
{
scrollbar-width: none;
}
::-webkit-scrollbar {
width: 0px;
}
body{
background: #000;
min-height: 100vh;
}
.container{
position: fixed;
overflow: hidden;
height: 100vh;
animation: animate 3s linear infinite;
}
.content {
position: relative;
font-family: sans-serif;
font-size: 60px;
color: white;
min-height: 300vh;
pointer-events: none;
}
@keyframes animate{
0%{
filter: hue-rotate(0deg);
}
100%{
filter: hue-rotate(360deg);
}
}
.row{
display: inline-flex;
margin-left: -50px;
margin-top: -32px;
overflow: hidden;
}
.row:nth-child(even){
margin-left: 1px;
}
.hexagon{
position: relative;
height: 110px;
width: 100px;
background: #111;
margin: 1px;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
transition: 0.5s;
}
.hexagon:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
pointer-events: none;
background: rgba(255, 255, 255, 0.02);
}
.hexagon:hover{
transition: 0s;
background: #0f0;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div >
</div>
<div >SCROLL ME</div>
</body>
</html>