[Pro] SmoothScroll Action Sideways?

Hey everyone,

Is there anyway to get the SmoothScroll action to go from side to side, rather than just up and down?

I’ve setup anchor points on a large canvas and want to ‘slide’ between each ‘area’ on the canvas. It’s works up and down, but I’d like to get it to SmoothScroll from left to right too.

Any help much appreciated!

Regards,

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Not with that Action. The underlying library (Scriptaculous Effect.scrollTo) only scrolls up and down. You could build this yourself with Effect.morph – that’s basically how the Carousel Action works.

Walter

On Mar 7, 2013, at 3:51 AM, Mark Lawrence wrote:

Hey everyone,

Is there anyway to get the SmoothScroll action to go from side to side, rather than just up and down?

I’ve setup anchor points on a large canvas and want to ‘slide’ between each ‘area’ on the canvas. It’s works up and down, but I’d like to get it to SmoothScroll from left to right too.

Any help much appreciated!

Regards,

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Walt, I’ve had a look at the Effect.morph, but unfortunately building it myself is a little out of my league.

I’ve tried doing a HTML markup of the code for the Effect.morph, but not a lot happens.

Like I say, slightly out of my depth!

Thanks again,

M


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thinking back over this, I realize that you really don’t want morph anyway. That would move an absolutely-positioned element on the screen, which is what Carousel does. What you want is to change the window’s own scroll offsets, and that’s a different kettle of fish altogether.

Walter

On Mar 7, 2013, at 8:31 AM, Mark Lawrence wrote:

Thanks Walt, I’ve had a look at the Effect.morph, but unfortunately building it myself is a little out of my league.

I’ve tried doing a HTML markup of the code for the Effect.morph, but not a lot happens.

Like I say, slightly out of my depth!

Thanks again,

M


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Oh dear, I’m fresh of kettles full of fish, so looks like I’ve hit a dead end.

Thanks for your post though Walt.

M


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Do you mean like this, which I built using Freeway. It scrolls sideway using the arrows or the menu:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi John,

Something like that yes.

How is that done? It looks like an image carousel?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes, a full page carousel.

Carousels are often used for inset slideshows, but I hit upon the idea of making it full page. The arrows are Carousel buttons and the menu names are Carousel tabs.

I have the page width fixed, but it might work also with a maximum width page so that the whole browser space appears to scroll to replicate Walter’s vertical scroll.

The panels are just stacked off screen, so editing can be fun. Be careful with layering if you have a common background.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Here’s one way you could do it. Paste this into the DOM Loaded Observer field in Protaculous 2 (apply that to the page first). Be sure to check Scriptaculous Effects on when you do.

Effect.SideScrollTo = function(element) {
  var options = arguments[1] || { },
  scrollOffsets = document.viewport.getScrollOffsets(),
  elementOffsets = $(element).cumulativeOffset();
  if (options.offset) elementOffsets[0] += options.offset;

  return new Effect.Tween(null,
    scrollOffsets.left,
    elementOffsets[0],
    options,
    function(p){ window.scrollTo(p.round(), scrollOffsets.top); }
  );
};

$$('.side-scroll').invoke('observe', 'click', function(evt){
  evt.stop();
  Effect.SideScrollTo(this.href.split('#').last());
});

Now in your page, create a link to the element you want to scroll to. This element must be absolutely positioned, not inline, for this to work. Click once on the element and look in the Name/ID field of the Inspector to see what it’s named. Go back to the origin where you want the effect to start from and create your link (this can be a graphic or text) using the Hyperlink dialog. Use the External tab, and enter # followed by the exact (case-sensitive) name you recorded of your target. Click the Extended button, then the New button, and in the resulting sub-sub-sub-dialog, enter the following name/value pair:

  • Name: class
  • Value: side-scroll

That should do it. Make a back button to scroll back, and repeat for any other interim scroll targets along the way.

Walter

On Mar 7, 2013, at 9:10 AM, Mark Lawrence wrote:

Oh dear, I’m fresh of kettles full of fish, so looks like I’ve hit a dead end.

Thanks for your post though Walt.

M


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hey, that’s really cool. I would never have thought to carousel-enable an entire page!

Walter

On Mar 7, 2013, at 9:29 AM, John Cooper wrote:

Do you mean like this, which I built using Freeway. It scrolls sideway using the arrows or the menu:

http://www.oscarwildeinnewyork.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Example: Side-Scroll

Walter

On Mar 7, 2013, at 9:10 AM, Mark Lawrence wrote:

Oh dear, I’m fresh of kettles full of fish, so looks like I’ve hit a dead end.

Thanks for your post though Walt.

M


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Wow!

Huge thanks to you both.

I’ll try both of those routes out.

Thank you for your time and input.

Best,

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Walter, praise indeed from you. Also useful as it saves page loading time.

Oh, I also give the walking tours! :slight_smile:

On 7 Mar 2013, 1:52 pm, waltd wrote:

Hey, that’s really cool. I would never have thought to carousel-enable an entire page!

Walter

On Mar 7, 2013, at 9:29 AM, John Cooper wrote:

Do you mean like this, which I built using Freeway. It scrolls sideway using the arrows or the menu:

http://www.oscarwildeinnewyork.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Genuis Walt!

Works a treat.

Thank you again for sharing your font of wisdom.

M


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options