2 Replies - 192 Views - Last Post: 25 September 2017 - 11:06 AM

#1 Liljeqvist  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 25-September 17

JS layout conflicting with my parallax image.

Posted 25 September 2017 - 06:47 AM

While my code involves a lot of Javascript, I do think the error is located somewhere within the CSS file, so let's see how this goes.
So, I am trying to play around with a layout, which includes a JS layout that shows animated particles. I am sure many of you have played with this before.
Underneath this layout, I wanted to have a parallax layout, where each image contains a flip card div containing the link for my subpages.

At first I created the parallax and the particle layout seperately, and both worked with no issues.
The problem started when I combined them. The parallax image simply refuses to appear.
My first thought was the z-index values, which would be the most obvious cause for this problem, but even after giving the parallax image a higher z-index value, it still refused to show up.

So now I am hoping that you guys could help me find my mistake.

THE HTML FILE
<!doctype html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8" />
  <title>TEST</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/particles.css" />
  <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
  <link href="https://fonts.googleapis.com/css?family=Fira+Sans:200,300,400,500" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <script type='text/javascript' src='../jquery.particleground.js'></script>
  <script type='text/javascript' src='js/demo.js'></script>
</head>

<body>
<div class="header">
<div class="menu-icon">
	<span class="menu-icon__line menu-icon__line-left"></span>
	<span class="menu-icon__line"></span>
	<span class="menu-icon__line menu-icon__line-right"></span>
</div>

<div class="nav">
	<div class="nav__content">
		<ul class="nav__list">
			<li class="nav__list-item">Home</li>
			<li class="nav__list-item">About</li>
			<li class="nav__list-item">Projects</li>
			<li class="nav__list-item">Contact</li>
		</ul>
	</div>
</div>
  </div>
    <script src="js/index.js"></script>


<div id="particles">
  <div class="intro">

  </div>  
</div>

<div class="container">
    <div class="parallax">
        <div class="flip">
            <div class="back">
                back
            </div>
            <div class="front">
                front
            </div>
        </div>  
    </div>
    
</div>   

</body>
</html>


THE CSS FILE
/*
CSS Reset
http://meyerweb.com/eric/tools/css/reset/
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* particleground demo */


* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background: #1e2023;
  font-family: 'Montserrat', 'Fira Sans', sans-serif;
  color: #fff;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#particles {
  width: 100%;
  height: 500px;
}

.intro {
  position: absolute;
  left: 0;
  top: 50%;
  padding: 0 20px;
  width: 100%;
  text-align: center;
}
h1 {
  text-transform: uppercase;
  font-size: 85px;
  font-weight: 700;
  letter-spacing: 0.015em;
  color: black;
}
h1::after {
  content: '';
  width: 80px;
  display: block;
  background: #000;
  height: 10px;
  margin: 30px auto;
  line-height: 1.1;
  color: #000;
}
p {
  margin: 0 0 30px 0;
  font-size: 24px;
  color: #000;
}
.btn {
  display: inline-block;
  padding: 15px 30px;
  border: 2px solid #fff;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.4s;
     -moz-transition: all 0.4s;
       -o-transition: all 0.4s;
          transition: all 0.4s;
}
.btn:hover {
  color: #005544;
  border-color: #005544;
}

/* NAVIGATION MENU */

.header {
    position: fixed;
	width: 100%;
	height: 70px;
	background-color: #fff;
}

.site-content {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.site-content__headline {
  font-weight: 200;
  color: #ffffff;
  font-size: calc(2vw + 10px);
}

.menu-icon {
  height: 30px;
  width: 30px;
  position: fixed;
  z-index: 2;
  left: 50px;
  top: 30px;
  cursor: pointer;
}
.menu-icon__line {
  height: 2px;
  width: 30px;
  display: block;
  background-color: #818181;
  margin-bottom: 4px;
  -webkit-transition: background-color .5s ease, -webkit-transform .2s ease;
  transition: background-color .5s ease, -webkit-transform .2s ease;
  transition: transform .2s ease, background-color .5s ease;
  transition: transform .2s ease, background-color .5s ease, -webkit-transform .2s ease;
}
.menu-icon__line-left {
  width: 15px;
}
.menu-icon__line-right {
  width: 15px;
  float: right;
}

.nav {
  position: fixed;
  z-index: 1;
}
.nav:before, .nav:after {
  content: "";
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(234, 234, 234, 0.2);
  z-index: -1;
  -webkit-transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
  transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
  transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
  transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
  -webkit-transform: translateX(0%) translateY(-100%);
          transform: translateX(0%) translateY(-100%);
}
.nav:after {
  background: white;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.nav:before {
  -webkit-transition-delay: .1s;
          transition-delay: .1s;
}
.nav__content {
  position: fixed;
  top: 50%;
  -webkit-transform: translate(0%, -50%);
          transform: translate(0%, -50%);
  width: 100%;
  text-align: center;
  font-size: calc(2vw + 10px);
  font-weight: 200;
  cursor: pointer;
}
.nav__list-item {
  color: #000;
  position: relative;
  display: inline-block;
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
  opacity: 0;
  -webkit-transform: translate(0%, 100%);
          transform: translate(0%, 100%);
  -webkit-transition: opacity .2s ease, -webkit-transform .3s ease;
  transition: opacity .2s ease, -webkit-transform .3s ease;
  transition: opacity .2s ease, transform .3s ease;
  transition: opacity .2s ease, transform .3s ease, -webkit-transform .3s ease;
  margin-right: 25px;
}
.nav__list-item:before {
  content: "";
  position: absolute;
  background: #000000;
  width: 20px;
  height: 1px;
  top: 100%;
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  z-index: -1;
}
.nav__list-item:hover:before {
  width: 100%;
}

body.nav-active .menu-icon__line {
  background-color: #000;
  -webkit-transform: translateX(0px) rotate(-45deg);
          transform: translateX(0px) rotate(-45deg);
}
body.nav-active .menu-icon__line-left {
  -webkit-transform: translateX(1px) rotate(45deg);
          transform: translateX(1px) rotate(45deg);
}
body.nav-active .menu-icon__line-right {
  -webkit-transform: translateX(-2px) rotate(45deg);
          transform: translateX(-2px) rotate(45deg);
}
body.nav-active .nav {
  visibility: visible;
}
body.nav-active .nav:before, body.nav-active .nav:after {
  -webkit-transform: translateX(0%) translateY(0%);
          transform: translateX(0%) translateY(0%);
}
body.nav-active .nav:after {
  -webkit-transition-delay: .1s;
          transition-delay: .1s;
}
body.nav-active .nav:before {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
body.nav-active .nav__list-item {
  opacity: 1;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  -webkit-transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
  transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
  transition: opacity .3s ease, transform .3s ease, color .3s ease;
  transition: opacity .3s ease, transform .3s ease, color .3s ease, -webkit-transform .3s ease;
}
body.nav-active .nav__list-item:nth-child(0) {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
body.nav-active .nav__list-item:nth-child(1) {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
body.nav-active .nav__list-item:nth-child(2) {
  -webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}
body.nav-active .nav__list-item:nth-child(3) {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
body.nav-active .nav__list-item:nth-child(4) {
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}

/* PARALLAX */

.container {
    width: 100%;
    margin: 0 auto;
    background: #f9f9f9;
    font-size: 24px;
    padding: 25px;
}

.parallax {
    background: url ('stock1.jpeg') no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    height: 300px;
    z-index: 3;
}

.flip{ width:240px; height:200px; margin:50px; float:left; }
.flip > .front{
	position:absolute;
	transform: perspective( 600px ) rotateY( 0deg );
	background:#FC0; width:240px; height:200px; border-radius: 7px;
	backface-visibility: hidden;
	transition: transform .5s linear 0s;
}
.flip > .back{
	position:absolute;
	transform: perspective( 600px ) rotateY( 180deg );
	background: #80BFFF; width:240px; height:200px; border-radius: 7px;
	backface-visibility: hidden;
	transition: transform .5s linear 0s;
}
.flip:hover > .front{
	transform: perspective( 600px ) rotateY( -180deg );
}
.flip:hover > .back{
	transform: perspective( 600px ) rotateY( 0deg );
}

@media only screen and (max-width: 1000px) {
  h1 {
    font-size: 70px;
  }
}

@media only screen and (max-width: 800px) {
  h1 {
    font-size: 48px;
  }
  h1::after {
    height: 8px;
  }
}

@media only screen and (max-width: 568px) {
  #intro {
    padding: 0 10px;
  }
  h1 {
    font-size: 30px;
  }
  h1::after {
    height: 6px;
  }
  p {
    font-size: 18px;
  }
  .btn {
    font-size: 16px;
  }
}

@media only screen and (max-width: 320px) {
  h1 {
    font-size: 28px;
  }
  h1::after {
    height: 4px;
  }
}


Yhank you so much for taking time to look at this

Is This A Good Question/Topic? 0
  • +

Replies To: JS layout conflicting with my parallax image.

#2 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3714
  • View blog
  • Posts: 13,468
  • Joined: 08-August 08

Re: JS layout conflicting with my parallax image.

Posted 25 September 2017 - 08:48 AM

It looks to me like your parallax div background is being overridden by your flip background.

You should make a much simpler version of this to isolate the problem.
Was This Post Helpful? 0
  • +
  • -

#3 Liljeqvist  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 25-September 17

Re: JS layout conflicting with my parallax image.

Posted 25 September 2017 - 11:06 AM

It didn't make any difference sadly. But I doubt that is the issue anyway, as the flip box works just fine with the image when they are isolated.
As you can see on this picture.
Posted Image

The problem is somewhere within the code for the particle effect, but no matter how many times I look at it, I can't seem to get an "aha" moment.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1