Infinitely scrolling tiles

Hard
·
90 minutes

Prompt

Create infinitely scrolling rows of puppies and kittens

Requirements

  • There should be two different scrolling rows of images
  • The first row should scroll at 20 pixels per second, and the second at 10 pixels per second
  • Once all the images in a row have scrolled, they row should seamlessly start again from the beginning
  • Hovering over a row should halve the scrolling speed
  • Hovering over an image should reduce the opacity to 50%
  • Clicking on an image should display it below the scrolling rows
  • Clicking the 'Paws' button should pause both rows and change the button label to 'Play'. Clicking again should continue scrolling

Important

  • You can use the images below, or choose your own!
const puppies = [
  "https://frontendeval.com/images/puppy-1.jpeg",
  "https://frontendeval.com/images/puppy-2.jpeg",
  "https://frontendeval.com/images/puppy-3.jpeg",
  "https://frontendeval.com/images/puppy-4.jpeg",
  "https://frontendeval.com/images/puppy-5.jpeg",
  "https://frontendeval.com/images/puppy-6.jpeg",
  "https://frontendeval.com/images/puppy-7.jpeg",
  "https://frontendeval.com/images/puppy-8.jpeg",
  "https://frontendeval.com/images/puppy-9.jpeg",
  "https://frontendeval.com/images/puppy-10.jpeg",
  "https://frontendeval.com/images/puppy-11.jpeg",
  "https://frontendeval.com/images/puppy-12.jpeg",
];

const kittens = [
  "https://frontendeval.com/images/kitten-1.jpeg",
  "https://frontendeval.com/images/kitten-2.jpeg",
  "https://frontendeval.com/images/kitten-3.jpeg",
  "https://frontendeval.com/images/kitten-4.jpeg",
  "https://frontendeval.com/images/kitten-5.jpeg",
  "https://frontendeval.com/images/kitten-6.jpeg",
  "https://frontendeval.com/images/kitten-7.jpeg",
  "https://frontendeval.com/images/kitten-8.jpeg",
  "https://frontendeval.com/images/kitten-9.jpeg",
  "https://frontendeval.com/images/kitten-10.jpeg",
  "https://frontendeval.com/images/kitten-11.jpeg",
  "https://frontendeval.com/images/kitten-12.jpeg",
];

Submitting solutions

  1. Create a solution by forking one of our CodePen templates:
  2. Submit your solution here

Hints

Additional challenges

Get future questions delivered straight to your inbox for free

Sign up and receive instant access to new questions when we publish them.

We‘ll only use your information to deliver new questions and to provide you updates about our product. We‘ll never spam you or sell your information without your consent. Unsubscribe at any time.