hwthorn / parallaxify Goto Github PK

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 ?

Thank you for your help.

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?

Hello @hwthorn ,
I am the member of cdnjs project.
We want to host this library.
Please help us add git tag.
Git tag can help us to know your release version.
Thanks for your help!

cdnjs/cdnjs#8221

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