Giter Club home page Giter Club logo

jinvertscroll's Introduction

jInvertScroll

A lightweight jQuery vertical scroll - horizontal move plugin with parallax effect.

What is it? It's a lightweight plugin for jQuery that allows you to move in horizontal with a parallax effect while scrolling down.
It's extremely easy to setup and requires nearly no configuration.

Quickstart

1.) Include the css file, jQuery and the Plugin

2.) Create the desired elements that you want to scroll (You can create normal divs, wich contain other elements, images, videos...)

3.) Assign them the class "scroll" if you want to like the styles from the css-file, otherwise give them the following attributes:

```position: fixed;	// All scrollable elements have to be position:fixed

bottom: 0;	// Make it stick to the bottom (or top)

width: xxxxpx;	// I recommend to assign the width in px, prevents preloading issues```

4.) Order the layers via z-index (Note that it is recommended that the front layers are wider than the ones in the back)

5.) In your javascript, use this code (the selectors refer to the elements that you desire to be scrolled):

```$.jInvertScroll(['yourselector1', 'yourselector2'...]);```

License

The MIT License (MIT)

Copyright (c) 2013 pixxelfactory

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

More information

For more information check out the plugin website

jinvertscroll's People

Contributors

iuliux avatar pixxelfactory avatar rodrigoespinosa avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jinvertscroll's Issues

Scroll Bar position

Hello,

I am using jInvertScroll for my project. The scroll bar is present to the right. I require the scroll bar to be present at the bottom of the screen. Is there any changes that can be done to the code?

Appreciate the plugin. Please help me with some thing.

Thanks

how to cancel Efect

hi !
i want to cancel all of the efects even page scrollbar and all of events by clicking on something
is it possible ?

anchors issue

hello,
i've read the message about anchors issue, but I can't apply the solution.
Can you help me find my mistake ?
the site is http://sutralis-v2.kiubi-web.com/
and the anchors nav is on the footer with links on numbers

thank you

Bower package

Hi!
first things first: great work! :)
second things: installing your plugin via bower (using the git repo) still installs the "old" version (no destroy method available)

Is un update planned?
Thanks!

How to fix on mobile ?

I really love this jquery plugin and i used it for my website. But, when i test on mobile, it is wrong way up. When i swipe down, it scrolls up => screen scroll left. Beside, if when swipe right, can it scroll right ?

Different "Scenes"

I have an animation that is 6000px long. I'd love to split my jInvertScroll document into two 3000px "scenes" but am running into trouble - the new "scene" always sits atop the first scene.

I'm trying to do this:

< div class="scene1" >< /div >
< div class="scene2" >< /div >

Creating 'Next' and 'Prev' links

Hi,

I have created a nav based on the anchor method you listed here: #2

In addition to the main nav, I wish to have a pair of Prev and Next buttons (which I will fix left and right) that toggle through the anchors. This has me stumped. Any help would be appreciated. Working site Dev is here: http://tinyurl.com/p3cl2lt

Grazie!

working with jQuery v1.11.1

Thanks for the nice plugins!

I used this plugin with jQuery v1.11.1 but it didn't work at first.

It seemed
var scrollPercent = (currY / (totalHeight - winHeight)).toFixed(4);
returns "infinity" value because totalHeight and winHeight was same value.

I changed the lines below in the plugin:
$([document, window]).on('ready resize', function (e) {
totalHeight = $(document).height();
winHeight = $(this).height();
winWidth = $(this).width();
});
to
$([document, window]).on('ready resize', function (e) {
totalHeight = $(document).height();
winHeight = $(window).height();
winWidth = $(window).width();
});

and now it works.

Was it way to go or it will lead another issue?
I hope it still helps.

Support in page link navigation with scrolling?

I tried setting up some links for a single page style site with the jinvertscroll and it doesn't seem like the links are able to jump to the correct place on the page.

Is there something extra i have to do to make this work or is in-page linking not supported with the plugin by default?

Elementoffset scroll to the center of the element

Hi,

`
e.preventDefault();
var target = '.'+$(this).data('target');
var left = $(target).position().left;
var total = $('.front.scroll').width();
var perc = left / (total - $(window).width()) * 100;

    var height = $('html').height();
    var final = ((height - $(window).height())/ 100 * perc);

    $('html, body').animate({scrollTop: final}, 500);

`

Scrolls the selected item to the left corner.
How to scroll to the element center?

var perc = left / (total - ($(window).width()+ $(target).width)/2 ) * 100;

Does not do the trick
BR

Start scrolling at a given point only

Hello,
Thanks for the great plugin. I am using it for this site http://mons-en-montois.fr
I was wondering if there is any way to start the horizontal scrolling only at a given point. In this case, I am trying to have the scrolling start after the horizontal content (home panel) is all gone. Hope that makes sense.

Any help would be greatly appreciated, thanks!

Anchors issues #2

Hi,

i read the previous issue concerning anchors but it still doesn't work to me..

You said this:
Html (add this after the nav-element):

But, what shall we insert inside the html document?

And this for the stylsheet:
.anchors
{
position: relative;
}

.anchors #100
{
position: absolute;
top: 0;
}

.anchors #200
{
position: absolute;
top: 850px;
}

.anchors #300
{
position: absolute;
top: 1700px;
}

.anchors #400
{
position: absolute;
top: 2550px;
}

When i tryed something like this, the anchor pushed the scrollbar everytime.
Like if i wrote "top 1000px" every time i click on the anchor will scroll down the page for 1000px.

Is there any solution on this issue at the moment?

ty very much.
Newenth.

Resize to work

I love the work you've don on this. It is perfect for my project.

I have have one issue, every time the page is reloaded, the user has to resize the page (any amount) to get it to work. Otherwise it will not scroll horizontally, only the items that do not have the class "scroll" will actually scroll.

This only happens when I upload it to my server. When I check it on my local drive, it works just fine.

Here is what I'm working on so that you can see the problem.
http://watkinshoff.com/she-was-there/wwii/normandy.php

How to implement waypoint horizontal navigation with jInvertScroll ?

I have created a single page horizontal website using jInvertScroll and it is working well with mouse scroll. But I am facing issues with menu navigation using waypoint. Could you please help me in creating navigation with waypoint. Please provide some example scripts.

how to 'stop' the inverse scroll

Hello, I'am using this plugin to have a parallax horizontal effect with the elements on the background.
I am using Angular, and I change the pages using the ng-view directive. Actually, the parallax background is out the ng-view, so it's present in all the pages.

However, in some pages, I'd like to 'stop' the Inverse-plugin. Is it possible?
thank you

Start scroll in middle of page

Harkening back to the issue posted here: #13

Is there a way I can get this to work? You mentioned "You cannot make it start scrolling at a certain position without rewriting core-parts of the plugin". Can you point me in the right direction to get this working?

Body Height

Good evening, im having a trouble with a dynamic body height, because i have elements in position absolute alogn the body, but i need it to have a top at the end of the elements, but i couldnt be able to make it, because in some resolutions it seems to be ok but in others, the elements get cut. Thanks in advance

how to implement it in wordpress

Hello,
this is a very cool plugin and exactly what I need.

So I tried to implement it in wordpress, but I wasn't able to do this.
The problem is that I don't know very much about javascript.

Maybe, you can help me a little bit...

The first thing which I don't know is which files I should include to wordpress, because the plugin consists of different files in different folders.

And the next thing is the last step in your description...
(5.) In your javascript, use this code (the selectors refer to the elements that you desire to be scrolled) $.jInvertScroll(['yourselector1', 'yourselector2'...]);)

I don't know in which file I should write this line.
And is the selector a HTML element like section or div or is it a css class?

Thanks in advance!

How do I vertical align my content?

For example, in this example u showed us.
http://codepen.io/SitePoint/pen/MKExrG

  1. How do you vertical align middle the boxes? It doesn't matter if you resize your browser it will stay in the middle.

2.Also for example if my browser with is 1200px, it will only show "jInvertScroll - A lightweight jQuery horizontal Parallax Plugin" box. So "jInvertScroll - A lightweight jQuery horizontal Parallax Plugin" AND "Quickstart" box will have a different background color. So if i'm viewing the " "jInvertScroll - A lightweight jQuery horizontal Parallax Plugin" box it will have a different background color.

Typo on website

On your website you say:
"WICH contain other elements,"

Have a good day;
Stephen.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.