Steam Community :: Guide :: How to create a Perfekt Games slide Show Animation to Steam Profile

Steam

All Discussions Artwork Videos News Guides

Steam > Guides > ZaCuDa3's Guides

Not enough ratings

How to create a Perfekt Games slide Show Animation to Steam Profile

By ZaCuDa3

Step by Step Tutorial to create a Perfect Game slide Show Animation to Steam Profile.

Award

Created by

ZaCuDa3
Offline

Category: Modding or Configuration

Languages: English

Posted

Updated

4 Sep, 2023 @ 2:18am

15 Sep, 2023 @ 11:13am

5	Unique Visitors
0	Current Favorites

Guide Index

Overview

Save this Code in a .html File

Prepare Game Images

Update the Game Image URLs and/or Rename the Images to Game1.jpg Game2.jpg Game3.jpg ...

Customize Animation Speed

Preview and Record the Animation

Convert the Recording to a GIF File (Max Size: 5 MB)

Add the GIF to Steam Profil Showcase

Example Result:

Comments

Save this Code in a .html File

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#gallery-container {
width: 1066px;
height: 879px;
overflow: hidden;
border: 1px solid #ccc;
}
#gallery {
animation: scroll 60s linear infinite;
}
.gallery-row {
display: flex;
}
.gallery-image {
width: 533px;
height: 293px;
margin: 2px;
background-size: cover;
}
@keyframes scroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(calc(-200% - 8px));
}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
const gallery = document.getElementById("gallery");
const galleryRow = document.querySelector(".gallery-row");

const imageUrls = [
'game1.jpg',
'game2.jpg',
'game3.jpg',
'game4.jpg',
'game5.jpg',
'game6.jpg',
'game7.jpg',
'game8.jpg',
'game9.jpg',
'game10.jpg',
'game11.jpg',
'game12.jpg',
'game13.jpg',
'game14.jpg',
'game15.jpg',
'game16.jpg',
'game17.jpg',
'game18.jpg',
'game19.jpg',
'game20.jpg',
];

for (let i = 0; i < 10; i++) {
const cloneRow = galleryRow.cloneNode(true);
gallery.appendChild(cloneRow);

const imagesInRow = cloneRow.querySelectorAll('.gallery-image');
imagesInRow[0].style.backgroundImage = `url('${imageUrls[(i * 2) % imageUrls.length]}')`;
imagesInRow[1].style.backgroundImage = `url('${imageUrls[(i * 2 + 1) % imageUrls.length]}')`;
}
});
</script>
</head>
<body>
<div id="gallery-container">
<div id="gallery">
<div class="gallery-row">
<div class="gallery-image"></div>
<div class="gallery-image"></div>
</div>
</div>
</div>
</body>
</html>

Prepare Game Images

Create Images (533x293 Pixel) for each perfect Game to appear in the Slideshow. Place these Images in the same directory as the HTML File or provide the correct File paths.

Update the Game Image URLs and/or Rename the Images to Game1.jpg Game2.jpg Game3.jpg ...

Locate the JavaScript section in the HTML File. Find the ImageUrls array and replace the Sample Image URLs with the URLs or File paths of the Images for the Steam Games. Here's the Code Section to modify:

javascript:
const imageUrls = [
'game1.jpg', // Replace with Game Image File paths
'game2.jpg',
'game3.jpg',
// Add more Game Image URLs as needed
];

Customize Animation Speed

Adjust the Animation Speed and Number of Repeats. In the CSS section, locate the #gallery CSS Rule and update the Animation property. Change the duration (e.g., from 60s to 120s for a slower Animation).

css:
#gallery {
animation: scroll 60s linear infinite;
}

Preview and Record the Animation

Open the HTML File in a Webbrowser to preview the customized Game Collection Gallery Animation. To record the Animation for use in Steam Showcase, use Screen recording Software such as OBS(Open Broadcaster Software) or ShadowPlay (NVIDIA graphics card only).

Convert the Recording to a GIF File (Max Size: 5 MB)

After recording, convert the Video to a GIF Format. Use Video-to-GIF conversion Tools available online. Upload the recorded Video File and follow the Instructions to convert it to a GIF File.

Add the GIF to Steam Profil Showcase

Upload the GIF as an Artwork or Screenshot with Console Command (document.getElementsByName("file_type")[0].value = 5;) in Browser.

Example Result: