Highlighted

Apple's photos slideshow

New Here ,
Aug 08, 2017

Copy link to clipboard

Copied

Hey everyone,

I'm new to Adobe Muse app and I'm trying to figure out how to build a slideshow like on Apple's website

Is there any option to build this feature with Muse?

Thanks !

This is a full browser width slide show, which you can create in Muse:

  1. Place a slide show and configure a „horizontal transition“.
  2. Select the slide show hero area and apply „Scale Browser Width“ in the upper control strip.
  3. Place the thumbnail container under the hero area and select an image within a thumbnail container.
  4. Rightclick onto it and choose „Select same (image)“ and drag the images out of the visible area of the trigger.
  5. Reduce the height of the triggers, so that they seem to be nothing but a line.
  6. Fill the thumbnail’s background with an animated gif, showing the „moving strip“.

Since slideshows aren’t completely responsive for now, you have to reposition the thumbnail container breakpoint-wise

Here you have a sample site, showing the construction: http://animated-thumbnails.businesscatalyst.com/index.html

You may download the corresponding .muse file directly from this site.

Views

139

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Apple's photos slideshow

New Here ,
Aug 08, 2017

Copy link to clipboard

Copied

Hey everyone,

I'm new to Adobe Muse app and I'm trying to figure out how to build a slideshow like on Apple's website

Is there any option to build this feature with Muse?

Thanks !

This is a full browser width slide show, which you can create in Muse:

  1. Place a slide show and configure a „horizontal transition“.
  2. Select the slide show hero area and apply „Scale Browser Width“ in the upper control strip.
  3. Place the thumbnail container under the hero area and select an image within a thumbnail container.
  4. Rightclick onto it and choose „Select same (image)“ and drag the images out of the visible area of the trigger.
  5. Reduce the height of the triggers, so that they seem to be nothing but a line.
  6. Fill the thumbnail’s background with an animated gif, showing the „moving strip“.

Since slideshows aren’t completely responsive for now, you have to reposition the thumbnail container breakpoint-wise

Here you have a sample site, showing the construction: http://animated-thumbnails.businesscatalyst.com/index.html

You may download the corresponding .muse file directly from this site.

Views

140

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 08, 2017 0
LEGEND ,
Aug 08, 2017

Copy link to clipboard

Copied

This is a full browser width slide show, which you can create in Muse:

  1. Place a slide show and configure a „horizontal transition“.
  2. Select the slide show hero area and apply „Scale Browser Width“ in the upper control strip.
  3. Place the thumbnail container under the hero area and select an image within a thumbnail container.
  4. Rightclick onto it and choose „Select same (image)“ and drag the images out of the visible area of the trigger.
  5. Reduce the height of the triggers, so that they seem to be nothing but a line.
  6. Fill the thumbnail’s background with an animated gif, showing the „moving strip“.

Since slideshows aren’t completely responsive for now, you have to reposition the thumbnail container breakpoint-wise

Here you have a sample site, showing the construction: http://animated-thumbnails.businesscatalyst.com/index.html

You may download the corresponding .muse file directly from this site.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 08, 2017 1
LEGEND ,
Aug 08, 2017

Copy link to clipboard

Copied

or.druker​: If you already visited the thread, please read my answer again: I managed to mimic the animated thumbnails too. Of course the sample assets have to be optimised. Especially the „timing“ of the animated thumbnail has to be synchronised with the duration of the single images. But the „quick & dirty“ page shows, that it is possible to come very close to Apple’s slideshow.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 08, 2017 2
New Here ,
Aug 08, 2017

Copy link to clipboard

Copied

Thanks ! It was helpful and kind of you

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 08, 2017 0