ScrollMagic ♥ Demo

ScrollMagic helps you to easily react to the user's current scroll position.
It's the perfect library for you, if you want to ...

  • animate based on scroll position – either trigger an animation or synchronize it to the scrollbar movement (like a playback scrub control).
  • pin an element starting at a specific scroll position – either indefinitely or for a limited amount of scroll progress (sticky elements).
  • toggle CSS classes of elements on and off based on scroll position.
  • effortlessly add parallax effects to your website.
  • create an infinitely scrolling page (ajax load of additional content).
  • add callbacks at specific scroll positions or while scrolling past a specific section, passing a progress parameter.

Download your copy now in form of a ZIP Package or visit the GitHub project page to find out about other sources.
[1][2]

Help

To learn more about ScrollMagic check out the the examples[3] and read the documentation[4].

Should you run into any problems when using ScrollMagic, please follow the troubleshooting guide[5] before posting your question in the GitHub issues section[6].

In case you're in a hurry or the above methods don't work, you can get personalized 1:1 support from me here:

Request personal live support

About

ScrollMagic is a complete rewrite of its predecessor Superscrollorama[7] by John Polacek[8].
A plugin-based architecture offers easy customizability and extendability.

ScrollMagic was developed with these principles in mind:

  • optimized performance
  • lightweight (6KB gzipped)
  • flexibility and extendibility
  • mobile compatibility
  • event management
  • support for responsive web design
  • object oriented programming and object chaining
  • readable, centralized code and intuitive development
  • support for both scroll directions (even different on one page)
  • support for scrolling inside div containers (even multiple on one page)
  • extensive debugging and logging capabilities
  • detailed documentation
  • many application examples

Made with ScrollMagic

Check out these amazing websites that were created using ScrollMagic.

Credits

ScrollMagic © Jan Paepke[9] [10]

Demo Page made by Nicholas Cerminara[11] from [12]

License Information[13]

Support ScrollMagic

Maintaining and updating ScrollMagic takes up a lot of my time. To be able to provide the project with the attention it deserves, I decided to experiment with including ads (feedback & evaluation pending).

If the plugin saved you some time or helped you to create something awesome, please consider making use of the donate button above. Or you could have a closer look at the message from our sponsor below.

Thank you!

References

  1. ^ ZIP Package (github.com)
  2. ^ GitHub project page (github.com)
  3. ^ the examples
  4. ^ the documentation
  5. ^ troubleshooting guide (github.com)
  6. ^ GitHub issues section (github.com)
  7. ^ Superscrollorama (github.com)
  8. ^ John Polacek (johnpolacek.com)
  9. ^ Jan Paepke (www.janpaepke.de)
  10. ^ (twitter.com)
  11. ^ Nicholas Cerminara (scotch.io)
  12. ^ (twitter.com)
  13. ^ License Information (github.com)
keywords ScrollMagic, scrolling, animation, Superscrollorama, Scrollorama, scroll, interaction, animation, sticky, pinning, parallax

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in webdev
Font Awesome Icons [ Icons ] - CSS Bundle Daily Dev Tips CSS Background Patterns by MagicPattern GitHub - ganlanyuan/tiny-slider: Vanilla javascript slider for all purposes. GitHub - jonasstrehle/supercookie: ⚠️ Browser fingerprinting via favicon! URL-encoder for SVG Bootstrap Icons · Official open source SVG icon library for Bootstrap GitHub - kognise/water.css: A drop-in collection of CSS styles to make simple websites just a little nicer Toggle light and dark themes in Bootstrap - DEV Deploy your Publish website for free on GitHub Pages - DEV Bootstrap · The most popular HTML, CSS, and JS library in the world. GitHub - diegocard/awesome-html5: A curated list of awesome HTML5 resources Fixing PHP SQLite database is locked warning - Unable to execute statement: database is locked [ php ] - KruXoR openstreetmap.org 50 Developer tools to make your life a little easier https://www.mrlacey.com/2020/07/youve-only-added-two-lines-why-did-that.html?m=1 GitHub - ForEvolve/bootstrap-dark: Bootstrap 4 dark theme that supports togging dark/light themes as well. There is no fluff, it changes the color of Bootstrap and that's it, no new thing to learn or unlearn, just Bootstrap, but Dark! Responsive Web Design Online Testing - isResponsive Trianglify.io · Low Poly Pattern Generator Grid.js - Advanced table plugin HEAD - A free guide to <head> elements Roots | Modern WordPress Development Tools A Local Dev Tool For Every Project | Lando new.css Synchronized responsive testing, development, inspection | Vanamco Gold Price Charts Widgets | GoldBroker.com Trianglify.io · Low Poly Pattern Generator Special tags that Google understands - Search Console Help 404 Error Page Codepen ScrollMagic ♥ Demo AOS - Animate on scroll library Font Awesome v4.7.0 - Icon Search Tool Carbon Offers — LowEndTalk Featherlight – The ultra slim jQuery lightbox. Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs HEAD - A free guide to <head> elements API Blueprint | API Blueprint Filtering Data Client-Side: Comparing CSS, jQuery, and React | CSS-Tricks CSS Quickies: CSS Variables - Or how you create a 🌞white/🌑dark theme easily - DEV Community 👩‍💻👨‍💻 Responsive Slider Timeline Colormind - the AI powered color palette generator Get Waves – Create SVG waves for your next design Nuxt.js - The Vue.js Framework CodeSandbox: Online Code Editor Tailored for Web Application Development Hover.css - A collection of CSS3 powered hover effects Live.js - One script closer to Designing in the Browser Color this sofa! – SVG + Blend Mode trick You Might Not Need jQuery CSS Wave Animation with a .png
Search Linx
Search Linx by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote

'Dawnie' used to say, "It's really quite simple: Be kind, and the rest takes care of itself. Never do anything that's not kind".


Dawn Atherton
Random CSS Property

shape-image-threshold

The shape-image-threshold CSS property sets the alpha channel threshold used to extract the shape using an image as the value for shape-outside.
shape-image-threshold css reference