Marketing

How to Take a Scrolling & Parallax Website Screenshot

Post by
Andrew Pierno
How to Take a Scrolling & Parallax Website Screenshot

There are so many ways to take screenshots programmatically with ScreenshotAPI. However, in our previous examples, we’ve taken static screenshots. But in some cases, you’ll need to capture information lower down on the page and showcase the scrolling & parallax effects.

For example, when using screenshots to track your competition’s pricing, you might need a screenshot of pricing tables down on the page. Likewise, you might need access to data lower on the page for a web scraping project. 

Fortunately, ScreenshotAPI’s got you covered, and by using the tool, you can take screenshots of websites with scrolling and parallax effects quickly and easily. 

Let’s take that screenshot!  

Taking a Full-Page Screenshot With ScreenshotAPI

You can easily integrate ScreenshotAPI’s REST API with any programming language. We’ll use a simple JavaScript and NodeJS example to show you the ropes:

With this code, we:

  • Import the required libraries that we’ll use in our script.
  • Define the variables that we’ll use to construct our query. These include:
  •  our API key, 
  • the URL we want to take a screenshot of, in this case, www.google.com
  • the size of the screenshot, and 
  • the output we want. 
  • Construct the query by using the variables we defined earlier.
  • Call the API by using our query.

When executed, this code will take a screenshot and save it as an image file on our system. 

In order to take full-page screenshots, we’ll work with the same code, but make a few small changes. Here, the code will look like this:

With this code, we:

  • Import the libraries that we’ll use in our script.
  • Define the variables we’ll use to construct our query. Here, we did not define height and width variables like in the previous example, but we defined a Boolean variable, full_page, with a value of true.
  • Construct our query using the variables we defined. By using the full_page variable, we tell the API that we want a screenshot of the full webpage, no matter how long it is. 
  • Call the API with the constructed query.

When this code is executed, it will, like in the previous example, take a screenshot of a website and save it as an image file on our machine. However, as mentioned, this time it will be a screenshot of the full page, giving you access to all its information. 

Simplify Taking Screenshot of Scrolling and Parallax Websites

There you go! Now you can showcase your design pizzazz on any website quickly and easily, no matter if they have scrolling or parallax effects. 

Ready to take smarter screenshots? Get started for free today!