Comments (10)
Unfortunately this script does not parse out CSS rules for the image urls (though that is probably an improvement that could be made in the future). The best solution is to provide the image manually like so:
$('.header#my-header-id1').parallax({imageSrc: '/path/to/image1.jpg'});
$('.header#my-header-id2').parallax({imageSrc: '/path/to/image2.jpg'});
or via data attributes:
<div class="header" id="my-header-id1" data-parallax="scroll" data-image-src="/path/to/image1.jpg">
...
</div>
<div class="header" id="my-header-id2" data-parallax="scroll" data-image-src="/path/to/image2.jpg">
...
</div>
I realize specifying the image in more than one place is not ideal.
from parallax.js.
Hi Mike!
I tried both via jQuery and data attribute, still no effect...
Do you think I did something wrong this time or is the background: url
blocking the plugin completely?
from parallax.js.
that could be the problem. Try changing the background to transparent
and observing the effect.
from parallax.js.
Hi again Mike!
This morning i tried following without result... I did it quick so I might have missed something, I will try again tonight or tomorrow due it's christmas in the most part of northern Europe.
from parallax.js.
Hello
I tried once again today with no success... it looks like the plugin won't work with my projects as i have my backgrounds in CSS.
Is there any other method that i can use or am I completely out of luck with this one?
from parallax.js.
do you have this page staged someplace where I could take a look at it?
from parallax.js.
Yes, it's actualy hosted here at GitHub: https://github.com/TheCodingGuy/Project_Casablanca
If you wonder why theres no changes for the plugin, it's because the tests I make is made localy on my computer and are not commited.
from parallax.js.
This is a fairly old issue but we ended up using javascript to grab the image source from the CSS.
var bg_src = $bg.css('background-image'); // $bg is the jQuery object of the element we're parallaxifying
bg_src = bg_src.replace('url(','').replace(')',''); // background-image is wrapped with url('') so remove it
$bg.css({'background': 'transparent'}); // make the bg transparent for the parallax to work
$($bg).parallax({
imageSrc: bg_src
});
from parallax.js.
Thanks for the feedback @scottblinch.
@TheCodingGuy sorry for my lack of response. I think this issue slipped under the radar after the holiday season and I never got back to it. Did you manage to resolve this issue? I don't see an example of the parallax usage on the github repo you referenced.
Closing for now, pending further feedback.
from parallax.js.
@scottblinch
this won't work on firefox, because on second line there will be string in quotes, so there will be %22
in url
here's working variant:
bg_src = bg_src.replace('url(', '').replace(')', '').replace( /['"]/g, "" );
from parallax.js.
Related Issues (20)
- text-align affects background location
- .trigger('resize').trigger('scroll') not working HOT 3
- iOS 13 issue with inner HTML HOT 2
- CDN version outdated HOT 2
- Using a semi-transparent container over background image lag HOT 1
- Resize does the exact opposite
- Using "sticky"element offsets parallax container HOT 3
- Add alt attribute? HOT 3
- Vanilla JS version? HOT 2
- V. 1.5 works on mobile devices, but this v. 2.0 does not?
- Flash on image load
- is it possible to put text on the images with html for the effect? HOT 2
- Setting speed to negative value does not reverse parallax effect
- Feature request: Support responsive images
- Parallax 2.0 not working on mobile HOT 1
- Does not work with Angular Universal HOT 2
- parallax.js limits width?! HOT 1
- Feature Request: Can you have a video parallax as well?
- Parallax is not a function
- Doesn't work properly when using it with Bootstrap
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from parallax.js.