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

Body with 100% height containting fixed Navbar "Margin Error"

I am trying to add a sticky responsive navbar in a body with 100% height but whenever I try to check in in mobile screen size the navbar gets marginalized towards the right side.
Also, when I tried the same code in the page containing Bootstrap in it, the padding and margin get imbalanced in the NavBar (Perhaps Bootstrap uses HTML5 ).
Here's my CSS and HTML code. The first one is CSS and the last one is HTML with it's Javascript.
/* Navbar css */
.MainBody {
padding-top: 0px;
text-align: center;
background: linear-gradient(rgb(240, 251, 255), rgb(168, 203, 255));
background-attachment: fixed;
height: 1000px;
padding: 0px;
}
.topnav {
overflow: hidden;
background-color: #020f3b;
position: fixed;
/* Safari */
width: 100%;
top: 0;
z-index: 1;
}
.topnav a {
float: left;
display: block;
color: #ffffff;
text-align: center;
font-weight: bold;
padding: 11px 16px;
text-decoration: none;
}
.topnav a:hover {
background-color: #a3dcff;
color: black;
}
.topnav a.active {
background-color: #0099ff;
color: white;
}
.topnav .icon {
display: none;
}
#media only screen and (max-width: 909px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
background: rgb(0, 73, 146);
float: right;
display: block;
}
}
#media only screen and (max-width: 909px) {
.topnav .responsive {
position: fixed;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/* Navbar Css <:: */
<body class="MainBody">
<div class="topnav" id="myTopnav">
AEC Tool
<a href="https://webmatrices.com/sponsor-adsense-eligibility-checker/" target='_blank'>Sponsor or Buy AEC</a>
<a href="https://webmatrices.com/" target='_blank'>Webmatrices</a>
<a href="https://blog.webmatrices.com/" target='_blank'>Our Blog</a>
<a href="https://facebook.com/webmatrices" target='_blank'>Facebook Page</a>
<a href="https://facebook.com/iambishwas" target='_blank'>Creator's Facebook</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<!-- Navbar script ::> -->
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<!-- Navbar script <:: -->
<!-- Navbar Bar | nv <:: -->
</div>
</body>

This is happening due to comflict of HTML and HTML5(Bootstrap). I got the error bro. I recommend you to use <!DOCTYPE HTML> at the top of your html file, this will 100% solve your issue.

The menu gets set to display: none when the screen is below 910px
Remove this CSS if you don't want the menu to go away on mobile:
#media only screen and (max-width: 909px)
.topnav a:not(:first-child) {
display: none;
}

Dropdown won't hide after clicking (plain HTML, CSS and JS)

I have a responsive navbar with a dropdown. Works well in PCs (the dropdown only pops up on hover of the cursor) but when I try it with smartphones (the navbar is adjusted) if I activate the dropdown any link in it will reload the page properly but the dropdown is still there. I want to solve the issue without jQuery if possible.
I'm working with django, that's why I use {{ }}
<!-- navbar.html -->
{% load static %}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static 'css/navbar.css' %}">
<div class="topnav" id="myTopnav">
<a class="active" href="{% url 'inicio' %}">Inicio</a>
<div class="dropdown">
<button class="dropbtn">Obras ▼
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Some text
Some text
Some text
</div>
</div>
☰
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</div>
I'll only include here the style for when the screen has changed, for simplicity:
/* navbar.css
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
padding-top: 14px;
padding-bottom: 15px;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
overflow: visible;
}
.topnav.responsive a.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: absolute;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
padding-bottom: 20px;
}
I got the Idea from the w3schools example and have done some major modifications

How can I use a SSI to create a persistent NavBar across fresh HTML pages?

I have my NavBar setup on my main template. I am now going to create my first HTML page that I have setup as a link on my NavBar. It is going to be a completely fresh HTML page with nothing on it besides the inherited styling options. All I want is for this new page to include the NavBar I have already tailored to my needs. What is the quickest and easiest way to do this, so that I can quickly do it on future new HTML pages as well? I am not familiar with PHP currently, so if the answer involves that please try to elaborate a little on the explanation.
I've trued using a basic include on a blank page but it didn't work. So far the only code I've listed below is solely for the setup of my NavBar... Am I supposed to transform the below code into a PHP file in order to do so?
I should include that I am currently hosting using GoDaddy.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
$('#myTopnav a').on('click', function(){
$('#myTopnav a').toggleClass(' responsive');
});
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.topnav a {
display: inline-flex;
color: #fff;
text-align: justify;
text-decoration: none;
font-size: 15px;
font-weight: lighter;
padding: 0;
margin: 5px 60px 5px 60px;
list-style-type: none;
transition : 0.3s;
}
.topnav a:hover {
color: #4286f4;
}
.active, .active:focus {
background-color: #333;
color: #4286f4;
}
.topnav .icon {
display: none;
}
.topnav a:active, .topnav a:visited {
outline: 0 !important;
}
#media screen and (max-width: 800px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: left;
display: flex;
position: absolute;
left: 0;
top: 8px;
line-height: 15px;
outline: 0;
}
.topnav{
flex-direction: column;
transition: height 2s;
}
}
#media screen and (max-width: 800px) {
.topnav.responsive {position: static;}
.topnav.responsive .icon {
position: absolute;
left: 0;
top: 8px;
line-height: 15px;
outline: 0;
}
.topnav.responsive a {
float: left;
display: inline;
text-align: center;
line-height: 50px;
}
}
<!DOCTYPE html>
<!-- Begin HTML-->
<html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Begin head-->
<head>
<title>Website</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="topnav" id="myTopnav">
<img src="Images/PlaceholderLogo.png"width="30" height="30">
Home
Shop
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</body>
</html>

cant hide an <a> tag when the screen resolution is below 600px

What i want to achieve is when i change the resolution of my browser to below 600px the tags except home will disappear. and only appear again when the sandwich button is clicked but the (admin control) and (sign out) is not disappearing. I think is because of i make the "display" attribute of both to "block" using javascript. that cause a conflict with the css code (.topnav a:not(:first){ display:none;}. i spend hours in fixing it and searching for a solution but with no luck. so any help and suggestion is greatly appreciated.
this is what it look like
here is the php
<?php
error_reporting(E_ALL & ~E_NOTICE);
error_reporting(E_ERROR | E_PARSE);
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="topnav" id="myTopnav">
Home
Speakers
About
Contact
Reservation
Sign Out
<?php echo $_SESSION['firstname']; ?>
Sign Up
Sign In
Admin control
☰
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<img id="img1" src="img/homepage-image1.jpg">
<div class="text"></div>
</div>
<div class="mySlides fade">
<img id="img2" src="img/homepage-image2.jpg">
<div class="text"></div>
</div>
<div class="mySlides fade">
<img id="img3" src="img/homepage-image3.jpg">
<div class="text"></div>
</div>
<div id="dots">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<div id="index-welcome"><p>Welcome</p></div>
<div id="footer" >Copyright 2017</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 4000);
}
</script>
<script>
function ifAdmin()
{
document.getElementById("signIn").style.display = "none";
document.getElementById("signUp").style.display = "none";
document.getElementById("signOut").style.display = "block";
document.getElementById("adminControl").style.display = "block";
}
</script>
<script>
function ifNotAdmin()
{
document.getElementById("signIn").style.display = "none";
document.getElementById("signUp").style.display = "none";
document.getElementById("signOut").style.display = "block";
document.getElementById("adminControl").style.display = "none";
}
</script>
<script>
function ifNotLogin()
{
document.getElementById("user").style.display = "none";
document.getElementById("signOut").style.display = "none";
document.getElementById("adminControl").style.display = "none";
}
</script>
<script>
function myFunction()
{
var x = document.getElementById("myTopnav");
if (x.className === "topnav")
{
x.className += " responsive";
} else
{
x.className = "topnav";
}
}
</script>
<?php
if (isset($_SESSION['signedIn']) && $_SESSION['signedIn'] == true)
//if login
{
if($_SESSION['type'] == 1)
{
echo "<script type='text/javascript'>ifAdmin();</script>";
}
elseif($_SESSION['type'] == 0)
{
echo "<script type='text/javascript'>ifNotAdmin();</script>";
}
}
//if not login
else
{
echo "<script type='text/javascript'>ifNotLogin();</script>";
}
?>
</body>
</html>
css
#media screen and (max-width: 600px)
{
/*navbar*/
.topnav
{
height:auto;
width:100%;
overflow: hidden;
background-color: #4682B4;
position:fixed;
top:0;
z-index: 10;
}
.topnav a:not(:first-child)
{
display: none;
}
.topnav a.icon
{
float: right;
display: block;
height:15px;
}
.topnav a
{
height:15px;
width:auto;
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 16px 16px;
text-decoration: none;
font-size: 15px;
}
.topnav a:hover
{
background-color: lightblue;
color: black;
height:12px;
}
/*footer*/
#footer
{
background-color: #4682B4;
color: #f2f2f2;
text-align: center;
padding: 15px 25px;
font-size: 12px;
font-weight:bold;
position: absolute;
right: 0;
bottom: 0;
left: 0;
text-align: center;
}
}
#media screen and (max-width: 600px)
{
.topnav.responsive
{
position: relative;
}
.topnav.responsive .icon
{
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a
{
float: none;
display: block;
text-align: left;
}
}
please help i think im near it. i add display:none!important; in the css instead of "display:none" only, like chris Spil said but this happen. the "speaker tag" goes to the top besides "home tag".
this is what i change.
#media screen and (max-width: 600px)
{
/*navbar*/
.topnav
{
height:auto;
width:100%;
overflow: hidden;
background-color: #4682B4;
position:fixed;
top:0;
z-index: 10;
}
.topnav a#speaker
{
display:none;
}
.topnav a#about
{
display:none;
}
.topnav a#contact
{
display:none;
}
.topnav a#reservation
{
display:none;
}
.topnav a#user
{
display:none!important;
}
.topnav a#adminControl
{
display:none!important;
}
.topnav a#signOut
{
display:none!important;
}
.topnav a.icon
{
display:block;
float: right;
display: block;
height:15px;
}
.topnav a
{
height:15px;
width:auto;
float: left;
color: #f2f2f2;
text-align: center;
padding: 16px 16px;
text-decoration: none;
font-size: 15px;
}
.topnav a:hover
{
background-color: lightblue;
color: black;
height:12px;
}
#media screen and (max-width: 600px)
{
.topnav.responsive
{
position: relative;
}
.topnav.responsive .icon
{
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a#speaker
{
float: none;
display:block!important;
text-align: left;
}
.topnav.responsive a#about
{
float: none;
display:block!important;
text-align: left;
}
.topnav.responsive a#contact
{
float: none;
display:block!important;
text-align: left;
}
.topnav.responsive a#reservation
{
float: none;
display:block!important;
text-align: left;
}
.topnav.responsive a#user
{
float: none;
display:block!important;
text-align: left;
}
.topnav.responsive a#adminControl
{
float: none;
display:block!important;
text-align: left;
}
.topnav.responsive a#signOut
{
float: none;
display:block!important;
text-align: left;
}
}

can you try display:none!important; on your css code and let me know? Do you have this somewhere live?

You can use onclick to set visibility and opacity in javascript.
To show you, I created this jsfiddle as an example.
EDIT: Updated the jsfiddle link.

Looking at your HTML, you don't set the viewport in your <head> tag. Did you include this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">.
This tag will give your browser instructions on how to control the dimensions and scaling of your page. More can be read about it here.