Foundation Search results for: parallax (template)

Нынче в моде шаблоны parallax. В процессе освоения Zurb Foundation решил я поискать эти шаблоны на ресурсах Zurb. Нашел видео и с десяток ссылок. Например, Parallax - Zurb University Lessons, 10 Awesome Parallax Scrolling Tutorials with Code, The CSS Source Code Behind Our Manifesto Tip F6 and background video with Jarallax.

foundation Search results for: parallax
Parallax - Zurb University Lessons

With javascript... jQuery and parallax.js
10 Awesome Parallax Scrolling Tutorials with Code
ScrollMagic The javascript library for magical scroll interactions
How To Create A Parallax Scrolling Website
Пример spotify.com здесь сервис для аудиофайлов

C css анимацией
Parallax / One Page Designs We wrote some stuff for how we did it with the ZURB Manifesto here
zurb manifesto
The CSS Source Code Behind Our Manifesto

Tip F6 and background video with Jarallax I used it into other two website and it's simple to use with good results. I used primary to show video background and parallax it when scroll the page.
jarallax.com

From Parallax - Zurb University Lessons¶

In [ ]:

.yourElement{
  background-attachment: fixed;
}

You can also add some JS

In [ ]:

.landing {
   background:url(http://graphicburger.com/wp-content/uploads/2013/10/Bokeh-600.jpg) no-repeat center center fixed;
    text-align: center;
    min-height: 100vh;
    display: block;
  position:relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

In [ ]:

<section class="landing large-12 columns" id="landing">
  <div class="headline">
  <h1>Responsive</h1>
  <h3>Viewport Size Background Image</h3>
  </div>
</section>

In [ ]:

//always cache jQuery objects
var $window   = $(window);
var $document = $(window.document);

$document.foundation();

function EasyPeasyParallax($parallaxContainer) {
    var scrollPos = $window.scrollTop();
    $parallaxContainer.css({
        'margin-top': (scrollPos / 4) + "px",
        'opacity':    1 - (scrollPos / 250)
    });
}

$document.ready(function () {
    // cache the jQuery obj, do not recreate it on every scroll event
    var $headline = $('.headline');
    // add event handler only if the target container is found
    if ($headline.length > 0) {
        $window.on('scroll', function () {
            EasyPeasyParallax($headline);
        });
    }
});

Example of what i would like with offcanvas¶

In [1]:

%%html
<p data-height="265" data-theme-id="0" data-slug-hash="bdrWyv" data-default-tab="html,result" data-user="rafibomb" data-embed-version="2" data-pen-title="bdrWyv" class="codepen">See the Pen <a href="http://codepen.io/rafibomb/pen/bdrWyv/">bdrWyv</a> by Rafi Benkual (<a href="http://codepen.io/rafibomb">@rafibomb</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

if you want to use Jarallax with F6 remember to add to your css this code:¶

In [ ]:

.jarallax {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
   left: 50%;
    top: 50%;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

Посты чуть ниже также могут вас заинтересовать