I've got a page I built - it has a small section where I include links to my social sites.
That section currently has a nice background out of CSS - but what I would like is for that background to 'scroll', while the user scrolls up or down the sites page.
This is a parallax effect - but I'm not sure if this can even be done with a CSS background.
I've tried a few tutorials here or there online without any success.
I created a codepen on the basics of what I have
But here is my HTML:
<div id="social-row">
<div id="para-social-bg">
<div class="social-icons" id="para-social-shadow">
<h4>SOCIAL STUFF</h4>
<ul>
<li><a href="mytwitter" title="http://www.mytwitter.com" class="icon-social twitter">Twitter</a></li>
<li><a href="http://www.myfacebook.com" title="me on Facebook" class="icon-social facebook">Facebook</a></li>
<li><a href="http://www.myblog.com" title="my news" class="icon-social atom">Blog feed</a></li>
<li><a href="http://www.myinstagram.com" title="me on Instagram" class="icon-social instagram">Instagram</a></li>
</ul>
</div>
</div>
</div>
...and my CSS:
#para-social-bg {
background-color: #6d695c;
background-image:
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-size: 70px 120px;
}
#para-social-shadow {
box-shadow: inset 0 6px 10px -9px rgba(0,0,0,0.8),
inset 0 -6px 10px -9px rgba(0,0,0,0.8);
-moz-box-shadow: inset 0 6px 10px -9px rgba(0,0,0,0.8),
inset 0 -6px 10px -9px rgba(0,0,0,0.8);
-webkit-box-shadow: inset 0 6px 10px -9px rgba(0,0,0,0.8),
inset 0 -6px 10px -9px rgba(0,0,0,0.8);
}
Ultimately I just need the argyle styling to 'scroll' vertically as the user scrolls down the page (but at a slower speed than the user is scrolling the page - so it appears to be 'behind' the other sections above and below it).
Any thoughts? Open to all ideas - CSS, JS, JQUERY - whatever.
CSS would be optimal, JS can be done without worry.
This can be done with javascript:
$(window).scroll(function(){
$("#para-social-bg").css({"background-position":"left " +($(window).scrollTop()*.5) + "px"})
});