hefhuman
1/6/2019 - 3:09 AM

Parallax

remember to add jquery on this

<div class="slider">
<div class="plax">
      <div class="box_skitter box_skitter_large" style="left: 0; top: -170px; width: 1920px; height: 981px; z-index: 0;">
        <div id="content">
          <ul>
            <li><figure><img src="<?php bloginfo('template_url'); ?>/images/slider/1.jpg" alt=""/></figure></li>
            <li><figure><img src="<?php bloginfo('template_url'); ?>/images/slider/2.jpg" alt=""/></figure></li>
            <li><figure><img src="<?php bloginfo('template_url'); ?>/images/slider/3.jpg" alt=""/></figure></li>
          </ul>
        </div>
      </div>
</div>
</div>

<script>
//put this on $(window).scroll(function()
  $('.box_skitter').css("top",((window.scrollY / 2) - 170) + "px");
</script>

<style>
  .slider{position: relative;height: 981px;}
	.plax{position: absolute;z-index: -1;left: -410px;overflow: hidden;}
</style>