I've just started a project and so far I've added a header and text. I've gotten the header to resize correctly but I'm struggling to get the text and subtitle to do so.
I would like the text to resize smoothly but not sure how to go about doing this. I attempted using media queries but it's not really effective. Not really sure how to go about fixing this, any help will be greatly appreciated.
Codepen: https://codepen.io/Ayanfe/pen/oNoqoaR
HTML
<div class="container">
<div class="glitch" data-text="Ayanfe Sanusi">Ayanfe Sanusi</div>
<div class="glow">Ayanfe Sanusi</div>
<hr class="solid">
<p class="subtitle">ILLUSTRATOR & CODER</p>
</div>
<div class="scanlines"></div>
</div>
CSS
.container {
position: absolute;
transform: translate(-50%, -50%);
margin-top: 50%;
left: 50%;
width: 100%;
}
.glitch, .glow {
color: #dfbfbf;
position: absolute;
font-size: 12rem;
animation: glitch 5s 5s infinite;
font-family: "Oswald", sans-serif;
font-style: italic;
font-weight: 200px;
margin-top: -28.5%;
left: 6%;
width: 100%;
text-size-adjust: auto;
}
.glitch::before, .glow::before {
content: attr(data-text);
position: absolute;
left: 0;
text-shadow: -8px 0 magenta;
background: none;
overflow: hidden;
top: 0;
animation: noise-1 3s linear infinite alternate-reverse, glitch 5s 5.05s infinite;
}
.glitch::after, .glow::after {
content: attr(data-text);
position: absolute;
left: 0px;
text-shadow: -5px 0 lightgreen;
background: none;
overflow: hidden;
top: 0;
animation: noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite;
}
#keyframes glitch {
1% {
transform: rotateX(10deg) skewX(90deg);
}
2% {
transform: rotateX(0deg) skewX(0deg);
}
}
.scanlines {
overflow: hidden;
mix-blend-mode: difference;
}
}
.scanlines::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: repeating-linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.05) 0.5%, transparent 1%);
animation: fudge 7s ease-in-out alternate infinite;
}
#keyframes fudge {
from {
transform: translate(0px, 0px);
}
to {
transform: translate(0px, 2%);
}
}
.solid {
width: 50%;
position: relative;
color: rgba(165, 141, 141, 1);
opacity: 0.3;
margin-top: -12.5%;
left: 7%;
}
.subtitle {
font-family: Arial, Helvetica, sans-serif;
font-weight: 100;
font-size: 1rem;
color: rgba(165, 141, 141, 1);
text-transform: uppercase;
letter-spacing: 1em;
position: relative;
margin-top: -0.6%;
right: -58%;
animation: glitch-2 5s 5.02s infinite;
}
rem is a static size for the font based on the html style for the font.
For example, if the html font size is set to 18px setting a fonts size for an element to 2rem will result in a font with 36px size (regardless of the page width).
In order to achieve what you want you should use vw which is setting the size based on the view width, setting the title to 10.35vw and the subtitle to 0.85vw should do the trick
GIF Example
HTML
<div class=nav>
<header>
[Ayanfe Sanusi]
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</header>
</div>
<div class="container">
<div class="glitch" data-text="Ayanfe Sanusi">Ayanfe Sanusi</div>
<div class="sub-container">
<div class="solid"></div>
<p class="subtitle">ILLUSTRATOR & CODER</p>
</div>
<div class="scanlines"></div>
</div>
CSS
#font-face {
font-family: 'montsserat';
src: url(fonts/Montserrat-SemiBold.ttf);
font-weight: 100;
font-style: SemiBold;
}
#font-face {
font-family: 'montsseratR';
src: url(fonts/Montserrat-Regular.ttf);
font-weight: 100;
font-style: Regular;
}
#font-face {
font-family: 'montsseratM';
src: url(fonts/Montserrat-Medium.ttf);
font-weight: 100;
font-style: Regular;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-image: linear-gradient(to right, #0c0427, #0d0427, #0d0427, #0e0327, #0e0327, #11082f, #130c36, #160e3e, #1f1150, #2a1463, #371575, #451488);
padding: 0;
margin: 0;
height: 100%;
width: 100%;
display: flex;
min-height: 100vh;
overscroll-behavior: none;
-webkit-animation: fadeIn 2s;
animation: fadeIn 2s;
animation-delay: 0s;
overflow-x: hidden;
cursor: url(Cursors/3.png), auto;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.875rem 6.25rem;
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'Montserrat', sans-serif;
letter-spacing: 1px;
cursor: url(Cursors/3.png), auto;
}
.logo {
position: relative;
left: -50px;
letter-spacing: 1px;
cursor: url(Cursors/3.png), auto;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 1.563rem;
text-transform: uppercase;
letter-spacing: 0.313rem;
font-family: 'Montserrat', sans-serif;
cursor: url(Cursors/3.png), auto;
}
.logo:hover{
pointer-events: none;
border: none;
box-shadow: none;
background: transparent;
cursor: url(Cursors/3.png), auto;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
font-family: montsseratR;
font-size: 0.9rem;
text-transform: none;
cursor: url(Cursors/3.png), auto;
}
header ul li {
list-style: none;
margin-left: 1.25rem;
font-family: montsseratR;
font-size: 0.9rem;
text-transform: none;
cursor: url(Cursors/3.png), auto;
}
header ul li a {
text-decoration: none;
padding: 0.375rem 0.938rem;
color: #fff;
border-radius: 1.25rem;
font-family: 'Montserrat', sans-serif;
font-size: 0.9rem;
text-transform: none;
position: sticky;
opacity: 0.5;
text-transform: uppercase;
cursor: url(Cursors/3.png), auto;
}
header ul li a.active {
color: #fff;
opacity: 1;
font-family: 'Montserrat', sans-serif;
cursor: url(Cursors/3.png), auto;
}
header ul li a:hover {
color: #fff;
opacity: 1;
font-family: 'Montserrat', sans-serif;
font-size: 0.9rem;
position: sticky;
border: none;
box-shadow: none;
transition-delay: 0s;
text-transform: uppercase;
z-index: 20000;
cursor: url(Cursors/3.png), auto;
}
.container {
display: flex;
flex-direction: column;
margin-top: 15rem;
margin-left: 5%;
width: 100%;
margin-bottom: 5%;
}
.glitch {
color: #dfbfbf;
font-size: 9rem;
font-family: "Oswald", sans-serif;
font-style: italic;
text-shadow: -5px 0 lightgreen, -8px 0 magenta;
animation: noise-1 3s linear infinite alternate-reverse, glitch 5s 5.05s infinite;
margin-left: 2%;
}
#keyframes glitch {
1% {
transform: rotateX(10deg) skewX(90deg);
}
2% {
transform: rotateX(0deg) skewX(0deg);
}
}
.sub-container{
display: flex;
flex-direction: row;
}
.scanlines {
overflow: hidden;
mix-blend-mode: difference;
}
.scanlines::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: repeating-linear-gradient(to bottom, transparent 0%,
rgba(255, 255, 255, 0.05) 0.5%, transparent 1%);
animation: fudge 7s ease-in-out alternate infinite;
}
#keyframes fudge {
from {
transform: translate(0px, 0px);
}
to {
transform: translate(0px, 2%);
}
}
.solid {
width: 50%;
margin-top: 0.5rem;
height: 1.5px;
background-color: rgba(165, 141, 141, 1);
opacity: 0.3;
margin-left: 3%;
margin-right: 1.5%;
}
.subtitle {
font-family: Arial, Helvetica, sans-serif;
font-weight: 100;
font-size: 1rem;
color: rgba(165, 141, 141, 1);
text-transform: uppercase;
letter-spacing: 1em;
right: -58%;
animation: glitch-2 5s 5.02s infinite;
}
#keyframes glitch-2 {
1% {
transform: rotateX(10deg) skewX(70deg);
}
2% {
transform: rotateX(0deg) skewX(0deg);
}
}
Related
I have built a modal and inserted it into my code, however whenever I press the button that is supposed to open it up it goes to the bottom of the page. It is supposed to be on top of the rest of the page with a blurry bg, per say, but it just goes to the bottom of the page and it isn't even properly formatted. Here is an image.
Here is the code for that, the navbar and their css, and the modal js file.
https://repl.it/repls/GrubbyInsubstantialAutosketch
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<nav>
<div class="menu-center">
<input type="checkbox"id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<img src="logo-solo.png" >
<ul>
<li><a href="#home" class="active" > Home</a></li>
<li><a href="#quem-somos" >Quem somos</a></li>
<li>Onde Atuamos</li>
<li>Servicos</li>
<li>Depoimentos</li>
<li>comecando</li>
<li>Contacte-nos</li>
<a class="cta" rel="modal:open" href="#ex1" key="login" id="myBtn">Acessar</a>
</ul>
</div>
</nav>
<script src="scroll.js"></script>
<script type="text/javascript">
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
<div class="modal" id="modalContainer">
<div class="container" id="myModal">
<div class="form-container sign-up-container">
<form action="#">
<h1>MMT University</h1>
<span>Se registre para começar</span>
<input type="text" placeholder="Usuário" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Senha" />
<input type="password" placeholder="Repita a sua senha" />
<button>Registrar</button>
</form>
</div>
<div class="form-container sign-in-container">
<form action="#">
<h1>Acessar</h1>
<span>Acesse a MMT University</span>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Senha" />
Esqueceu a senha?
<button>Acessar</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Bem vindo!</h1>
<p>Para continuar aprendendo, acesse a sua conta!</p>
<button class="ghost" id="signIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>MMT University!</h1>
<p>Se registre para entrar na melhor universidade trading do mundo.</p>
<button class="ghost" id="signUp">Registre-se</button>
</div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
<script src="modal.js"></script>
</body>
Here is my css file, that has both the navbar and the modal code.
/*I could not add the justify content tag, it made my navbar disappear, this is my navbars css*/
body {
overflow-x: hidden;
display: flex;
align-items: center;
flex-direction: column;
font-family: 'Montserrat', sans-serif;
height: 100%;
}
a {
text-decoration: none;
}
nav {
height: 10vh;
background: #05031b;
opacity: 0.85;
transition: all 0.5s ease;
font-family: "Montserrat", sans-serif;
z-index: 1;
position: fixed;
width: 100%;
}
nav img {
height: 80px;
width: 80px;
margin-left: 5vh;
margin-top: 11px;
}
.social-media-icons {
position: absolute;
top: 10vh;
left: 0;
font-size: 8vh;
margin-right: 5vh;
}
.fa:hover {
opacity: 0.7;
}
.fa-youtube {
background: #05031b;
color: white;
margin-top: 0px;
font-size: 40px;
}
.fa-instagram {
background: #05031b;
color: white;
top: 0;
font-size: 50px;
margin-right: 5vh;
}
nav ul{
float: right;
margin-right: 10px;
margin-top: 20px;
}
nav ul li{
display: inline-block;
line-height: 50px;
margin: 5px 50px;
font-family: "Montserrat", sans-serif;
}
nav ul li a{
position: relative;
color: white;
font-size: 14px;
padding: 5px 6px;
font-family: "Montserrat", sans-serif;
text-transform: uppercase;
}
nav ul li a:before{
position: absolute;
content: '';
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background: rgb(220,52,52);
transform: scaleX(0);
transform-origin: right;
transition: transform .4s linear;
font-family: "Montserrat", sans-serif;
}
nav ul li a:hover:before{
transform: scaleX(1);
transform-origin: left;
font-family: "Montserrat", sans-serif;
}
nav ul li a:hover{
border-radius: 4px;
transition: all 0.2s ease0;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
nav .active a:hover {
color: rgb(220,52,52);
}
nav .active a {
color: rgb(220,52,52);
}
#menu-center {
width: 980px;
height: 75px;
margin: 0 auto;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
#menu-center ul {
margin: 0 0 0 0;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
#menu-center ul li a{
padding: 32px 40px;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
#menu-center ul li {
list-style: none;
margin: 0 0 0 -4px;
display: inline;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
.active, #menu-center ul li a:hover {
font-size: 14px;
color: rgb(220,52,52);
text-decoration: none;
background-color: rgba(0, 0, 0, 0.12);
}
a {
color: rgb(220,52,52);
}
#quem-somos {
color: rgb(220,52,52);
}
.cta {
padding: 9px 18px;
background-color: rgb(220,52,52);
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
right: 0;
margin-left: 20px;
text-decoration: none;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}
label #btn,
label #cancel{
color: red;
font-size: 30px;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
/*This is the modals css*/
h1 {
font-weight: bold;
margin: 0;
margin-bottom: 5vh;
}
h2 {
text-align: center;
}
p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px;
}
span {
font-size: 12px;
}
a {
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
button {
border-radius: 20px;
border: 1px solid rgb(220,52,52);
background-color: rgb(220,52,52);
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
button:active {
transform: scale(0.95);
}
button:focus {
outline: none;
}
button.ghost {
background-color: transparent;
border-color: #FFFFFF;
color: #fff;
background-color: rgb(220,52,52);
}
form {
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
overflow: auto;
}
input {
background-color: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
.container-form {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.container.right-panel-active .sign-in-container {
transform: translateX(100%);
}
.sign-up-container {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.right-panel-active .sign-up-container {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
#keyframes show {
0%, 49.99% {
opacity: 0;
z-index: 1;
}
50%, 100% {
opacity: 1;
z-index: 5;
}
}
.close {
/* Position it in the top right corner outside of the modal */
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
/* Close button on hover */
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.container.right-panel-active .overlay-container{
transform: translateX(-100%);
}
.overlay {
background: #05031b;
background: -webkit-linear-gradient(to right, #05031b, #05031b);
background: linear-gradient(to right, #05031b, #05031b);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #FFFFFF;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.container.right-panel-active .overlay {
transform: translateX(50%);
}
.overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left {
transform: translateX(-20%);
}
.container.right-panel-active .overlay-left {
transform: translateX(0);
}
.overlay-right {
right: 0;
transform: translateX(0);
}
.container.right-panel-active .overlay-right {
transform: translateX(20%);
}
.social-container {
margin: 20px 0;
}
.social-container a {
border: 1px solid #DDDDDD;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
.modal {
position: fixed; /* position it so that fills the screen, but doesn't move with it */
top: 0; /* position this element at the top... */
left: 0; /* ...left corner of the page... */
width: 100%; /* ...and set both the width */
height: 100%; /* ...and height to 100%, so that the element fills the entire page */
z-index: 99999; /* set the z-index to a high enough number so that this element is positioned on top of all other elements */
background: rgb(0, 0, 0, 0.7); /* set the background to black with some transparency, so you can see through it */
/* The following simply centers the modal within this container */
display: flex;
justify-content: center;
align-items: center;
}
Now this is the modal.js, what controls the modals functions.
//Get the modal
var modal = document.getElementById("myModal");
var modal_container = document.getElementById("modalContainer")
modal_container.style.display = "none";
window.onclick = function (event) {
console.log(event.target)
if(event.target.id == "myBtn") {
modal_container.style.display = "flex"
}
else if (modal !== event.target && !modal.contains(event.target)) {
modal_container.style.display = "none";
}
}
You set an event handler for all links with href starting with '#' to scroll smoothly into view, but the href of the button that activates your modal windows is "#ex1". There is no "ex1" section in the document, which causes the script error.
A quick solution is to remove "#ex1" from the href attribute.
<a class="cta" rel="modal:open" href="" key="login" id="myBtn">Acessar</a>
Here there,
I'm trying to customize streamlabs event list in order to show followers pictures beside the event message.
I don't have any idea about doing that cause i don't know how to get the avatars picture from facebook.
Here is an exemple about what i'm trying to mean.
All that í've done so far is below
html
<script type="text/template" id="eventlist_item">
<li class="{eventType}">
<div class="background"></div>
<div>
<span class="tag">{tag}</span>
<span class="message">{from}</span>
</div>
</li>
</script>
css
#import url('https://fonts.googleapis.com/css2?family=Heebo:wght#800&display=swap');
html, .widget-EventList li > div {
-webkit-transform: rotateX({rotate_x}) rotateY({rotate_y});
transform: rotateX({rotate_x}) rotateY({rotate_y});
}
.widget-EventList, .widget-EventList * {
box-sizing: border-box;
}
.widget-EventList {
font-weight: 700;
font-size: 30px;
font-family: 'Heebo', sans-serif;
color: {text_color};
background: transparent;
overflow: hidden;
list-style: none;
padding: 0;
text-transform: uppercase;
position: relative;
}
.widget-EventList li {
width: 25%;
position: relative;
-webkit-animation: {show_animation} {animation_speed} forwards;
animation: {show_animation} {animation_speed} forwards;
}
.widget-EventList li > div:first-child {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 8px;
opacity: 0.7;
-webkit-transition: opacity {animation_speed};
transition: opacity {animation_speed};
}
.widget-EventList li > div:last-child {
overflow: hidden;
position: relative;
margin-bottom: 4px;
padding: 0 10px;
opacity: 0.7;
font-size: 0.9em;
height: 1.2em;
line-height: 1.2em;
-webkit-animation: growB {animation_speed} forwards;
animation: growB {animation_speed} forwards;
}
.widget-EventList li:first-child > div:first-child {
opacity: 2;
}
.widget-EventList li:first-child > div:last-child {
-webkit-animation: growA {animation_speed} forwards;
animation: growA {animation_speed} forwards;
}
.widget-EventList li:nth-child(n+{max_events}) {
-webkit-animation: {hide_animation} {animation_speed} forwards;
animation: {hide_animation} {animation_speed} forwards;
}
#-webkit-keyframes growA {
0% {
opacity: 0;
font-size: 0em;
height: 0em;
line-height: 0em;
margin-bottom: 0px;
padding: 0;
}
100% {
opacity: 1;
font-size: 1em;
height: 1.6em;
line-height: 1.6em;
margin-bottom: 4px;
padding: 0 10px;
}
}
#keyframes growA {
0% {
opacity: 0;
font-size: 0em;
height: 0em;
line-height: 0em;
margin-bottom: 0px;
padding: 0;
}
100% {
opacity: 1;
font-size: 1em;
height: 1.6em;
line-height: 1.6em;
margin-bottom: 4px;
padding: 0 10px;
}
}
#-webkit-keyframes growB {
0% {
opacity: 1;
font-size: 1em;
height: 1.6em;
line-height: 1.6em;
}
}
#keyframes growB {
0% {
opacity: 1;
font-size: 1em;
height: 1.6em;
line-height: 1.6em;
}
}
.widget-EventList .tag {
font-size: 25px;
line-height: 5px;
top: 20px;
right: 15px;
position: absolute;
}
.widget-EventList .message {
padding-right: 15px;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.widget-EventList li {
text-shadow: 0 0 1px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.7), 0 0 3px rgba(0, 0, 0, 0.7);
}
.widget-EventList li > div:first-child {
background-color: transparent;
}
Js
// Please use event listeners to run functions.
document.addEventListener('onLoad', function(obj) {
// obj will be empty for event list
// this will fire only once when the widget loads
});
document.addEventListener('onEventReceived', function(obj) {
// obj will contain information about the event
});
[Exemple][1]
[1]: https://i.stack.imgur.com/z9KzI.png
When a user requests my URL, how can I show a dialog box to ask for login credentials first before showing anything, like this:
https://pasteboard.co/I9aeDzI.png
https://pasteboard.co/I9af5i7.png
Seems to me these dialog boxes are in-built or native to the browser. Also, when a user clicks on Submit, is it like an ordinary HTML tag?
It'll be good if someone can post links to relevant documentation on this feature, which I currently cannot seem to find with a simple Google search as I don't know what keywords appropriately describe it.
Like to learn more including:
How to get the webpage to show it ?
what happens behind the hood when someone clicks on Submit (eg. what HTTP request method it uses, which URL it will call) ?
Those are made with pure CSS and JavaScript.
You can't find anything like that because they aren't native browser features.
Maybe you see many websites using the same dialog box because they use templates and libraries built for that purpouse.
Take a look at this
var $btn = document.getElementById("submit");
var $form = document.getElementById("form")
function signIn() {
if ($form.checkValidity()) {
$btn.classList.add('pending');
window.setTimeout(function(){ $btn.classList.add('granted'); }, 1500);
}
}
$btn.addEventListener("click", signIn);
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i|Monoton");
#import url("https://fonts.googleapis.com/icon?family=Material+Icons");
* {
box-sizing: border-box;
}
html {
font-size: 14px;
}
body {
background: linear-gradient(to bottom, #68d8d6, #ffffff);
color: #454749;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Source Sans Pro', sans-serif;
min-height: 100vh;
}
h1, h2, h3, h4, h5, h6 {
font-family: Monoton, sans-serif;
margin-bottom: .5rem;
}
/**
* Tiles
*/
.tile {
background-color: #ffffff;
border-radius: .1rem;
box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2), 0 0.25rem 0.25rem rgba(0, 0, 0, 0.2);
position: relative;
width: 100%;
min-width: 320px;
max-width: 24rem;
overflow: hidden;
}
.tile .tile-header {
background-image: url("https://res.cloudinary.com/dgmilxzy7/image/upload/c_scale,w_500,o_75,b_rgb:07beb8/v1506735375/CodePen/ViddenPixel.jpg");
background-position: center;
background-size: cover;
height: 12rem;
}
.tile .tile-body {
padding: 2rem;
}
/**
* Forms
*/
.form-input {
display: block;
position: relative;
margin-bottom: 1rem;
}
.form-input > .material-icons {
position: absolute;
font-size: 1.5rem;
top: 1.2rem;
}
.form-input > .material-icons ~ input, .form-input > .material-icons ~ .label, .form-input > .material-icons ~ .underline {
margin-left: 2.25rem;
width: calc(100% - 2.25rem);
}
.form-input input {
border: none;
box-shadow: none;
padding-top: 1.5rem;
padding-right: 0;
padding-bottom: 0.5rem;
padding-left: 0;
outline-style: none;
width: 100%;
}
.form-input input ~ .label {
color: #868e96;
font-size: 1rem;
margin: 0;
pointer-events: none;
position: absolute;
top: 1.5rem;
left: 0;
transition: top .2s,font .2s;
z-index: 1;
}
.form-input input ~ .underline {
background-color: #bdc1c5;
height: 1px;
width: 100%;
position: absolute;
bottom: 0;
}
.form-input input:hover ~ .underline, .form-input input:focus ~ .underline {
background-color: #07beb8;
}
.form-input input:hover ~ .label, .form-input input:focus ~ .label {
color: #07beb8;
}
.form-input input:focus ~ .underline {
height: 2px;
}
.form-input input:focus ~ .label, .form-input input:valid ~ .label {
top: 0;
font-size: 0.85rem;
}
.form-input input:-webkit-autofill ~ .label {
top: 0;
font-size: 0.85rem;
}
/**
* Buttons
*/
.btn {
border-radius: .2rem;
display: inline-block;
padding-top: 0.5rem;
padding-right: 1rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
}
.btn, [role="button"], [type="button"] {
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
}
.btn-irenic {
background-color: #07beb8;
color: white;
}
.btn-irenic:hover, .btn-irenic:focus, .btn-irenic:active {
background-color: #06a5a0;
}
.btn-serene {
background-color: #3dccc7;
color: white;
}
.btn-serene:hover, .btn-serene:focus, .btn-serene:active {
background-color: #32beb9;
}
.btn-tranquil {
background-color: #68d8d6;
color: white;
}
.btn-tranquil:hover, .btn-tranquil:focus, .btn-tranquil:active {
background-color: #54d3d0;
}
.btn-calm {
background-color: #9ceaef;
color: white;
}
.btn-calm:hover, .btn-calm:focus, .btn-calm:active {
background-color: #86e5eb;
}
.btn-cool {
background-color: #c4fff9;
color: white;
}
.btn-cool:hover, .btn-cool:focus, .btn-cool:active {
background-color: #abfff6;
}
.btn-ice {
background-color: #ffffff;
color: white;
}
.btn-ice:hover, .btn-ice:focus, .btn-ice:active {
background-color: #f2f2f2;
}
.btn-base {
background-color: #454749;
color: white;
}
.btn-base:hover, .btn-base:focus, .btn-base:active {
background-color: #393a3c;
}
/**
* Utilities
*/
.clearfix:after {
content: "";
display: table;
clear: both;
}
.float-right {
float: right;
}
/**
*
*/
.submit-container {
position: relative;
}
.submit-container #submit {
position: relative;
z-index: 2;
outline: none;
opacity: 1;
transition: transform .1s ease-in, opacity .1s ease-in, border-radius .1s ease-in;
right: -1px;
}
.submit-container #submit span {
opacity: 1;
transition: opacity .1s ease-in;
}
.submit-container #submit.pending {
transform: scale(0.55, 1.5);
background-color: #07beb8;
border-radius: 50%;
opacity: 1;
}
.submit-container #submit.pending span {
opacity: 0;
}
.submit-container #submit.pending ~ .login-pending {
opacity: 1;
transform: scale(1, 1);
z-index: 3;
}
.submit-container #submit.granted ~ .login-pending {
opacity: 1;
transform: translate(-9rem, -11rem) scale(18, 18);
z-index: 3;
}
.submit-container #submit.granted ~ .login-pending .spinner {
opacity: 0;
}
.submit-container #submit.granted ~ .login-pending .login-granted-content {
opacity: 1;
}
.submit-container .login-pending {
height: 3rem;
width: 3rem;
background-color: #07beb8;
position: absolute;
border-radius: 50%;
right: 1rem;
bottom: -0.5rem;
opacity: 0;
overflow: hidden;
transform: translate(0, 0) scale(0.5, 0.5);
transition: transform .2s ease-in, scale .2s ease-in;
z-index: 1;
}
.submit-container .login-pending .login-granted-content {
background-image: url(https://res.cloudinary.com/dgmilxzy7/image/upload/c_scale,w_700,o_25,b_rgb:07beb8/v1506735375/CodePen/ViddenPixel.jpg);
background-position: center;
background-size: cover;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: opacity .2s ease-in .2s;
text-shadow: 0px 0px 20px #ffffff;
}
.submit-container .login-pending .login-granted-content .material-icons {
font-size: 5px;
position: relative;
left: 1.25px;
}
.spinner {
width: 3rem;
height: 3rem;
position: relative;
margin: 0 auto;
}
.spinner .dot1, .spinner .dot2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #68d8d6;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: dot-bounce 2.0s infinite ease-in-out;
animation: dot-bounce 2.0s infinite ease-in-out;
}
.spinner .dot2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
#-webkit-keyframes dot-bounce {
0%, 100% {
-webkit-transform: scale(0);
}
50% {
-webkit-transform: scale(1);
}
}
#keyframes dot-bounce {
0%, 100% {
transform: scale(0);
-webkit-transform: scale(0);
}
50% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 400;
line-height: 1;
color: #fff;
text-align: left;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="tile">
<div class="tile-header">
<h2 style="color: white; opacity: .75; font-size: 4rem; display: flex; justify-content: center; align-items: center; height: 100%;">SIGN IN</h2>
</div>
<div class="tile-body">
<form id="form">
<label class="form-input">
<i class="material-icons">person</i>
<input type="text" autofocus="true" required />
<span class="label">Username</span>
<span class="underline"></span>
</label>
<label class="form-input">
<i class="material-icons">lock</i>
<input type="password" required />
<span class="label">Password</span>
<div class="underline"></div>
</label>
<div class="submit-container clearfix" style="margin-top: 2rem;">
<div id="submit" role="button" type="button" class="btn btn-irenic float-right" tabindex="0">
<span>SIGN IN</span>
</div>
<div class="login-pending">
<div class=spinner>
<span class="dot1"></span>
<span class="dot2"></span>
</div>
<div class="login-granted-content">
<i class="material-icons">done</i>
</div>
</div>
</div>
</form>
</div>
</div>
I have an animation with my header wrapper and I want the animation to start after the page completely loads.
However it seems like it starts before the page loads. I looked up a function on css tricks and that is what i am using here.
It seems the animation starts a little early. Any help with this?
From the post on css tricks i added a class "preload" to the body and then removed the class in my JavScript to start the animation but does not seem to work.
<!---------------------------HTML ------------------------>
<!DOCTYPE html>
<html lang = "en-us">
<head>
<title>Carlos Elizondo</title>
<link rel = "stylesheet" type = "text/css" href = "main.css">
<link rel = "stylesheet" type = "text/css" href = "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel = "stylesheet" type = "text/css" href = "animate.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
</head>
<body class = "preload">
<!------------------------------------------------------------HEADER------------------------------------------------------------------>
<header>
<div class="header-bg"></div>
<div class="header-dark">
<div class="wrapper anim fadeInDown">
<div class = "heading">Hi. My Name is</div>
<div class = "box-name">Carlos Elizondo</div>
<div class = "heading">I'm a future web developer and current student </div>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<nav class = "clearfix">
Contact
Portfolio
Skills
About Me
</nav>
</header>
</body>
</html>
<!--------------------------------------CSS------------------------------>
*{
margin: 0;
padding: 0;
}
body{
margin: 0;
font-family: 'Raleway', sans-serif;
padding: 0;
}
.clearfix::after{
content: "";
display: table;
clear: both;
}
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
/*----------------------------------------------------------HEADER-----------------------------------------------------------------------*/
header{
position: relative;
display: block;
width: 100%;
height: 100vh;
bottom: 0;
margin: 0;
}
.header-bg{
position: absolute;
width: 100%;
height: 100%;
background-image: url(macbook2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.header-dark{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.wrapper{
width: 850px;
height: auto;
margin-top: -50px;
}
h2{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
h4{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
ul{
list-style-type: none;
text-align: center;
padding: 0;
margin-top: 20px;
}
ul li{
display: inline-block;
padding: 0 13px;
}
.ion-social-facebook{
color: white;
font-size: 28px;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-twitter{
color: white;
font-size: 28px;
}
.ion-social-linkedin{
color: white;
font-size: 28px;
}
nav{
position: fixed;
width: 100%;
height: auto;
z-index: 100;
background: rgba(0,0,0,0.4);
}
.nav-links{
float: right;
color: #fff;
margin: 20px 10px;
text-decoration: none;
}
.nav-links.last{
margin-right: 30px;
}
nav > a{
position: relative;
text-decoration: none;
}
nav > a:before{
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -3px;
left: 0;
background-color: #ffffff;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav a:hover:before{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.logo:link{
margin-left: 30px;
margin-top: 20px;
margin-bottom: 20px;
float: left;
}
.heading{
color: white;
text-align: center;
font-size: 30px;
}
.box-name{
color: white;
text-align: center;
border: 6px solid white;
padding: 9px;
font-size: 75px;
margin-bottom: 10px;
letter-spacing: 2px;
margin-top: 10px;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
font-weight: 500;
}
.anim{
-webkit-animation-duration: 1s;
-animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes fadeInDown{
0%{
opacity: 0;
-webkit-transform: translateY(-60px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
}
}
#keyframes fadeInDown{
0%{
opacity: 0;
-webkit-transform: translateY(-60px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
}
}
.fadeInDown{
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
<!-----------------------------------------JS------------------------------>
$(window).load(function() {
$("body").removeClass("preload");
});
Remove .fadeInDown class from wrapper div
Make wrapper div display:none by default.
Add display:block !important; CSS to .fadeInDown class
On page ready add .fadeInDown class to wrapper div.
$( document ).ready(function() {
$(".wrapper").addClass("fadeInDown");
});
*{
margin: 0;
padding: 0;
}
body{
margin: 0;
font-family: 'Raleway', sans-serif;
padding: 0;
}
.clearfix::after{
content: "";
display: table;
clear: both;
}
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
header{
position: relative;
display: block;
width: 100%;
height: 100vh;
bottom: 0;
margin: 0;
}
.header-bg{
position: absolute;
width: 100%;
height: 100%;
background-image: url(macbook2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.header-dark{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.wrapper{
width: 850px;
height: auto;
margin-top: -50px;
}
h2{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
h4{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
ul{
list-style-type: none;
text-align: center;
padding: 0;
margin-top: 20px;
}
ul li{
display: inline-block;
padding: 0 13px;
}
.ion-social-facebook{
color: white;
font-size: 28px;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-twitter{
color: white;
font-size: 28px;
}
.ion-social-linkedin{
color: white;
font-size: 28px;
}
nav{
position: fixed;
width: 100%;
height: auto;
z-index: 100;
background: rgba(0,0,0,0.4);
}
.nav-links{
float: right;
color: #fff;
margin: 20px 10px;
text-decoration: none;
}
.nav-links.last{
margin-right: 30px;
}
nav > a{
position: relative;
text-decoration: none;
}
nav > a:before{
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -3px;
left: 0;
background-color: #ffffff;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav a:hover:before{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.logo:link{
margin-left: 30px;
margin-top: 20px;
margin-bottom: 20px;
float: left;
}
.heading{
color: white;
text-align: center;
font-size: 30px;
}
.box-name{
color: white;
text-align: center;
border: 6px solid white;
padding: 9px;
font-size: 75px;
margin-bottom: 10px;
letter-spacing: 2px;
margin-top: 10px;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
font-weight: 500;
}
.anim{
-webkit-animation-duration: 1s;
-animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes fadeInDown{
0%{
opacity: 0;
-webkit-transform: translateY(-60px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
}
}
#keyframes fadeInDown{
0%{
opacity: 0;
-webkit-transform: translateY(-60px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
}
}
.fadeInDown{
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
display:block !important;
}
<!DOCTYPE html>
<html lang = "en-us">
<head>
<title>Carlos Elizondo</title>
<link rel = "stylesheet" type = "text/css" href = "main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel = "stylesheet" type = "text/css" href = "animate.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
</head>
<body class="preload">
<!------------------------------------------------------------HEADER------------------------------------------------------------------>
<header>
<div class="header-bg"></div>
<div class="header-dark">
<div class="wrapper anim" style='display:none'>
<div class = "heading">Hi. My Name is</div>
<div class = "box-name">Carlos Elizondo</div>
<div class = "heading">I'm a future web developer and current student </div>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<nav class = "clearfix">
Contact
Portfolio
Skills
About Me
</nav>
</header>
</body>
</html>
This preload class prevents transitions, but not keyframe animations. It's also a bit hacky.
Instead of removing a class on page load, it might make more sense to add the fadeInDown class in your $(window).load function, which will cause the CSS animation to run immediately after the class is added. Just remember to remove that class from the HTML, as it will now be added in JS.
$(window).load(function() {
$(".wrapper").addClass("fadeInDown");
});
I've searched online for a solution to this problem for a while now. Unfortunately, no luck. Here is the website I'm using the code from http://codepen.io/anon/pen/wagbYZ
Here is my code:
HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="main.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Montserrat|Cardo' rel='stylesheet' type='text/css'>
</head>
<body>
<header class="main_h">
<div class="row">
<a class="logo" href="#">L/F</a>
<div class="mobile-toggle">
<span></span>
<span></span>
<span></span>
</div>
<nav>
<ul>
<li>Section 01</li>
<li>Section 02</li>
<li>Section 03</li>
<li>Section 04</li>
</ul>
</nav>
</div> <!-- / row -->
</header>
<div class="hero">
<h1><span>loser friendly</span><br>Batman nav.</h1>
<div class="mouse">
<span></span>
</div>
</div>
<div class="row content">
<h1 class="sec01">Section 01</h1>
<p>Hello World!</p>
<h1 class="sec02">Section 02</h1>
<p>Hello World!</p>
<h1 class="sec03">Section 03</h1>
<p>Hello World!</p>
<h1 class="sec04">Section 04</h1>
<p>Hello World!</p>
</div>
</body>
</html>
CSS:
#mixin small {
#media only screen and (max-width: 766px) {
#content;
}
}
$color: #8f8f8f;
$color2: #e8f380;
.main_h {
position: fixed;
top: 0px;
max-height: 70px;
z-index: 999;
width: 100%;
padding-top: 17px;
background: none;
overflow: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
top: -100px;
padding-bottom: 6px;
font-family: "Montserrat", sans-serif;
#include small {
padding-top: 25px;
}
}
.open-nav {
max-height: 400px !important;
.mobile-toggle {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
}
.sticky {
background-color: rgba(255, 255, 255, 0.93);
opacity: 1;
top: 0px;
border-bottom: 1px solid lighten($color, 30%);
}
.logo {
width: 50px;
font-size: 25px;
color: $color;
text-transform: uppercase;
float: left;
display: block;
margin-top: 0;
line-height: 1;
margin-bottom: 10px;
#include small {
float: none;
}
}
nav {
float: right;
width: 60%;
#include small {
width: 100%;
}
ul {
list-style: none;
overflow: hidden;
text-align: right;
float: right;
#include small {
padding-top: 10px;
margin-bottom: 22px;
float: left;
text-align: center;
width: 100%;
}
li {
display: inline-block;
margin-left: 35px;
line-height: 1.5;
#include small {
width: 100%;
padding: 7px 0;
margin: 0;
}
}
a {
color: #888888;
text-transform: uppercase;
font-size: 12px;
}
}
}
.mobile-toggle {
display: none;
cursor: pointer;
font-size: 20px;
position: absolute;
right: 22px;
top: 0;
width: 30px;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
transition: all 200ms ease-in;
#include small {
display: block;
}
span {
width: 30px;
height: 4px;
margin-bottom: 6px;
border-radius: 1000px;
background: $color;
display: block;
}
}
.row {
width: 100%;
max-width: 940px;
margin: 0 auto;
position: relative;
padding: 0 2%;
}
* {
box-sizing: border-box;
}
body {
color: $color;
background: white;
font-family: "Cardo", serif;
font-weight: 300;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
}
h1 {
font-size: 30px;
line-height: 1.8;
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
}
p {
margin-bottom: 20px;
font-size: 17px;
line-height: 2;
}
.content {
padding: 50px 2% 250px;
}
.hero {
position: relative;
background: url(http://srdjanpajdic.com/slike/2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
text-align: center;
color: #fff;
padding-top: 110px;
min-height: 500px;
letter-spacing: 2px;
font-family: "Montserrat", sans-serif;
h1 {
font-size: 50px;
line-height: 1.3;
span {
font-size: 25px;
color: $color2;
border-bottom: 2px solid $color2;
padding-bottom: 12px;
line-height: 3;
}
}
}
.mouse {
display: block;
margin: 0 auto;
width: 26px;
height: 46px;
border-radius: 13px;
border: 2px solid $color2;
bottom: 40px;
position: absolute;
left: 50%;
margin-left: -14px;
span {
display: block;
margin: 6px auto;
width: 2px;
height: 2px;
border-radius: 4px;
background: $color2;
border: 1px solid transparent;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: scroll;
animation-name: scroll;
}
}
#-webkit-keyframes scroll {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
}
#keyframes scroll {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
}
JS:
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('.main_h').addClass('sticky');
} else {
$('.main_h').removeClass('sticky');
}
});
$('.mobile-toggle').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.main_h').removeClass('open-nav');
} else {
$('.main_h').addClass('open-nav');
}
});
$('.main_h li a').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.navigation').removeClass('open-nav');
$('.main_h').removeClass('open-nav');
}
});
$('nav a').click(function(event) {
var id = $(this).attr("href");
var offset = 70;
var target = $(id).offset().top - offset;
$('html, body').animate({
scrollTop: target
}, 500);
event.preventDefault();
});
The HTML and CSS work fine, but the JQuery is giving me problems.
try wrapping the code in jquery document ready event
$(document).ready(function(){
//event listeners
});