SVG/CSS animated icon not working

SVG/CSS animated icon not working - javascript

I'm trying to implement an animated menu icon I found on codepen by Balaj Marius. The design is here.
When I try it in my project (or even independently in separate files), it doesn't work. The icon appears, but the javascript doesn't seem to be running. I'm assuming it's an obvious answer, but it's currently beating me. Any ideas on how to get it up and running?
Here is how I have it:
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/javascript" href="js/main.js">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="content">
<h2>Scroll to see the magic.</h2>
<div class="header__fake">
<div class="icn__wrap">
<i class="icn__hamburger"></i>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="58px" height="58px" viewBox="0 0 16 16" preserveAspectRatio="none">
<circle cx="8" cy="8" r="6.215" transform="rotate(90 8 8)"></circle>
</svg>
</div>
<i class="btm__border"></i>
</div>
<h1>Tah-da!<span>Now scroll back up.</span></h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</body>
</html>
css:
body {
background: #02021a url("https://raw.githubusercontent.com/balajmarius/hamburger-animation/master/assets/img/bg.jpg") no-repeat 0 0;
-webkit-background-size: 100% auto;
background-size: 100% auto;
color: #fff;
font-family: Helvetica Neue, Helvetica, Open sans, Arial, sans-serif;
font-weight:lighter;
letter-spacing:1px;
}
.content {
width: 320px;
position: relative;
margin: 0 auto;
}
.content h2 {
margin: 35px 0 0;
}
.content h1 {
text-align: center;
margin: 1000px 0 200px;
}
.content h1 span {
display: block;
width: 100%;
margin: 5px 0 0;
opacity: .5;
}
.content .header__fake {
position: fixed;
top: 15px;
left: 50%;
margin-left: -160px;
width: 320px;
}
.content .header__fake i {
display: block;
}
.content .header__fake .btm__border {
height: 1px;
background: #fff;
position: absolute;
bottom: 6px;
left: 0;
right: 0;
-webkit-transition: left 0.5s;
transition: left 0.5s;
}
.content .header__fake .icn__wrap {
cursor: pointer;
float: right;
width: 58px;
position: relative;
height: 58px;
margin-right: -20px;
}
.content .header__fake .icn__wrap .icn__hamburger {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-6px);
-ms-transform: translateX(-50%) translateY(-6px);
transform: translateX(-50%) translateY(-6px);
display: block;
width: 18px;
height: 1px;
z-index: 999;
background: #fff;
}
.content .header__fake .icn__wrap .icn__hamburger:after,
.content .header__fake .icn__wrap .icn__hamburger:before {
content: "";
float: left;
display: block;
width: 100%;
height: 1px;
background: #fff;
margin: 5px 0 0;
}
.content .header__fake .icn__wrap .icn__hamburger:before {
margin: 6px 0 0;
}
.content .header__fake .icn__wrap svg {
z-index: 10;
}
.content .header__fake .icn__wrap svg circle {
fill: none;
stroke: #fff;
stroke-width: .5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 39 39;
stroke-dashoffset: -39;
-webkit-transition: stroke-dashoffset 0.5s;
transition: stroke-dashoffset 0.5s;
}
.content .header__fake.animated .btm__border {
left: 100%;
right: 4px;
}
.content .header__fake.animated svg circle {
stroke-dashoffset: 0;
-webkit-transition: stroke-dashoffset 0.5s;
transition: stroke-dashoffset 0.5s;
}
.content .header__fake.fix .btm__border {
-webkit-animation: fix 0.2s linear;
animation: fix 0.2s linear;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
right: 5px;
}
#-webkit-keyframes fix {
from {
right: 5px;
}
to {
right: 0;
}
}
#keyframes fix {
from {
right: 5px;
}
to {
right: 0;
}
}
js:
$(document).ready(function(){
console.log("ready");
$header = $('.header__fake');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 20) {
$header.addClass('animated').removeClass('fix');
} else {
$header.removeClass('animated').addClass('fix');
}
});
});

Related

How to make a circle progress bar with left side of percentage

const numb = document.querySelector(".numb");
let counter = 0;
setInterval(() => {
if (counter == 100) {
clearInterval();
} else {
counter += 1;
numb.textContent = counter + "%";
}
}, 80);
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,
body {
display: grid;
height: 100%;
text-align: center;
place-items: center;
background: #dde6f0;
}
.circular {
height: 100px;
width: 100px;
position: relative;
}
.circular .inner,
.circular .outer,
.circular .circle {
position: absolute;
z-index: 6;
height: 100%;
width: 100%;
border-radius: 100%;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
}
.circular .inner {
top: 50%;
left: 50%;
height: 80px;
width: 80px;
margin: -40px 0 0 -40px;
background-color: #dde6f0;
border-radius: 100%;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.circular .circle {
z-index: 1;
box-shadow: none;
}
.circular .numb {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
font-size: 18px;
font-weight: 500;
color: #4158d0;
}
.circular .bar {
position: absolute;
height: 100%;
width: 100%;
background: #fff;
-webkit-border-radius: 100%;
clip: rect(0px, 100px, 100px, 50px);
}
.circle .bar .progress {
position: absolute;
height: 100%;
width: 100%;
-webkit-border-radius: 100%;
clip: rect(0px, 50px, 100px, 0px);
}
.circle .bar .progress,
.dot span {
background: #4158d0;
}
.circle .left .progress {
z-index: 1;
animation: left 4s linear both;
}
#keyframes left {
100% {
transform: rotate(180deg);
}
}
.circle .right {
z-index: 3;
transform: rotate(180deg);
}
.circle .right .progress {
animation: right 4s linear both;
animation-delay: 4s;
}
#keyframes right {
100% {
transform: rotate(180deg);
}
}
.circle .dot {
z-index: 2;
position: absolute;
left: 50%;
top: 50%;
width: 50%;
height: 10px;
margin-top: -5px;
animation: dot 8s linear both;
transform-origin: 0% 50%;
}
.circle .dot span {
position: absolute;
right: 0;
width: 10px;
height: 10px;
border-radius: 100%;
}
#keyframes dot {
0% {
transform: rotate(-90deg);
}
50% {
transform: rotate(90deg);
z-index: 4;
}
100% {
transform: rotate(270deg);
z-index: 4;
}
}
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Somehow I got an error, so I comment the title, just uncomment to show -->
<!-- <title>Circular Progress Bar | CodingNepal</title> -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="circular">
<div class="inner">
</div>
<div class="outer">
</div>
<div class="numb">
0%</div>
<div class="circle">
<div class="dot">
<span></span>
</div>
<div class="bar left">
<div class="progress">
</div>
</div>
<div class="bar right">
<div class="progress">
</div>
</div>
</div>
</div>
</body>
</html>
I want to make a progress bar like the one in the image below. The percentage should be on left side up to 90% and after 90%, it will go to the center.
How can I do that?

You can position the .numb at the desired place in the beginning, define another css class .numb-center which has top and left 50% to make it center and add that class to .numb when it's your desired percentage in setInterval function.
const numb = document.querySelector(".numb");
let counter = 0;
setInterval(() => {
if (counter == 100) {
clearInterval();
} else {
counter += 1;
if (counter > 90 && !numb.classList.contains('.numb-center')) {
numb.classList.add('numb-center')
}
numb.textContent = counter + "%";
}
}, 80);
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,
body {
display: grid;
height: 100%;
text-align: center;
place-items: center;
background: #dde6f0;
}
.circular {
height: 100px;
width: 100px;
position: relative;
}
.circular .inner,
.circular .outer,
.circular .circle {
position: absolute;
z-index: 6;
height: 100%;
width: 100%;
border-radius: 100%;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
}
.circular .inner {
top: 50%;
left: 50%;
height: 80px;
width: 80px;
margin: -40px 0 0 -40px;
background-color: #dde6f0;
border-radius: 100%;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.circular .circle {
z-index: 1;
box-shadow: none;
}
.circular .numb {
position: absolute;
top: 5%;
left: 40%;
transform: translate(-50%, -50%);
z-index: 10;
font-size: 18px;
font-weight: 500;
color: #4158d0;
}
.numb-center {
top:50%!important;
left:50%!important;
}
.circular .bar {
position: absolute;
height: 100%;
width: 100%;
background: #fff;
-webkit-border-radius: 100%;
clip: rect(0px, 100px, 100px, 50px);
}
.circle .bar .progress {
position: absolute;
height: 100%;
width: 100%;
-webkit-border-radius: 100%;
clip: rect(0px, 50px, 100px, 0px);
}
.circle .bar .progress,
.dot span {
background: #4158d0;
}
.circle .left .progress {
z-index: 1;
animation: left 4s linear both;
}
#keyframes left {
100% {
transform: rotate(180deg);
}
}
.circle .right {
z-index: 3;
transform: rotate(180deg);
}
.circle .right .progress {
animation: right 4s linear both;
animation-delay: 4s;
}
#keyframes right {
100% {
transform: rotate(180deg);
}
}
.circle .dot {
z-index: 2;
position: absolute;
left: 50%;
top: 50%;
width: 50%;
height: 10px;
margin-top: -5px;
animation: dot 8s linear both;
transform-origin: 0% 50%;
}
.circle .dot span {
position: absolute;
right: 0;
width: 10px;
height: 10px;
border-radius: 100%;
}
#keyframes dot {
0% {
transform: rotate(-90deg);
}
50% {
transform: rotate(90deg);
z-index: 4;
}
100% {
transform: rotate(270deg);
z-index: 4;
}
}
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Somehow I got an error, so I comment the title, just uncomment to show -->
<!-- <title>Circular Progress Bar | CodingNepal</title> -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="circular">
<div class="inner">
</div>
<div class="outer">
</div>
<div class="numb">
0%</div>
<div class="circle">
<div class="dot">
<span></span>
</div>
<div class="bar left">
<div class="progress">
</div>
</div>
<div class="bar right">
<div class="progress">
</div>
</div>
</div>
</div>
</body>
</html>

Div element pushed out of the page when resizing

I'm trying to have my video and its caption at the center of my page and my logo in the upper left corner. This works fine until resizing, when the logo is pushed out of the page - it is as if there was an element in the middle that overrides my logo element. I have tried to troubleshoot which element does this: I of course suspect that it is the video container, and I have tried many ways to change its settings with no success so far (absolute with smaller width, float left etc.).
I'm total newbie with CSS and would appreciate any help! I'm also aware that using absolute positions is not a good practice - it was now just something to get things working to some extent.
My code:
html:
<!DOCTYPE html>
<html>
<head>
<title>Broadcaster</title>
<meta charset="UTF-8" />
<link href="/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght#0,400;0,700;1,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alegreya:wght#400;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Yatra+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Vollkorn:wght#400;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=BioRhyme&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tensorflow/2.0.1/tf.min.js"></script>
</head>
<body>
<div class="video-container">
<video playsinline autoplay muted width="400" height="400" id="webcam"></video>
<p id="caption"></p>
</div>
<input type="button" onclick="location.href='archive.html';" value="Archive" />
<input type="submit" onclick="location.href='about.html';" value="About"/>
<div class="logo">
<div id="icon">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="logotext"></div>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="/broadcast.js"></script>
</body>
</html>
styles.css (this covers content on several html pages):
html,
html {
height: 100%;
}
* {
box-sizing: border-box;
}
body {
background-color: #FFE4E1;
background: linear-gradient(#FFE4E1, thistle);
margin: 0;
height: 100%;
width:100%;
background-attachment: fixed;
}
header {
text-align: center;
}
main {
min-height: 80vh;
width: 10%;
}
h1 {
font-family: 'Messapia-Bold', serif;
position: absolute;
top: 5%;
left: 50%;
transform: translateY(-5%);
transform: translateX(-50%);
}
.video-container {
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
}
.video-container video {
width: 40%;
height: 40%;
min-height: 224px;
max-height: 600px;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
display: block;
}
.video-container #caption {
display: block;
position: absolute;
top: 76%;
left: 50%;
transform: translateY(-50%);
transform: translateX(-50%);
font-family: 'Messapia-Bold', serif;
font-size: small;
}
input[type=button] {
font-family: 'Messapia-Bold', serif;
font-size: small;
background-color: black;
border: none;
color: white;
padding: 8px 8px;
text-decoration: none;
cursor: pointer;
max-width: 90px;
width: 100%;
position: absolute;
top: 50%;
right:3%;
text-align: center;
}
input[type=submit] {
font-family: 'Messapia-Bold', serif;
font-size: small;
background-color: black;
border: none;
color: white;
padding: 8px 8px;
text-decoration: none;
cursor: pointer;
max-width: 90px;
width: 100%;
position: absolute;
top: 50%;
left:3%;
text-align: center;
}
input[type=back] {
font-family: 'Messapia-Bold', serif;
font-size: small;
background-color: black;
border: none;
color: white;
padding: 8px 8px;
text-decoration: none;
cursor: pointer;
max-width: 90px;
width: 100%;
position: absolute;
top: 19%;
left:3%;
text-align: center;
}
.text {
background-color: white;
position: absolute;
top: 30%;
display: flex;
flex-wrap: wrap;
font-family: 'Vollkorn', serif;
}
.text p{
text-align: center;
padding: 0 26%;
font-family: 'Vollkorn', serif;
font-size: x-large;
}
#font-face {
font-family: "Messapia-Bold";
src: url("font/Messapia-Bold.woff2") format ("woff2"),
src: url("font/Messapia-Bold.woff") format ("woff");
}
.logo{
min-width: 11%;
min-height: 11%;
margin:1em 0em;
position: absolute;
top: 1%;
left: 1%;
display: block;
overflow: visible;
/*transform: translate(-50%, -50%);*/
}
#icon{
position: absolute;
min-width:100%;
min-height:100%;
margin:1em 0em;
overflow: visible;
}
#icon > *{
display: inline-block;
position: absolute;
overflow: visible;
}
#icon div span{
display:none;
}
#logotext{
min-width:100%;
min-height:100%;
background-image:url(/logo/final_transparent.svg) ;
background-size: cover;
background-position: right;
overflow: visible;
}
#box1{
min-width:100%;
min-height:100%;
background-image:url(/logo/final_upperbox.svg) ;
background-size: cover;
background-position: right;
animation-name: stretch1;
animation-timing-function: ease-out;
animation-duration: 2s;
animation-delay: 0s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
transform-origin: 97% 50%;
overflow: visible;
}
#box2{
min-width:100%;
min-height:100%;
background-image:url(/logo/final_midbox.svg) ;
background-size: cover;
background-position: right;
overflow: visible;
}
#box3{
min-width:100%;
min-height:100%;
background-image:url(/logo/final_lowestbox.svg) ;
background-size: cover;
background-position: right;
animation-name: stretch3;
animation-duration: 1.3s;
animation-timing-function: ease-out;
animation-delay: 4s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
transform-origin: 97% 50%;
overflow: visible;
}
#keyframes stretch1 {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
#keyframes stretch2 {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
#keyframes stretch3 {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
.row {
position: absolute;
top: 30%;
display: flex;
flex-wrap: wrap;
padding: 0 6px;
}
.column {
flex: 25%;
max-width: 25%;
padding: 0 6px;
}
.column img {
opacity: 1;
margin-top: 12px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}

Reverse animation on hamburger button

I'm trying to animate a hamburger button. The problem is that the animation works great only for the first click, and I do not know how to make the second click do the reverse animation. I'm not sure if this can be done without using keyframes. Ps. brackets in css are not formatted because its compiled from scss.
var hamburger = document.getElementById("hamburger");
var nav_items = document.getElementsByClassName("nav-items")[0];
var line1 = document.getElementsByClassName("line1")[0];
var line2 = document.getElementsByClassName("line2")[0];
var line3 = document.getElementsByClassName("line3")[0];
hamburger.addEventListener("click", function() {
nav_items.classList.toggle("nav-open");
line1.classList.toggle("first-line");
line2.classList.toggle("middle-line-hidden");
line3.classList.toggle("last-line");
});
body {
background-color: white;
margin: 0;
padding: 0;
}
#navbar {
position: fixed;
top: 0;
width: 100%;
height: 100px;
color: white;
z-index: 100;
background-color: blue;
}
#logo {
position: absolute;
top: 50%;
left: 25px;
transform: translateY(-50%);
font-size: 25px; }
#logo a {
text-decoration: none;
color: white; }
#logo a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 5px;
width: 100%;
background-color: yellow;
z-index: -1; }
.nav-items {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
visibility: hidden;
justify-content: center;
font-size: 2rem;
background-color: black; }
.nav-items a {
text-decoration: none;
color: white;
margin: 15px 0; }
.nav-items a:first-child {
margin-top: 0; }
.nav-items a:hover {
color: yellow; }
#hamburger {
height: 40px;
width: 40px;
background-color: transparent;
border: 0px solid transparent;
padding: 0;
position: absolute;
right: 80px;
top: 50%;
transform: translateY(-50%);
z-index: 100;
}
#hamburger .line1,
#hamburger .line2,
#hamburger .line3 {
position: absolute;
left: 0;
height: 5px;
width: 100%;
background-color: white;
border-radius: 25px;
transition: 0.5s linear; }
#hamburger .line1 {
top: 3px; }
#hamburger .line2 {
top: 50%;
transform: translateY(-50%); }
#hamburger .line3 {
bottom: 3px; }
.nav-open {
visibility: visible; }
.middle-line-hidden {
animation: hamburger-mid-line 0s linear;
animation-fill-mode: forwards;
animation-delay: 0.3s; }
.first-line {
animation: hamburger-first-line 0.5s;
animation-fill-mode: forwards; }
.last-line {
animation: hamburger-last-line 0.5s;
animation-fill-mode: forwards; }
#keyframes hamburger-mid-line {
from {
visibility: visible; }
to {
visibility: hidden; } }
#keyframes hamburger-first-line {
0% { }
50% {
top: 50%;
transform: translateY(-50%); }
100% {
top: 42%;
transform: rotate(45deg); } }
#keyframes hamburger-last-line {
0% { }
50% {
bottom: 50%;
transform: translateY(50%); }
100% {
bottom: 45%;
transform: rotate(-45deg); } }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<header id="navbar">
<div class="nav-items">
link1
link2
link3
</div>
<button id="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</button>
</header>
</body>
</html>

The most easy way is to assign in the css the animation to a class, for example .openedhamburger with the opening animation.
Now create other animation assigned to other class, for example .closedhamburger, with the closing animation.
Finally switch the class asigned to the element with javascript and there it is, whenever a different class is assigned, the proper animation will be triggered.
Edit: also, albeit in your case use a two step animation, so this is not applicable, know that using this class-approach, if you enable smooth transitions, then sometimes you can even do it without any animation: simply associate the positions and rotations for the elements on the two states and then because smooth transformations are enabled, animation will ocur.

Content overlapping when display size is too small

I have an issue with my site; I cannot find a way to make my content stop overlapping when the actual display size is smaller than the original display size - 1920x1080.
I would like to know how I could either scale down the whole page or just make my content not overlap.
Thanks in advance for any help provided!
var i = 0;
var txt1 ="foqjpcqkcqèckqècqq."
var txt2 ="iqj0pqcjqp'cjqpjciq'pcjqi'cjqic."
var txt3 ="jqopjfgoqpkfpqovmqpvqvkqpoèvkqp"
var prevScrollpos = window.pageYOffset;
var speed = 100; /* The speed/duration of the effect in milliseconds */
window.onload = function typeWriter() {
if (i < txt2.length) {
document.getElementById("about_l1").innerHTML += txt1.charAt(i);
document.getElementById("about_l2").innerHTML += txt2.charAt(i);
document.getElementById("about_l4").innerHTML += txt3.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
if (i == 0){
}
}
const scrollToTop =() => {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c - c / 8);
}
};
scrollToTop();
#import url('https://fonts.googleapis.com/css?family=Oswald:500');
.wrapper{
position: relative;
width: auto;
margin: 0 auto;
overflow-y: visible;
margin:0px;
}
.back{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url("../media/backgif2.gif");
background-size: cover;
transform-origin: 50% 50%;
color: white;
}
.thx{
position: fixed;
left:50%;
transform:translateX(-50%);
bottom: 15px;
}
hr.style-one {
position: relative;
bottom: 0px;
border: 0;
height: 1px;
width: 110%:;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}
.visuallyhidden{
opacity: 0;
animation: fade-in-right ease 0.8s forwards;
animation-delay: 0.1s;
}
.visuallyhidden2{
opacity: 0;
animation: fade-in-right ease 0.8s forwards;
animation-delay: 0.8s;
}
.visuallyhidden3{
opacity: 0;
animation: fade-in-right ease 2s forwards;
animation-delay: 1.5s;
}
.Lvisuallyhidden{
opacity: 0;
animation: fade-in-left ease 0.8s forwards;
animation-delay: 0.1s;
}
.Lvisuallyhidden2{
opacity: 0;
animation: fade-in-left ease 0.8s forwards;
animation-delay: 0.8s;
}
.Lvisuallyhidden3{
opacity: 0;
animation: fade-in-left ease 2s forwards;
animation-delay: 1.5s;
}
nav{
width: 100%;
position: absolute;
top:50px;
text-align:center;
}
nav a{
font-family: 'Oswald', sans-serif;
font-weight:500;
text-transform:uppercase;
text-decoration:none;
color:#16151b;
margin:0 15px;
font-size:16px;
letter-spacing:1px;
position:relative;
display:inline-block;
}
nav a:before{
content:'';
position: absolute;
width: 100%;
height: 3px;
background:#16151b;
top:47%;
animation:out 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
nav a:hover:before{
animation:in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
iframe{
height: 250px;
width: 400px;
border: 2px solid #FFFFFF;
}
input:focus {outline:0;}
p{
width: 45%;
font-family: 'Oswald', sans-serif; font-size:21px;letter-spacing:1px; font-weight:500;text-transform:uppercase;text-align: left;
color:#16151b;
position: absolute;
}
#keyframes in{
0%{
width: 0;
left:0;
right:auto;
}
100%{
left:0;
right:auto;
width: 100%;
}
}
#keyframes out{
0%{
width:100%;
left: auto;
right: 0;
}
100%{
width: 0;
left: auto;
right: 0;
}
}
#keyframes show{
0%{
opacity:0;
transform:translateY(-10px);
}
100%{
opacity:1;
transform:translateY(0);
}
}
#keyframes fade-in-right {
from {
opacity: 0;
transform: translateX(-25px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
#keyframes fade-in-left {
from {
opacity: 0;
transform: translateX(25px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
#div1{
height: 1200px;
}
#div2{
height: 500px;
}
#div3{
height: 500px;
}
#about_p{
position: absolute;
text-align: center;
height: 5%;
width: 70%;
left: 15%;
top: 30%;
}
#about_p2{
position: absolute;
left: 50%;
top: 95%;
}
#bar1{
position: absolute;
width: 45%;
max-width: 50%;
height: auto;
top: 39%;
left :28%;
border-bottom: 4px solid black;
}
#bar2{
position: relative;
height: 135px;
top: 715px;
left :9%;
border-left: 4px solid black;
}
#vid1{
position: absolute;
left: 25%;
top: 95%;
}
#vid2{
position: absolute;
left: 55%;
top: 150%;
}
#vid3{
position: absolute;
left: 25%;
top: 205%;
}
#title1{
position: absolute;
font-family: 'Oswald', sans-serif; font-size:50px;letter-spacing:1px; font-weight:500;text-transform:uppercase;text-align: left;
left: 5%;
bottom: -10%;
}
#title2{
position: absolute;
font-family: 'Oswald', sans-serif; font-size:50px;letter-spacing:1px; font-weight:500;text-transform:uppercase;text-align: left;
left: 80%;
bottom: -70%;
}
#title3{
position: absolute;
font-family: 'Oswald', sans-serif; font-size:50px;letter-spacing:1px; font-weight:500;text-transform:uppercase;text-align: left;
left: 5%;
bottom: -120%;
}
#arrow{
position: absolute;
height: 10%;
left: 90%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="css/inspiration.css" />
<script src="javascript/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="javascript/inspiration.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div class="back"></div>
<header>
<nav id="navbar">
About
Works
Inspiration
Price
Contacts
</nav>
</header>
<div id="bar1" class="visuallyhidden2"></div>
<div id="div1">
<p id="about_p" class="Lvisuallyhidden3">
<span id="about_l1">Music inspires people and I've been in</span>
<span id="about_l2"><br>If those artists can inspire you too then may</span>
</p>
</div>
<div id="div2">
<label id="title1" class="Lvisuallyhidden2">A$AP Rocky</label>
<iframe id="vid1" class="Lvisuallyhidden"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
<p id="about_p2" class="visuallyhidden2">
<span id="about_l3"><br>fdcjqiojqoicmqiojcopipcjqpèèpq qpoi jcqip jqè qè kq èjq èpjq q jqè jqpj pq c</span>
<span id="about_l4"><br>fdcjqiojqoicmqiojcopipcjqpèèpq qpoi jcqip jqè qè kq èjq èpjq q jqè jqpj pq c </span>
</p>
</div>
<div id="div3">
<label id="title2" class="visuallyhidden2">kzmzmzmzmzmz</label>
<iframe id="vid2" class="visuallyhidden"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</div>
<div id="div4">
<label id="title3" class="visuallyhidden2">Kendrick Lamar</label>
<iframe id="vid3" class="visuallyhidden"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</div>
<footer>
<input id="arrow" type="image" src="media/arrow.png" onclick="scrollToTop()" />
</footer>
</div>
<a class="thx" style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", Arial, sans-serif;left: 51%;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px;" href="https://www.instagram.com/manu.fma/?hl=fr" target="_blank" rel="noopener noreferrer" title="Magnolia's instagram"><span style="display:inline-block;padding:2px 3px;"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-1px;fill:white;" viewBox="0 0 32 32"><title></title><path d="M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z"></path></svg></span><span style="display:inline-block;padding:2px 3px;">Magnolia
</body>
</html>
https://jsfiddle.net/e6w5aLp7/

absolute position will cause elements to overlap. Better to use position:relative and display:block to stack elements on the page. Please refer to: https://www.w3schools.com/css/css_positioning.asp
Consider using bootstrap, responsive framework out of the box. Get started by pasting css and js link and you are ready to go:
https://getbootstrap.com/docs/4.3/getting-started/introduction/

Instead of using position: absolute everywhere you should consider to use other approach like :
CSS flex (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
CSS grid (https://css-tricks.com/snippets/css/complete-guide-grid/)
It's more flexible and responsive.
You also can use other units like viewports units (vw or vh) to use screen size relative units : https://css-tricks.com/fun-viewport-units/

creating scroll animation with css

I am trying to create a header menu when I scroll down it to get involved with animation into a circle and when it scrolled up it will be come back again . I checked the window is top if not then animate with javascript . But my code is not working .
$header = $('.header__fake');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 20) {
$header.addClass('animated').removeClass('fix');
} else {
$header.removeClass('animated').addClass('fix');
}
});
body {
background: #02021a url("http://i.imgur.com/705GHlC.jpg") no-repeat 0 0;
-webkit-background-size: 100% auto;
background-size: 100% auto;
color: #fff;
font-family: Helvetica Neue, Helvetica, Open sans, Arial, sans-serif;
font-weight:lighter;
letter-spacing:1px;
}
.content {
width: 320px;
position: relative;
margin: 0 auto;
}
.content h2 {
margin: 35px 0 0;
}
.content h1 {
text-align: center;
margin: 1000px 0 200px;
}
.content h1 span {
display: block;
width: 100%;
margin: 5px 0 0;
opacity: .5;
}
.content .header__fake {
position: fixed;
top: 15px;
left: 50%;
margin-left: -160px;
width: 320px;
}
.content .header__fake i {
display: block;
}
.content .header__fake .btm__border {
height: 1px;
background: #fff;
position: absolute;
bottom: 6px;
left: 0;
right: 0;
-webkit-transition: left 0.5s;
transition: left 0.5s;
}
.content .header__fake .icn__wrap {
cursor: pointer;
float: right;
width: 58px;
position: relative;
height: 58px;
margin-right: -20px;
}
.content .header__fake .icn__wrap .icn__hamburger {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-6px);
-ms-transform: translateX(-50%) translateY(-6px);
transform: translateX(-50%) translateY(-6px);
display: block;
width: 18px;
height: 1px;
z-index: 999;
background: #fff;
}
.content .header__fake .icn__wrap .icn__hamburger:after,
.content .header__fake .icn__wrap .icn__hamburger:before {
content: "";
float: left;
display: block;
width: 100%;
height: 1px;
background: #fff;
margin: 5px 0 0;
}
.content .header__fake .icn__wrap .icn__hamburger:before {
margin: 6px 0 0;
}
.content .header__fake .icn__wrap svg {
z-index: 10;
}
.content .header__fake .icn__wrap svg circle {
fill: none;
stroke: #fff;
stroke-width: .5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 39 39;
stroke-dashoffset: -39;
-webkit-transition: stroke-dashoffset 0.5s;
transition: stroke-dashoffset 0.5s;
}
.content .header__fake.animated .btm__border {
left: 100%;
right: 4px;
}
.content .header__fake.animated svg circle {
stroke-dashoffset: 0;
-webkit-transition: stroke-dashoffset 0.5s;
transition: stroke-dashoffset 0.5s;
}
.content .header__fake.fix .btm__border {
-webkit-animation: fix 0.2s linear;
animation: fix 0.2s linear;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
right: 5px;
}
#-webkit-keyframes fix {
from {
right: 5px;
}
to {
right: 0px;
}
}
#keyframes fix {
from {
right: 5px;
}
to {
right: 0px;
}
}
<div class="content">
<h2>Scroll to see the magic.</h2>
<div class="header__fake">
<div class="icn__wrap">
<i class="icn__hamburger"></i>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="58px" height="58px" viewBox="0 0 16 16" preserveAspectRatio="none">
<circle cx="8" cy="8" r="6.215" transform="rotate(90 8 8)"></circle>
</svg>
</div>
<i class="btm__border"></i>
</div>
<h1>Hmm<span>Now scroll back up.</span></h1>
</div>

I pasted above code in JSfiddle. It works perfectly. See it here
The problem could be with your jQuery lib initialization.

Develop Reference

JavaScript is the programming language of the Web.

SVG/CSS animated icon not working - javascript

Related

How to make a circle progress bar with left side of percentage

Div element pushed out of the page when resizing

Reverse animation on hamburger button

Content overlapping when display size is too small

creating scroll animation with css

Categories

Resources