We Keep Coding

I want to create a vote system with jQuery but not working

I am trying to create a function with jQuery but I can't. When you press a button then an arrow will move to 36 degrees. I have 5 buttons and the circle is 180 degrees.
My code is working in one way but it's not in reverse, which means when you press button 1 to 5 it's working but when I try to click randomly then it is not working.
Here is what i am trying to build
$(document).ready(function() {
$("#ang36").click(function() {
$("#silder_image").removeClass("animate1");
$("#silder_image").addClass("animate1");
});
$("#ang72").click(function() {
$("#silder_image").removeClass("animate2");
$("#silder_image").addClass("animate2");
});
$("#ang108").click(function() {
$("#silder_image").removeClass("animate3");
$("#silder_image").addClass("animate3");
});
$("#ang144").click(function() {
$("#silder_image").removeClass("animate4");
$("#silder_image").addClass("animate4");
});
$("#ang180").click(function() {
$("#silder_image").removeClass("animate5");
$("#silder_image").addClass("animate5");
});
});
.slider_area {
width: 800px;
margin: 0 auto;
position: relative;
margin-top: 400px;
}
.silder_image {
width: 100px;
height: 100px;
}
.animate1 {
transform: rotate(36deg);
-ms-transform: rotate(36deg);
-webkit-transform: rotate(36deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate1 img,
.animate2 img,
.animate3 img,
.animate4 img,
.animate5 img {
transform: rotate(-90deg);
}
.animate2 {
transform: rotate(72deg);
-ms-transform: rotate(72deg);
-webkit-transform: rotate(72deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate3 {
transform: rotate(108deg);
-ms-transform: rotate(108deg);
-webkit-transform: rotate(108deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate4 {
transform: rotate(144deg);
-ms-transform: rotate(144deg);
-webkit-transform: rotate(144deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate5 {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform-origin: center center;
transition-duration: 5s;
}
.triggrs {
position: relative;
width: 400px;
bottom: -171px;
left: 0;
}
<div class="slider_area">
<div id="silder_image">
<img src="Slider Vote.png" alt="">
</div>
<div class="triggrs">
<button id="ang36">button1</button>
<button id="ang72">button2</button>
<button id="ang108">button3</button>
<button id="ang144">button4</button>
<button id="ang180">button5</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

I created another approach which could also help you further (maybe).
let needle = document.querySelector('#needle ');
let btns = document.querySelectorAll('button')
btns.forEach( btn=>{ btn.addEventListener('click', function() {
let level = this.dataset.deg;
needle.style.transform = "rotate("+Number(level)+"deg)"});
})
#panel {
height: 50px;
overflow: hidden;
}
.circle{
width: 100px;
height: 100px;
border-radius: 100%;
border: 5px solid grey;
position: relative;
display: flex;
justify-content: center;
transform: rotate(-90deg);
background: #ffffff;
background: linear-gradient(to bottom, #ffffff 0%,#e8e000 50%,#e50000 100%);
}
#needle {
width: 6px;
height: 50px;
background: #4361ff;
transform-origin: bottom;
transition: transform .75s cubic-bezier(.31,-0.52,.84,1.55);
transform: rotate(30deg);
box-sizing: border-box;
margin-left: -3px;
}
.buttons {
margin-top: 2rem;
}
<div id="panel">
<div class="circle">
<div id="needle"></div>
</div>
</div>
<div class="buttons">
<button data-deg="30">1</button>
<button data-deg="60">2</button>
<button data-deg="90">3</button>
<button data-deg="120">4</button>
<button data-deg="150">5</button>
</div>

Hover effect only triggered when hovering on top half of card

I have a secrtion on my site with three flip cards. The images are initially in grayscale but on hover, they are colored. However when i hover over the front of the card, the effect is only triggered on the top half of the card. Can anyone explain to me why this is happening?
cards-container{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card-wrapper{
flex:0 1 250px;
margin: 10px;
min-height: 300px;
}
.card{
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
box-shadow: 0px 0px 50px #c4c4c4;
}
.flip{
transform: rotateX(180deg);
}
.front {
background-size:cover;
background-position: center;
cursor: pointer;
-webkit-filter: grayscale(90%) brightness(70%);
filter: grayscale(90%) brightness(70%);
transition: 300ms ease-in;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
.front:hover{
-webkit-filter: grayscale(20%) ;
filter: grayscale(20%) ;
}
.card-1 .front{
background-image:url(https://source.unsplash.com/nCya9c9AadA);
}
.card-2 .front{
background-image:url(https://source.unsplash.com/d0iASNy8p50);
}
.card-3 .front{
background-image:url(https://source.unsplash.com/pa_McjjynOA);
}
.back{
width: 100%;
height: 100%;
background: linear-gradient(pink, rgb(168, 235, 255), lavender);
/* transform: rotateY(180deg); */
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
-o-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
<div class="container-2 rellax" data-rellax-speed="2" data-rellax-zindex="3">
<div class="title">
<h1>Lotus
<i class="fas fa-spa fa-1x"></i>
Yoga</h1>
</div>
<div class="cards-container">
<div class="card-wrapper">
<div class="card card-1">
<div class="front">
<h2>pee</h2>
</div>
<div class="back">
<h2>poo</h2>
</div>
</div>
</div>
<div class="card-wrapper">
<div class="card card-2">
<div class="front">
<h2>bleep</h2>
</div>
<div class="back">
<h2>bloop</h2>
</div>
</div>
</div>
<div class="card-wrapper">
<div class="card card-3">
<div class="front">
<h2>pee</h2>
</div>
<div class="back">
<h2>poo</h2>
</div>
</div>
</div>
</div>
</div>
IMPORTANT NOTE
When I comment out this code, the hover effect works properly. However, then the backside of the card is upside down, so this code is necessary.
.back{
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
-o-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
does anyone have any explanation/solution to this problem?

You can achieve this by hiding the back side and then show on hovering the front.
You can to this as follow:
.back {
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
-o-transform: rotateX(-180deg);
transform: rotateX(-180deg);
display: none;
}
.front:hover .back{
display: block;
}

I tweaked Asif's solution and this works best:
I removed transform from back:
.back {
width: 100%;
height: 100%;
background: linear-gradient(pink, rgb(168, 235, 255), lavender);
}
and added it on hover
.card:hover .back {
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
-o-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}

Why does iOS Sfari run this CSS transition's multiple transforms one after the other?

This works perfectly in Chrome and smoothly changes the icons, but in iOS Safari (and possibly desktop Safari), it does them in order, waiting till the other is done before doing the next:
Safari Transition:
Does the rotation until complete
Does the translate (x,y)
This makes for a very poor animation. In Chrome it's all done at the same time.
Is there a way to force that in Safari?
https://jsfiddle.net/6nju07s8/
HTML:
<div class="error" id="outer">
<div class="line left">
</div>
<div class="line right">
</div>
</div>
CSS:
#outer,body,html
{
width: 100%;
height: 100%
}
.line {
position: absolute;
top: 50%;
left: 50%;
width: 2.5rem;
height: .375rem;
background-color: red;
-webkit-transform: translate(-50%,-50%) rotate(45deg);
-ms-transform: translate(-50%,-50%) rotate(45deg);
transform: translate(-50%,-50%) rotate(45deg);
-webkit-transition: transform 250ms;
transition: transform 250ms;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
.line.right {
-webkit-transform: translate(-50%,-50%) rotate(-45deg);
-ms-transform: translate(-50%,-50%) rotate(-45deg);
transform: translate(-50%,-50%) rotate(-45deg);
}
.info .line {
width: .375rem;
height: .375rem;
-webkit-transform: translate(-50%,-50%) translateY(-1.0625rem);
-ms-transform: translate(-50%,-50%) translateY(-1.0625rem);
transform: translate(-50%,-50%) translateY(-1.0625rem);
background-color: blue;
}
.info .line.right {
width: 1.75rem;
height: .375rem;
-webkit-transform: translate(-50%,-50%) translateY(.4375rem) rotate(90deg);
-ms-transform: translate(-50%,-50%) translateY(.4375rem) rotate(90deg);
transform: translate(-50%,-50%) translateY(.4375rem) rotate(90deg);
background-color: blue;
}
JS (optional):
var outer = document.querySelector( "#outer" );
outer.onclick = function()
{
if ( outer.className === "info" ) { outer.className = "error"; }
else outer.className = "info";
}

I see an issue with Safari Desktop. I am not sure if it is the same issue you are speaking of, but when having a transition on transform and width issues arise.
I think the issue has to do with Safari re-positioning the element after the width change. In other browser it seems to happen fluidly, in Safari it is "jerky."
You can see a simplified example of that behaviour here. Unfortunately I don't know exactly why that is occurring, but we can accomplish the same effect by adjusting our approach. That is what I would suggest.
Rather than changing the width value(to avoid the issue in Safari), I used the scaleX(X) property. This will given you a very similar visual affect (adjusting the "height" of the line) and should not introduce the problems. You will have to also edit your top values to re-position the elements after scaling them (or adjust the translate(-50%,Y) value; I prefer using top).
Here's a demo. I also made some QoL markup changes, you will need to prefix everything if you want to use it in production.
$('.box').click(function(){
$(this).toggleClass('info');
});
.parent {
width: 100%;
height: 100vh;
}
.box {
width: 50px;
height: 50px;
background: lightblue;
}
.va {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0 auto;
}
.line {
display: inline-block;
background: white;
width: 2.5rem;
height: .375rem;
position: absolute;
top: 50%;
left: 50%;
transition: all 250ms;
transform: translate(-50%,-50%) rotate(45deg);
}
.line.right {
background: red;
transform: translate(-50%,-50%) rotate(-45deg);
}
.info .line.left {
top: 20%;
transform: translate(-50%,-50%) rotate(90deg) scaleX(.15);
}
.info .line.right {
top: 60%;
transform: translate(-50%,-50%) rotate(90deg) scaleX(.65);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent error">
<div class="box va">
<div class="line left"></div>
<div class="line right"></div>
</div>
</div>

inserting a text box at top of the page

I have been trying this for a lot of time. How can I add a bigger text box on the top of the page ie it would be outside the div tag of the button which would be clicked
https://jsfiddle.net/Lx3rtLx0/2/
For eg on clicking one of the four emerging images it should display
a text box on the top of the page like the one shown below
I want the code given to arrive on the page on clicking one of the images. I.e. when you click on one of the images(jsfiddle) ..a text box(code given) should appear. on different clicks diff content.
#adbox {
width: 800px;
height: 150px;
border-width: 0;
border-color: red;
background-color:grey;
}
#adbox .adbox1 {
width: 200px;
height: 50px;
border-width: 0;
border-color: red;
float:left;
background-color:lightblue;
margin:0px 0px 0px 300px;
}
#adbox .adbox2 {
width: 200px;
height: 50px;
border-width: 0;
border-color: red;
float:right;
background-color:red;
margin:0px 60px 0px 0px;
}
.clear{
clear:both;
}
<!DOCTYPE html>
<html>
<head>
<title>BOX</title>
</head>
<body>
<div align=center><div id="adbox">
<h1><br> xyz sent you a hug</br></h1>
<div class="adbox1">
<br>Send a Hug Back</br>
</div>
<div class="adbox2">
<br>Ack | Dis</br>
</div>
<div class="clear"/>
</div></div>
</body>
</html>

Not super clear on your question, do you need to add an input to the jsfiddle in your question? or the code you have listed in your question? If it is in the jsfiddle, just add this to the top of the code:
<body>
<section id="header">
<div class="inner">
<div>
<input type="text" style="position:absolute; width:300px;" />
</div>
Otherwise, the attribute position:absolute should work out for you, if it isn't in the right place, add attributes like top:0; left:0, and that will put your input in the top left despite anything else in your code.

Simple, on your click button add the code as in https://jsfiddle.net/Lx3rtLx0/6/
var input = document.createElement('input'); // if you want label just change inpput to label
input.type='text';
input.value = 'hugs or whatever';
document.body.insertBefore(input, document.body.firstChild);
So the full JS become
$(document).ready(function() {
$(".trigger").click(function() {
$(".menu").toggleClass("active");
var input = document.createElement('input'); // if you want label just change inpput to label
input.type='text';
input.value = 'hugs or whatever';
document.body.insertBefore(input, document.body.firstChild);
});
});

You can use a data- attribute on your clickable divs to link them with a specific element (a textbox in this case). For example:
<div class="btn btn-icon" title="Send a hug to Mohammed" data-adbox="adbox1">
In the click handler, we can retreive this attribute and show the element with id adbox1.
Full example:
$(document).ready(function() {
$(".trigger").click(function() {
$(".menu").toggleClass("active");
});
$(".btn.btn-icon").click(function() {
$('.adbox').hide();
$('#' + $(this).data('adbox')).show();
});
$('.adbox').click(function() {
$(this).hide();
});
});
html,
body {
height: 100%;
overflow: hidden;
}
.absolute-center,
.menu,
.menu .btn .fa,
.menu .btn.trigger .line {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.menu {
width: 5em;
height: 5em;
}
.menu .btn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
opacity: 0;
z-index: -10;
cursor: pointer;
-webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
transition: opacity 2s, z-index 1s, -webkit-transform 1s;
transition: opacity 2s, z-index 1s, transform 1s;
transition: opacity 2s, z-index 1s, transform 1s, -webkit-transform 1s;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu .btn.trigger {
opacity: 1;
z-index: 100;
cursor: pointer;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
content: url("http://i.stack.imgur.com/Yse7Q.jpg");
}
.menu .btn.trigger:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.menu .rotater {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.menu.active .btn-icon {
opacity: 1;
z-index: 50;
}
.rotater:nth-child(1) {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu.active .rotater:nth-child(1) .btn-icon {
-webkit-transform: translateY(-12em) rotate(45deg);
transform: translateY(-12em) rotate(45deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(2) {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu.active .rotater:nth-child(2) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-45deg);
transform: translateY(-12em) rotate(-45deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(3) {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.menu.active .rotater:nth-child(3) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-135deg);
transform: translateY(-12em) rotate(-135deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(4) {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.menu.active .rotater:nth-child(4) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-225deg);
transform: translateY(-12em) rotate(-225deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.menu.active .rotater:nth-child(4) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-225deg);
transform: translateY(-12em) rotate(-225deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.text-box {
text-align: center;
z-index: 3;
font-size: 18px;
font-weight: 900;
color: white;
padding-top: 30px;
opacity: 0;
-webkit-transition: all 0.5s ease;
/* Safari */
transition: all 0.5s ease;
}
.text-box:hover {
opacity: 1;
}
.adbox {
display: none;
position: absolute;
top: 10px;
width: 120px;
left: 50%;
margin-left: -70px;
background: grey;
padding: 10px;
color: white;
text-align: center;
border-radius: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header">
<div class="inner">
<div class="menu">
<div class="btn trigger">
<span class="line"></span>
</div>
<div class="icons">
<div class="rotater">
<div class="btn btn-icon" title="Send a hug to Mohammed" data-adbox="adbox1">
<p class="text-box">
Hello
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon" title="Send a kiss to Margaret" data-adbox="adbox2">
<p class="text-box">
This
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon" title="Wish Good Morning to your Family" data-adbox="adbox3">
<p class="text-box">
Doge
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon " title="Express your love" data-adbox="adbox4">
<p class="text-box">
Is
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="adbox" id="adbox1">
<h1>xyz sent you a hug</h1>
</div>
<div class="adbox" id="adbox2">
<h1>Send a Hug Back</h1>
</div>
<div class="adbox" id="adbox3">
<h1>Ack | Dis</h1>
</div>
<div class="adbox" id="adbox4">
</div>

Need help adding more photo to my parallax site

Before I start I will like to say thank you to Keith Clark for parallax code.
So am trying to create a parallax site with about 50 photo but every time I added more than six images, the images doesn't show only four show. I even tried put up online links of photo, but it still does not seem to work, I have tried adding different types of photo but it still does not work. Any ideas how to fix this?
<!DOCTYPE html>
<html>
<head>
<script src="myScript.js"></script>
<title> Loose Fit </title>
<style>
#import url(http://www.1001fonts.com/code-predators-font.html);
html {
height: 100%;
overflow: hidden;
}
.logo {
background-image: url("https://s-media-cache-ak0.pinimg.com/736x/8e/d5/8d/8ed58d031c960b6fa4e14ae965d6aed0.jpg");
position: absolute;
top: 0;
left: 0;
}
body {
margin:0;
padding:0;
perspective: 1px;
-webkit-perspective: 1px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
font-family: Nunito;
}
h1 {
font-size: 250%
}
h3 {
font-size: 200%
}
h3 {
font-size: 150%
}
h4{
font-size: 100%
}
h5{
font-size: 50%
}
p {
font-size: 140%;
font-color:6699FF
line-height: 150%;
color:6699FF;
}
.slide {
position: relative;
padding: 25vh 10%;
min-height: 100vh;
width: 100vw;
box-sizing: border-box;
box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
-webkit-transform-style: inherit;
transform-style: inherit;
}
img {
position: absolute;
top: 50%;
left: 35%;
width: 320px;
height: 240px;
-webkit-transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
padding: 10px;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
img:last-of-type {
-webkit-transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}
.slide:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
}
.title {
width: 50%;
padding: 5%;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.slide:nth-child(2n) .title {
margin-left: 0;
margin-right: auto;
}
.slide:nth-child(2n+1) .title {
margin-left: auto;
margin-right: 0;
}
.slide, .slide:before {
background: 50% 50% / cover;
}
.header {
text-align: center;
font-size: 175%;
color: #fff;
text-shadow: 0 2px 2px #000;
}
#title {
background-image: url("11.jpg");
background-attachment: fixed;
}
#slide1: {
background-image: url("https://download.unsplash.com/photo-1428930377079-45a584b6dd6b");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide2: {
background-image: url("https://download.unsplash.com/photo-1422207134147-65fb81f59e38");
background-attachment: fixed;
}
#slide3: {
background-image: url("https://download.unsplash.com/photo-1428976343495-f2c66e701b2b");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide4: {
background-image: url("https://download.unsplash.com/photo-1428677361686-f9d23be145c9");
background-attachment: fixed;
}
#slide5: {
background-image: url("https://download.unsplash.com/photo-1425141750113-187b6a13e28c");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide6: {
background-image: url("https://download.unsplash.com/photo-1428591501234-1ffcb0d6871f");
background-attachment: fixed;
}
#slide7: {
background-image: url("https://download.unsplash.com/photo-1423439793616-f2aa4356b37e");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide8: {
background-image: url("https://download.unsplash.com/photo-1428591501234-1ffcb0d6871f");
background-attachment: fixed;
}
#slide9: {
background-image: url("https://download.unsplash.com/uploads/1411724908903377d4696/2e9b0cb2");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
</style>
</head>
<body>
<div id="title" class="slide header">
<h1>Loose Fit Studio</h1>
<h4>Loose Fit is a hand-picked directory of the best high quality stock photography, deveryed to you.</h4>
</div>
<div id="slide1" class="slide">
<div class="title">
<h1>Slide 1</h1>
<p>pic 1</p>
</div>
</div>
<div id="slide2" class="slide">
<div class="title">
<h1>Slide 2</h1>
<p></p>
</div>
<img src="https://download.unsplash.com/photo-1422433555807-2559a27433bd">
<img src="https://download.unsplash.com/photo-1418479631014-8cbf89db3431">
</div>
<div id="slide3" class="slide">
<div class="title">
<h1>Slide 3</h1>
<p></p>
</div>
</div>
<div id="slide4" class="slide header">
<div class="title">
</div>
</body>

I think this is just a case of poor coding (sounds like you've been staring at it for too long... happens to all of us)
In the HTML you posted you dont have a closing tag for the #slide4.
<div id="slide4" class="slide">
<div class="title">
<h1>Slide 4</h1>
<p></p>
</div>
</div>
Also in your CSS just for your Slide IDs 1-8 you have an extra colon : in the code.
#slide8: { <--remove colon
...
}
Should look like this
#slide8 {
...
}
Lastly the transform tag seemed to prevent the parallex from working correctly so i removed it.
#slide1 {
background-image: url("https://download.unsplash.com/photo-1428930377079-45a584b6dd6b");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
Once that was cleaned up your code seemed to work well. You can see your code in action here.