We Keep Coding

Text aninamtion is shaking?

I was coding away on my newest project of learning css animation.
I've come a long way but for some reason when I scale my div-boks with a text element inside the text begins to shake when it appears.
What is the solution to this...
Btw I do care about effecienty as I will be rated on that for my project.
If javascipt is a better option and you know how to provide that please do
(best in the form of a tutorial page as I actually want to learn the code :D)
I will later use it to for responsive design so keep that if possible it would be nice to find a solution that cheaks that boks too
Here is the code:
function myFunction() {
var x = document.getElementById("topnav_id");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > window.innerHeight || document.documentElement.scrollTop > window.innerHeight) {
document.getElementById("topnav_id").style.top = "0px";
} else {
document.getElementById("topnav_id").style.top = "-300px";
}
}
#import url('https://fonts.googleapis.com/css2?family=Marck+Script&family=Oswald:wght#200;300;400;500;600;700&display=swap');
/* animations */
#media (prefers-reduced-motion: no-preference) {
.fa-down-long {
position:relative;
animation-name: hover-up-down;
animation-duration: 1s;
animation-iteration-count: infinite;
}
}
#keyframes hover-up-down {
0% {left:0px; top:30px;}
25% {left:0px; top:30px;}
50% {left:0px; top:50px;}
100% {left:0px; top:30px;}
}
/* */
#media (prefers-reduced-motion: no-preference) {
.title {
position:relative;
animation-name: opacity-apper;
animation-duration: 10s;
}
}
#keyframes opacity-apper{
0% {opacity: 0%; transform: scale(0.5);}
100% {opacity: 100%; transform: scale(1);}
}
* *:not(.topnav, #topnav){
margin: 0;
}
.background {
height: 100vh;
}
.background_header{
background-color: black;
background-image: url(/assets/placeholders/Front\ page.jpeg);
background-position: center;
}
.background_black{
background-color: black;
}
h1{
font-size: 8vw;
}
h2{
font-size: 3vw;
font-weight: 300;
}
.title {
display: grid;
grid-template-rows: 200px auto ;
font-family: 'Oswald', sans-serif;
color: white;
text-align: center;
padding-top: 30vh;
justify-content: center;
}
/* menubar */
#media screen and (min-width: 600px) {
.flex{
display: flex;
align-items: center;
column-gap: 2rem;
}
}
#topnav_id{
top: -300px;
transition: top 0.3s;
}
/* menubar responsvie */
.logo{
color: black;
width: 300px;
}
#media screen and (min-width:600px) {
.topnav{
position: fixed;
display: flex;
width: 100%;
z-index: 99;
}
}
#media screen and (max-width:600px) {
.topnav{
position: fixed;
display: block;
width: 100%;
z-index: 99;
}
}
.topnav a {
float: left;
display: block;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: rgb(0, 0, 0);
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 2;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: rgb(255, 255, 255);
}
.dropdown-content a:hover {
background-color: rgb(243, 243, 243);
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(.active), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: fixed;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beta1</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class=" background background_header">
<header class="header" id="header">
<div class="topnav" id="topnav_id">
<img class="logo" src="assets/Clean logo shite.svg" alt="Website_Logo">
<div class="flex">
Skills
About
Contact
<div class="dropdown">
<button class="dropbtn">Protfolio
<i class="fa fa-caret-down dropdown_icon"></i>
</button>
<div class="dropdown-content">
Design
School
Public
Social Media
</div>
</div>
☰
</div>
</div>
<div class="title">
<h1>I Make Visions Into Reality</h1>
<h2>Scroll to find More!</h2>
<i class="fa-solid fa-down-long" style="font-size: 5rem; padding-top: 4vh;"></i>
</div>
</div>
<div class="background background_video">
</div>
<div class="background background_white">
</div>
<div class="background background_black">
</div>
<script src="scripts/scroll.js"></script>
<script src="scripts/responsive.js"></script>
<script src="https://kit.fontawesome.com/fd59281c27.js" crossorigin="anonymous"></script>
</body>
</html>
<!-- Colors:
-----------------------------
New Black - #11121a
Orange - #11121a
Blue - #5865F2
Red - #ED4245
-----------------------------
******************************************
Font:
-----------------------------
Title - Oswald
-----------------------
font-family: 'Oswald', sans-serif;
---
#import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
-----------------------------
Fancy - Marck Script
-----------------------
font-family: 'Marck Script', cursive;
---
#import url('https://fonts.googleapis.com/css2?family=Marck+Script&display=swap');
-----------------------------
Text - Arial
----------------------- -->
Thanks

Animations that scale or move position can cause "lag" or "stuttering", especially for low/mid end pc's. It's also recommended not to play too many animations at the same time since that can cause stuttering too. I have a portfolio website with a lot of animations which run fine on my personal pc, but can stutter on my work laptop. I'm thinking that's the issue in this case since your animation runs fine for me.
an article that might help:
https://www.keycdn.com/blog/animation-performance

How do i deal with responsive menu?

I'm trying to make a responsive menu but texts are coming down when im resizing my website.
When i'm resizing to a lower dimension like 637 x 400 "a empresa" "projetos" and "contato" they drop and come down.
nav {
height: 60px;
width: 100%;
background-color: #a23286;
color: #eee;
position: fixed;
text-align: center;
}
/* menu + logo dimensoes */
nav ul {
display: inline-block;
padding: 0;
margin: 0;
text-align: center;
}
nav li {
float: none;
display: inline-block;
text-align: center;
}
nav a {
display: inline-block;
width: 100px;
text-align: center;
padding: 17px 0;
color: #eee;
text-decoration: none;
}
nav ul li:hover {
border-bottom: 5px solid #a23286;
}
nav a#openup {
display: none;
}
Should i just create a query in css for this state and change the font of the text?
https://codepen.io/rfop2/pen/JjjBBRe

You can use a media query and set the interval between 400px and 637px and set the width of nav a to 85px.
#media only screen and (max-width: 637px) and (min-width: 400px) {
nav a {
width: 85px;
}
}
Your codepen: Codepen

You can just use css flex for this. See ul style below.
nav ul {
display: flex;
flex-wrap: no-wrap;
justify-content: center;
padding: 0;
margin: 0;
}
$(function() {
menu = $("nav ul");
$("#openup").on("click", function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function() {
var w = $(this).width();
if (w > 480 && menu.is(":hidden")) {
menu.removeAttr("style");
}
});
$("nav li").on("click", function(e) {
var w = $(window).width();
if (w < 480) {
menu.slideToggle();
}
});
$(".open-menu").height($(window).height());
});
$('.cf a').on('click', function(event){
if(this.hash !== ''){
event.preventDefault();
const hash = this.hash;
$('html, body').animate(
{
scrollTop: $(hash).offset().top
},
800,
function(){
window.location.hash = hash;
}
);
}
});
#import url('https://fonts.googleapis.com/css?family=Titillium+Web&display=swap');
/* corpo geral */
body {
font-family: 'Titillium Web', sans-serif;
margin: 0;
line-height: 1.6;
}
/* menu */
nav {
height: 60px;
width: 100%;
background-color: #a23286;
color: #eee;
position: fixed;
text-align: center;
}
/* menu + logo dimensoes */
nav ul {
display: flex;
flex-wrap: no-wrap;
justify-content: center;
padding: 0;
margin: 0;
}
nav li {
float: none;
display: inline-block;
text-align: center;
}
nav a {
display: inline-block;
width: 100px;
text-align: center;
padding: 17px 0;
color: #eee;
text-decoration: none;
}
nav ul li:hover {
border-bottom: 5px solid #a23286;
}
nav a#openup {
display: none;
}
/* logo no menu */
.logo{
float: left;
height: 50px;
}
.textoIn{
background-color: #a23286;
height: 400px;
}
h1{
margin: 0;
padding: 0;
padding-top: 100px;
text-align: center;
font-size: 30px;
color: black;
}
/* texto abaixo do menu */
#media screen and (max-width: 580px) {
nav {
height: auto;
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav li {
width: 100%;
float: left;
position: relative;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
background: #a23286;
border-bottom: 1px solid #555;
}
nav a:hover {
background-color: #a23286;
}
nav a#openup:after {
content: "|||";
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
/* IE 9 */
-webkit-transform: rotate(-90deg);
/* Safari and Chrome */
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 5px;
top: 20px;
}
nav a#openup {
display: block;
background-color: #a23286;
width: 100%;
position: relative;
}
}
.cf:before, .cf:after {
content: "";
display: table;
}
.cf:after {
clear: both;
}
.cf {
zoom: 1;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>JRConecte</title>
</style>
</head>
<body>
<!-- Menu -->
<div id="Menu">
<header>
<nav class='cf'>
<ul class='cf'>
<div class = "logo">
<img src="./img/logojrc.png">
</div>
<li>
INICIO
</li>
<li>
<a href='#atuacao'>ATUAÇÃO</a>
</li>
<li>
<a href='#equipe'>EQUPE</a>
</li>
<li>
<a href='#empresa'>A EMPRESA</a>
</li>
<li>
<a href='#projetos'>PROJETOS</a>
</li>
<li>
<a href='#contato'>CONTATO</a>
</li>
</ul>
<a href='#' id='openup'>JRConecte</a>
</ul>
</nav>
</header>
</div>
<!-- Texto inicial -->
<div id="home">
<div class='textoIn'>
<h1>
asdasdasddsadaasdasdsadadadsa
</h1>
</div>
</div>
<!-- Areas de Atuacao -->
<div>
</div>
<!-- Nossa Equipe -->
<div></div>
<!-- A empresa -->
<div>
</div>
<!-- Nossos Projetos-->
<div> </div>
<!-- Depoimentos -->
<div></div>
<!-- Fale Conosco -->
<div> </div>
<!-- Redes Socias -->
<div></div>
<script
src="http://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="js/main.js"></script>
</body>
</html>

Responsive Navigation Not Showing All Items

Hello I am currently learning responsive design and I am trying to make a responsive navigation bar which turns in to a menu when visited on a phone or mobile device! Everything works except not all the navigation items show on the mobile device and I am not sure why! This is the code:
<div class="container">
<div class="navbar">
<ul style="padding-left: 0px;">
<li class="logo"> RONNIE<b>GURR</b></li>
<section class="div_navbar_items">
<li class="navbar_items"> HOME </li>
<li class="navbar_items"> ABOUT US </li>
<li class="navbar_items"> GALLERY </li>
<li class="navbar_items"> SHOP </li>
<li class="navbar_items"> CONTACT </li>
</section>
<li class="icon">
☰
</li>
</ul>
</div>
</div>
<script src="js/responsive.js"></script>
Here is the CSS:
.container {
margin: auto;
width: 90%;
}
.navbar {
position: fixed;
z-index: 100;
overflow: hidden;
margin: auto;
width: 100%;
left:0;
top:0;
}
.navbar li.logo,
.navbar li.navbar_items {
list-style-type: none;
display: inline-block;
}
.navbar li a {
margin-top: 50px;
font-family: 'Cabin', sans-serif;
font-size: 1.3em;
color: white;
font-weight: 700px;
display: inline-block;
text-align: center;
padding: 10px 16px;
text-decoration: none;
}
.navbar li.navbar_items a:hover {
border-bottom-style: solid;
border-bottom-color: white;
/* padding-bottom: 5px; */
}
.navbar li.icon {
display: none;
}
.div_navbar_items {
float: right;
padding-right:1%;
}
/*Start of mobile nav*/
#media screen and (max-width:875px) {
.navbar li.navbar_items {
display: none;
}
.navbar li.icon {
float: right;
display: inline-block;
position: absolute;
right: 0;
top: 19px;
}
}
#media screen and (max-width:875px) {
.navbar.responsive {
position:fixed;
width: 100%;
height: 100vh;
background-color: rgba(236,201,205, 1);
transition: background-color .6s;
}
.navbar.responsive li.logo {
floatL: left;
display: block;
}
.navbar.responsive .div_navbar_items {
float: none;
padding-right:0;
}
.navbar.responsive li.navbar_items {
display: block;
padding: 50px;
font-size: 25px;
}
.navbar.responsive li.navbar_items a {
display: block;
text-align: center;
}
.navbar.responsive li.navbar_items a:hover{
color:#17171e;
border-bottom-color: transparent;
}
}
/*End of mobile nav*/
And here is the JS:
function navBarFunction() {
document.getElementsByClassName("navbar")[0].classList.toggle("responsive");
}
codepen: https://codepen.io/anon/pen/JyEoWY

I think this will get you in the right direction, then you can decide upon what you'd like to do from here. You are setting your navbar to be 100vh, which is 100% height of the screen, so you need to make sure your padding and margin on your nav elements aren't so much. Try removing any margin and padding from these two styles, then adapt it on your own from here. If you don't want to change this stuff, refer to the second part of my answer, and just make the nav scrollable.
.navbar li a {
margin-top: 0px;
}
#media screen and (max-width: 875px) {
.navbar.responsive li.navbar_items {
display: block;
padding: 0px;
font-size: 25px;
}
}
Also, if you look in .navbar styling (line 8 of your codepen) you have it set to overflow: hidden. You can update your .navbar.responsive class with overflow of scroll to get it to work.
#media screen and (max-width:875px) {
.navbar.responsive {
position:fixed;
width: 100%;
height: 100vh;
background-color: rgba(236,201,205, 1);
transition: background-color .6s;
overflow: scroll; // Set overflow to scroll
}
}

I guess this happenes because you make .navbar.responsive {
position:fixed;
And you just can't watch all content of block, because it's not allow to scroll. When i change this property to absolute, i looked all items of menu.
By the way, you write CSS property font-weight with px, font-weight: 700px, but it shouldn't be px, it's relative value: font-weight: 700

Header navbar error

I'm coding a responsive navbar, which turns into a burger menu below a certain width, however when I try to open the dropdown menu, it all jumps back up to the top of the page rather than remaining wherever I am within the page.
Sorry it's quite hard to describe, but do find all the code below and please let me know if you're able to see what the issue is.
Thank you all in advance:
$('#burger_menu').click(function() {
$('header ul').css('display', 'block');
$('header ul').mouseleave(function() {
$('header ul').css('display', 'none');
});
});
header {
width: 100%;
background: #62c2d2;
position: fixed;
top: 0;
z-index: 20;
}
header #logo {
width: 300px;
height: 40px;
margin: 15px;
background: url('../img/new-logo.png')center no-repeat;
background-size: cover;
float: left;
}
header nav {
padding: 10px 15px;
float: right;
}
header nav #burger_menu {
padding-right: 20px;
font-size: 40px;
display: none;
color: #fff;
}
header nav #burger_menu:visited {
color: #fff;
}
header nav #burger_menu:hover {
color: #eee;
}
header nav #burger_menu:active {
color: #fff;
}
header nav ul {
display: block;
}
header nav li {
padding: 10px;
display: inline-block;
float: left;
}
header nav a {
width: fit-content;
font-size: 18px;
color: #fff;
text-decoration: none;
position: relative;
}
#media screen and (max-width: 1023px) {
/* NAV */
header nav #burger_menu {
display: inline-block;
}
header nav ul,
nav:active ul {
display: none;
position: absolute;
padding: 20px 40px;
background: #62c2d2;
right: 0;
top: 80px;
width: 30%;
}
header nav li {
width: 100%;
text-align: center;
padding: 15px;
margin: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="clearfix">
<!-- left -->
<!-- right -->
<nav>
<i class="fa fa-bars"></i>
<ul>
<li>
<span class="active">home</span>
</li>
<li>
<span>about</span>
</li>
<li>
<span>careers</span>
</li>
<li>
<span>contact</span>
</li>
</ul>
</nav>
</header>

Can't get rid of white margin on div's

So, I have tried everything I can think of to get rid of the white margins around everything on my page.
I have put: margin: 0; on everything I can think of and it still does not get rid of it. Any help would be great!
I apologize for the giant wall of code.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
/* global */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: sans-serif;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: "Tahoma", sans-serif;
font-size: 16px;
color: #454545;
background-color: #fff;
}
div {
margin: 0;
}
/* end global */
/* custom */
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.footer {
padding: 5px 10px;
background-color: #428cd9;
}
/* end custom */
/* custom responsive */
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
/*end custom responsive */
/* navbar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #428cd9;
}
ul.topnav li {
float: left;
}
ul.topnav li a {
height: 55px;
display: inline-block;
color: #454545;
padding: 0px 16px;
line-height: 3.0;
text-decoration: none;
text-align: center;
font-size: 17px;
transition: 0.3s;
}
ul.topnav li a:hover {
background-color: #2162a6;
color: #757575;
}
ul.topnav li.icon {
display: none;
}
/* end navbar */
/* responsive navbar */
#media screen and (max-width:680px) {
ul.topnav li:not(: first-child) {
display: none;
}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
#media screen and (max-width:680px) {
ul.topnav.responsive {
position: relative;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/* end responsive navbar */
#media screen and (max-width:680px) {
.nomobile {
display: none;
}
.yesmobile {
width: 100%;
}
}
.header-img {
min-height: 300px;
background-image: url(http://thirdshiftdesigns.net/images/cabheader2.png);
background-repeat: no-repeat;
background-size: auto 100%;
background-position: center top;
/*padding: 40px; (If don't want to set min-height or some image content is there) */
}
.end-header {
width: 100%;
height: 15px;
background-color: #428cd9;
}
<body>
<div class="col-12">
<ul class="topnav" id="myTopnav">
<li>Logo</li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li class="icon">
☰</li>
</ul>
<div class="row">
<div class="col-12">
<div class="header-img">
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="end-header">
</div>
</div>
</div>
</div>
<!-- end header -->
<!-- footer -->
<div class="col-12">
</div>
</body>

If you inspect the element, you can find that the unwanted space is because of the following style which applies padding to all elements with the class value containing col-.
[class*="col-"] {
float: left;
padding: 15px;
}
Override the style and you can get rid of the unwanted space. Note that this will set the padding to 0 for all the classes whose value contains col-.
[class*="col-"] {
padding: 0;
}
Or you can only override the padding of .col-12 which will apply padding of 0 to .col-12 while the other classes containing col- will still get a padding of 15px.
.col-12 {
padding: 0;
}

You're wrapping many elements in a .col-12 class. All .col- elements are set in your CSS to contain 15px of padding around the edges. Here's a screenshot from inspecting the page in Chrome Developer Tools where you can see the element highlighted:

You need to set padding to 0 on the col-12 element.
change the following in your CSS
.col-12 {
width: 100%;
}
to
.col-12 {
width: 100%;
padding: 0px;
}
fiddle example here