Exploring parallax scrolling, animation, and text effects in Adobe Edge Animate CC

January 2014

Software & Technologies

Edge Animate, HTML5, JavaScript, Parallax Scrolling, SVG Graphics

Overview

Parallax scrolling adds a bit of a storytelling element to web designs while providing a touch of depth and interactivity to otherwise static sites. Adding parallax scrolling and animated text effects to a web banner is a great way to engage the attention of site visitors and inspire them to explore it further.

parallax-fig1.fw

You can create parallax scrolling by synchronizing a scroll bar with a timeline in Edge Animate CC to deliver an interactive animation in which the viewer can use the scroll bar to control the composition. It’s a fun exercise in interactivity, animation, and storytelling.

parallax-fig2.fw

Edge Animate Bug

Note that it was brought to my attention that the project files no longer work with the current version of Edge Animate. Upon further exploration, we discovered what appears to be an Edge Animate bug – the ‘scroll’ event no longer fires on the main timeline of the composition. The result is that the parallax scrolling template fails to work.

https://www.linkedin.com/pulse/two-major-bugs-edge-animate-jim-maivald?trkSplashRedir=true&forceNoSplash=true

Links

http://www.adobe.com/inspire/2014/01/parallax-edge-animate.html

**This article has been retired along with other Adobe Inspire Magazine content.  (December 2015)

Companion Videos

Companion videos for the article are still available on Adobe TV, at the following links:

21435_tmb_150x84_0000

Edge Animate CC: Parallax Banner: Part 1 (5 min)
http://tv.adobe.com/watch/companion-videos-for-inspire/edge-animate-cc-parallax-banner-tutorial-part-1/

21436_tmb_150x84_0036

Edge Animate CC: Parallax Banner: Part 2 (8 min)
http://tv.adobe.com/watch/companion-videos-for-inspire/edge-animate-cc-parallax-banner-part-2/

21437_tmb_150x84_0047

Edge Animate CC: Parallax Banner: Part 3 (8 min)
http://tv.adobe.com/watch/companion-videos-for-inspire/edge-animate-cc-parallax-banner-part-3/

2 thoughts on “Exploring parallax scrolling, animation, and text effects in Adobe Edge Animate CC”

    1. Hi Josh,

      Thanks for the feedback! And, interesting question. I created a sample file that uses Brandon Aaron’s jQuery Mousewheel Plugin to create the effect. You can download the files here:

      http://files.dancarr.co/blog/parallax_banner_mousewheel.zip

      Follow these steps to implement:

      1. Add the jquery.mousewheel.js file to your project folder (it’s included in the zip, or available at https://github.com/brandonaaron/jquery-mousewheel/).

      2. Open the Code panel in the Edge Animate project, and add a compositionReady event to the Stage timeline (click on the + next to the Stage in the left column, and select the event).

      3. Copy and paste the following code in the text editor:

      // Load JavaScript files to start
      
      yepnope({
      
       	nope:[
       		'jquery.mousewheel.js'
       	],
       	complete: init
      });
      
      // Fire init function when yepnope has loaded the files
      
      function init (){
      
      	// Hide vertical scrollbar
      	sym.$("Stage").css("overflow-y","hidden");
      	
      	// Animated mousewheel scroll
      	var animating = false;
      	var distance = 600;
      	var duration = 1000;
      
      	$("body").mousewheel(function(event, delta) {
      		
      		if( animating == false ){
      			 animating = true;
      			
      			var left = $("#Stage").scrollLeft();
      			var position = ( delta < 0 ? left + distance : left - distance );
      			
      			$("#Stage").animate({scrollLeft: position}, duration, function(){
      				animating = false;
      			});
      		}
      		event.preventDefault();
      	});
      }
      

      4. That should do it. You can adjust the distance and duration variables to fine tune the effect. You can also look up the jQuery animate API, to see what other things you can do with it (adjust the easing, event callbacks, etc.).

      Hope that helps. Cheers,
      Dan

Comments are closed.