Develop Reference

CSS Animation to rotate element 360 degress on it self

I need help!
Here is my codepen
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<div class="container">
<h1>Custom Cursor</h1>
<div class="box">
</div>
</div>
</div>
<div class="btn">
<span style="--i:1">J</span>
<span style="--i:2">o</span>
<span style="--i:3">u</span>
<span style="--i:4">e</span>
<span style="--i:5">r</span>
<span style="--i:6"> </span>
<span style="--i:7">l</span>
<span style="--i:8">a</span>
<span style="--i:9"> </span>
<span style="--i:10">v</span>
<span style="--i:11">i</span>
<span style="--i:12">d</span>
<span style="--i:13">é</span>
<span style="--i:14">o</span>
<span style="--i:15"> </span>
<span style="--i:16">-</span>
<span style="--i:17"> </span>
<span style="--i:18">J</span>
<span style="--i:19">o</span>
<span style="--i:20">u</span>
<span style="--i:21">e</span>
<span style="--i:22">r</span>
<span style="--i:23"> </span>
<span style="--i:24">l</span>
<span style="--i:25">a</span>
<span style="--i:26"> </span>
<span style="--i:27">v</span>
<span style="--i:28">i</span>
<span style="--i:29">d</span>
<span style="--i:30">é</span>
<span style="--i:31">o</span>
<span style="--i:32"> </span>
<span style="--i:33">-</span>
<span style="--i:34"> </span>
<span style="--i:35">J</span>
<span style="--i:36">o</span>
<span style="--i:37">u</span>
<span style="--i:38">e</span>
<span style="--i:39">r</span>
<span style="--i:40"> </span>
<span style="--i:41">l</span>
<span style="--i:42">a</span>
<span style="--i:43"> </span>
<span style="--i:44">v</span>
<span style="--i:45">i</span>
<span style="--i:46">d</span>
<span style="--i:47">é</span>
<span style="--i:48">o</span>
<span style="--i:49"> </span>
<span style="--i:50">-</span>
<span style="--i:51"> </span>
</div>
<div class="triangle"></div>
<div class="circle"></div>
body {
background: red;
height: 100vh;
font-family: Bebas neue;
display: flex;
justify-content: center;
align-items: center;
}
h1 {
font-family: montserrat;
font-size: 40px;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: white;
flex-direction: column;
}
.box {
width: 800px;
height: 450px;
background-color: pink;
border: 2px solid red;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.box:hover {
cursor: none;
}
.block {
display: block !important;
opacity: 1 !important;
}
.btn {
width: 138px;
height: 138px;
font-weight: bold;
font-size: 30px;
position: absolute;
animation: loading 6s linear infinite;
opacity: 0;
}
.triangle {
height: 0;
width: 0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 60px solid white;
transform: translateX(-25%) translateY(-50%);
display: none;
position: fixed;
pointer-events: none;
left: 0;
top: 0;
}
.circle {
border:1px solid white;
width: 138px;
height: 138px;
border-radius: 50%;
/*transform: translateX(-142.5%) translateY(-0.5%);*/
transform: translateX(-45%) translateY(-50%);
display: none;
position: fixed;
pointer-events: none;
left: 0;
top: 0;
}
.btn span {
position: absolute;
left: 50%;
transform-origin: 0 120px ;
transform: translateX(0%) translateY(0%) rotateZ(calc(var(--i) * 7.05deg)); /* 360 / nbr de lettre */
color: white;
position: fixed;
pointer-events: none;
top: 50px;
}
#keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
var box = document.querySelector(".box");
var btn = document.querySelector(".btn");
var circle = document.querySelector(".circle");
var triangle = document.querySelector(".triangle");
document.addEventListener("mousemove", function (e) {
var x = e.clientX;
var y = e.clientY;
//triangle.style.transform = `translate3d(calc(${e.clientX}px - 50%), calc(${e.clientY}px - 50%), 0)`;
triangle.style.left = x + "px";
triangle.style.top = y + "px";
});
document.addEventListener("mousemove", function (e) {
var x = e.clientX;
var y = e.clientY;
// circle.style.transform = `translate3d(calc(${e.clientX}px - 50%), calc(${e.clientY}px - 50%), 0)`;
circle.style.left = x + "px";
circle.style.top = y + "px";
});
document.addEventListener("mousemove", function (e) {
var x = e.clientX;
var y = e.clientY;
// btn.style.transform = `translate3d(calc(${e.clientX}px - 50%), calc(${e.clientY}px - 50%), 0)`;
btn.style.left = x + "px";
btn.style.top = y + "px";
});
box.addEventListener("mouseenter", () => {
triangle.classList.add("block");
circle.classList.add("block");
btn.classList.add("block");
});
box.addEventListener("mouseleave", () => {
triangle.classList.remove("block");
circle.classList.remove("block");
btn.classList.remove("block");
});
I want to be able to hide my cursor when I hover over a zone
and when I am on this zone (in the codepen this zone is the div .box)
I want to make a custom cursor appear.
The complexity comes from the fact that I want my triangle, circle and rounded text elements to be aligned at their centre. I also want the text to rotate on itself.
I think I'm not far off but the text turns with an offset
Can you help me?
thank you

https://codepen.io/jipe974/pen/abjxoNy
I find the solution thanks all
var box = document.querySelector(".box");
var innerbox = document.querySelector(".innerbox");
var box2 = document.querySelector(".box2");
var cursor = document.querySelector(".cursor");
var cursorinner = document.querySelector(".cursor2");
var circle = document.querySelector("#circle");
var triangle = document.querySelector("#triangle");
document.addEventListener("mousemove", function (e) {
var x = e.clientX;
var y = e.clientY;
cursor.style.transform = `translate3d(calc(${e.clientX}px - 50%), calc(${e.clientY}px - 50%), 0)`;
cursorinner.style.left = x + "px";
cursorinner.style.top = y + "px";
circle.style.left = x + "px";
circle.style.top = y + "px";
triangle.style.left = x + "px";
triangle.style.top = y + "px";
});
document.addEventListener("mousedown", function () {
cursorinner.classList.add("cursorinnerhover");
circle.classList.add("click");
triangle.classList.add("click");
});
document.addEventListener("mouseup", function () {
cursorinner.classList.remove("cursorinnerhover");
circle.classList.remove("click");
triangle.classList.remove("click");
});
box.addEventListener("mouseenter", () => {
cursor.classList.add("block");
cursorinner.classList.add("block");
});
box.addEventListener("mouseleave", () => {
cursor.classList.remove("block");
cursorinner.classList.remove("block");
});
innerbox.addEventListener("mouseover", () => {
cursor.classList.add("hover");
});
innerbox.addEventListener("mouseleave", () => {
cursor.classList.remove("hover");
});
box2.addEventListener("mouseenter", () => {
circle.classList.add("opacity");
triangle.classList.add("opacity");
});
box2.addEventListener("mouseleave", () => {
circle.classList.remove("opacity");
triangle.classList.remove("opacity");
});
#import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
body {
overflow-x: hidden;
background:red;
}
h1 {
font-family: montserrat;
font-size: 40px;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 1000px;
flex-direction: column;
}
.innerbox {
width: 500px;
height: 350px;
background-color: blue;
border-radius: 10px;
}
.innerbox:hover {
background-color: white;
}
.box {
width: 800px;
height: 450px;
background-color: pink;
display: flex;
justify-content: center;
align-items: center;
}
.box:hover, .box2:hover {
cursor: none;
}
.box2 {
width: 800px;
height: 450px;
background-color: aqua;
}
.cursor {
width: 50px;
height: 50px;
border-radius: 100%;
border: 1px solid black;
transition: all 200ms ease-out;
position: fixed;
pointer-events: none;
left: 0;
top: 0;
transform: translate(calc(-50% + 15px), -50%);
display: none;
}
.cursor2 {
width: 20px;
height: 20px;
border-radius: 100%;
background-color: black;
opacity: 0.3;
position: fixed;
transform: translate(-50%, -50%);
pointer-events: none;
transition: width 0.3s, height 0.3s, opacity 0.3s;
display: none;
}
.hover {
background-color: red;
opacity: 0.5;
}
.cursorinnerhover {
width: 50px;
height: 50px;
opacity: 0.5;
}
.block {
display: block !important;
}
.opacity {
opacity: 1 !important;
}
#circle {
transform: translate(-49.9%, -4.5%);
position: fixed;
width: 100%;
padding-bottom: 100%;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
#triangle {
transform: translate(-1%, -0.7%);
position: fixed;
width: 100%;
padding-bottom: 100%;
overflow: hidden;
opacity: 0;
pointer-events: none;
fill: white;
}
#circle text {
font-family: "Helvetica Neue", Arial;
font-size: 24px;
font-weight: bold;
}
#circle circle {
stroke: white;
fill: none;
}
#circle svg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 240px;
-webkit-animation-name: rotate;
-moz-animation-name: rotate;
-ms-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-ms-animation-duration: 5s;
-o-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(360deg);
}
to {
-moz-transform: rotate(0);
}
}
#-ms-keyframes rotate {
from {
-ms-transform: rotate(360deg);
}
to {
-ms-transform: rotate(0);
}
}
#-o-keyframes rotate {
from {
-o-transform: rotate(360deg);
}
to {
-o-transform: rotate(0);
}
}
#keyframes rotate {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0);
}
}
.click {
fill: #E1E1E1!important;
stroke: #E1E1E1!important;
stroke-width:2;
}
<div class="container">
<h1>Custom Cursor</h1>
<div class="box">
<div class="innerbox">
</div>
</div>
<div>
<video class="box2" controls loop id="video-background" muted>
<source src="https://media-us-westslateappcom.s3.us-west-1.amazonaws.com/madcowfilms/production/clips/514ebae1-ebbb-4477-addd-d52a30cd28c1-1280x720.2500.webm" type="video/webm">
</div>
</div>
<div class="cursor"></div>
<div class="cursor2"></div>
<div id="circle">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<defs>
<path id="circlePath" d=" M 150, 150 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 " />
</defs>
<circle cx="150" cy="150" r="50" fill="none" />
<g>
<use xlink:href="#circlePath" fill="none" />
<text fill="#fff">
<textPath xlink:href="#circlePath">Jouer la vidéo - Jouer la vidéo -
<textPath>
</text>
</g>
</svg>
</div>
<div id="triangle">
<svg>
<polygon points="45,22.5 22.5,0 22.5,45"/>
</svg>
</div>
but according to the screen I have the triangle that shifts

look at the solution you can maybe apply.
To start you needs to create parent div .cursor, which contains all your elements like .circle, .btn and .triangle.
<html lang="en">
<body>
<div class="container">
<h1>Custom Cursor</h1>
<div class="box"></div>
</div>
<div class="cursor">
<div class="circle"></div>
<div class="btn">
<!-- Your spans -->
</div>
<div class="triangle"></div>
</div>
</body>
</html>
This new div .cursor should contain new properties :
/* Parent box, contain triangle, btn and circle */
.cursor {
position: absolute;
display: flex;
/* Center triangle in the middle */
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
}
Then you should update properties of childs css, because they will take opacity and display from the parent.
/* Remove opacity and position absolute*/
.btn {
width: 138px;
height: 138px;
font-weight: bold;
font-size: 30px;
animation: loading 6s linear infinite;
}
/*
Remove height, left, top, display (block by parent)
change position to absolute
*/
.triangle {
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 60px solid white;
pointer-events: none;
position: absolute;
}
/*
Remove left, top, display (block by parent)
change position to absolute
*/
.circle {
border: 1px solid white;
width: 138px;
height: 138px;
border-radius: 50%;
pointer-events: none;
outline: 2px solid rgb(0, 255, 191);
position: absolute;
}
Like all elements are in the div .cursor, now we will only act on this one.
var box = document.querySelector(".box");
// Cursor box contain all child element, btn, circle, triangle
var cursor = document.querySelector(".cursor");
const halfSizeCircle = 138 / 2; // 69
box.addEventListener("mousemove", function (e) {
// Get coordinate middle of the mouse inside div .box
var [x, y] = [e.clientY - halfSizeCircle, e.clientX - halfSizeCircle];
cursor.style.top = x + "px";
cursor.style.left = y + "px";
});
// Remove class .block
box.addEventListener("mouseleave", () => cursor.classList.remove("block"));
// Add class .block
box.addEventListener("mouseenter", () => cursor.classList.add("block"));
Hope this solution will help you 🧙‍♂️.

Why is my hamburger menu not showing up on mobile?

On my phone, I can tap on where it should be and the dropdown menu appears, but for some reason the burger itself is invisible. When I view the website in mobile view on my desktop it's visible, so I'm very confused. I've looked all over for where it could possibly be hidden but I don't see anything. Any help is greatly appreciated. The website is linked below:
https://chassis.site/
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
//toggle nav
nav.classList.toggle('nav-active');
//animate links
navLinks.forEach((link, index) => {
if(link.style.animation){
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.5s ease fowards ${index / 7 + 1}s`;
}
});
//burger animation
burger.classList.toggle('toggle');
});
}
navSlide();
//sparkle
let index = 0,
interval = 1000;
const rand = (min, max) =>
Math.floor(Math.random() * (max - min + 1)) + min;
const animate = star => {
star.style.setProperty("--star-left", `${rand(-10, 100)}%`);
star.style.setProperty("--star-top", `${rand(-40, 80)}%`);
star.style.animation = "none";
star.offsetHeight;
star.style.animation = "";
}
for(const star of document.getElementsByClassName("magic-star")) {
setTimeout(() => {
animate(star);
setInterval(() => animate(star), 1000);
}, index++ * (interval / 3))
}
#import url('css.css');
:root {
--purple: rgb(123, 31, 162);
--violet: rgb(103, 58, 183);
--pink: rgb(244, 143, 177);
--white: rgb(190, 190, 190);
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#app {
background: #0a0a0a;
height: 100vh;
width: 100%;
margin: 0;
padding: 0;
display:inline-flex ;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(rgba(10, 10, 10, 0.5), rgba(0, 0, 0, 0.5)), repeating-linear-gradient(0, transparent, transparent 2px, black 3px, black 3px),
url('../images/37P86Mcp.png');
background-size: auto;
background-position: center;
z-index: 1;
}
/*--------------------------------------lines*/
hr.left {
display: block;
width: 30%;
height: 1px;
border: 0;
border-top: 2px solid rgb(190, 190, 190);
margin: 3em 0;
padding: 0;
}
hr.right {
display: block;
width: 30%;
height: 1px;
border: 0;
border-top: 2px solid rgb(190, 190, 190);
margin: 3em 0;
padding: 0;
}
/*--------------------------------------lines*/
/*--------------------------------------nav bar*/
nav{
display: flex;
position: fixed;
width: 100%;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-family: 'Fugaz One', cursive;
}
.nav-links{
display: flex;
justify-content: space-around;
width: 50%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: rgb(190, 190, 190);
text-decoration: none;
letter-spacing: 2px;
font-size: 20px;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 30px;
height: 3px;
background-color: rgb(190, 190, 190);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1230px){
.nav-links{
width: 70%;
}
}
#media screen and (max-width: 854px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 30vh;
width: 15em;
top: 8vh;
display: flex;
flex-direction: column;
align-items: center;
transform: translateX(100%);
transition: transform 0.4s ease-in;
}
.burger{
display: block;
padding: 0px 80px 0px 500px;
}
hr.left{
height: 0px;
width: 0%;
}
hr.right{
height: 0px;
width: 0%;
}
}
.nav-active{
transform: translateX(0%);
}
#keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1{
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px, -6px);
}
/*--------------------------------------nav bar*/
/*--------------------------------------sparkle*/
#keyframes background-pan {
from {
background-position: 0% center;
}
to {
background-position: -200% center;
}
}
#keyframes scale {
from, to {
transform: scale(0);
}
50% {
transform: scale(1);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
h1 {
color: white;
font-family: "Rubik", sans-serif;
font-size: clamp(2em, 2vw, 4em);
font-weight: 400;
margin: 0px;
padding: 20px;
text-align: center;
}
h1 > .magic {
display: inline-block;
position: relative;
}
h1 > .magic > .magic-star {
--size: clamp(20px, 1.5vw, 30px);
animation: scale 700ms ease forwards;
display: block;
height: var(--size);
left: var(--star-left);
position: absolute;
top: var(--star-top);
width: var(--size);
}
h1 > .magic > .magic-star > svg {
animation: rotate 1000ms linear infinite;
display: block;
opacity: 0.7;
}
h1 > .magic > .magic-star > svg > path {
fill: var(--white);
}
h1 > .magic > .magic-text {
animation: background-pan 3s linear infinite;
background: linear-gradient(
to right,
var(--purple),
var(--violet),
var(--pink),
var(--purple)
);
background-size: 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
white-space: nowrap;
font-size: 64px;
}
/*--------------------------------------sparkle*/
<!DOCTYPE html>
<html onclick="play()" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatibale" content="ie-edge">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/css.css">
<link href="https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap" rel="stylesheet">
<audio src="media/music.mp3"></audio>
<title>chassis.site</title>
<style type="text/css">
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<!-- nav-->
<nav>
<hr class="left"/>
<ul class="nav-links">
<li>Home</li>
<li>Services</li>
<li>Bio Page</li>
<li>Projects</li>
</ul>
<hr class="right"/>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<!-- nav-->
<audio id="audio" loop>
<source src="media/music.mp3" type="audio/mp3">
</audio>
<div id="app">
<div class="text">
<h1>
<span class="magic">
<span class="magic-star">
<svg viewBox="0 0 512 512">
<path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
</svg>
</span>
<span class="magic-star">
<svg viewBox="0 0 512 512">
<path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
</svg>
</span>
<span class="magic-star">
<svg viewBox="0 0 512 512">
<path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
</svg>
</span>
<span class="magic-text">chassis.site</span>
</span>
</h1>
</div>
</div>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/music.js"></script>
<script>/*music*/
var audio = document.getElementById("audio");
audio.volume = 0.1;
</script>
<script>/*music*/
function play() {
var audio = document.getElementById("audio");
audio.play();
}
</script>
</body>
</html>

padding: 0px 80px 0px 500px;
You have this css in your burger menu, and that 500px left padding is the issue.
Remove that padding and apply this css in place of that
margin-left: auto;
margin-right: 6rem;
margin-left will give you right floating then margin-right you can move your burger button as per your requirement however I am not sure where exactly you want to place your burger from right so you can adjust margin-right as you like.

On your media query
#media screen and (max-width: 854px){
.burger{
display: block;
padding: 0px 80px 0px 500px;
}
You are using padding to push your menu from the left. So any phone with a width smaller than 500px will not see it. Here's a quick solution to get you started.
#media screen and (max-width: 854px){
.burger{
display: block;
position: absolute;
top: 10px;
right: 15px;
}
Adjust the top and right values as needed.

I think the problem you are having is related to padding you put on .burger.
You should avoid using padding for alignment or any fixed value.
try something like this
#media screen and (max-width: 854px) {
.burger {
display: block;
margin: 0 24px 0 auto;
}
}

An initial test with responsive mode, using Safari on macOS shows the burger menu is slightly off screen, though when I tried on my iPhone it wasn't visible at all.
Plugging my phone into my computer, so I can use the console in Safari, I navigated down to where the burger is and I see for .burger:
padding: 0px 80px 0px 500px;
Commenting that out allows me to see the menu on my phone, suggesting that it is a sizing issue.
Based on my experience, you are probably better off positioning the burger menu using static or fixed positioning, relative to the top and right (for right hand-side menus) so that it works with any mobile screen width. Note, I am not a CSS expert, but this has worked for me.
I changed the definition of .burger to be as follows, based on the above comments, which worked for me:
.burger {
display: block;
position: absolute;
right: 20px;
}
There is no top position here since the parent is already offset from the top, so while we could set top: 0 it feels a little redundant.

Starting an animation when it is scrolled into view

I have 2 <hr> elements that are animated and move into close to each other. I want the animation to take place once the <hr> elements are in the viewport, instead of occurring right when the page is loaded. I have included my JavaScript code but this code didn't work; not sure if I'm using the right event.
'use strict';
const linebreak = document.querySelector('#hero--one');
const symbolContainer = document.querySelector('.header__container-symbol')
linebreak.addEventListener('scroll', function(e) {
e.preventDefault();
const containerCoords = symbolContainer.getBoundingClientRect();
symbolContainer.scrollIntoView({
behavior: 'smooth'
});
linebreak.classList.remove('hidden');
})
/* Lines and Diamond above title */
.header__container-symbol {
display: flex;
justify-content: center;
align-content: center;
background-color: rgba(25, 25, 25, 1);
}
.span-D {
align-self: center;
}
.hr-symbol {
width: 60rem;
display: inline-block;
height: 0.3rem;
background-color: #eee;
}
#hero--one {
margin-right: 3px;
animation: moveInLeftHr;
animation-duration: 2s;
}
#symbol {
font-size: 3rem;
}
#hero--two {
margin-left: 3px;
animation: moveInRightHr;
animation-duration: 2s;
}
#symbol {
color: #eee;
margin-right: 2rem;
margin-left: 2rem;
}
.hidden {
display: none;
}
/* End Diamon and Lines above title */
/* KeyFrames Animations */
#keyframes moveInLeftHr {
0% {
opacity: 0;
transform: translateX(-100px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
#keyframes moveInRightHr {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
<div class="header__container-symbol">
<span class="span-D"><hr class="hidden hr-symbol" id="hero--one"/></span>
<span id="symbol"> ⬙ </span>
<span class="span-D"><hr class="hidden hr-symbol" id="hero--two"/></span>
</div>

You can use the Intersection Observer API to detect when the element intersects with the viewport.
The threshold option is set to 1, meaning it will check for when the element is fully within the viewport.
A test div has been inserted at the top of the html to demonstrate the behavior.
'use strict';
const linebreak1 = document.querySelector('#hero--one');
const linebreak2 = document.querySelector('#hero--two');
const symbolContainer = document.querySelector('.header__container-symbol')
const observer = new IntersectionObserver((entries, observer) => {
if (!entries[0].isIntersecting) return;
linebreak1.classList.remove('hidden');
linebreak2.classList.remove('hidden');
}, { threshold: 1 });
observer.observe(symbolContainer);
/* Lines and Diamond above title */
.header__container-symbol {
display: flex;
justify-content: center;
align-content: center;
background-color: rgba(25, 25, 25, 1);
}
.span-D {
align-self: center;
}
.hr-symbol {
width: 60rem;
display: inline-block;
height: 0.3rem;
background-color: #eee;
}
#hero--one {
margin-right: 3px;
animation: moveInLeftHr;
animation-duration: 2s;
}
#symbol {
font-size: 3rem;
}
#hero--two {
margin-left: 3px;
animation: moveInRightHr;
animation-duration: 2s;
}
#symbol {
color: #eee;
margin-right: 2rem;
margin-left: 2rem;
}
.hidden {
display: none;
}
/* End Diamon and Lines above title */
/* KeyFrames Animations */
#keyframes moveInLeftHr {
0% {
opacity: 0;
transform: translateX(-100px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
#keyframes moveInRightHr {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
<div style="height: 500px;"></div>
<div class="header__container-symbol">
<span class="span-D"><hr class="hidden hr-symbol" id="hero--one"/></span>
<span id="symbol"> ⬙ </span>
<span class="span-D"><hr class="hidden hr-symbol" id="hero--two"/></span>
</div>

How can I make a button trigger a Javascript popup (Divi + ActiveCampaign)

I just got off support with ActiveCampaign and they said they couldn't provide me with code examples on how to add their modal pop-up forms to be triggered by wordpress buttons.
I found a few resources online but they are all slightly different than the functionality I'm looking for.
I already added the ActiveCampaign plugin to my wordpress site and there are two options of embedding the form within the site.
shortcode "[activeCampaign formId=1]" or
<script src="https://exampledomain.com/f/embed.php?id=1" type="text/javascript" charset="utf-8"></script>
I'm currently using the divi theme, and the buttons have sections for CSS ID's and CSS Classes.
so to summarize, I would like to be able to click a button and have the activecampaign modal form popup.
If you could show me how I can add code to the button and my site to trigger the modal popup that'd be amazing.
Let me know if you have any other information.
Thanks!

Sugesstion:
This involves DOM manipulation. create a css class called active which should be set to the form container to show. Here's an example:
var formToggle = document.getElementById("form-toggler");
var formContainer = document.querySelector(".form-container");
formToggle.addEventListener('click', function(){
// When you click the button, first check if the form is open
// so that you know if you should close or open
if(formContainer.classList.contains("active")){
// Form is currently open, because it has active as one of it's classes
// so remove active to hide it.
formContainer.classList.remove("active");
}else{
// Form is currently closed, because it does not have active as one of it's classes
// so add active to show it.
formContainer.classList.add("active");
}
});
.form-container{
width: 100%;
height: 100%;
min-height: 200px;
background-color: rgba(0,0,0,0.2);
display: none;
}
/* When form has active class, set display to block */
.form-container.active{
display: block !important;
}
<div class="form-container">
<!-- your Form Here -->
<h1>Yey, form is active!!</h1>
</div>
<button id="form-toggler">OpenForm<button>
This is just at the basic level of approaching your scenario. So you've got to work on your css to make your Modal cover the entire window and add a close button on it in case someone decides to close it.

Hey this should work for you also. Bear in mind there is some extra code you probably wont need all of it such as the animations but I will leave these in as they make the modal look a little slicker. You won't need bootstrap or any additional libraries for this code.
HTML:
<a id="gdx-lighbox-modal-unique-1" data-hover="true" type="button" class="gdx-lightbox-tooltip-open-modal lightbox-link gdx-lightbox-button" data-open="gdx-lighbox-modal-1">
Click Here
</a>
<div class="gdx-modal" id="gdx-lighbox-modal-1" data-animation="slideInOutLeft">
<div class="gdx-modal-dialog">
<header class="gdx-modal-header">
<a class="gdx-close-modal" aria-label="close modal" data-close="">✕</a>
</header>
<section class="gdx-modal-content">
//Form would go here instead of the image (image just an example)
<img src="https://gdxdesigns.com/wp-content/uploads/2020/11/little-frog.jpg"> </section>
<footer class="gdx-modal-footer"> <h3 class="gdx-modal-image-title"></h3></footer>
</div>
</div>
CSS:
/* RESET RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
--lightgray: #efefef;
--blue: steelblue;
--white: #fff;
--black: rgba(0, 0, 0, 0.8);
--bounceEasing: cubic-bezier(0.51, 0.92, 0.24, 1.15);
}
* {
padding: 0;
margin: 0;
}
.gdx-body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font: 16px/1.5 sans-serif;
}
.lightbox-link, a.lightbox-link {
cursor: pointer;
margin-left: 2.5%;
}
.gdx-lightbox-tooltip-open-modal img {
width: 20px;
height: 20px;
}
.gdx-lightbox-button {
padding: 10px 20px;
background: #000;
padding: 10px 20px;
font-weight: normal;
border: 2px solid #000;
color: #94c93b;
}
.gdx-lightbox-button:hover {
background: #FFF;
color: #000;
}
/* MODAL
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.gdx-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: var(--black);
cursor: pointer;
visibility: hidden;
opacity: 0;
transition: all 0.35s ease-in;
z-index: 9999 !important;
}
.gdx-modal.is-visible {
visibility: visible;
opacity: 1;
}
.gdx-modal-dialog {
position: relative;
max-width: 100vw;
max-height: 100vh;
border-radius: 5px;
background: var(--white);
overflow: auto;
cursor: default;
margin-top: 5%;
}
.gdx-modal-dialog > * {
padding: 1rem;
}
.gdx-modal-header,
.gdx-modal-footer {
background: #FFF;
}
.gdx-modal-header .gdx-close-modal {
font-size: 1.5rem;
}
.gdx-modal-header a {
font-size: 2em;
}
.gdx-modal-content {
text-align: center;
}
.gdx-modal-content img {
margin: 0 !important;
}
.gdx-close-modal {
float: right;
cursor: pointer;
}
.gdx-modal p + p {
margin-top: 1rem;
}
.gdx-modal-image-title {
text-align: center;
font-size: 1em;
margin: 0;
}
/* ANIMATIONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-animation] .gdx-modal-dialog {
opacity: 0;
transition: all 0.5s var(--bounceEasing);
}
[data-animation].is-visible .gdx-modal-dialog {
opacity: 1;
transition-delay: 0.2s;
}
[data-animation="slideInOutDown"] .gdx-modal-dialog {
transform: translateY(100%);
}
[data-animation="slideInOutTop"] .gdx-modal-dialog {
transform: translateY(-100%);
}
[data-animation="slideInOutLeft"] .gdx-modal-dialog {
transform: translateX(-100%);
}
[data-animation="slideInOutRight"] .gdx-modal-dialog {
transform: translateX(100%);
}
[data-animation="zoomInOut"] .gdx-modal-dialog {
transform: scale(0.2);
}
[data-animation="rotateInOutDown"] .gdx-modal-dialog {
transform-origin: top left;
transform: rotate(-1turn);
}
[data-animation="mixInAnimations"].is-visible .gdx-modal-dialog {
animation: mixInAnimations 2s 0.2s linear forwards;
}
[data-animation="slideInOutDown"].is-visible .gdx-modal-dialog,
[data-animation="slideInOutTop"].is-visible .gdx-modal-dialog,
[data-animation="slideInOutLeft"].is-visible .gdx-modal-dialog,
[data-animation="slideInOutRight"].is-visible .gdx-modal-dialog,
[data-animation="zoomInOut"].is-visible .gdx-modal-dialog,
[data-animation="rotateInOutDown"].is-visible .gdx-modal-dialog {
transform: none;
}
#keyframes mixInAnimations {
0% {
transform: translateX(-100%);
}
10% {
transform: translateX(0);
}
20% {
transform: rotate(20deg);
}
30% {
transform: rotate(-20deg);
}
40% {
transform: rotate(15deg);
}
50% {
transform: rotate(-15deg);
}
60% {
transform: rotate(10deg);
}
70% {
transform: rotate(-10deg);
}
80% {
transform: rotate(5deg);
}
90% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
/* Backend Instructions
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.lightbox-instructions-heading {
font-size: 1.8em !important;
}
.lightbox-instructions strong {
font-size: 1.2em !important;
}
.gdx-lightbox-tooltip-open-modal img {
margin: -0.3em;
margin-left: 0.25em;
}
xmp {
white-space: normal;
}
.lightbox-tooltip-instructions-content xmp{
margin-bottom: 2em;
}
Javascript
const openEls = document.querySelectorAll("[data-open]");
const closeEls = document.querySelectorAll("[data-close]");
const isVisible = "is-visible";
for (const el of openEls) {
el.addEventListener("click", function() {
const modalId = this.dataset.open;
document.getElementById(modalId).classList.add(isVisible);
});
}
for (const el of closeEls) {
el.addEventListener("click", function() {
this.parentElement.parentElement.parentElement.classList.remove(isVisible);
});
}
document.addEventListener("click", e => {
if (e.target == document.querySelector(".gdx-modal.is-visible")) {
document.querySelector(".gdx-modal.is-visible").classList.remove(isVisible);
}
});
document.addEventListener("keyup", e => {
// if we press the ESC
if (e.key == "Escape" && document.querySelector(".gdx-modal.is-visible")) {
document.querySelector(".gdx-modal.is-visible").classList.remove(isVisible);
}
});
JSFiddle Example can be seen here.
If you want to download this as a Wordpress Plugin (free of course) you can do so here
If you want to see the a demo of the plugin in action with the button modal popup you see this here

Change Background on ID load

I want to know how can I change my background on Id load. Right now the background is set to a colour for the preloader. I have figured out how I can hide the loader on body load but someone help me on how to change my background to a picture. Also eve when the loader is present the elements of the body popup so any solution to hide that? The background link is in the background 1 id.
https://www.w3schools.com/code/tryit.asp?filename=FEMJ1DP31QMZ
function hidespinner() {
document.getElementById('spinner').style.display = 'none';
document.getElementById('heading').style.display = 'none';
document.getElementById('background1').style.display.backgroundImage = 'url(https://s28.postimg.org/rbexyjiil/IFBAKGROUND1.jpg)';
}
html {
background-color: #ace5f4;
background-size: cover;
}
#spinner {
height: 50px;
width: 50px;
left: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
}
#spinner .inner {
height: 50px;
width: 50px;
position: absolute;
border: 5px solid transparent;
opacity: 0.7;
border-radius: 100%;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
#spinner .inner:nth-child(1) {
border-top-color: white;
border-bottom-color: white;
animation-duration: 2s;
}
#spinner .inner:nth-child(2) {
border-left-color: #3bb3ee;
border-right-color: #3bb3ee;
animation-duration: 3s;
}
#spinner .inner:nth-child(3) {
border-top-color: #34abdb;
border-bottom-color: #34abdb;
animation-duration: 4s;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
#heading {
color: white;
font-family: Helvetica;
text-align: center;
font-size: 72px;
}
#background1 {
background: url(https://s28.postimg.org/rbexyjiil/IFBAKGROUND1.jpg) no-repeat center fixed;
background-size: cover;
}
<link rel="shortcut icon" type="image/png" href="https://image.flaticon.com/icons/png/128/222/222506.png">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Fonts Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<body onload="hidespinner()">
<h1 id="heading"><i class="fa fa-plane"></i> v<strong>Crew</strong></h1>
<div id="spinner">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
Hello Is the spinner on?
</body>
Please see that even the current code is copyrighted. I would also like to add this loader which I made to the page so can anyone suggest something on how to add it or add it to the webpage and give me the code.
https://www.w3schools.com/code/tryit.asp?filename=FEAZZM840UQS
function hideloader() {
document.getElementById("loading").style.display = "none";
}
#import url('https://fonts.googleapis.com/css?family=Spirax');
#import url('https://fonts.googleapis.com/css?family=Indie+Flower|Spirax');
body {
background-color: #58e8f8;
}
.silly {
color: white;
text-align: center;
font-family: "Indie Flower"
}
.spinner {
width: 80px;
height: 80px;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.double-bounce1,
.double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: white;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -2.0s;
animation-delay: -1.0s;
}
#-webkit-keyframes sk-bounce {
0%,
100% {
-webkit-transform: scale(0.0)
}
50% {
-webkit-transform: scale(1.0)
}
}
#keyframes sk-bounce {
0%,
100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
<title>Page Title</title>
<script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/88CE1C4C-84C0-9E49-A763-9D3DCEC43907/main.js" charset="UTF-8"></script>
<body onload="hideloader">
<h1 class="silly"> vCrew </h1>
<div id="loading" class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</body>
Would this work w3schools.com/code/tryit.asp?filename=FEMJIZCDHJBW ?

You can try adding a loading div on top of your content and hide/show the loading sequence until your data is present.
onReady(function() {
toggleClass(document.getElementById('page'), 'hidden');
toggleClass(document.getElementById('loading'), 'hidden');
});
function onReady(callback) {
var intervalID = window.setInterval(function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalID);
callback.call(this);
}
}, 1000);
}
// http://youmightnotneedjquery.com/
function toggleClass(el, className) {
if (el.classList) el.classList.toggle(className);
else {
var classes = el.className.split(' ');
var existingIndex = classes.indexOf(className);
if (existingIndex >= 0) classes.splice(existingIndex, 1);
else classes.push(className);
el.className = classes.join(' ');
}
}
body {
background: #FFF url("http://i.imgur.com/KheAuef.png") top left repeat-x;
font-family: "Brush Script MT", cursive;
}
h1 {
font-size: 2em;
margin-bottom: 0.2em;
padding-bottom: 0;
}
p {
font-size: 1.5em;
margin-top: 0;
padding-top: 0;
}
#loading {
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: rgba(192, 192, 192, 0.9);
background-image: url("http://i.stack.imgur.com/MnyxU.gif");
background-repeat: no-repeat;
background-position: center;
}
.hidden {
display: none !important;
}
<script src="https://rawgit.com/bgrins/loremjs/master/lorem.js"></script>
<div id="page" class="hidden">
<h1>The standard Lorem Ipsum passage</h1>
<div class="content" data-lorem="7s"></div>
</div>
<div id="loading"></div>