Skip to content

Parallax doesn't work #225

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
AngelGordillo opened this issue Nov 15, 2017 · 3 comments
Closed

Parallax doesn't work #225

AngelGordillo opened this issue Nov 15, 2017 · 3 comments
Labels
question please use stackoverflow.com for questions solved

Comments

@AngelGordillo
Copy link

AngelGordillo commented Nov 15, 2017 •
edited
Loading

Hello everybody!
After one hour working with this plugin I couldn't make it work. I can't see the image and almost anything.
I'd like to have the image in background and put elements over it
Here it's my code, if someone helps me I'll be very happy.


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<div class="parallax-window" data-parallax="scroll" data-image-src="../assets/img/horizon2020.jpg">
  <div class="parallax-slider">
    <h1 style="position:absolute; top: 400px; left: 400px;">Some Text</h1>
	<h1>Some other Content</h1>
  </div>
</div>
	


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>

<script type="text/javascript">

$(document).ready(function () {
	
	$('.parallax-window').parallax({
    naturalWidth: 600,
    naturalHeight: 400
  	});
});
</script>
<style>
	.parallax-window {
    min-height: 400px;
    background: transparent;

}

</style>
</body>
</html>
@wstoettinger
Copy link
Collaborator

try:

<div class="parallax-window" >
  <div class="parallax-slider">
   <img src="../assets/img/horizon2020.jpg">
  </div>
 <div class="static-content">
    <h1 style="position:absolute; top: 400px; left: 400px;">Some Text</h1>
 </div>
</div>

and:

$('.parallax-window').parallax({
    naturalWidth: 600,
    naturalHeight: 400
});

Note: using the data-attribute data-parallax="scroll" will auto-initialize the parallax effect (but in this case on the wrong element!), using java script in this case is not necessary or vice-versa. Furthermore, the "parallax-window" will be inserted via javascript instead of the element with the data-attribute (so, you either don't need the window-div and move the data-attributes to the inner element "parallax-slider", or you initialize manually and remove the data-attributes and use the corresponding options in javascript).

If you want to have static Elements in front of the moving parallax, it won't work with data-attributes (which is only for simple use). In that case you need to initialize manually. Basically the javascript function will look for any ".parallax-slider" element within the element it is called on (can also have a different class than "parallax-window"), remove the slider from there and move it to a so called "mirror" Element. Therefore, if you want to "leave" some static content behind, you need to put it outside the parallax-slider.

I hope this helps!

@wstoettinger
Copy link
Collaborator

any news on that? otherwise i'm closing

@AngelGordillo
Copy link
Author

Yes, thank you!!! Now make more sense.
Sorry for the delay, I close the issue.

@wstoettinger wstoettinger added the question please use stackoverflow.com for questions label Feb 21, 2018
@runarorested runarorested mentioned this issue May 8, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question please use stackoverflow.com for questions solved
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@wstoettinger @AngelGordillo