johnpolacek/scrollorama

The jQuery plugin for doing cool scrolly stuff. NOTE: No longer under active development. New version is ScrollMagic.js

#Scrollorama

The original jQuery plugin for doing cool scrolly stuff.

To use the latest, greatest scroll animation library, I recommend checking out Scrollorama successor ScrollMagic

Follow me on Twitter

License

Dual licensed under the MIT license (below) and GPL license.

MIT License

Copyright (c) 2012 John Polacek

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.

scrollorama's Issues

This repo has been included in The Github Pirates

Okay so not really an issue, just a public service announcement from The Curator, David Higgins (@Higgo)

-- This repo has been included in The Github Pirates' Chest.

What is this about?
The Github Pirates is a constantly updated resource for those interested in HTML5, CSS3, and JavaScript.

You should find out more about this project below:

http://codepirat.es/

OR, Download The Chest:

http://isharefil.es/E9Co

keep the whole block in the browser screen

Hi

I have my block positioned something like this

O O
O O O
O O

All circles except for the centre fades in while the middle circle rotates.
Everything is working fine, just that when the animation is finished, the top 2 circles are partially out of the browser window. I want to keep all of them within the browser window. How do I do it?

Bad design leads to only one scrollorama instance being usable per page, and possible conflicts with other plugins

For some reason, you're storing the settings directly on the jQuery object. This is really bad design!

https://github.com/johnpolacek/scrollorama/blob/master/js/jquery.scrollorama.js#L11-L28

You can see that it's on the jQuery object by running $.settings in the console.

This is causing weird behaviour, and will also cause a fight with any other jQuery plugin or website that tries to use $.settings (which they don't, because it's a really bad idea).

I think that it was probably an accident: the destroy function tries to remove the entire jQuery object, which probably isn't the intention! Luckily, you're using delete wrong so it doesn't work.

PR incoming 😄

Stops working with Chrome and Opera

It does not work with the last Opera and Chrome version. Try www.veterinavlckovi.cz in Opera or Chrome and then in IE or FF. No problem with IE or FF.

Firefox - Pin Issues Full Page Apps

Hey there. First of all thanks for the plugin. This is almost exactly what I was looking for & has made my life 10x simpler. I am just experiencing an issue in FF v 24.0 (latest).

I am utilizing the pin feature to build a full-screen (height/width of viewport) website. Essentially, I pin sections to the top and then wipe over each section on scroll (similar to the demo on your website). This produces a pretty cool panel-like effect.

This works perfectly on Chrome and Safari but has some issues in FF:

• User cannot begin scrolling because the height of the page is equal to the viewport height (which does not trigger the scrollbar). I can get around this by adding an pixel to the height of my elements but this is annoying.

The larger problem...

• Upon unpinning of the last section scrollorama attempts to pin that section the top again. This creates a jump and will not allow the user to to get to the bottom. I noticed that this does not happen as long as the height of the content below the pinned elements is taller than the viewport. Of course, for my app, this will not be the case since there is no content below the pinned element.

Any thoughts / solutions?

Thanks!!

[enhancement] Add missing bower.json.

Hey, maintainer(s) of johnpolacek/scrollorama!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library johnpolacek/scrollorama is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "johnpolacek/scrollorama",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

accept offset with percent

it's helpful for flexible timeline

Fade two areas next to each other

I have tried to define two areas that change when scrolling. In addition I have redesigned the fade example and tries to enclose individually with an additional <section class = "container"> both areas.

Here's an example of what I want to do:

<section class="container col span_2_of_3">
<section class="panel">
<b>ONE-left</b>
</section>
</section>

<section class="container col span_1_of_3">
<section class="panel">
<b>ONE-right</b>
</section>
</section>

CSS:

.col {
     display: block;
     float: left;
     margin: 1% 0 1% 1.6%;
}
.span_2_of_3 {
    width: 66.1%;
}
.span_1_of_3 {
    width: 32.2%;
}
.panel {
         height: 100%;
          width: 100%;
}

Custom paths

Is there any way to attach a custom animation path (ie a sin wave) to the user's scroll?

performance issues

Hi,

we implemented a couple of effects here

www.crowdfuture.net using scrolloroma, but due to some huge bg image we are having some heavy performances troubles. Any idea wheter is our mistake or something different?
Thanks

Chaining animations

Hi John - Thanks for the fabulous script! I see you updated the script a couple days ago - does this new version allow for something to be animated in and then out using the same property?

For example something like this:

.animate('#screams',{ delay: 100, duration: 400, property:'opacity', start:0 })
.animate('#screams',{ delay: 100, duration: 400, property:'zoom', start:1.5 })
.animate('#screams',{ delay: 700, duration: 300, property:'opacity', start:1, end:0 })
.animate('#screams',{ delay: 700, duration: 300, property:'zoom', start:1, end:1.5 });

jQuery 1.9: $.browser method

Hi, I've tried to use this plugin with 1.9 jQuery library. It seems that they removed the
$.browser method. Will be there any updates reguarding this isssue?

activate "onComplete" function on the way back

Hi, i have an animation of an iphone being rotated back and forth and an "onComplete" function that changes the screens inside it by loading different images into the phone (seen at the lower section of the page)
http://zotus.co.il/clients/netbus/ototo/scrollorama
So far, so good. But how can i get the onComplete function to switch the images BACK when the user scrolls back up...?

hope to hear from you soon (the deadline for the client draws near)
thanks
adam

Negative delay

Setting negative delay property seems to break animation, is it the expected behavior ?

No error in the console.

Tried this on Mac OS X 10.8 w/ Chrome 24.

Thanks !

Absolute position

Not sure if this is an issue or not, but when you apply blocks to Scrollorama, they get an absolute position, thus breaking the layout. I commented that section in the code and everything still seems to work fine.

iOS (touch device) support

... would be really amazing.

Like: http://markdalgleish.com/projects/stellar.js/demos/ios.html

Couple issues with superscrollorama

Hi,

I'm new to superscrollorama and I do have a couple issues.
Hope you can point me in the right direction because I have lost a lot of hair over this already :-)

URL:
Click here

The issues:
1)When reverse scrolling it doesn't do anything even when the "reverse" property is explicitly set to true. How is that possible?
2)In Firefox everything seems to be working OK, but in Chrome it looks like the animation is done even before the div comes into view. Why? How can I fix this?
Same in IE...
3)I want to spin div with id "spin-it" into the first/left golden frame, how to specify the exact right scroll position so it will scroll from & to the exact right position?

Maybe it's also handy to know my resolution is 1366*768. I'm planning to fix/check other resolutions once everything is up & running.

Thanks in advance!!
Kind regards

Translate property

Would be cool to animate the translateX, Y or Z properties. Very useful to move elements when they're already absolutely positioned (instead of using margins).

Configure Scrollorama to scroll from bottom of page

How can we configure Scrollorama to work on pages that scroll up (from the bottom of the page)? Because the animations start at the bottom of the screen (scrolling down) and end at the middle, they don't work correctly coming from the top.

Cannot read property 'pin' of undefined

Hi there!... first off.. fantastic plugin!

Having a pretty serious issue though which I cannot seem to figure out!? I have just installed the plugin and cannot for the life of me seem to get it to work.

No matter what I do, I just get the JS error
"Uncaught TypeError: Cannot read property 'pin' of undefined"

my JS looks like:
var scrollorama = $.scrollorama({ enablePin:false, blocks:'.parallax' });
//
scrollorama.animate('#background',{ delay: 0, duration: 1000, property:'top', start:0, end:-400 });

super basic.... what am I doing wrong!??

Animate same element multiple times

(Hi John, I love this plugin very much!)

Do you see a way to animate the same value of the same element in two different directions over time? So I could first animate something in one direction - and later back to the other.

Example:

scrollorama.animate('#logo',{
    duration:150,
    property:'height',
    start:logoMaxHeight,
    end:logoMinHeight
});
scrollorama.animate('#logo', {
    delay:200, // later animation
    duration:150,
    property:'height', // on same property
    start: logoMinHeight,  // but the other way 'round
    end:logoMaxHeight
});

// It ignores the first animation values.

This would be a huge feature! Is it possible to implement with a few changes?

Thank you very much!

Kind regards,
Jerry

Scrollorama only applies to the first block

Hi I have an issue using the plugin, Scrollorama only applies and animates the first block. Each block being from "scrollblock" class

Here is my js code

<script src="js/jquery.scrollorama.js"></script> <script type="text/javascript"> $(document).ready(function() { var scrollorama = $.scrollorama({ blocks:'.scrollblock', enablePin:false }); scrollorama .animate('#image',{ delay:-400,duration: 300, property:'left', start: -2000 }) .animate('#titre',{ delay:-200, duration: 100, property:'opacity', start: 0 }) .animate('#text',{ delay:-200,duration: 100, property:'right', start: -2000 }); }); </script>

Ipad problem

Hi friend,
After the initial click on the navigation, I cannot click another nav item unless I slightly move the page up or down. Once I do that, I can then click on the next nav item. But if I do not move the page, it seems as though the nav is disabled.
The other problem is that the scrolling always starts from the 1st page.
Try out this on ipad -> kitchenprague.com (the site i am working on) , but you have the same problem here -> johnpolacek.github.com/scrolldeck.js/decks/responsive/ ...
Do you know what can be the problem?

NOTE: These are ipad specific problems, everything works perfectly fine on mac and pc

methods to lock the elements once finished the animation

Hi,

We are wandering any methods to lock the animations once the animations finished.

Currently we are using onBlockChange(function() {}

such as the following:

However, it is buggy to simply overwrite the existing animate

        if ($('#'+Site.scrollorama.settings.blocks.eq(i).attr('id')).hasClass('block_noactive')) {
            if (i == '0') {
                Site.scrollorama.animate('.hello_lightbulb',{ duration: 200, property:'top', start:410, end: 410 });
                Site.scrollorama.animate('.hello_head',{ duration: 200, property:'left', start:-12,end: -12 });
                Site.scrollorama.animate('.hello_plane',{ duration: 200, property:'left', start:0, end: 0 });
                $('.hello_flame').each(function() {
                    Site.scrollorama.animate($(this),{ delay:200, duration: 140, property:'zoom', start:1 });
                    Site.scrollorama.animate($(this),{ delay:200, duration: 140, property:'opacity', start:1 });
                    Site.scrollorama.animate($(this),{ delay:200, duration: 140, property:'top', start:418 });
                });
            }
        }

not working with latest version of JQuery (1.9.1)

When running with JQuery 1.9.1, a javascript exception occurs at line 38:

if ($.browser.mozilla) { browserPrefix = '-moz-'; }

Uncaught TypeError: Cannot read property 'mozilla' of undefined

background-position-x and y in IE8

background-position-x and y don't seem to work in IE8 - and when I try to use it, it seems to break other animations that were working. No problems in other browsers though (except IE7). Is this a known issue?

Thanks

problems on fast scrolling

i have some problems with fast scrolling.
for examle:
normaly a image scroll from left to the center and after this it scroll back again. But sometimes if i scroll fast the it skipping the backscrolling and the image is always visible. Any idea what i can do?

Best regard

Refresh plugin after resize

Hi John,

The plugin doesn't seems to refresh after resizing, and the animations start/end delayed. There's a safe way to fix it?

Thanks

scrolldeck+scrollorama

great plugins thanks, but i'm doing something wrong. scrolldesk is working fine, but when i try to make a

parallax inside a slide the scrollorama doesn't work. ¿How can i fix that? http://uva-sonidofino.com/test/ (the object i am trying to animate is the speaker) I would apreciatte if you could help me find what am i doing wrong.

the console says: Cannot read property 'pin' of undefined.

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
    <script src="js/jquery.scrollTo-1.4.3.1.min.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/jquery.scrollorama.js"></script>
    <script src="js/jquery.scrolldeck.js"></script>

   <script>
    $(document).ready(function() {

        var deck = new $.scrolldeck({
            buttons: '.nav-button',
            slides: 'slide',
            easing: 'easeInOutExpo',
        });

        deck.controller.animate('#parallax1',{ delay: 400, duration: 1000, property:'top', start:2500, end:300 });

    });
</script>
 </body>

Pin it!

Hey, Just playing around with this. Great stuff! Thanks!
I think I might have come across a little bug.
When the body of a page is set to less than width: 100% it causes the .scrollblock contents to shift to the side a little.

Try:
scrollorama.animate('#unpin',{ duration: 9999, property:'padding-top', pin:true });

with a body tag at 95%

Cheers.

Scrollorama with smooth scroll

I would like to have a smooth scroll on my site, but when I add it to the code, scrollorama stops working. Are there any smooth scroll plugins I can use that won't break it?

Zoom and rotate

Zoom & Rotate functions are not working even in IE9+. Any help??

Event Handler - Youtube

Is it possible to start a Youtube video once the page scrolls to a specific block?

Content Flickers and move weirds on IE10/IE9

Im currently developing this site

http://remedia-solutions.com/clientes/0093_Construdeck/Final/

And im moving the content with top and left. Works great on Chrome, Safari but it moves really weird on IE.

Heres my JS for scrollorama.

scrollorama.animate('#entrada',{delay:100,duration: 100, property:"opacity", start:1, end:0 });
scrollorama.animate('#entrada',{delay:100,duration: 100, property:"z-index", start:1, end:0 });
scrollorama.animate('#interiortotal',{duration: 2900, property:"top", start:"0px", end:"-5340px"});
scrollorama.animate('#interiortotal',{duration: 2900, property:"left", start:"0px", end:"5340px"});

jQuery version required

Hi,

Is it possible to get this to work with an older version of jQuery? I'm currently running version 1.4.4 which I need for other elements on my site to work properly.

Thanks,
Bill

put link in repo info

please link to http://johnpolacek.github.com/scrollorama/ from https://github.com/johnpolacek/scrollorama: