307 fart.html
View file
@@ -5,142 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Young Frankenstein Fart</title>

<style>

.brick{
width: 100vw;
background-image: url(../images/bg.svg);
height: 88vh;
position: absolute;
top:0;
left:0;
background-repeat: no-repeat;
background-size: cover;
z-index: -100;
}
.floor{
background-image: url(../images/floor.jpg);
width: 100vw;
height: 12vh;
position: absolute;
bottom: 0;
left: 0;
/*background-color: darkgray;*/
z-index: -100;
}
body {
width: 100vw;
opacity: 0;
animation: show 1.5s forwards;
}
@keyframes show {
to{
opacity: 1;
}
}


.circle:before {
content:" ";
position:absolute;
width: 1000px;
height: 1000px;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
margin: auto;
border-radius:50%;
box-shadow:0 0px 0 850px #000;
opacity: 0;
animation: growcircle 1.5s linear;
z-index: 1000;
}
@keyframes growcircle {
50%{
opacity: 0.8;
}
100%{
opacity: 1;
width: 250px;
height: 250px;
}
}

.circle2:before {
content:" ";
position:absolute;
width: 1000px;
height: 1000px;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
margin: auto;
border-radius:50%;
box-shadow:0 0px 0 850px #000;
opacity: 0;
animation: growcircle2 1.5s linear reverse;
z-index: 1000;
}
@keyframes growcircle2 {
0%{
opacity:0;
}
60%{
opacity: 1;
}
100%{
opacity: 1;
width: 10px;
height: 10px;
}
}
.creature {
position: absolute;
width: 80vw;
height:70vh;
bottom: 0;
left: 0;
right:0;
margin: auto;
}

.creatureglow{
animation: heglow 2s forwards;
}

@keyframes heglow{
100%{
filter: drop-shadow(0px 5px 18px rgba(40, 0, 255, 1));
}
}

.creature2 {
position: absolute;
width: 80vw;
height:70vh;
bottom: 0;
left: 0;
right:0;
margin: auto;
}

.hide {
display: none;
}

.creatures {
position: absolute;
width: 80vw;
height:70vh;
bottom: 0;
left: 0;
right:0;
margin: auto;
}

</style>
<link rel="stylesheet" href="css/fart.css" type="text/css">
</head>

<body>
@@ -176,175 +41,7 @@
<source src="audio/mmm_audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
let myLens = document.querySelector(".mylens");
let creature = document.querySelector(".creature");
let creature2 = document.querySelector(".creature2");
let creature3 = document.querySelector(".creature3");
let creature4 = document.querySelector(".creature4");
let creature5 = document.querySelector(".creature5");
let creature6 = document.querySelector(".creature6");
let creature7 = document.querySelector(".creature7");
let creature8 = document.querySelector(".creature8");
let audfart = document.querySelector(".audfart");
let audmmm = document.querySelector(".audmmm");

window.addEventListener("load",firstEvent)

function firstEvent(){
myLens.classList.add("circle2");
}
myLens.addEventListener("animationend", spriteLife)

function spriteLife(){
console.log("remove circle2");
myLens.classList.remove("circle2")
let givelife = document.querySelector(".givelife")
givelife.play();
setTimeout(function(){
creature.classList.add("creatureglow");
}, 1000);
givelife.addEventListener("ended", endglow);
function endglow(){
creature.classList.remove("creatureglow");

let heart = document.querySelector(".heart");

heart.play();
console.log("first beat")
creature2.classList.remove("hide");
setTimeout(function(){
creature2.classList.add("hide");
}, 500);
setTimeout(function(){
console.log("second beat")
creature2.classList.remove("hide");
}, 900);
setTimeout(function(){
creature2.classList.add("hide");
}, 1400);
setTimeout(function(){
console.log("third beat")
creature2.classList.remove("hide");
}, 1900);
setTimeout(function(){
creature2.classList.add("hide");
}, 2400);
setTimeout(function(){
console.log("fourth beat")
creature2.classList.remove("hide");
}, 2900);
setTimeout(function(){
console.log("stop heart beat")
heart.pause();
creature2.classList.add("hide");
}, 3300);
}
givelife.addEventListener("ended", fartysceen);

/*creature farts*/
function fartysceen (){
creature.classList.add("hide");
creature3.classList.remove("hide");
setTimeout(function(){
console.log("second fart")
creature.classList.add("hide");
creature2.classList.add("hide");
creature3.classList.add("hide");
creature4.classList.remove("hide");
}, 5000);
setTimeout(function(){
creature.classList.add("hide");
creature2.classList.add("hide");
creature3.classList.add("hide");
creature4.classList.add("hide");
creature5.classList.remove("hide");
}, 5500);
setTimeout(function(){
console.log("third fart")
creature.classList.add("hide");
creature2.classList.add("hide");
creature3.classList.add("hide");
creature4.classList.add("hide");
creature5.classList.add("hide");
creature6.classList.remove("hide");
audfart.play();
}, 6000);
setTimeout(function(){
creature.classList.add("hide");
creature2.classList.add("hide");
creature3.classList.add("hide");
creature4.classList.add("hide");
creature5.classList.add("hide");
creature6.classList.add("hide");
creature7.classList.remove("hide");
}, 6500);
setTimeout(function(){
creature.classList.add("hide");
creature2.classList.add("hide");
creature3.classList.add("hide");
creature4.classList.add("hide");
creature5.classList.add("hide");
creature6.classList.add("hide");
creature7.classList.add("hide");
creature8.classList.remove("hide");
}, 7000);
setTimeout(function(){
creature.classList.add("hide");
creature2.classList.add("hide");
creature3.classList.add("hide");
creature4.classList.add("hide");
creature5.classList.add("hide");
creature6.classList.add("hide");
creature7.classList.add("hide");
creature8.classList.remove("hide");
audmmm.play();
}, 7500);
setTimeout(function(){
creature.classList.add("hide");
creature2.classList.remove("hide");
creature3.classList.add("hide");
creature4.classList.add("hide");
creature5.classList.add("hide");
creature6.classList.add("hide");
creature7.classList.add("hide");
creature8.classList.add("hide");
}, 8000);
setTimeout(function(){
creature.classList.add("hide");
creature2.classList.remove("hide");
creature3.classList.add("hide");
creature4.classList.add("hide");
creature5.classList.add("hide");
creature6.classList.add("hide");
creature7.classList.add("hide");
creature8.classList.add("hide");
}, 8500);
setTimeout(function(){
creature.classList.remove("hide");
creature2.classList.add("hide");
creature3.classList.add("hide");
creature4.classList.add("hide");
creature5.classList.add("hide");
creature6.classList.add("hide");
creature7.classList.add("hide");
creature8.classList.add("hide");
}, 9500);
}
}

audmmm.addEventListener('ended', lens);

function lens() {
console.log("add circle");
myLens.classList.add("circle")
setTimeout(function(){
window.location.href = "lab2.html";
}, 1500);
}


</script>
<script src="js/fart.js"></script>

</body>
</html>
166 js/fart.js
View file
@@ -0,0 +1,166 @@
let myLens = document.querySelector(".mylens");
let creature = document.querySelector(".creature");
let creature2 = document.querySelector(".creature2");
let creature3 = document.querySelector(".creature3");
let creature4 = document.querySelector(".creature4");
let creature5 = document.querySelector(".creature5");
let creature6 = document.querySelector(".creature6");
let creature7 = document.querySelector(".creature7");
let creature8 = document.querySelector(".creature8");
let audfart = document.querySelector(".audfart");
let audmmm = document.querySelector(".audmmm");

window.addEventListener("load",firstEvent)

function firstEvent(){
myLens.classList.add("circle2");
}
myLens.addEventListener("animationend", spriteLife)

function spriteLife(){
console.log("remove circle2");
myLens.classList.remove("circle2")
let givelife = document.querySelector(".givelife")
givelife.play();
setTimeout(function(){
creature.classList.add("creatureglow");
}, 1000);
givelife.addEventListener("ended", endglow);
function endglow(){
creature.classList.remove("creatureglow");

let heart = document.querySelector(".heart");

heart.play();
console.log("first beat")
creature2.classList.remove("hide");
setTimeout(function(){
creature2.classList.add("hide");
}, 500);
setTimeout(function(){
console.log("second beat")
creature2.classList.remove("hide");
}, 900);
setTimeout(function(){
creature2.classList.add("hide");
}, 1400);
setTimeout(function(){
console.log("third beat")
creature2.classList.remove("hide");
}, 1900);
setTimeout(function(){
creature2.classList.add("hide");
}, 2400);
setTimeout(function(){
console.log("fourth beat")
creature2.classList.remove("hide");
}, 2900);
setTimeout(function(){
console.log("stop heart beat")
heart.pause();
creature2.classList.add("hide");
}, 3300);
}
givelife.addEventListener("ended", fartysceen);

/*creature farts*/
function fartysceen (){
creature.classList.add("hide");
creature3.classList.remove("hide");
setTimeout(function(){
console.log("second fart")
creature.classList.add("hide");
creature2.classList.add("hide");
creature3.classList.add("hide");
creature4.classList.remove("hide");
}, 5000);
setTimeout(function(){
creature.classList.add("hide");
creature2.classList.add("hide");
creature3.classList.add("hide");
creature4.classList.add("hide");
creature5.classList.remove("hide");
}, 5500);
setTimeout(function(){
console.log("third fart")
creature.classList.add("hide");
creature2.classList.add("hide");
creature3.classList.add("hide");
creature4.classList.add("hide");
creature5.classList.add("hide");
creature6.classList.remove("hide");
audfart.play();
}, 6000);
setTimeout(function(){
creature.classList.add("hide");
creature2.classList.add("hide");
creature3.classList.add("hide");
creature4.classList.add("hide");
creature5.classList.add("hide");
creature6.classList.add("hide");
creature7.classList.remove("hide");
}, 6500);
setTimeout(function(){
creature.classList.add("hide");
creature2.classList.add("hide");
creature3.classList.add("hide");
creature4.classList.add("hide");
creature5.classList.add("hide");
creature6.classList.add("hide");
creature7.classList.add("hide");
creature8.classList.remove("hide");
}, 7000);
setTimeout(function(){
creature.classList.add("hide");
creature2.classList.add("hide");
creature3.classList.add("hide");
creature4.classList.add("hide");
creature5.classList.add("hide");
creature6.classList.add("hide");
creature7.classList.add("hide");
creature8.classList.remove("hide");
audmmm.play();
}, 7500);
setTimeout(function(){
creature.classList.add("hide");
creature2.classList.remove("hide");
creature3.classList.add("hide");
creature4.classList.add("hide");
creature5.classList.add("hide");
creature6.classList.add("hide");
creature7.classList.add("hide");
creature8.classList.add("hide");
}, 8000);
setTimeout(function(){
creature.classList.add("hide");
creature2.classList.remove("hide");
creature3.classList.add("hide");
creature4.classList.add("hide");
creature5.classList.add("hide");
creature6.classList.add("hide");
creature7.classList.add("hide");
creature8.classList.add("hide");
}, 8500);
setTimeout(function(){
creature.classList.remove("hide");
creature2.classList.add("hide");
creature3.classList.add("hide");
creature4.classList.add("hide");
creature5.classList.add("hide");
creature6.classList.add("hide");
creature7.classList.add("hide");
creature8.classList.add("hide");
}, 9500);
}
}

audmmm.addEventListener('ended', lens);

function lens() {
console.log("add circle");
myLens.classList.add("circle")
setTimeout(function(){
window.location.href = "../lab2.html";
}, 1500);
}