Adobe Muse CC Parallax Scrolling Tutorial | Side Scrolling iPhone Parallax Mask

In this tutorial I use an out of focus image as my background, and pass an iPhone across while scrolling to create a parallax effect that looks as if the iPhone camera is being used to show the "real life" that lies out of focus behind it...

Download my entirely free Muse CC widgets:

Get MOVE for Muse:

Get 458 high-res Icons for Muse:

_

[StuartPetty]

Your tutorials are really great, clear and simple to follow, Adobe should give you a job

[kevingallagherdesign]

loving it. love all your tutorials, very well presented.

[evilmonkeylopez]

WOW Joseph thats super cool!!
keep it Up!!

[AbbySonia]

very clear instructions, great video!

[prycemediaproductions]

Question. First this tutorial is awesome. But my question is can you have a scroll effect used on a background slide show and a slide show in the iphone. So as you scroll down you get different clear images in the iphone and background matches with fuzzy background. So two slides shows simutaneously moving together when scrolling down.? Does that sound possible. 

[omdesign]

thank you soooo much for sharing joe - big compliments for ya videos: you do a great job each video - and besides: you got a perfect audio voice for that - keep it going bro!

[ieatsoulsjustsaying]

That was a very good tutorial. I'm going to try this with different pictures :)

[irissolano]

Awesome! And also very clear! I love it.... and I love your voice ! :)

[justins]

That's what I was waiting for, another great vid, is the design your idea? pretty amazing!

[bySterling]

Mista Todaro Frickin ROCK$!!  Thanks again my priceless Muse Bro! #HumanSuperHero  

[dennisflojo]

Love this tutorial!!
Do you have tutorials on horizontal parallax swipe instead of scroll that will work on iPad? Like the m.hbo.com site….

[paulalisz]

A tutorial on a workflow between Muse and the "edge" flow would be helpful. Also the edge animate files that need to go to muse are complex please help, and thanks for all you do...

[BobFaulkner]

Great effect! Why must the large image be placed as a background in a rectangle? Can't it just be a placed photo? Won't placed images fill the page, too? And, they can be set to be stationery too, right?

[TheSmartology]

Joseph Angelo Todaro That's great! What if we insert the blurry image inside a Full Screen Widget instead of a 100% width fill box? I think this will take care of the different screen resolutions problem. What do you think?

[stablizershock]

nice technique. One question can u add composition inside another composition is there a way?

[lulululues]

thank you for this tutorial it worke great but i have some questions: when i follow your instruction the rectangle added for the scrolling effect is still visible in my browser preview. how can i make it disappear? and after adding content underneath, how can i make the effect stop where i want it to stop?

[affinitiv]

Got it. Appears to be a glitch in Muse. Twice I've had to delete and refill boxes with the image because it would let me apply motion. Once I redid them, it worked fine.

[manofsteele]

Joseph I have a question for you I have a muse template that I working off of and I added 4 text elements and I'm making them into buttons that are supposed to when scrolling go behind the top header, sometimes when I preview it it works but when I scroll back down and back up, the text buttons are on top of the header. how can I fix this

[jygbtn]

Great tutorials! I watched almost all your videos. TMI makes my head explode! Lmao!

[affinitiv]

I can't check the motion box in the scroll effects panel. I'm using the latest version of Muse, and I have a the blurred image selected. It is not full-screen and has the image contained in the rectangle set at "scale to fill".