CSS Animation to rotate element 360 degress on it self - javascript

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 🧙‍♂️.

Related

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.

Spacing between navbar and first section

When I start to scroll down, the section home moves down and in between is a weird space which I don't know how to get rid of.
Any tips on how to fix this problem?
//header Effekt beim scrollen
$(function() {
var shrinkHeader = 100;
$(window).scroll(function() {
var scroll = getCurrentScroll();
if (scroll >= shrinkHeader) {
$('#navbar').addClass('shrink');
} else {
$('#navbar').removeClass('shrink');
}
});
function getCurrentScroll() {
return window.pageYOffset || document.documentElement.scrollTop;
}
});
// JavaScript Document
$(document).ready(function() {
var navTop = $('#navbar').offset().top;
var navHeight = $('#navbar').height();
var windowH = $(window).height();
$('.section').height(windowH);
$(document).scroll(function() {
var st = $(this).scrollTop();
//for the nav bar:
if (st > navTop) {
$('#navbar').addClass('fix');
$('.section:eq(0)').css({
'margin-top': navHeight
}); //fix scrolling issue due to the fix nav bar
} else {
$('#navbar').removeClass('fix');
$('.section:eq(0)').css({
'margin-top': '0'
});
}
$('.section').each(function(index, element) {
if (st + navHeight > $(this).offset().top && st + navHeight <= $(this).offset().top + $(this).height()) {
$(this).addClass('active');
var id = $(this).attr('id');
$('a[href="#' + id + '"]').parent('li').addClass('active');
// or $('#nav li:eq('+index+')').addClass('active');
} else {
$(this).removeClass('active');
var id = $(this).attr('id');
$('a[href="#' + id + '"]').parent('li').removeClass('active');
//or $('#nav li:eq('+index+')').removeClass('active');
}
});
});
});
//
#charset "utf-8";
/* CSS Document */
* {
font-family: 'Roboto', sans-serif;
}
#container {
background-color: white;
width: 1280px;
height: 4000px;
margin-left: auto;
margin-right: auto;
}
body {
background-color: grey;
margin: 0px;
}
/* Navigation */
ul {
color: black;
list-style: none;
float: right;
margin-right: 20px;
padding-top: 32px;
}
ul li {
display: inline-table;
margin-left: 5px;
padding: 5px;
border-bottom: 1.5px solid;
border-bottom-color: white;
}
ul li a {
color: black;
text-decoration: none;
padding: 10px;
}
/* Smart Navbar / weiß wo man auf der Seite ist von https://stackoverflow.com/questions/19697696/change-underline-of-active-nav-by-section */
#navbar.fix {
position: fixed;
top: 0;
}
#navbar li.active {
border-bottom: 1.5px solid;
border-bottom-color: #f6bd60;
}
/* Smart Navbar Ende */
/* fixed Navigation von https://codepen.io/malZiiirA/pen/cbfED?css-preprocessor=none */
#navbar {
border-bottom-style: solid;
border-bottom-width: 1.25px;
box-shadow: 0px 2.5px 5px rgba(0, 0, 0, 0.2);
background-color: white;
height: 128px;
transition: 0.32s;
position: fixed;
width: 1280px;
}
#navbar.shrink {
height: 80px;
line-height: 18px;
}
#navbar li {
font-size: 18px;
font-weight: normal;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
#navbar.shrink li {
font-size: 18px;
margin-top: -30px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
/* fixed nav Ende */
#spacer {
height: 128px;
border-bottom: 4px solid;
}
#Home {
height: 1000px;
border-style: solid;
}
#UberUns {
height: 1000px;
border-style: solid;
}
#Aktionen {
height: 1000px;
border-style: solid;
}
#Terminvereinbarung {
height: 1000px;
border-style: solid;
}
#Infos {
height: 1000px;
border-style: solid;
}
/* Hover Effekt bei Navigation von https://github.com/IanLunn/Hover/blob/master/css/hover.css */
.hvr-sweep-to-top {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-top:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #f6bd60;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-top:hover,
.hvr-sweep-to-top:focus,
.hvr-sweep-to-top:active {
color: white;
}
.hvr-sweep-to-top:hover:before,
.hvr-sweep-to-top:focus:before,
.hvr-sweep-to-top:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
/* Hover Effekt Ende */
/* Loader */
.loader {
display: inline-block;
width: 30px;
height: 30px;
position: relative;
border: 4px solid #Fff;
animation: loader 2s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #fff;
animation: loader-inner 2s infinite ease-in;
}
#keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 0%;
}
}
.loader-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #242f3f;
display: flex;
align-items: center;
justify-content: center;
}
/* loader Ende */
<!DOCTYPE html>
<html>
<head>
<title>OptikTack</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div id="container">
<div class="body">
<div id="navbar">
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="javascript/navbar fixed.js"></script>
<ul>
<li class="hvr-sweep-to-top">Home</li>
<li class="hvr-sweep-to-top">Wir über uns</li>
<li class="hvr-sweep-to-top">Aktionen</li>
<li class="hvr-sweep-to-top">Terminvereinbarung</li>
<li class="hvr-sweep-to-top">Infos</li>
</ul>
</div>
<div id="spacer"></div>
<section id="Home" class="section">
<p>Home</p>
</section>
<section id="UberUns" class="section">
<p>section 2</p>
</section>
<section id="Aktionen" class="section">
<p>section 3</p>
</section>
<section id="Terminvereinbarung" class="section">
<p>section 4</p>
</section>
<section id="Infos" class="section">
<p>section 5</p>
</section>
</div>
</div>
<div class="loader-wrapper">
<span class="loader"><span class="loader-inner"></span></span>
</div>
<script>
$(window).on("load", function() {
$(".loader-wrapper").fadeOut("slow");
});
</script>
<script>
$('a').click(function() {
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 500);
return false;
});
</script>
</body>
</html>

Something is creating a margin-top when you scroll down
try add:
#Home {
margin-top: 0 !important;
}

Looking at your code I found a couple of issues.
if(st > navTop ){
$('#navbar').addClass('fix');
$('.section:eq(0)').css({'margin-top':navHeight});//fix scrolling issue due to the fix nav bar
}
st is defined to be the current scrolling position of your browser.
This is in your scrolling code, meaning as soon as st is bigger than navTop, it will set margin-top to navHeight. But the issue is that a little bit up you defined navTop as followed: var navTop = $('#navbar').offset().top;
navTop is always 0. Meaning that whenever you scroll any amount it will add the margin-top. I'd start there with finding your problem.
Andrea's solution is but a solution for a problem that you introduced yourself.

try add:
#Home {
margin-top: 0 !important;
}

Making a Clock in JavaScript using DIVs only

We have to build a clock in JavaScript using divs only, (document.createElement()). Somehow, I never get the positioning of the divs right. Currently, I'm already struggling to make the first DIV.
Sorry if I have mistakes in the calculation of the angles.
Are there any better ways to achieve this goal?
Now it looks a bit like this:
The red lines are representing the numbers of a clock (12 of them in total).
window.onload = function drawclock() {
var clock = this.document.getElementById("clock");
var width = clock.offsetHeight;
var radius = width / 2;
for (var i = 1; i < 12; i++) {
var element = document.createElement("DIV");
addClass(element, "h");
addClass(element, i);
var deg = 30 * i;
var x = Math.cos(deg * (180 / Math.PI)) * radius + radius;
var y = Math.sin((90 - deg) * (180 / Math.PI)) * radius + radius;
console.log(x + " " + y);
element.style.position = "absolute";
element.style.left = x + "px";
element.style.top = y + "px";
element.style.transform = "rotate(" + deg + "deg)";
clock.appendChild(element);
}
}
function addClass(element, name) {
var arr;
arr = element.className.split(" ");
if (arr.indexOf(name) == -1) {
element.className += " " + name;
}
}
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background-color: #000;
}
#clock {
height: 500px;
width: 500px;
background-color: #DDDDDD;
border-radius: 100%;
position: absolute;
}
.h {
width: 10px;
height: 70px;
background-color: red
}
.m {
width: 5px;
height: 80px;
background-color: blue
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<div id="clock">
</div>
</body>
</html>

Here is a clock example made by Eric Brewer on CodePen.
I have compiled SCSS and Pug keeping only the necessary parts of the code to make the clock work. This version doesn't require any JavaScript to run.
However, I have added some JavaScript code to make it start from a particular position. This can be achieved using the class Date to get the current date and setting the animation-delay CSS property with the property animationDelay for each clock arms.
Here is the working code:
let setTime = function(date) {
const delay = [
date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds(),
date.getMinutes() * 60 + date.getSeconds(),
date.getSeconds()
];
[...document.querySelectorAll('.hand')].forEach((e, i) => e.style.animationDelay = `-${delay[i]}s`);
}
setTime(new Date())
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* Main style for the clock */
.face {
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
width: 400px;
height: 400px;
background: #eee;
border-radius: 50%;
padding: 20px;
border: 20px solid #d9d9d9;
}
.face:after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
border-radius: 50%;
z-index: 3;
}
/* Numbers: styling and positioning */
.numbers {
position: relative;
}
.number {
position: absolute;
height: 200px;
transform-origin: 0 100%;
font-size: 28px;
}
.number:nth-child(1) {
transform: rotate(25deg);
}
.number:nth-child(1) span {
display: block;
transform: rotate(-25deg);
}
.number:nth-child(2) {
transform: rotate(55deg);
}
.number:nth-child(2) span {
display: block;
transform: rotate(-55deg);
}
.number:nth-child(3) {
transform: rotate(85deg);
}
.number:nth-child(3) span {
display: block;
transform: rotate(-85deg);
}
.number:nth-child(4) {
transform: rotate(115deg);
}
.number:nth-child(4) span {
display: block;
transform: rotate(-115deg);
}
.number:nth-child(5) {
transform: rotate(145deg);
}
.number:nth-child(5) span {
display: block;
transform: rotate(-145deg);
}
.number:nth-child(6) {
transform: rotate(178deg);
}
.number:nth-child(6) span {
display: block;
transform: rotate(-175deg);
}
.number:nth-child(7) {
transform: rotate(205deg);
}
.number:nth-child(7) span {
display: block;
transform: rotate(-205deg);
}
.number:nth-child(8) {
transform: rotate(235deg);
}
.number:nth-child(8) span {
display: block;
transform: rotate(-235deg);
}
.number:nth-child(9) {
transform: rotate(265deg);
}
.number:nth-child(9) span {
display: block;
transform: rotate(-265deg);
}
.number:nth-child(10) {
transform: rotate(295deg);
}
.number:nth-child(10) span {
display: block;
transform: rotate(-295deg);
}
.number:nth-child(11) {
transform: rotate(325deg);
}
.number:nth-child(11) span {
display: block;
transform: rotate(-325deg);
}
.number:nth-child(12) {
transform: rotate(355deg);
}
.number:nth-child(12) span {
display: block;
transform: rotate(-355deg);
}
/* Clock hands styling */
.hands {
position: absolute;
top: 50%;
left: 50%;
}
.hand {
position: absolute;
top: 50%;
left: 50%;
height: 120px;
width: 10px;
content: "";
background: black;
transform: translate(-50%, -100%);
border-radius: 0 0 20px 20px;
transform-origin: 50% 100%;
z-index: 4;
animation: count 3600s linear infinite;
}
.hand:before {
display: block;
position: absolute;
top: -50px;
width: 0;
height: 0;
border: 10px solid transparent;
border-width: 10px 5px 41px;
border-bottom-color: black;
content: "";
}
.hand.hand-hour {
height: 70px;
transform: translate(-50%, -100%) rotate(30deg);
animation: count 43200s linear infinite;
}
.hand.hand-second {
height: 130px;
width: 8px;
transform: translate(-50%, -100%) rotate(60deg);
z-index: 3;
background: red;
animation: count 60s linear infinite;
}
.hand.hand-second .body {
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
background: red;
z-index: 4;
}
.hand.hand-second:before {
border-width: 10px 4px 41px;
border-bottom-color: red;
z-index: -1;
}
/* animation of the clock hands */
#keyframes count {
0%,
100% {
transform: translate(-50%, -100%);
}
25% {
transform: translate(-50%, -100%) rotate(90deg);
}
50% {
transform: translate(-50%, -100%) rotate(180deg);
}
75% {
transform: translate(-50%, -100%) rotate(270deg);
}
}
<div class="watch">
<div class="face">
<div class="numbers">
<div class="number number-1"><span>1</span></div>
<div class="number number-2"><span>2</span></div>
<div class="number number-3"><span>3</span></div>
<div class="number number-4"><span>4</span></div>
<div class="number number-5"><span>5</span></div>
<div class="number number-6"><span>6</span></div>
<div class="number number-7"><span>7</span></div>
<div class="number number-8"><span>8</span></div>
<div class="number number-9"><span>9</span></div>
<div class="number number-10"><span>10</span></div>
<div class="number number-11"><span>11</span></div>
<div class="number number-12"><span>12</span></div>
</div>
<div class="hands">
<div class="hand hand-hour"></div>
<div class="hand hand-minute"></div>
<div class="hand hand-second">
<div class="body"></div>
</div>
</div>
</div>
</div>
Simply set the current date in date, the JavaScript code will loop through the clock's arms and delay each animation. CSS animation will allow the clock to run continuously after page has been loaded.
This method is a lot more efficient than using a JavaScript function to compute the positions and move clock hands. CSS animations are way more powerful here.
EDIT :
When you're programming a piece of code you should always start with a piece of paper and define what you want, how you will achieve it before starting typing. You have to have a plan before typing, otherwise, it will simply not work.
So as you told me you only want to position the number ticks (the original question wasn't that clear...). It's easier to have all ticks as black rectangles positioned in the center, set their height and width. So we have:
Then use the transform property to rotate each tick to the right angle: 0°, 30°, 60°, 90°, ..., 300°, 330° and 360°. Use rotate(x deg).
Lastly here's the trick to the set the ticks' size correctly:
use a gradient to hide the part of the tick closer to the center so we only show the tip of each tick:
background: linear-gradient(
to top,
#eee 0%,
#eee 80%,
black 80%,
black 100%
);
In the end you should have:
Combining this with the previous code to make the clock turn you get:
let drawTicks = function() {
for (let i = 1; i < 13; i++) {
let el = document.createElement('div');
el.setAttribute('class', `number number${i}`);
el.style.transform = `rotate(${i*30}deg)`;
document.querySelector('.numbers').appendChild(el);
}
}; drawTicks()
let setTime = function(date) {
const delay = [
date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds(),
date.getMinutes() * 60 + date.getSeconds(),
date.getSeconds()
];
[...document.querySelectorAll('.hand')].forEach((e, i) => e.style.animationDelay = `-${delay[i]}s`);
}; setTime(new Date())
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* Main style for the clock */
.face {
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
width: 400px;
height: 400px;
background: #eee;
border-radius: 50%;
padding: 20px;
border: 20px solid #d9d9d9;
}
.face:after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
border-radius: 50%;
z-index: 3;
}
/* Numbers: styling and positioning */
.numbers {
position: relative;
}
.number {
width: 5px;
background: linear-gradient( to top, #eee 0%, #eee 80%, black 80%, black 100%);
position: absolute;
height: 200px;
transform-origin: 0 100%;
font-size: 28px;
}
/* Clock hands styling */
.hands {
position: absolute;
top: 50%;
left: 50%;
}
.hand {
position: absolute;
top: 50%;
left: 50%;
height: 120px;
width: 10px;
content: "";
background: black;
transform: translate(-50%, -100%);
border-radius: 0 0 20px 20px;
transform-origin: 50% 100%;
z-index: 4;
animation: count 3600s linear infinite;
}
.hand:before {
display: block;
position: absolute;
top: -50px;
width: 0;
height: 0;
border: 10px solid transparent;
border-width: 10px 5px 41px;
border-bottom-color: black;
content: "";
}
.hand.hand-hour {
height: 70px;
transform: translate(-50%, -100%) rotate(30deg);
animation: count 43200s linear infinite;
}
.hand.hand-second {
height: 130px;
width: 8px;
transform: translate(-50%, -100%) rotate(60deg);
z-index: 3;
background: red;
animation: count 60s linear infinite;
}
.hand.hand-second:before {
border-width: 10px 4px 41px;
border-bottom-color: red;
z-index: -1;
}
/* animation of the clock hands */
#keyframes count {
0%,
100% {
transform: translate(-50%, -100%);
}
25% {
transform: translate(-50%, -100%) rotate(90deg);
}
50% {
transform: translate(-50%, -100%) rotate(180deg);
}
75% {
transform: translate(-50%, -100%) rotate(270deg);
}
}
<div class="watch">
<div class="face">
<div class="numbers"></div>
<div class="hands">
<div class="hand hand-hour"></div>
<div class="hand hand-minute"></div>
<div class="hand hand-second">
</div>
</div>
</div>
</div>

SVG animation doesnt work on mozilla, but works on chrome and safari

Title explains itself.
I don't know what to do anymore. On my PC, it even blocks my pc when i open the URL, or even when i open file locally.
It is a heavy animation, but still, i think mozilla should open it.
I tried to use 'px' on stroke-width attribute, but still it didnt work.
any idea?
>website url here<
var all = document.querySelectorAll('.circle');
for (var i = 0; i < all.length; i++) {
var c = all[i].getAttribute("data-color");
var s = parseInt(all[i].getAttribute("data-step"));
var b = 'url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="' + c + '" stroke-width="0.03" /></svg>\')';
var end = 180 / s;
for (var j = 1; j < end; j++) {
b += ',url(\'data:image/svg+xml,<svg style="transform:rotate(' + s * j + 'deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="' + c + '" stroke-width="0.03" /></svg>\')';
}
all[i].style.setProperty("--b", b);
all[i].querySelector('span').style.setProperty("background", c);}
$(document).ready(function(){
$("span").css("background-color","white");
$( document ).trigger( "click" );
});
<style>
.food{
color:#0073b3!important;
}
.food:hover{
background-color:#0073b3!important;
color:white!important;
transition: all .5s;
}
.line{
color:#FBAF17!important;
background-color:#white!important;
}
.line:hover{
background-color:#FBAF17!important;
color:white!important;
transition: all .5s;
}
.music{
color:#F15E42!important;
background-color:#white!important;
}
.music:hover{
background-color:#F15E42 !important;
color:white!important;
transition: all .5s;
}
.air{
color:#ED1C24!important;
background-color:#white!important;
}
.air:hover{
background-color:#ED1C24 !important;
color:white!important;
transition: all .5s;
}
.story{
color:#3EA472!important;
background-color:#white!important;
}
.story:hover{
background-color:#3EA472 !important;
color:white!important;
transition: all .5s;
}
#font-face {
font-family: 'MyWebFont';
src: url('FranklinGothicLT-BookCnd.eot'); /* IE9 Compat Modes */
src: url('FranklinGothicLT-BookCnd.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('FranklinGothicLT-BookCnd.woff2') format('woff2'), /* Super Modern Browsers */
url('FranklinGothicLT-BookCnd.woff') format('woff'), /* Pretty Modern Browsers */
url('FranklinGothicLT-BookCnd.ttf') format('truetype') /* Safari, Android, iOS */
}
html, body, span, p {
font-family:'MyWebFont'
};
.footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: right;
}
.footer a{
float:right;
}
body {
overflow: hidden;
}
.circle {
height: 100px;
width: 100px;
position:absolute;
}
.circle-food span{
width:220px!important;
height:220px!important;
display:block;
margin:0px auto;
position:absolute;
left:-60%;top:-60%;
}
.circle-story span{
width:350px!important;
height:350px!important;
display:block;
margin:0px auto;
position:absolute;
left:-126%;top:-126%;
}
.circle-line span{
width:300px!important;
height:300px!important;
display:block;
margin:0px auto;
position:absolute;
left:-105px;top:-105px;
}
.circle-air span{
width:125px!important;
height:125px!important;
top: -15px;
position: absolute;
left: -15px;
}
.circle-music span{
width:225px!important;
height:225px!important;
top: -65px;
position: absolute;
left: -65px;
}
.circle span {
text-align:center;
position:relative;
height:100%;
width:100%;
display:flex;
justify-content:center;
align-items:center;
z-index:3;
border-radius: 50%;
color:#fff;
}
.circle:after {
content: "";
z-index: -1;
position: absolute;
top: -5000%;
left: -5000%;
right: -5000%;
bottom: -5000%;
background-image: var(--b);
background-size: 100% 100%;
animation: animate 90s infinite linear;
opacity: 0.8;
}
#keyframes animate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
{margin:0;
background-color:#FFFCE4;
}
.navbar {
overflow: hidden;
background-color: transparent;
position: fixed;
top: 0;
width: 100%;
}
.navbar .wrapp {
float: right;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
margin-right:100px;
}
.navbar .wrapp a{
text-decoration: none;
color:black;
margin-left:10px;
font-size:20px;
font-weight:700;
}
.navbarb {
overflow: hidden;
background-color: transparent;
position: fixed;
bottom: 0;
width: 100%;
}
.navbarb .wrapp {
float: right;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
margin-right:100px;
}
.navbarb .wrapp a{
text-decoration: none;
color:black;
margin-left:10px;
font-size:20px;
font-weight:700;
}
.footer {
padding: 20px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: white;
color: black;
text-align: center;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div class="navbar">
<div class="wrapp" style="float:left !important;margin-left:50px;" >
<img style="height:20px;width:auto;" src="assets/images/png-03.png">
</div>
<div class="wrapp">
CONTACT
</div>
</div>
<div class="circle circle-food" style="left:30%;top:25%;" data-color="#0073B3" data-step="5">
<span class="food" style="font-size:35px;line-height:40px;">FOOD&<br>DRINKS</span>
</div>
<div class="circle circle-line" style="left:20%;bottom:25%;" data-color="#FBAF17" data-step="5">
<span class="line" style="font-size:50px;">LINE-UP<br>2018</span>
</div>
<div class="circle circle-music" style="right:15%;top:20%;" data-color="#F15E42" data-step="5">
<span class="music" style="font-size:45px;line-height:45px;">THE<br>MUSIC</span>
</div>
<div class="circle circle-air" style="right:15%;bottom:15%;" data-color="#ED1C24" data-step="5">
<span class="air" style="font-size:30px;">ON<br>AIR!</span>
</div>
<div class="circle circle-story" style="right:40%;bottom:40%" data-color="#3EA472" data-step="5">
<span class="story" style="font-size:50px;">FESTIVAL STORY</span>
</div>
<div class="navbarb">
<div class="wrapp" style="margin-right:100px!important;">
<img style="height:20px;width:auto;" src="assets/images/png-02.png">
<img style="height:20px;width:auto;" src="assets/images/png-04.png">
</div>
</div>
Code snippet available now, go fullpage to see it clearly.

I've been cleaning up your code, geting rid of all the data urls. Instead, the SVG content is positioned inline and appended dynamically. The sizing is set in such a way that it always covers the whole screen, but does not need huge offscreen areas. Color definitions have been moved to CSS, the data-step attribute is still there. On my Firefox installation, the animation is far from smooth, but it runs and uses no more than 50MB.
window.onload = function () {
document.querySelectorAll('.circle').forEach(function (circle, i) {
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', "0 0 200 200");
svg.setAttribute('preserveAspectRatio', "xMidYMid slice");
var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.id = 'line' + i;
line.setAttribute('x1', "100");
line.setAttribute('x2', "100");
line.setAttribute('y1', "-300");
line.setAttribute('y2', "300");
svg.append(line);
var s = parseInt(circle.getAttribute("data-step"));
var end = 180 / s;
for (var j = 1; j < end; j++) {
var use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#line' + i);
use.setAttribute('transform', 'rotate(' + s * j + ', 100, 100)');
svg.append(use);
}
circle.append(svg);
});
}
body {
overflow: hidden;
}
.circle {
height: 100px;
width: 100px;
position:absolute;
}
.circle span {
text-align:center;
height:100%;
width:100%;
display:flex;
justify-content:center;
align-items:center;
z-index:3;
border-radius: 50%;
background-color:white;
margin:0px auto;
position:absolute;
}
.circle span:hover {
color:white;
transition: all .5s;
}
.food{
color:#0073b3;
}
.food:hover{
background-color:#0073b3;
}
.line{
color:#FBAF17;
}
.line:hover{
background-color:#FBAF17;
}
.music{
color:#F15E42;
}
.music:hover{
background-color:#F15E42;
}
.air{
color:#ED1C24;
}
.air:hover{
background-color:#ED1C24;
}
.story{
color:#3EA472;
}
.story:hover{
background-color:#3EA472;
}
.circle-food span{
width:220px;
height:220px;
left:-60%;
top:-60%;
}
.circle-story span{
width:350px;
height:350px;
left:-126%;
top:-126%;
}
.circle-line span{
width:300px;
height:300px;
left:-105px;
top:-105px;
}
.circle-air span{
width:125px;
height:125px;
top: -15px;
left: -15px;
}
.circle-music span{
width:225px;
height:225px;
top: -65px;
left: -65px;
}
svg {
opacity: 0.8;
position: absolute;
z-index: -1;
left:calc(50% - 100vw);
top:calc(50% - 100vh);
width: 200vw;
height: 200vh;
animation: animate 90s infinite linear;
transform-origin: center;
}
.circle-food svg {
stroke: #0073B3;
}
.circle-line svg {
stroke: #FBAF17;
}
.circle-music svg {
stroke: #F15E42;
}
.circle-air svg {
stroke: #ED1C24;
}
.circle-story svg {
stroke: #3EA472;
}
line {
stroke-width: 0.05;
}
#keyframes animate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
<div class="circle circle-food" style="left:30%;top:25%;" data-step="5">
<span class="food" style="font-size:35px;line-height:40px;">FOOD&<br>DRINKS</span>
</div>
<div class="circle circle-line" style="left:20%;bottom:25%;" data-step="5">
<span class="line" style="font-size:50px;">LINE-UP<br>2018</span>
</div>
<div class="circle circle-music" style="right:15%;top:20%;" data-step="5">
<span class="music" style="font-size:45px;line-height:45px;">THE<br>MUSIC</span>
</div>
<div class="circle circle-air" style="right:15%;bottom:15%;" data-step="5">
<span class="air" style="font-size:30px;">ON<br>AIR!</span>
</div>
<div class="circle circle-story" style="right:40%;bottom:40%" data-step="5">
<span class="story" style="font-size:50px;">FESTIVAL STORY</span>
</div>

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>

Categories

Resources