GregK Posted August 3, 2020 Share Posted August 3, 2020 Hey guys, I was wondering what could be the easiest way to have a moving gallery in the background that shows either different amount of images / gifs or videos, similar like they did here: https://www.apple.com/tv/?cid=oas-us-domains-apple.tv Any ideas how to recreate that? It needs to be full width on all devices Link to comment
GregK Posted August 3, 2020 Author Share Posted August 3, 2020 I've found the HTML Code, but since I am not a coder I don't really know how to it, but does the following work: Together with that Code, Can I just upload the Images I'd like to use and change the ending of the saved images that are on the apple server and use the ones that I upload to squarespace? Example: class="marquee-item-wrapper" style="transform: matrix(1, 0, 0, 1, -7337.73, 0);"> <figure class="marquee-item background-image image-stories-dads" style="width: 413px;"></figure> And here in the class I just use an Image Link with the ones I upload to Squarespace? <section class="section section-tv-plus theme-dark" data-component-list="ProgressiveImageLoader" data-analytics-section-engagement="name:tv-plus"> <div class="section-content"> <div class="tv-plus-copy-wrapper large-12 large-centered fade-in"> <h2 class="image-tv-plus-logo"><span class="visuallyhidden">Apple TV Plus</span> </h2><h3 class="tv-plus-headline typography-section-headline large-10 small-11 large-centered">All Apple Originals. Only on Apple TV+.</h3> <div class="typography-cta-link large-12 large-centered"> <ul class="links-inline"> <li> <a href="https://tv.apple.com/channel/tvs.sbd.4000?itscg=10000&itsct=atv-0-tv_fp-hro_wch-apl-200306" aria-label="Watch now on Apple TV+" class="icon-wrapper button button-super" rel="nofollow"><span class="icon-copy">Watch now</span></a> </li> <li> <a href="/apple-tv-plus/?itscg=10000&itsct=atv-0-tv_fp-hro_lrn-apl-200306" data-analytics-title="learn more - Apple TV+" data-analytics-region="learn more" aria-label="Learn more about Apple TV+" class="icon-wrapper" data-rid-relay="{"285":"itsct"}" data-analytics-exit-link=""><span class="icon-copy">Learn more</span><span class="icon icon-after more"></span></a> </li> </ul> </div> </div> <div class="marquee" data-component-list="Marquee"> <div class="marquee-row" aria-hidden="true" data-direction="left" data-speed="250" data-speed-small="125"> <div class="marquee-item-wrapper fade-in" style="transform: matrix(1, 0, 0, 1, 5052.27, 0);"> <figure class="marquee-item background-image image-stories-dads" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-greatness-code" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-little-voice" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-central-park" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-greyhound" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-ghostwriter" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-trying" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-defending-jacob" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-little-america" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-the-morning-show" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-see" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-mythic-quest" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-the-banker" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-home-before-dark" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-helpsters" style="width: 413px;"></figure> </div> <div class="marquee-item-wrapper" style="transform: matrix(1, 0, 0, 1, -7337.73, 0);"> <figure class="marquee-item background-image image-stories-dads" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-greatness-code" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-little-voice" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-central-park" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-greyhound" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-ghostwriter" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-trying" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-defending-jacob" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-little-america" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-the-morning-show" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-see" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-mythic-quest" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-the-banker" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-home-before-dark" style="width: 413px;"></figure> <figure class="marquee-item background-image image-stories-helpsters" style="width: 413px;"></figure> </div> </div> <button class="control pause-icon" aria-label="Pause animation" data-analytics-title="pause-tv-plus-marquee" data-analytics-click="prop3:pause-tv-plus-marquee"> </button> <button class="control play-icon" aria-label="Play animation" data-analytics-title="play-tv-plus-marquee" data-analytics-click="prop3:play-tv-plus-marquee"> </button> </div> </div> </section> Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.