Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Latest Current Version: 16.6.1 (includes npm 7.20.3) Download the Node.js source code or a pre-built installer for your platform, and start developing today. Click on the link to see the 'smooth' scrolling effect. Click Me to Smooth Scroll to Section 2 Below. Note: Remove the scroll-behavior property to remove smooth scrolling. MagicScroll.backward(#id, step) - scroll backward. MagicScroll.jump(#id, index) - scroll to item with a certain index. MagicScroll.addItem(#id, node, index) - add new item node (DOM element or HTML code) after item with certain index (or to the end if index is not specified). MagicScroll.removeItem(#id, index) - remove item with certain index.

ScrollMagic is a jQuery plugin which lets you use the scrollbar like a playback scrub control. Using this, you can build some extremely beautiful landing pages and websites. Normally, we wouldn't do a tutorial on using a single jQuery plugin, but scrollMagic does a lot and has quickly become one of my favorite plugins. In this article, I'll cover my general opinion on scroll plugins, how to get started with ScrollMagic, and some basic and over-the-top creative demos. Finally, some starter templates for you to repurpose are in works to be released very soon in part II of this tutorial.

A Note About a User's Scroll

I'm not a fan of hijacking a users scroll period. I personally believe it's way to easy to ruin a user's experience and it makes it difficult to quickly navigate to specific content. It takes a lot for me to consider using a jQuery plugin that heavily affects normal scroll behavior. ScrollMagic doesn't really hijack a users scroll despite its name alluding to the idea that it would. It simply just triggers a bunch of events during a user's scroll. For example, compare these two sites:

Notice that with the Google Cardboard site you can quickly navigate up and down, but with fullPage.js you're actually restricted and delayed on your scrolling. FullPage.js is nevertheless a great and impressive plugin, it's just not user experience I like to create.

Lastly, if you check out ScrollMagic's demo page you'll see a ton of crazy animations. The demo is definitely over the top and doesn't really do justice for the advantages of using ScrollMagic in simpler designs. I hope after reading this article though that you understand and enjoy the benefits as much as I do.

Here's a little sample of one of the things we'll be able to build:

See the Pen ScrollMagic Demos - Class Toggles by Nicholas Cerminara (@ncerminara) on CodePen.

Initial Setup

To get started you'll need a few dependencies.

jQuery

ScrollMagic requires jQuery. You'll need to include to be able to even use ScrollMagic. I'm going to include the latest jQuery before it dropped Internet Explorer 8 support (jQuery 2.x+) despite ScrollMagic only supporting Internet Explorer 9 and above.

GreenSock Animation Platform (GSAP)

ScrollMagic uses the GreenSock Animation Platform (GSAP) for doing animations. Technically, the GreenSock platform is completely optional, but it makes total sense to use it. GSOP is nice because it has it's own little framework with its own dependencies and plugins. If performance is a huge factor for you, you can pick and choose only exactly what you need. However, we're going to use the whole library to take advantage of all it's cool features.

ScrollMagic

Next, you'll need to include ScrollMagic. ScrollMagic also comes with a nice but separate debugging library. I'll include it for the demos, but on production environments, there's no need to include it.

All At Once

And here it is all together with the full HTML and references to Bootstrap for CSS:

The ScrollMagic Controller

Typically when you initiate a jQuery plugin you just pass a bunch of options and call it a day. Sometimes a plugin will have advanced features like a callbacks API or the ability to return the entire plugin as an object with some public functions so you can get real custom with it.

ScrollMagic is a little bit different than this. We're going to initiate a ScrollMagic Controller, create a bunch of animation objects, create some Scene (where the animation happens) objects, combine the animation and scene objects, then pass it all back to the main ScrollMagic Controller. So our general steps will be:

1. Create the ScrollMagic Controller (and select general options)
2. Create an Animation Object (and select animation options)
3. Create a Scene Object (and select scene options)
4. Add our Animation Object to the Scene Object
5. Add the Scene Object to the ScrollMagic Controller

It's nothing too crazy as it's your typical JavaScript stuff, but understanding the underlying structure of how it all plays together will help you move forward with it. It's a little bit more involved than your standard jQuery plug and chug plugins.

Now, all that being said, this is how to initiate the ScrollMagic Controller:

Basic Example

Now let's create the two most basic examples that ScrollMagic does for us.

Animation Trigger Example

All this does is trigger an animation. We'll do two things to get this working. First, create the Animation on the element we want to animate. Then, second, we'll create the Scene which is going to trigger the animation when it is scrolled into view. So, let's go ahead and create that first animation (we'll cover these more in depth further in the article):

Pretty simple! This will add those CSS properties to the element with the ID of #animation. However, we need to control when those animations happen. ScrollMagic will make it easy to bind the animation to certain scroll events by creating Scenes. Here's the next piece of code:

We create the Scene as an object to be triggered later, then we pass which animations we want to that Scene, and, finally, we pass it all back to the ScrollMagicController to be handled. Here's a stripped and naked example to help explain:

See the Pen ScrollMagic Demos - Basic Example by Nicholas Cerminara (@ncerminara) on CodePen.

Animations Binded to Scroll

The last example only triggers the animation at the specified Scene trigger point. ScrollMagic can bind your animation to the scroll event. This acts as a rewind and fast-forward scrubber for your animation. Here's the code for doing that:

You should immediately see that the only difference that matters between the two examples is that the duration property is added to the scene. This will be how many pixels you want the animation to be on scroll. Here's an example to visualize that difference between the two methods:

See the Pen ScrollMagic Demos - Animations Binded to Scroll by Nicholas Cerminara (@ncerminara) on CodePen.

Tween Animations in Depth

There's a ton of options for doing animations. I'll cover some of the more various ones, but, first let's do the most common one - 'tweening' using the GreenSock Animation Platform.

Tweening is what the GSAP calls their animations. We're specifically using their TweenMax library. TweenMax is awesome because it encompasses all their various plugins and additions into one. This gives us some cross-browser stuff, makes the browser use CSS3 animations first, is extremely performant, and it let's you create complex animations and key frames with ease. Alternatively, you can work piecemeal and pick exactly which components you want with TweenLite and its plugins.

TweenMax.to()

This lets us create our most standard animations. For example if you want an element's background color to go from it's default to red. Here's an example:

You can get as infinitely creative as you want with this. For example, the following tween will make the background red, it grow 5 times in size, and do a full spin rotation using CSS3 Transforms.

You can do pretty much anything you would be able to do with CSS3 animations - colors, transforms, etc. Here's the official resource so you can reference for syntax. You can view the examples directly above to see the TweenMax.to() function in action.

TweenMax.from()

This works exactly the opposite of TweenMax.to(). It will animate to the default styles from the specified animation options. Here's some example code:

Here's an example from one of the basic demos using the from() function instead:

See the Pen ScrollMagic Demos - Animation Trigger by Nicholas Cerminara (@ncerminara) on CodePen.

TweenMax.fromTo()

This function is exactly what it sounds like. You'll specify two animation properties for it to animate from one and then to the other. Hopefully you're wondering why you can't just use the to() function and set the start styles with CSS. Well, you can and that's totally okay. The function fromTo however introduces a bunch of other options like yoyo and repeat. So you use those to create keyframe animations when the scroll event is triggered. Check out the code below:

See the Pen TweenMax.fromTo() with Repeat and Yoyo Turned On by Nicholas Cerminara (@ncerminara) on CodePen.

See the Pen TweenMax.fromTo() with Repeat and Yoyo Turned Off by Nicholas Cerminara (@ncerminara) on CodePen.

With both of these examples, if you remove the Scene's duration, there will be no endpoint for the animation to stop.

Staggering

You can easily have multiple elements have the same animation and different start times all within the same Scene. This is called staggering and is very easy to do. Here's a code sample followed by a demo:

See the Pen ScrollMagic Demos - Staggering Animations by Nicholas Cerminara (@ncerminara) on CodePen.

Additional Animations

There's even more things you can do. For example, you can animate to all the CSS properties of contained in a certain class. You can also chain animations together to get even more complex and creative. This article won't cover all that, but you can check out the docs here for more information.

CSS Class Toggles

ScrollMagic also lets you easily toggle as many classes as you want when the Scene is activated. This is super handy for doing some complex stuff without the additional JavaScript. For example, if we wanted to just toggle a body class to change some colors around, all we would need to do is add the following code to the Scene.

This brings so much control and power in my opinion. Check out the quick demo I put together to demonstrate the extra amount of depth you gain.

See the Pen ScrollMagic Demos - Class Toggles by Nicholas Cerminara (@ncerminara) on CodePen.

Custom Containers and Mobile Support

I bunched custom containers and mobile support together because they're really one and the same. Typically on a mobile touch device, the scroll event isn't detected until the scroll has stopped. This is unfortunate for what we're doing. Fortunately that only occurs when you're scrolling on the entire body. If say your scrolling in an element that is set to overflow: scroll each moment of the scroll is detected.

ScrollMagic lets you specify any container you want for your scenes by a simple option. Here's a code example:

You can do cool things with this like putting your animations and scroll inside of a div or section of your website. Mobile support takes this exact same concept and creates a 'container' or wrapper around the whole site and just binds ScrollMagic to that container.

Truth be told it's a hackish workaround. The major downside is this kills off support for momentum scrolling. ScrollMagic's official answer to this is to use something like iScroll.js to bring scroll momentum to touch devices. You may also be able to just add this CSS3 property to the container -webkit-overflow-scrolling: touch;, but that obviously won't work in all browsers. It's entirely up to you to support this or not, but if you get it right it can really provide a seamless experience on mobile.

Lastly, if you want to just disable ScrollMagic on mobile or touch devices, you can do it easily with Modernizr:

If you're not a fan of using another library like Modernizr just to detect touch, you can use this function:

I grabbed that function from this StackOverflow post. It seems to update a lot in case you want to check to see if that's still up to date.

Conclusion

ScrollMagic's official documentation and examples are amazing. I definitely recommend heading over there and checking out all the other things ScrollMagic can do. Some of those things include:

There's definitely a lot you can do with ScrollMagic. I think it's generally smart to use this with caution in risk of ruining a user experience with some bad animations. Complex ScrollMagic websites are probably best saved for landing pages and using this subtly is best with content based websites. It's all about finding a balance. That being said, I plan on releasing some starter templates soon that would be good for portfolios, product launches, and stuff like that. Stay tuned!

Like this article? Follow @whatnicktweets on Twitter

Responsive slider for images, videos, product thumbnails, featured content, any HTML

Fast. Easy to use. jQuery compatible

Integrations and plugins Use these plugins and extensions to setup Magic Scroll on your site without writing a single line of code.

One tool. Infinite possibilities.

Product thumbnails slider/carousel

Do you have plenty of product images but don't know how to fit them all in? Magic Scroll lets you display all your product images in an elegant and intuitive way. Our responsive slider will make the experience effortless for both mobile and desktop users.

Featured Content slider

Show off your best-selling products on your homepage or category pages. If you're a blog owner - use it to promote your best content. Sliders usually slow down page load time. Not Magic Scroll! Enable Lazy-loading and enjoy both a fast website and a slick 'featured' section.

Related products slider

One of the best ways to increase your sales is to cross-sell and up-sell related products. Display your related products with Magic Scroll and see that average order value increase like magic.

Cover flow slider

Love Apple's cover flow effect? Replicate this easily with Magic Scroll.

Review/Testimonial slider

An elegant way to show off multiple reviews without compromising design. It's a smart-phone driven world right now. We got that covered. Magic Scroll is fully responsive and works flawlessly on every device. More than that - it supports swipe gestures, providing your users the best experience they can wish for.

Optimized for every device

Transparent Pricing with no Ongoing Fees

What you'll get with your purchase

• Unrestricted use forever
• Instant access to 19 extensions
• 30 minutes of tech support
• 1 year of free upgrades

Customer reviews

Cory, animalkingdoms.co.nz

Alexander

Renaud

David

Ian Armstrong, londonbuses.co.uk

Submit your review

Jquery Download

Magicscroll Js Download For Pc

Make your website look fabulous with Magic Scroll!

Why choose Magic Scroll?

In the JavaScript slider market there are literally hundreds of options. So why should you choose Magic Scroll?

1. Constant updates. We regularly update Magic Scroll following the best technology trends, but at the same time we keep it compatible with old browsers.
2. It's fast. Magic Scroll avoids the pitfall that most sliders have - slow loading time. Vanilla JavaScript and CSS3 animations provide the best performance hands-down and lazy-loading helps your page load faster, with keeping all the eye-candy.
3. Support is always there for you. If you read our reviews you might have noticed how much our customers value our support. We take pride in your success, that's why we do our best to resolve every issue you might encounter.
4. No subscriptions and a money-back guarantee. Subscription pricing models are extremely popular today. In the long-term they are much much more expensive than the regular one-off payment model that we follow. It's very simple, you buy Magic Scroll - you get to keep it forever. Updates are free for a year. After that - it's only 20% of the initial price. Your purchase is absolutely risk-free thanks to our 30-day money-back guarantee.
5. Responsive out-of-the-box. Some sliders have problems on mobile devices. Magic Scroll doesn't. It automatically detects the viewport of your visitors device and adjusts the quantity of your slider items accordingly. Swipe gestures make it a breeze to navigate on mobile too, no more clicking that tiny little button to move to the next gallery item.

What's under the hood?

Magic Scroll is a vanilla JavaScript slider with CSS3 animations. We built a powerful API that allows developers do literally anything. If you don't know how to code, we have a simple configuration wizard which you can use to configure your Magic Scroll in literally seconds.

Today the odds are that you're using some sort of a CMS or an E-commerce platform. We have a Magento slider extension, WordPress slider plugin and integrations for other popular platforms. With our modules, installation is as easy as uploading and activating the module on your website.

Changelog

• • Fixed issue with non-working input text inside scroller.
• • Improved usage of array in the 'items' option
• • Core Java Script library update
• • Fixed error message in Edge browser
• • Addressed issue with calling refresh method
• • New API methods added: addItem, removeItem, getItem and getItems
• • Added <picture> tag support
• • Minor bug fixes
• • Enhanced scroll on swipe when 'step' parameter is defined for mobile.
• • Added ability to limit number of scroll image on mobile
• • Address Safari drag issue
• • Address issue with non-visible prev arrows when mouse wheel using for scroll
• • Fixed issue when API uses for scroll with non-loaded images
• • Fix MagicScroll.jump() method issue
• • Added onMoveStart callback for carousel mode
• • Minor bug fixes

• *Fixed issue with using jump() method with bullets

• • Improved scroll height calculation
• • Fixed issue with non-working jump() function when loop is disabled
• • Added fix for image size when height parameter is specified.
• • Fixed minor issues in the .stop() method.
• • Fixed wrong arrows position in IE
• • Address possible conflict with 3rd party CSS styles
• • beforeInit callback added
• • New CSS arrows
• • Fixes animation mode issue in Firefox browser.
• • Fix possible drag issue when items parameter contains array.
• • Fixes animation mode issue in IE browser.
• • Minor tweaks.
• • Fix caption position issue for cover flow effect.
• • Drag and drop functionality enhancement.
• • Minor bug fixes.

• Resolves a drag issue in Firefox 46.0

• • Resolves a issue when Scroll inside a form.
• • Small tweaks.
• • Lazy loading is now available in the cover-flow mode.
  • Ability to define a caption for the image with <figcaption> tag. E.g. <figure><img src='my-image.jpg'><figcaption>Image caption</figcaption></figure>.
• • Fixes a rare issue in the animation mode when total size of items exceeds 100,000 pixels.
• • New 'draggable' option that enables/disables drag to scroll.
  • Tweaks to the caption layout in carousel and cover-flow modes.
• • Preserve items state after browser resize in carousel and cover-flow modes.
• • Fixes an issue that could cause an incorrect display of the items in the scroll area in Firefox.
• • Resolves possible issue with a item caption defined via the tag.
• • Fixes an issue that prevented Magic Scroll from starting in Chrome on iOS.
• • Fix issue when Magic Scroll works over Magic Zoom (Plus) selectors and breaks image switching.
• • Maintenance release.
• • Small fixes.

• Announcing an extraordinarily flexible new version of Magic Scroll, with multiple applications on any website:

  • Fully responsive to perfectly resize itself.
  • Carousel mode for arranging images in 3D.
  • Cover-flow mode for flicking through tonnes of images.
  • Continuous scroll for non-stop images.
  • Swipe and drag support for maximum user control.
  • Mouse wheel and trackpad intelligence.
  • Dot navigation for moving forward/back.
  • CSS3 transitions with hardware acceleration.
  • Extended API and callbacks for greater JavaScript control.
  • Improved performance of visual effects.
• • Improve layout of 'Powered by' text, so it does not obscure the entire scroll.
• • Fix compatibility issue with MagicTouch.
• • Resolve possible conflicts with other JS libraries on the page.
• • Better compatibility with Magic Zoom Plus.
• • Fix issue with image size when scroller is running over Magic Zoom selectors.
• • Resolve issue with image loading in IE9.
• • Fix item size calculation.
  • Better compatibility with Magic Zoom and Magic Zoom Plus.
  • Other small fixes.
• • Resolve conflicts in IE.
• • Fix compatible issue with MagicThumb

• After 9 months development, our powerful new scroll tool has arrived. Using JavaScript and CSS, it works on all major browsers as well as iPad, iPhone and other mobile devices. Features include:

  • Scroll images, text, SWF and even scroll HTML content (i.e. anything).
  • Change direction.
  • Adjust speed.
  • Choose effects.
  • Choose arrows.
  • Automatic or manual scroll.
  • Adjust margin and padding.
  • Adjust colors.
  • Click to URL.

Choose your Platform

Or Download the Vanilla JS version