Scrollorama jQuery plugin

Design help Custom code
1

http://johnpolacek.github.io/scrollorama/

Can we have this cool interactions as above link.

2

Hi @Jordon Welcome to the community! :smiley:

Try linking to that jQuery file and your custom jQuery in your footer custom coda area.

For more information on this, please refer to this article: Custom code in head and body tags | Webflow University

1 Like
3

I cheeked video you shared , which all files need to be placed in custom code . Pleas help Im a designer do not understand all these , Thanks

4

@PixelGeek Please help

5

I can help you set it up as in the How to use section, but you have to read the documentation onwards to implement what you are trying to do.

Embed scrollorama.js after jQuery and initialize the plugin, passing the blocks class selector as a parameter. This is how you would do it in Webflow:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
    $.getScript('https://cdn.rawgit.com/johnpolacek/scrollorama/master/js/jquery.scrollorama.js', function() {
       var scrollorama = $.scrollorama({
          blocks: '.scrollblock',
          enablePin:false
       });

       // Target an element and animate its properties. Read documentation. Hire a developer if you don't know how.
       scrollorama.animate('#id-of-element', {
           duration: ###, 
           delay: ###, 
           property: '###',
           start: ###, 
           end: ###, 
           pin: ###, 
           easing: ###, 
       })
    });
});
</script>

Paste the above in the Page Settings > Custom Code > Footer Code textarea.

Also, feel free to contact me for further code help and/or customization of third-party plugins

3 Likes
6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.