如何在HTML中实现动态javascript背景
如何在HTML中实现动态javascript背景
提问于 2022-02-08 05:06:16
我正在尝试做一个像https://benscott.dev使用的动画背景。我甚至似乎找不到他的画布元素的自结束标记，所以老实说，我不确定我需要做什么来完成他在这里所做的事情。我肯定我错过了一些简单的东西，我只是找不到。我已经实现了引导，是导致问题的原因吗？
const canvasDotsBg = function () {
const canvas = document.querySelector('.canvas-2'),
ctx = canvas.getContext('2d'),
colorDot = [
'rgb(81, 162, 233)',
'rgb(81, 162, 233)',
'rgb(81, 162, 233)',
'rgb(255, 77, 90)',
], // 75% of dots are blue. 25% pink
color = 'rgb(81, 162, 233)';
// ctx.globalAlpha = 0.8;
canvas.width = document.body.scrollWidth;
canvas.height = window.innerHeight;
canvas.style.display = 'block';
// ctx.fillStyle = colorDot;
// ctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
ctx.lineWidth = 0.3;
ctx.strokeStyle = color;
let mousePosition = {
x: (30 * canvas.width) / 100,
y: (30 * canvas.height) / 100,
};
const windowSize = window.innerWidth;
let dots;
if (windowSize > 1600) {
dots = {
nb: 100,
distance: 0,
d_radius: 0,
array: [],
};
} else if (windowSize > 1300) {
dots = {
nb: 75,
distance: 0,
d_radius: 0,
array: [],
};
} else if (windowSize > 1100) {
dots = {
nb: 50,
distance: 0,
d_radius: 0,
array: [],
};
} else if (windowSize > 800) {
dots = {
nb: 1,
distance: 0,
d_radius: 0,
array: [],
};
ctx.globalAlpha = 0;
} else if (windowSize > 600) {
dots = {
nb: 1,
distance: 0,
d_radius: 0,
array: [],
};
ctx.globalAlpha = 0;
} else {
dots = {
nb: 1,
distance: 0,
d_radius: 0,
array: [],
};
ctx.globalAlpha = 0;
}
// decided to turn off connecting dots under 1100px
// } else if (windowSize > 650) {
// dots = {
// nb: 400,
// distance: 50,
// d_radius: 185,
// array: [],
// };
// } else if (windowSize > 500) {
// dots = {
// nb: 325,
// distance: 45,
// d_radius: 170,
// array: [],
// };
// } else {
// dots = {
// nb: 270,
// distance: 45,
// d_radius: 140,
// array: [],
// };
// }
function Dot() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.vx = -0.5 + Math.random();
this.vy = -0.5 + Math.random();
this.radius = Math.random() * 1.5;
// this.colour = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
this.colour = colorDot[Math.floor(Math.random() * colorDot.length)];
}
Dot.prototype = {
create: function () {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
// ctx.fillStyle = this.colour;
// meed to acount for scroll height since the bg is static and uses mouse position
const top =
(window.pageYOffset || document.scrollTop) - (document.clientTop || 0);
// make the dot colour fade out the further they are from the mouse
const dotDistance =
((this.x - mousePosition.x) ** 2 +
(this.y - mousePosition.y + top) ** 2) **
0.5;
const distanceRatio = dotDistance / (windowSize / 2);
// this chops the bracket off the rgb colour and ads an opacity
ctx.fillStyle = this.colour.slice(0, -1) + `,${1 - distanceRatio})`;
// ctx.fillStyle = this.colour;
ctx.fill();
},
animate: function () {
// dont animate the first dot, it will follow mouse
for (let i = 1; i < dots.nb; i++) {
const dot = dots.array[i];
if (dot.y < 0 || dot.y > canvas.height) {
dot.vx = dot.vx;
dot.vy = -dot.vy;
} else if (dot.x < 0 || dot.x > canvas.width) {
dot.vx = -dot.vx;
dot.vy = dot.vy;
}
dot.x += dot.vx;
dot.y += dot.vy;
}
},
line: function () {
for (let i = 0; i < dots.nb; i++) {
for (let j = 0; j < dots.nb; j++) {
const i_dot = dots.array[i];
const j_dot = dots.array[j];
if (
i_dot.x - j_dot.x < dots.distance &&
i_dot.y - j_dot.y < dots.distance &&
i_dot.x - j_dot.x > -dots.distance &&
i_dot.y - j_dot.y > -dots.distance
) {
if (
i_dot.x - mousePosition.x < dots.d_radius &&
i_dot.y - mousePosition.y < dots.d_radius &&
i_dot.x - mousePosition.x > -dots.d_radius &&
i_dot.y - mousePosition.y > -dots.d_radius
) {
ctx.beginPath();
ctx.moveTo(i_dot.x, i_dot.y);
ctx.lineTo(j_dot.x, j_dot.y);
// make the fill colour fade out the further you are from the mouse
const dotDistance =
((i_dot.x - mousePosition.x) ** 2 +
(i_dot.y - mousePosition.y) ** 2) **
0.5;
let distanceRatio = dotDistance / dots.d_radius;
// make it so it doesnt fade out completely
distanceRatio -= 0.3;
if (distanceRatio < 0) {
distanceRatio = 0;
}
ctx.strokeStyle = `rgb(81, 162, 233, ${1 - distanceRatio})`;
ctx.stroke();
ctx.closePath();
}
}
}
}
},
};
function createDots() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < dots.nb; i++) {
dots.array.push(new Dot());
var dot = dots.array[i];
dot.create();
}
// first dot to be relativley large
dots.array[0].radius = 1.5;
// first dot to be blue
dots.array[0].colour = '#51a2e9';
// dot.line();
dot.animate();
}
// window.onmousemove = function (parameter) {
// mousePosition.x = parameter.pageX;
// mousePosition.y = parameter.pageY;
// // sometimes if the mouse is off screen on refresh, it bugs out
// try {
// // want the first dot to follow the mouse
// dots.array[0].x = parameter.pageX;
// dots.array[0].y = parameter.pageY;
// } catch {
// //
// }
// };
window.onscroll = function (parameter) {
mousePosition.x = window.innerWidth / 2;
mousePosition.y = window.innerHeight / 2;
const top =
(window.pageYOffset || document.scrollTop) - (document.clientTop || 0);
mousePosition.y += top;
// console.log(top);
// console.log(mousePosition.x);
};
// mousePosition.x = window.innerWidth / 2;
// mousePosition.y = window.innerHeight / 2;
const draw = setInterval(createDots, 1000 / 30);
window.onresize = function () {
clearInterval(draw);
canvasDotsBg();
// console.log('yoza');
};
};
export default canvasDotsBg;@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
header {
animation: 1s ease-out 0s 1 slideInFromLeft;
background: #333;
padding: 30px;
}
html {
scroll-behavior: smooth;
}
a {
color:rgb(0, 255, 234);
text-decoration: none;
font-family: FoundrySterlingOT3W03-Bold,FoundrySterlingOT3W10-Bold,Arial,Helvetica,sans-serif;
font-weight: 900;
right: 0px;
}
a:hover {
color: white;
transform: scale(1.2);
text-decoration: none;
}
.header {
background: rgba(0, 0, 0, 0.2);
position: fixed;
width: 100%;
margin-top: -20px;
max-height: 82px;
}
.linkedin {
width: 40px;
height: 40px;
margin-top: -7px;
}
.intro {
margin-top: 400px;
text-align: center;
font-family: montserrat, sans-serif;
color: white;
font-size: xx-large;
}
#kevin {
color: rgb(0, 255, 234);
}
#resume {
margin-left: auto;
margin-right: auto;
display: flex;
margin-top: 20px;
height: 50px;
width: 130px;
font-size: large;
border-width: 3px;
border-color: rgb(0, 255, 234);
background-color: transparent;
color: white;
padding: 0px;
line-height: 45px;
justify-content: center;
font-family: montserrat, sans-serif;
}
#resume:hover {
transform: scale(1.1);
color:rgb(0, 255, 234);
}
.skills {
justify-content: center;
list-style-type: none;
text-align: center;
left: 100px;
padding: 10px;
margin-top: 250px;
}
li {
margin: 20px;
color: white;
font-family: montserrat, sans-serif;
font-size: xx-large;
}
.about {
margin-top: 800px;
color: white;
font-family: montserrat, sans-serif;
font-size: xx-large;
text-align: left;
justify-content: center;
}
.contact {
margin-top: 920px;
color: white;
font-size: xx-large;
font-family: montserrat, sans-serif;
text-align: center;
margin-bottom: 450px;
}
#about-scroll {
margin-top: 500px;
}
#contact-scroll {
margin-top: 920px;
}<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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">
<script src="https://raw.githubusercontent.com/bscottnz/portfolio-site/main/src/bgCanvas.js" defer="defer"></script>
</head>
<div class="container-fluid">
<header id="home">
<nav position: fixed; class="navbar navbar-expand-xxl navbar-dark ";>
<a href="https://www.linkedin.com/in/kward937"><img class="linkedin" src="https://cdn-icons-png.flaticon.com/512/174/174857.png"></a>
<a href=#top>Home</a>
<a href=#skill-scroll>Skills</a>
<a href=#about-scroll>About</a>
<a href=#contact-scroll>Contact</a>
</nav></div>
<link rel="stylesheet" href="Portfolio.css">
<body>
<div class="canvas">
<canvas class="canvas-2" width="1903" height="937" style="display: block;">
</div>
回答 1
Stack Overflow用户
发布于 2022-02-08 13:16:48
当我还在学习的时候我做了这个项目，我不再需要它了，但是我希望它能对你有所帮助
P.S: GL HF ^_^
const menu_button = document.querySelector(".menu-button");
const container = document.querySelector(".container");
const menu = document.querySelector(".menu");
const navbar = document.querySelector(".navbar");
const Top = document.querySelector("html");
const info = document.querySelector(".info-block");
const more = document.querySelector(".more-block");
const service = document.querySelector(".service-block");
const contacts = document.querySelector(".footer");
const bar = document.getElementById("indicator");
menu_button.addEventListener("click", () => {
menu_button.classList.toggle("active");
menu.classList.toggle("show-menu");
});
function toInfo(){
info.scrollIntoView({behavior: "smooth", block: "start"});
}
function toMore(){
more.scrollIntoView({behavior: "smooth", block: "start"});
}
function toServices(){
service.scrollIntoView({behavior: "smooth", block: "start"});
}
function toContacts(){
contacts.scrollIntoView({behavior: "smooth", block: "start"});
}
window.addEventListener('scroll', function(){
var y = window.scrollY;
if(y > 50){
navbar.style.cssText = "height: 55px;";
menu.style.cssText = "padding-top: 60px;";
bar.style.cssText = "top: 55px;";
}
else{
navbar.style.cssText = "height: 75px;";
menu.style.cssText = "padding-top: 80px;";
bar.style.cssText = "top: 75px;";
}
})
window.addEventListener('scroll', function(){
var y = window.scrollY;
if(y > 1600){
service.style.cssText = "transform: translateX(0);opacity: 1;";
}
else{
service.style.cssText = "transform: translateX(400px);opacity: 0;";
}
})
window.addEventListener('scroll', function(){
var y = window.scrollY;
if(y > 650){
more.style.cssText = "transform: translateX(0);opacity: 1;";
}
else{
more.style.cssText = "transform: translateX(-400px);opacity: 0;";
}
})
window.onscroll = function() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
bar.style.height = scrolled + "%";
};*{
font-family: consolas;
}
body{
margin: 0;
padding: 0;
box-sizing: border-box;
margin-top: 75px;
display: flex;
justify-content: center;
flex-direction: column;
overflow-x: hidden;
background-color: white);
}
.progress-bar{
position: fixed;
width: 5px;
left: 0px;
transition: .5s;
background: linear-gradient(to right, #008AFF, #00FFE7);
z-index: 999;
animation: animate_bar 5s infinite linear;
}
@keyframes animate_bar{
0%,100%{
filter: hue-rotate(0deg);
}
50%{
filter: hue-rotate(360deg);
}
}
.navbar{
top: 0;
width: 90%;
height: 75px;
display: flex;
position: fixed;
padding: 0 5%;
transition: .5s;
align-items: center;
background-color: white;
z-index: 999;
border-bottom: 4px solid black;
}
.logo{
font-size: 48px;
}
.logo-link{
text-decoration-line: none;
color: black;
}
.menu-button{
position: fixed;
width: 2rem;
height: 2rem;
right: 5%;
display: flex;
align-items: center;
justify-content: flex-end;
cursor: pointer;
z-index: 9;
}
.bar{
width: 2rem;
height: 1.5px;
background-color: #000;
transition: .5s;
}
.bar:before,
.bar:after{
content: "";
position: absolute;
width: inherit;
height: inherit;
background-color: #000;
transition: .5s;
}
.bar:before{
transform: translateY(-9px);
}
.bar:after{
transform: translateY(9px);
}
.menu-button.active .bar{
transform: rotate(360deg);
background-color: transparent;
}
.menu-button.active .bar:before{
transform: translateY(0) rotate(45deg);
}
.menu-button.active .bar:after{
transform: translateY(0) rotate(-45deg);
}
.menu{
position: fixed;
width: 20%;
right: 0;
top: 0;
padding-top: 75px;
height: 100vh;
display: flex;
transition: .5s;
background-color: #555;
transform: translateX(100%);
border-left: 2px solid #000;
}
.show-menu{
transform: translateX(0);
}
.menu ul{
list-style: none;
width: 100%;
padding: 0;
margin: 0;
}
.menu-link{
width: 100%;
text-decoration: none;
padding: 0.7rem 0 0.7rem 2rem;
display: block;
color: #000;
font-size: 1.2rem;
transition: 0.5s;
border-bottom: 2px solid #000;
color: white;
cursor: pointer;
}
.menu-link:hover{
border-color: red;
}
.container{
position: relative;
transition: .5s;
width: 90%;
margin: 0 auto;
}
.margin-right{
transform: translateX(-15%);
width: 65%;
}
.block{
padding: 5rem;
margin: 2rem 0;
color: white;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.block > *{
margin: 2rem;
}
.top-block{
background-image: url("https://wallpapercave.com/wp/wp2639558.jpg");
animation: anim_left .5s 1 linear;
}
@keyframes anim_left{
0%{
transform: translateX(-400px);
opacity: 0;
}
}
.info-block{
background-image: url("https://wallpapercave.com/wp/wp2639574.jpg");
animation: anim_right 1s 1 linear;
}
@keyframes anim_right{
0%,50%{
transform: translateX(400px);
opacity: 0;
}
100%{
transform: translateX(0);
opacity: 1;
}
}
.more-block{
background-image: url("https://wallpapercave.com/wp/wp4695971.jpg");
display: flex;
transition: .5s;
justify-content: center;
flex-wrap: wrap;
opacity: 0;
transform: translateX(-400px);
}
.more-title{
width: 100%;
font-size: 46px;
letter-spacing: .75rem;
margin: 0;
}
.more-category-block{
width: 260px;
padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border: 2px solid white;
background-color: rgba(0, 0, 0, .75);
}
.more-img{
position: relative;
width: 40%;
}
.service-block{
background-image: url("https://wallpapercave.com/wp/wp5412909.jpg");
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: 5rem 0;
transition: .5s;
opacity: 0;
transform: translateX(-400px);
}
.service-title{
width: 100%;
font-size: 46px;
letter-spacing: .75rem;
margin: 0;
}
.service-category-block{
width: 320px;
margin: 1rem;
border: 2px solid white;
display: flex;
justify-content: center;
flex-direction: column;
background-color: rgba(0, 0, 0, .75);
}
.pro:before{
position: absolute;
width: 5rem;
height: 5rem;
border: 2px solid white;
background-color: black;
border-radius: 50%;
font-size: 26px;
color: red;
font-weight: 600;
text-align: center;
line-height: 5rem;
}
.pro:before{
content: "-25%";
transform: translateX(270px) translateY(-340px) rotate(-7deg);
}
.service-list{
list-style: none;
line-height: 1.5;
}
.service-name{
font-size: 24px;
margin: 1rem;
}
.sub-service-name{
margin: 0;
font-size: 14px;
}
.text-center{
text-align: center;
}
.yes:before{
content: "✔";
position: absolute;
transform: translateX(-1.4rem);
color: green;
}
.no:before{
content: "✘";
position: absolute;
transform: translateX(-1.4rem);
color: red;
}
.price{
font-size: 24px;
}
.btn{
outline: none;
background-color: transparent;
border: 1px solid white;
color: white;
padding: 1rem 2rem;
font-size: 16px;
transition: .5s;
cursor: pointer;
margin: 0 2rem;
}
.btn:hover{
color: black;
border-color: black;
background-color: white;
}
.btn-center{
margin: 1rem 5rem;
}
.footer{
position: relative;
width: 100%;
bottom: 0;
background-image: url("https://wallpapercave.com/wp/wp4978922.jpg");
background-position: center;
color: white;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.contacts{
height: 100%;
display: block;
margin: 0 4rem;
}
.contact-list{
list-style: none;
padding: 0;
line-height: 1.75;
}<div class="progress-bar" id="indicator"></div>
<div class="navbar">
<div class="logo"><a href="index.html" class="logo-link">Wolf Gym</a></div>
<div class="menu-button">
<div class="bar"></div>
</div>
<div class="menu">
<ul>
<li><a href="" class="menu-link">Home</a></li>
<li><a class="menu-link" onclick="toInfo()">About us</a></li>
<li><a class="menu-link" onclick="toMore()">Why us</a></li>
<li><a class="menu-link" onclick="toServices()">Services</a></li>
<li><a class="menu-link" onclick="toContacts()">Contacts</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="block top-block">
<p>Welcome to the official "Wolf Gym" website.</p>
<button class="btn" onclick="toServices()">View proposals</button>
</div>
<div class="block info-block">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus saepe sed provident odio accusamus, molestias corrupti tenetur iste. Eligendi et, quo voluptates adipisci quam suscipit maiores eum dolor porro praesentium.</p>
<p>Lorem :</p>
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
</ul>
<button class="btn" onclick="alert('Site-ul se afla in proces de creare!')">More</button>
</div>
<div class="block more-block">
<p class="text-center more-title">Why us</p>
<div class="more-category-block">
<img src="experience.png" class="more-img">
<p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Reiciendis necessitatibus quos unde. Illo ut maxime laudantium maiores numquam totam natus vitae voluptate, ducimus dolorem facere consectetur mollitia porro temporibus repudiandae.</p>
</div>
<div class="more-category-block">
<img src="muscle.png" class="more-img">
<p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Reiciendis necessitatibus quos unde. Illo ut maxime laudantium maiores numquam totam natus vitae voluptate, ducimus dolorem facere consectetur mollitia porro temporibus repudiandae.</p>
</div>
<div class="more-category-block">
<img src="growth.png" class="more-img">
<p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Reiciendis necessitatibus quos unde. Illo ut maxime laudantium maiores numquam totam natus vitae voluptate, ducimus dolorem facere consectetur mollitia porro temporibus repudiandae.</p>
</div>
<div class="more-category-block">
<img src="muscle1.png" class="more-img">
<p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Reiciendis necessitatibus quos unde. Illo ut maxime laudantium maiores numquam totam natus vitae voluptate, ducimus dolorem facere consectetur mollitia porro temporibus repudiandae.</p>
</div>
</div>
<div class="block service-block basic">
<p class="text-center service-title">Our offers</p>
<div class="service-category-block">
<p class="text-center service-name">Basic (30 days)</p>
<p class="text-center sub-service-name">This service includes :</p>
<ul class="service-list">
<li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li class="no">Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
<li class="no">Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
<li class="no">Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
<li class="no">Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
</ul>
<p class="price text-center">200 mdl</p>
<button class="btn btn-center" onclick="alert('Site-ul se afla in proces de creare!')">Buy</button>
</div>
<div class="service-category-block pro">
<p class="text-center service-name">Pro (365 days)</p>
<p class="text-center sub-service-name">This service includes :</p>
<ul class="service-list">
<li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
</ul>
<p class="price text-center">6 500 mdl</p>
<button class="btn btn-center" onclick="alert('Site-ul se afla in proces de creare!')">Buy</button>
</div>
</div>
</div>
<div class="footer">
<div class="contacts">Contacte</div>
<ul class="contact-list">
<li>Adresa de email : wolf@gym.com</li>
<li>Tel. : +373 555 22 555</li>
<li>Fix : 022 555 222</li>
<li>Physiz addresses : 3370 Henry Ford Avenue</li>
</ul>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71028850
复制相关文章
相似问题
腾讯云开发者
