Skip to content

Instantly share code, notes, and snippets.

@hefhuman
Created January 6, 2019 03:09
Show Gist options
  • Save hefhuman/7c76f6ea12d9ae22ac935315c846f1d5 to your computer and use it in GitHub Desktop.
Save hefhuman/7c76f6ea12d9ae22ac935315c846f1d5 to your computer and use it in GitHub Desktop.
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment