I'm creating a portfolio website and the way I'm navigating through projects is by using "status". So for instance, if you click/scroll once, project 1 will reveal. Click/scroll a second time, project 2 will reveal. So on so forth.
<body onwheel="switchprojects()"></body>
<div class="explore-box" onClick="switchprojects()"></div>
projectStatus = 1;
function switchprojects() {
if(projectStatus==1) {
$('#bona').removeClass('float');
$('#peak').addClass('float');
projectStatus = 2;
}
else if(projectStatus==2) {
$('#peak').removeClass('float');
$('#trap').addClass('float');
projectStatus = 3;
}
else if(projectStatus==3) {
$('#trap').removeClass('float');
$('#fp').addClass('float');
projectStatus = 4;
}
else if(projectStatus==4) {
$('#fp').removeClass('float');
$('#bona').addClass('float');
projectStatus = 1;
}
}
As you can see I have two separate elements, one for scrolling and one for clicking. It's working great so far, but I'm running into one issue—the status does not update between the two elements. If I scroll twice in the body for example, the same function on the clickable div won't update its status. Does anyone know how to fix this?
Thank you!
https://codepen.io/anon/pen/qozoKj Here's the codepen.
UPDATE: I'm not sure why, but when I uploaded my code to codepen, it seems to have updated the status of the clicks....but now every key on my keyboard activates the css change. I'm very confused.
The reason all the keys are triggering switchprojects() is because you have an onkeydown="switchprojects()" on the <body>.
The reason the clicks are not listened to is that the <div class="explore-box"> has no height or width set on it although its position: absolute. Mabey you should consider changing the click event to the <div class="section"> CodePen
Try something like
$(function(){
$('#bona').addClass('float');
});
projectStatus = 1;
function switchprojects() {
if(projectStatus==1) {
$('#bona').removeClass('float');
$('#peak').addClass('float');
projectStatus = 2;
}else if(projectStatus==2) {
$('#peak').removeClass('float');
$('#trap').addClass('float');
projectStatus = 3;
}else if(projectStatus==3) {
$('#trap').removeClass('float');
$('#fp').addClass('float');
projectStatus = 4;
}else if(projectStatus==4) {
$('#fp').removeClass('float');
$('#bona').addClass('float');
projectStatus = 1;
}
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.section {
width: 100%;
height: 100vh;
position: relative;
}
h1 {
color: white;
font-family: 'league';
font-size: 8vw;
position: absolute;
text-align: center;
line-height: 100vh;
width: 100%;
font-weight: 100;
margin: 0;
padding: 0;
transition-timing-function: cubic-bezier(0.0, 0.3, 0.5, 1);
transition: 0s;
}
.float {
transform: translate(0)!important;
transition: transform 1s;
transition-timing-function: cubic-bezier(0.0, 0.3, 0.5, 1);
opacity: 1!important;
}
.explore-box {
position: absolute;
margin-left: 55%;
margin-top: 70vh;
}
.explore-line {
background-color: white;
width: 70px;
height: 1px;
position: relative;
float: left;
margin-top: 9pt;
margin-right: 7pt;
transition-timing-function: cubic-bezier(0.0, 0.3, 0.5, 1);
transition: 0.4s;
}
.explore-wrap {
overflow: hidden;
float: right;
}
.explore-wrap h2 {
color: white;
margin: 0;
font-size: 14pt;
transform: 1s ease;
}
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<body style="background-color: #141219;" onwheel="switchprojects()">
<div class="section">
<h1 id="bona" style="transform: translateY(10%); opacity: 0;">BONA COFFEE</h1>
<h1 id="peak" style="transform: translateY(10%); opacity: 0;">PEAK EXPLORATIONS</h1>
<h1 id="trap" style="transform: translateY(10%); opacity: 0;">TRAP MAGAZINE</h1>
<h1 id="fp" style="transform: translateY(10%); opacity: 0;">FIELD & PANTRY</h1>
<div class="explore-box" onClick="switchprojects()">
<div class="explore-line"></div>
<div class="explore-wrap">
<h2>View</h2>
</div>
<br>
<div class="explore-wrap" style="position: absolute; right: 0;">
<h2>Project</h2>
</div>
</div>
</div>
</body>
As You say I have added the click event on View Projects instead of body
Related
I'm new to programming and currently working on my portfolio. I've created a dropdown list that appears when a user hovers over it. Once it appears I want to make the rest of the website darker so the dropdown list can stand out from the rest.
I'm trying to use the body::after pseudo class for that and it works but not when I hover over the dropdown so I must be doing something wrong. Could anyone please help me?
The dropdown list has a class of .dropdown
body::after {
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
background-color: black;
opacity: 0;
z-index: -1;
}
.dropdown:hover body::after {
opacity: 0.5;
}
Link to my project in case that helps:
https://annaxt.github.io/product_landing_page/plant_store.html
Thank you!
You could add the overlay as it's own element and then control the opacity using JavaScript. Everything you would want to show above it would need to have a z-index higher than what you're setting on the overlay and everything that would be affected by the overlay should have a lower z-index (default is 0).
let overlay = document.getElementById("overlay");
function showOverlay() {
overlay.style.zindex = 9;
overlay.style.opacity = 0.3;
}
function hideOverlay() {
overlay.style.zindex = -1;
overlay.style.opacity = 0;
}
#overlay {
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
position: fixed;
background-color: black;
opacity: 0;
z-index: -1;
transition: opacity .8s;
}
.dropdown {
font-size: 50px;
background: #369;
color: white;
font-family: sans-serif;
}
<body>
<div class="dropdown" onmouseout="hideOverlay()" onmouseover="showOverlay()">Hover me</div>
<div id="overlay" />
</body>
I am not sure whether we can do this with css or not. but what you are trying to achieve can be easily done by js.
Below is code to help you.
$(document).ready(function() {
$(".dropdown").mouseenter(function() {
$("body").addClass("open");
});
$(".dropdown").mouseleave(function() {
$("body").removeClass("open");
});
});
.main {
display: flex;
}
.open {
height: 100%;
width: 100%;
background: #232323;
transition:.5s;
}
.dropdown {
background-color: #f5f5f5;
height: 200px;
width: 200px;
margin-right: 15px;
transition:.5s;
}
.main:hover .dropdown{
filter:blur(1px);
}
.main:hover .dropdown:hover {
background-color: red;
filter:blur(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main">
<div class="dropdown">
dropdown1
</div>
<div class="dropdown">
dropdown2
</div>
<div class="dropdown">
dropdown3
</div>
<div class="dropdown">
dropdown4
</div>
</div>
</body>
I have looked for this solution for days on end and I could not find the answer to why Javascript is not running correctly on the live server extension or local file host. I use Visual Studio Code and I am currently creating a webpage and trying to add JavaScript animations on it. However, its gotten to a point where I decided to copy other people's JS animations to see if it work for me and it still has not. For this code, I've made sure there are no errors whatsoever in the console and that the JS works properly on visual studio code. Both work but animations do not. Heres my code for a simple JS animation taken from https://webdesign.tutsplus.com/tutorials/animate-on-scroll-with-javascript--cms-36671.
Note: while even inputting this into the code snippet, it seems to run but it never works on live server or local hosts
const scrollElements = document.querySelectorAll(".js-scroll");
const elementInView = (el, dividend = 1) => {
const elementTop = el.getBoundingClientRect().top;
return (
elementTop <=
(window.innerHeight || document.documentElement.clientHeight) / dividend
);
};
const elementOutofView = (el) => {
const elementTop = el.getBoundingClientRect().top;
return (
elementTop > (window.innerHeight || document.documentElement.clientHeight)
);
};
const displayScrollElement = (element) => {
element.classList.add("scrolled");
};
const hideScrollElement = (element) => {
element.classList.remove("scrolled");
};
const handleScrollAnimation = () => {
scrollElements.forEach((el) => {
if (elementInView(el, 1.25)) {
displayScrollElement(el);
} else if (elementOutofView(el)) {
hideScrollElement(el)
}
})
}
window.addEventListener("scroll", () => {
handleScrollAnimation();
});
<style>
#import url("https://fonts.googleapis.com/css2?family=Merriweather&family=Merriweather+Sans:wght#300&display=swap");
/*General styling for structure*/
body {
margin: 0;
font-family: "Merriweather Sans", sans-serif;
}
.container {
max-width: 1280px;
width: 95%;
margin: 0 auto;
}
header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
font-family: "Merriweather", serif;
height: 100vh;
}
header h2 {
font-weight: 400;
}
.scroll-container {
height: 100vh;
min-height: 450px;
padding: 2rem 1rem;
display: flex;
align-items: center;
box-sizing: border-box;
}
.scroll-container:nth-of-type(1) {
background-color: #bdd0c4;
}
.scroll-container:nth-of-type(2) {
background-color: #f5d2d3;
}
.scroll-container:nth-of-type(3) {
background-color: #9ab7d3;
}
.scroll-container:nth-of-type(4) {
background-color: #dfccf1;
}
.scroll-container:nth-of-type(even) {
flex-direction: row-reverse;
}
.scroll-element,
.scroll-caption {
width: 50%;
}
.scroll-element {
min-height: 300px;
height: 100%;
background-color: #eaeaea;
}
.scroll-caption {
margin: 1rem;
}
footer {
text-align: center;
padding: 0.5rem 0;
background-color: #faddad;
}
footer p {
font-size: 0.75rem;
margin: 0.25rem 0;
color: #221133;
}
footer a {
text-decoration: none;
color: inherit;
}
#media screen and (max-width: 650px) {
.scroll-container,
.scroll-container:nth-of-type(even) {
flex-direction: column;
align-content: inherit;
}
.scroll-element {
height: 100%;
}
.scroll-element,
.scroll-caption {
width: 100%;
}
}
/**Styling scrollable elements*/
.js-scroll {
opacity: 0;
transition: opacity 500ms;
}
.js-scroll.scrolled {
opacity: 1;
}
.scrolled.fade-in {
animation: fade-in 1s ease-in-out both;
}
.scrolled.fade-in-bottom {
animation: fade-in-bottom 1s ease-in-out both;
}
.scrolled.slide-left {
animation: slide-in-left 1s ease-in-out both;
}
.scrolled.slide-right {
animation: slide-in-right 1s ease-in-out both;
}
#keyframes slide-in-left {
0% {
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
#keyframes slide-in-right {
0% {
-webkit-transform: translateX(100px);
transform: translateX(100px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
#keyframes fade-in-bottom {
0% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<head></head>
<body>
<header class="container">
<h1>How to Animate on Scroll With Vanilla JavaScript</h1>
<h2>Scroll to see the effects
<p class="animate-arrow">↓
</p>
</h2>
</header>
<section class="scroll-container">
<div class="scroll-element js-scroll fade-in">
</div>
<div class="scroll-caption">
This animation fades in.
</div>
</section>
<section class="scroll-container">
<div class="scroll-element js-scroll fade-in-bottom">
</div>
<div class="scroll-caption">
This animation slides in to the top.
</div>
</section>
<section class="scroll-container">
<div class="scroll-element js-scroll slide-left">
</div>
<div class="scroll-caption">
This animation slides in from the left.
</div>
</section>
<section class="scroll-container">
<div class="scroll-element js-scroll slide-right">
</div>
<div class="scroll-caption">
This animation slides in from the right.
</div>
</section>
<footer>
<p>Animation styles from animista.net</p>
<p>
Pen by Jemima Abu<span style="color: #D11E15"> ♥</span>
</p>
</footer>
</body>
Thank you all who responded to my question -
the answer was very simple and was actually mentioned by StackSlave
The script tag was in head and not at the end of the html file. The way around this is to add 'defer' at the end of the script tag. JS works perfectly now.
I'm making an app using JavaScript and JQuery, which will tell the user if there device is straight or not, basically like a spirit level. I want to draw a line a straight line across the middle of the screen and i want this to be responsive no matter the size of the device. This will be used on mobiles and tablets. I used a canvas to the draw a line and so far i'm not sure if this is the right way to approach this?
if anyone could give me any advice i would really appreciate it. Below is my canvas line so far. And I've included some rough drawing of what i mean.
const c = document.getElementById("LineCanvas");
const drw = c.getContext("2d");
drw.beginPath();
drw.moveTo(10,45);
drw.lineTo(180,47);
drw.lineWidth = 5;
drw.strokeStyle = '#006400';
drw.stroke();
If the phone is aligned straight the line will be green else red
to draw the line you can use a pseudo element from HTML or body or any specific tag that you want to use in a specific page or click , then update rotation via transform:rotate() ; or rotate3D()
example ( without javascript, rotate values will have to be taken from your device via your app ):
let level = document.querySelector("#level");
document.querySelector("#spirit").onclick = function() {
level.classList.toggle('show');
}
#level {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
display: none;
pointer-events: none;
}
#level.show {
display: block;
}
#level::before {
content: '';
position: absolute;
width: 200vmax;
margin: 0 -50vmax;
border-top: 1px solid;
box-shadow: 0 0 1px 5px #bee;
top: 50%;
transform: rotate(0deg);
}
#level.show~#spirit::before {
content: 'Hide';
}
#level:not(.show)~#spirit::before {
content: 'Show';
}
/* animation to fake phone device moving */
#level::before {
animation: rt 10s infinite;
}
#keyframes rt {
20% {
transform: rotate3d(1, -1, 1, -0.25turn);
}
40% {
transform: rotate3d(1, 1, 1, 0.5turn);
}
60% {
transform: rotate3d(1, -1, 1, -0.75turn);
}
80% {
transform: rotate3d(1, 1, -1, -0.5turn);
}
}
<div id="level">
<!-- to show on a single page or via js on user request -->
</div>
<button id="spirit" type=button> that spirit level</button>
While drawing a line with canvas can work you might find it more straightforward to draw it with a simple div element. When you sense a slope you can change its color to red and back to green if it's level.
Of course you will have to do some calculations to decide what angle you want the line to be - but I guess that is the whole point of your webapp to show people how far off they are.
When you know the angle you want the line to be call slope(n) where n is the number of degrees. I've also put in a simple button so the user can choose whether to show the line or not but I expect you'll have your own code for that.
On any page where you want the user to be able to show the line put this in the head:
<style>
* {
margin: 0;
padding: 0;
}
.linecontainer {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 99999;
}
#line {
width: 200vmax;
height: 5px;
position: relative;
top: 50%;
left: calc(50vw - 100vmax);
transform: rotate(45deg);
background-color:red;
}
.hideline {
display: none;
}
#showbtn {
font-size: 20px;
background-color: blue;
color: white;
height: 2em;
width: auto;
padding: 2px;
}
</style>
and put this in the main body of the page:
<div class="linecontainer">
<div id="showbtn" onclick="document.getElementById('line').classList.toggle('hideline');">
Click me to show/hide the line
</div>
<div id="line"></div>
</div>
<script>
function slope(deg) {
let line = document.getElementById('line');
line.style.backgroundColor = ( deg%180 == 0 ) ? 'green' : 'red';
line.style.transform = 'rotate(' + deg + 'deg)';
}
</script>
Here's a snippet where you can show the line at different angles.
function slope(deg) {
let line = document.getElementById('line');
line.style.backgroundColor = ( deg%180 == 0 ) ? 'green' : 'red';
line.style.transform = 'rotate(' + deg + 'deg)';
}
* {
margin: 0;
padding: 0;
}
.linecontainer {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 99999;
}
#line {
width: 200vmax;
height: 5px;
position: relative;
top: 50%;
left: calc(50vw - 100vmax);
transform: rotate(45deg);
background-color:red;
}
.hideline {
display: none;
}
#showbtn {
font-size: 20px;
background-color: blue;
color: white;
height: 2em;
width: auto;
padding: 2px;
}
<div class="linecontainer">
<div id="showbtn" onclick="document.getElementById('line').classList.toggle('hideline');">
Click me to show/hide the line
</div>
<div id="line"></div>
</div>
<!-- this is just for the demo -->
<div style="background-#eeeeee;font-size: 20px;position:fixed;z-index:100000;bottom:0;left:0;">How many degrees do you want me to rotate? <input style="font-size:20px;"value="45" onchange="slope(this.value);"/></div>
I have a function that's triggered by onClick. Here's the example. I want to only be able to trigger the function 'slide1' when 'slide2' is not triggered. I tried setting up a conditional statement like this:
function slide1() {
btn1.classList.toggle('slide', btn2.className != 'slide');
}
I also tried an if statement like this:
function slide1() {
if(btn2.className != 'slide') {
btn1.classList.toggle('slide');
}
}
That didn't work either.
I just need a simple way to toggle classes if certain conditions are met; without jQuery or a library. Thanks.
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
function slide1() {
btn1.classList.toggle('slide');
}
function slide2() {
btn2.classList.toggle('slide');
}
* {
margin: 0;
transition: 1s ease;
-webkit-transition: 1s ease;
}
div {
width: 50%;
height: 100vh;
display: block;
position: absolute;
text-align: center;
cursor: pointer;
}
#btn1 {
background: blue;
}
#btn2 {
background: red;
left: 50%;
}
#btn1.slide {
width: 80%;
z-index: 999;
}
#btn2.slide {
width: 80%;
z-index: 999;
left: 20%;
}
<div id="btn1" onClick="slide1();">
left
</div>
<div id="btn2" onClick="slide2();">
right
</div>
UPDATE: Here is an expanded example of the problem I'm dealing with. There are several elements with classes that need to be toggled only under certain circumstances. If 'panel1' is triggered when 'panel2' has already been triggered, then 'panel1' will cover 'panel2'. and the same with 'panel3'.
To answer your question, the proper way to check if an element has a class in JavaScript is element.classList.contains.
So, in your example, you should replace the condition with
if(btn2.className.contains('slide')) {
...
}
As a sidenote, having different functions doing the exact same thing on different elements should be avoided, where possible. Instead of having two functions, you should have only one and use the click event's target:
let halves = document.querySelectorAll("div");
function slide(event) {
// remove `slide` class from both divs:
[].map.call(halves, function(half){
half.classList.remove('slide');
});
// add `slide` class to currently clicked div:
event.target.classList.add('slide')
}
* {
margin: 0;
transition: 1s ease;
-webkit-transition: 1s ease;
}
div {
width: 50%;
height: 100vh;
display: block;
position: absolute;
text-align: center;
cursor: pointer;
}
#btn1 {
background: blue;
}
#btn2 {
background: red;
left: 50%;
}
#btn1.slide {
width: 80%;
z-index: 999;
}
#btn2.slide {
width: 80%;
z-index: 999;
left: 20%;
}
<div id="btn1" onClick="slide(event);">
left
</div>
<div id="btn2" onClick="slide(event);">
right
</div>
On a different note, I assume you're aware the selectors used in both your question and my answer are outrageously generic and should never be used in production ready code.
And as a last note, your CSS is quite faulty but I'm not considering fixing it here, as it wouldn't help anyone except yourself, which goes against the first principle of SO: one answer should help multiple users having the same problem. Here's how I'd have coded your example:
let br = document.querySelector('#blueRed');
br.addEventListener('click', function(event) {
event.target.classList.toggle('slide');
[].map.call(br.querySelectorAll('div'), function(div) {
if (div !== event.target) {
div.classList.remove('slide');
}
});
})
body {
margin: 0;
}
#blueRed {
height: 100vh;
display: flex;
}
#blueRed div {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
transition: flex-grow 1s cubic-bezier(0.4, 0, 0.2, 1);
flex-grow: 1;
background-color: blue;
color: white;
cursor: pointer;
}
#blueRed div:last-child {
background-color: red;
}
#blueRed div.slide {
flex-grow: 3;
}
<div id="blueRed">
<div>left</div>
<div>right</div>
</div>
Fiddle here. Should be prefixed.
I think I understand your objective...
I condensed the functions into one and start off one button with the className = 'slide'. If one button is clicked then the class slide always alternates between the two buttons.
Demo
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
function slide() {
btn1.classList.toggle('slide');
btn2.classList.toggle('slide');
}
* {
margin: 0;
transition: 1s ease;
-webkit-transition: 1s ease;
}
div {
width: 50%;
height: 100vh;
display: block;
position: absolute;
text-align: center;
cursor: pointer;
}
#btn1 {
background: blue;
}
#btn2 {
background: red;
left: 50%;
}
#btn1.slide {
width: 80%;
z-index: 999;
}
#btn2.slide {
width: 80%;
z-index: 999;
left: 20%;
}
<div id="btn1" onClick="slide();" class='slide'>
left
</div>
<div id="btn2" onClick="slide();">
right
</div>
One more time I need your help. I've used star wars intro and to display it I created buttons. It is played in popup div, but the footer makes height of container too big in for me so I want to remove this element when the code of star wars is displayed.
//start music
function play(){
var audio = document.getElementById("audio");
audio.play();
}
//stop music
function stop(){
var audio = document.getElementById("audio");
audio.pause();
audio.currentTime = 0;
}
//sekwenscja star wars
var sWidth; //screen width
var sHeight; //screen height
var canvas;
var context;
var numOfStars;
var starDensity = 1800; //lower == more stars
var starColors = ["#111", "#333", "#555", "#7872a8", "#483f26"];
var audio = $('audio').get(0);
$(document).ready(function() {
//Play the theme song
setTimeout(function() {
audio.play();
}, 7600);
//Get the window size
sWidth = $(window).width();
sHeight = $(window).height();
//Get the canvas
canvas = $('#starfield');
//Fill out the canvas
canvas.attr('height', sHeight);
canvas.attr('width', sWidth);
context = canvas[0].getContext('2d');
//Calculate the number of stars
numOfStars = Math.floor((sWidth * sHeight) / starDensity);
console.log(numOfStars);
//Draw the stars
function stars() {
for (i=0;i<numOfStars;i++) {
//Get a random star color
var starColor = starColors[Math.floor(Math.random()*5)];
//Get a random x-position
var starX = Math.floor(Math.random()*sWidth);
//Get a random y-position
var starY = Math.floor(Math.random()*sHeight);
//Draw
context.beginPath();
context.arc(starX, starY, 1, 0, 2 * Math.PI);
context.fillStyle = starColor;
context.fill();
}
}
//Draw the stars
stars();
});
.white_content {
display: none;
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: black;
z-index:1002;
overflow: auto;
}
div#glowne {
position: relative;
width: 100%;
max-width: 1920px;
height: 100%;
max-height: 1080px;
font-family: 'Open Sans';
overflow: hidden;
}
#media screen and (min-width: 1600px) {
body {
margin: 0 auto;
}
}
/* In case of no audio support */
audio {
position: absolute;
top: 0;
left: 0;
color: white;
font-size: 14px;
font-weight: 700;
}
#starfield {
z-index: 1;
opacity: 0;
position: absolute;
animation: starfield 0s 8s forwards;
}
#keyframes starfield {
to { opacity: 1; }
}
.long-time {
z-index: 2;
opacity: 0;
position: absolute;
color: #00d7ff;
top: 50%;
left: 51%;
width: 65%;
transform: translate3d(-50%,-50%,0);
font-size: 30px;
font-size: 4.5vw;
line-height: 1.5em;
animation: long-time 5s 1s forwards;
}
#media screen and (min-width: 1600px) {
.long-time {
font-size: 5.0em;
}
}
#keyframes long-time {
0% { opacity: 0; }
18% { opacity: 1; }
82% { opacity: 1; }
100% { opacity: 0; }
}
.logo {
opacity: 0;
z-index: 3;
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
animation: logo 10s 8s cubic-bezier(0,.1,.2,1); forwards;
}
#keyframes logo {
0% { opacity: 1; }
98% { opacity: 1; }
100% { width: 40px;
opacity: 0; }
}
.crawl-container {
z-index: 2;
position: absolute;
bottom: 0;
width: 100%;
height: 350vh;
max-height: 3000px;
/**/color: #ffe029;
/**/text-align: justify;
/**/overflow: hidden;
/**/transform-origin: 50% 100%;/**/
/**/transform: perspective(200px) rotateX(16deg);
/**/animation: crawl-container 0s 17s forwards;
}
#keyframes crawl-container {
to { opacity: 1; }
}
.crawl-container .crawl {
z-index: 2;
position: absolute;
top: 100%; /*skąd zaczyna przewijany tekst historii wypływać*/
width: 100%;
animation: crawl 170s 17s linear forwards;
}
.crawl p {
margin-left: auto;
margin-right: auto;
padding: 0 10%;
max-width: 1500px;
}
.crawl p.title {
font-size: 3em;
font-size: 5vw;
text-align: center;
}
.crawl p.title-1 {
margin-bottom: .7em;
}
.crawl p.title-2 {
margin-bottom: 1.2em;
}
.crawl p.title-2 img {
width: 65%;
height: auto;
}
p.crawl-p {
text-align: justify;
font-size: 5.6vw;
margin-bottom: 1.2em;
}
#media screen and (min-width: 1600px) {
p.crawl-p {
font-size: 5.0em;
}
}
#keyframes crawl {
to { top: -250%; }
}
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><input type="button" value="WEJDŹ" onclick="play()">
<audio id="audio" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/sw-7-theme.ogg" type="audio/ogg"></audio></a>
<div id="light" class="white_content">
<div id="glowne">
<audio preload="auto">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/sw-7-theme.ogg" type="audio/ogg">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/sw-7-theme.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<canvas id="starfield"></canvas>
<div class="long-time">A long time ago in a galaxy far,<br />far away....</div>
<img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/star-wars-7-logo.png" />
<div class="crawl-container">
<div class="crawl">
<p class="title title-1">Episode VII</p>
<p class="title title-2"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/the-force-awakens.png"></p>
<p class="crawl-p">Luke Skywalker has vanished. In his absence, the sinister FIRST ORDER has risen from the ashes of the Empire and will not rest until Skywalker, the last Jedi, has been destroyed.</p>
<p class="crawl-p">With the support of the REPUBLIC, General Leia Organa leads a brave RESISTANCE. She is desperate to find her brother Luke and gain his help in restoring peace and justice to the galaxy.</p>
<p class="crawl-p">Leia has sent her most daring pilot on a secret mission to Jakku, where an old ally has discovered a clue to Luke's whereabouts....</p>
</div>
</div></div><input type="button" value="ZAKOŃCZ" onclick="stop()"></div>
<div id="fade" class="black_overlay"></div>
<?php
// Start the loop.
while ( have_posts() ) : the_post();
// Include the page content template.
get_template_part( 'template-parts/content', 'page' );
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}
// End of the loop.
endwhile;
?>
</main><!-- .site-main -->
<?php get_sidebar( 'content-bottom' ); ?>
</div><!-- .content-area -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Use this to hide the footer
document.getElementById('footerID').style.display='none';
Without knowing the HTML for your footer it is impossible to be exact, but you can simply hide it within the ready function:
$( /* unique selector for your footer */ ).hide();
I'd probably put this at the start of the ready function, but looking at your code the specific place you call should be pretty irrelevant.
P.S.
You could also call $( /* ...footer */ ).remove();, but hiding it will allow you to show it again should the need arise.