hwthorn / parallaxify Goto Github PK
View Code? Open in Web Editor NEWparallaxify is a jQuery plugin that adds parallax effects to elements and backgrounds based on gyroscope sensor or mouse input
License: MIT License
parallaxify is a jQuery plugin that adds parallax effects to elements and backgrounds based on gyroscope sensor or mouse input
License: MIT License
The demos seem to work perfectly, but when I try to implement parallaxify, it doesn't work.
I want the backgrounds of #input and #backgroundFix to animate / move when the mouse is over them or when the device is being tilted.
I included the script, here on line 499: https://googledrive.com/host/0BwJVaMrY8QdcWHhEb3k5U3A4WXc/jquery.parallaxify.js
And I initialised it, like so: $('#input, #backgroundFix').parallaxify(); on line 997
However, in the page, the header's background illustration / image is not moving.
Here is the page: http://goo.gl/5Lwf55
I would greatly appreciate any and all help in achieving this effect!
Hey! Nice plugin.
Can you modify this to use in range "50%" or "30p". It would be more responsive.
Thanks!
Hi!
This is a great plugin and I have it all working which is good but at the moment the image I have the parallax on is moving TOWARDS the mouse at the moment and I want it to move AWAY from the mouse move (like in the opposite direction) if you get me?
Is this possible? And if so, how do I go about doing it as I am at a total loss...
Any help would be greatly appreciated.
Thank you.
Hi,
I would like to have a parallax effect on my mobile website
when i scroll and when i change orientation.
Is it possible to have both at the same time ?
Emal
Not so much an issue, more of a request.
Is there any way to ease the parallax effect, so that it continues to move after the mouse movement has stopped? I'm after a softer looking effect and less rigid to the mouse position so it almost floats to the position. Thanks
Hi,
when I try to add a parallax to a single element instead of running it global, nothing happens.
JSFiddle
Is this a known problem or am I doing something wrong?
Whenever I mousein on a div (whose background has to be parallaxed) it jumps a little bit, usually in the direction in which I was mousing in. However, this keeps pushing the background images around, in a very jumpy way and after some time you notice the background-repeat.
Hardly suitable.
I can't manage to make elements move in the opposite direction of mouse.
I made a custom position, like this one, but the result is just weird: it works only on a small part of the screen.
$.parallaxify.positionProperty.mytransform= {
setPosition: function($element, left, originalLeft, top, originalTop) {
$element.css('transform', translateX(-' + left + 'px) translateY(-' + top + 'px)');
}
};
any idea on why?
Fantastic plugin.
Just thought you might want to add the 'destroy' option to the documentation as it's really handy for creating on hover parallax effects, for instance, but I had to look through the plugin code to find it!
$('#my-element').hover(
function(){
$(this).parallaxify(args);
},
function(){
$(this).parallaxify('destroy');
}
);
Awesome script!
Here my experiment https://jsfiddle.net/nebt49z5/5/
Added a line 334 (js) - transform.....
And variables: xAngleCoof: 0.5, yAngleCoof: 0.4
In chrome and other browsers works fine, but in a safari there is a bug.
Can you help me.
Thanks.
Hi. I want to make the plugin only run when the screen is bigger than 1024px. If the screen is resized to smaller one, I want the plugin to be removed. How to do this?
Hi,
I'm trying to parallax horizontally a background image using this inline attribute
data-parallaxify-background-range-x="-40"
and this is my js call
$('#hero').parallaxify({
horizontalParallax: true,
verticalParallax: false,
parallaxBackgrounds: true,
parallaxElements: false,
// options include 'position' or 'transform' using css transformations
positionProperty: 'position',
// (upon orientation changes or window resizing element positions are reevaluated
responsive: true,
// enable or disable mouse or gyroscope data as input for the plugin
useMouseMove: true,
useGyroscope: true,
// use a Low Pass Filter to smooth sensor readings (1 = no filter)
alphaFilter: 0.9,
// set which motion type algorithm is to be used
// options include 'natural', 'linear', 'gaussian', or 'performance'
motionType: 'natural',
mouseMotionType: 'gaussian',
// define which sensor input has priority over the other
// options are either 'mouse' or 'gyroscope'
inputPriority: 'mouse',
// define the delta angle (0 < motionAngle < 90)
// that is used to render max parallax in this direction
motionAngleX: 80,
motionAngleY: 80,
// enable of adjustment of base position (using a Low Pass Filter)
// (adapting to device usage while plugin is running)
adjustBasePosition: true,
// alpha for Low Pass Filter used to adjust average position
alphaPosition: 0.05
});
The background image has a background-size of 120% auto;
When I move the mouse around, the background image starts from a background-position of 35px and it looks really bad. I would like not to parallax out of its container so that I don't see the background color behind the element.
Ideally the background image should move a certain amount starting from 50% horizontally. It should start with:
background-position: 50% 50%;
And then when moving the mouse for example to the right it would go:
background-position: 40% 50%;
And when moving to the left:
background-position: 60% 50%;
Without exceeding its container boundaries.
Is that possible?
An example of the issue would be on this page http://dev.thinktravellive.com/en/thoughts/
Thanks
Jeff
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.