Last active
September 29, 2018 21:46
-
-
Save Zillionx/70256354b254cf263907 to your computer and use it in GitHub Desktop.
Startup Design Framework - How to implement Parallax
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Parallax - paste this code in script.js | |
$('.content-23.custom-bg').each(function() { | |
if(! isMobile.any()) | |
$(this).parallax('50%', 0.3, true); | |
else | |
$(this).css('background-attachment', 'initial'); | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* paste this code in style.css */ | |
.content-23.custom-bg { | |
background-image: url('../../path/to/image.jpg'); | |
background-position: 50% 50%; | |
background-repeat: no-repeat; | |
background-attachment: fixed; | |
-webkit-background-size: cover; | |
-moz-background-size: cover; | |
background-size: cover; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Place in this order at the end of the document so the pages load faster --> | |
<script src="../../common-files/js/jquery.parallax.min.js"></script> | |
<script src="../../js/script.js"></script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment