Menu icon Foundation
parallax page

hi,
i'd lik to create a page using the http://zurb.com/building-blocks/parallax-site effect.
i want multiple parallax sections one after the other.
Currently there something wrong and i can't make it.

parallaxmultiple instances

hi,
i'd lik to create a page using the http://zurb.com/building-blocks/parallax-site effect.
i want multiple parallax sections one after the other.
Currently there something wrong and i can't make it.

kostas over 3 years ago

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>solomondesigns.co.uk</title>
    <link rel="stylesheet" href="css/app.css">
    <!--<link rel="stylesheet" href="css/solomon-style.css"> -->
    <link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">

  </head>
  <body>
<div >
    <!--top section-->
    <div class="top-section">
        <!-- menu start-->
          <nav role="navigation" class="my-menu">
              <ul id="menu" class="overlay-menu">
                <li><a href="/">Home</a></li>
                <li><a href="/about.html">About</a></li>
                <li><a href="/contact.html">Contact</a></li>
              </ul>
                <a class="toggle-menu" href="#menu"><img src="img/logo.png"></a>
          </nav>
        <!-- menu end-->
        <!-- top image start-->
        <div class="top-image"><img src="img/home-slide_1.jpg"></div>
          <!-- top image end-->
    </div>
    <!--top section end-->
</div>


<!--parallax start-->
<div class="my-parallax" >
<div class="parallax-background">
  <img src="img/home-parallax1b.jpg">
  <h1 class="text-center">Bacon ipsum </h1>
  <p class="text-center">Bacon ipsum dolor sit amet chicken pork loin hamburger ball tip, </p>
  <div class="intro-text">

  </div>
</div>

<div class="parallax-content">
  <p>Bacon ipsum dolor sit amet chicken pork loin hamburger ball tip, swine tenderloin salami meatball boudin tri-tip fatback shank bacon. Pork salami kevin, brisket spare ribs strip steak ham hock porchetta. Pork belly short loin tail porchetta. Pork pig meatball, beef ribs doner jerky tri-tip hamburger filet mignon strip steak ball tip ham tail tongue corned beef.</p>

  <p>Bacon ipsum dolor sit amet chicken pork loin hamburger ball tip, swine tenderloin salami meatball boudin tri-tip fatback shank bacon. Pork salami kevin, brisket spare ribs strip steak ham hock porchetta. Pork belly short loin tail porchetta. Pork pig meatball, beef ribs doner jerky tri-tip hamburger filet mignon strip steak ball tip ham tail tongue corned beef.</p>

</div>
</div>
<!--parallax end-->

    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/what-input/what-input.js"></script>
    <script src="bower_components/foundation-sites/dist/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

kostas over 3 years ago

.my-parallax{position: absolute;top:600px;}


.top-section{position:relative;top:0;width:100%;}
.top-image{position:relative;top: 0;}
.my-menu{background:white;position:absolute;width:100%;height:600px;}
.home-solomon{background:white;padding:2rem;text-align: center;position:relative;color:blue;}
/*slider start*/
.slide-one{background-image: url('../img/Aphotodune.jpg');width:100%;padding-top:10%;padding-left:10%;background-repeat: no-repeat;}
.slide-two{background-image: url('../img/photodune.jpg');width:100%;padding-top: 10%;}
.slide-three{background-image: url('../img/photodune.jpg');width:100%;padding-top: 10%;}
.slide-four{background-image: url('../img/photodune.jpg');width:100%;padding-top: 10%;}
.my-top-slider{top:0;left:0;width:100%;position: absolute;z-index: 2;}
/*slider end*/

/*menu toggle start*/
$menu-icon-size: 4rem;
$menu-icon-color: green;
$menu-link-height: 6.25rem;
$menu-link-color: #fff;
$menu-link-border: 1px solid rgba(255,255,255, .5);

.toggle-menu {
  position:relative;
  font-size: $menu-icon-size;
  z-index: 5000;
  color: $menu-icon-color;
  top: -0.5rem;
  left: 1.5rem;
  transition: all 0.4s ease-in-out;

  &:hover {
    transition: all 0.4s ease-in-out;
    color: lighten($menu-icon-color, 30%);
  }
}

.overlay-menu {
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  margin:0;
  padding: 5rem 0 0;
  opacity: 0;
  list-style: none;
  background: url('http://www.nasa.gov/sites/default/files/cygx1_ill.jpg') no-repeat center center;
  background-size: cover;
  text-align: center;
  transform: translateX(-100%) rotateX(40deg);
  transition: all 400ms cubic-bezier(1.000, -0.400, 0.440, 0.985);

  li {
    font-size: 1.5rem;
  }

  a {
    display: block;
    color: $menu-link-color;
    font-weight: bold;
    height: $menu-link-height;
    line-height: 6.25rem;
    border-bottom: $menu-link-border;
    text-decoration: none;

    &:hover {
      color: darken($menu-link-color, 3%);
    }
  }

  &.is-open ~ .toggle-menu {
    display: inline-block;
    transition: all 0.4s ease-in-out;
    transform: rotate(135deg);
    color: lighten($menu-icon-color, 100%);
  }
}

.is-open {
  top: 0;
  opacity: 1;
  transform: perspective(200px) translateX(0) rotateX(0);
}
/*toggle menu end*/

/*parallax bg start*/
.parallax-background {
  background-color: #fff;
  height: 620px;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: fixed;
  width: 100%;
}

.intro-text {
  font-size: 50px;
  color: #fff;
  text-align: center;
  margin-top: 15%;
}

.parallax-content {
  max-width: 100%;
  position: relative;
  top: 500px;
  padding: 50px;
  font-size: 20px;
  background-color: #fff;
}
/*parallax bg end*/


kostas over 3 years ago

i'd like the page look like this: http://orangesprocket.com/views/agency

I think it has to do with positioning.

Magda Jans over 3 years ago

I don' know whether you solved your issue, but here is a Codepen I did recently. It works with Skrollr.js and Foundation 6.2. http://codepen.io/anon/pen/aNOJYr
If you want to use one layer only just remove the code for the images you don't need. For the placement of the layers check the Skrollr documentation (Google).

I did not go into the code of your example but these things should be easily done with pure CSS, too.

Play a little bit with something like this:

.row .your-parallax-section {
  background-color: transparent;
}

.your-parallax-section {
  background: url("your-image.jpg") no-repeat center fixed;
  background-size: cover;
  overflow:hidden; (or maybe: overflow-y: scroll; overflow-x: hidden;)
  transform: translateZ(your-value);
}

Vladimir over 3 years ago

This is very good pen @Magda Jans and this is stuff we so desperately need on this forum. Thanks Magda.

Magda Jans over 3 years ago

Thanks @Vladimir, but well, the codepen works only partly with F6, as I found out. It does its service on large screens but kills the scrolling on mobile devices. This has to do with the order of the JS, and I did not find out how to place them.

Another parallax is the following one - it works completely (and smoothly) solely with CSS, no Javascript involved!

http://codepen.io/keithclark/pen/JycFw

It works for F6, but kills the sticky property.

I tried to implement it on a test site, but the sticky magellan is on strike:
http://www.fischhobel.de/musiktherapie-kirby/parallax-test.html

It has to do with the following code:

html {
  overflow: hidden;
}

body { 
  perspective: 1px;
  overflow-y: scroll;
  overflow-x: hidden;
  }


overflow:hidden (for html) and perspective:1px (for body) "un-stick" the top-bar, but they are necessary for the parallax to work. Has anybody an idea how this can be solved?

kostas over 3 years ago

hi,,

i finally did the trick following this link :

http://designers.hubspot.com/docs/snippets/design/implement-a-parallax-effect

but i would really love to see this happening using the foundation building blocks.

i will have a look at your solutions and update this post.

thanks!

Vladimir over 3 years ago

Maybe @Rafi Benkual has some ideas... I am out of any since I have terrible problems with submenus on mobile...

Magda Jans over 3 years ago

Thanks, @kostas, I will check that, too.