Blurry parallax image in Review
Jun 03, 2021
Hi Folks! I made my first parallax interaction and when I publish to Review it is SUPER blurry and seems to get slightly better then worse then slightly better--like it is trying to focus the image but can't quite. It is also much worse when the cursor is in the player frame and not on the image. If I preview the slide only, it is better (Still blurs when the cursor is on the player). I am hoping this is happening because Review maybe publishes a lower-resolution version of the course and when I actually publish to the LMS it will look right? My image is huge--probably bigger than it needs to be because I thought perhaps it was a resolution problem and increased the size. I am currently using a JPG, but I have tried different formats. Here is a link to a screen recording demonstrating what it looks like. The first example is on Review, the second is from "Preview: This slide only." https://360.articulate.com/review/content/f8be9b25-0b65-439a-8f00-fd7a46a0e4c5/review Thanks!
11 Replies
Hi, Kristin.
Thank you for opening a support case with our engineers! I see you're working with my teammate Renato, so you're in great hands.
Please reach out to Renato through the case if you have additional questions!
Thanks!
Get rid of the hover state and that may help a little
Thanks, Tom. Removing the hover keeps it from moving in and out of focus, but it is just always blurry now. (see image)
So, is the quality I see in Review the quality I will see when published? Is there a certain size and/or resolution recommended for a parallax slider?
Hi Kristin,
It looks like Renato is waiting on your image so that he can take a look. Please reply to his email so that you can work with your support engineer further.
I uploaded the images last Friday using the link he sent through email. I just resent them. Please let me know if they are not received.
If the image quality is better as a hover, you can play around with setting that state as the initial state.
I have the webinar on parallax and there's a template I use when I do that effect. Keep in mind, you're inserting a massive image into the thumbnail of the smaller slider; so it is a bit of a hack and not really how the slider is designed to be used. There will always be some degradation when you scale an image down.
You can also play around with your course size because that gives you more pixels and may help preserve some of the image quality. Example: if you bring a 3000x2000 (6 million pixels) into a slider in a course that is 720x540 (388,800 pixels) you can see that's a lot of pixels that are removed.
Link to the webinar:
https://training.articulate.com/webinars/create-parallax-effects-with-sliders-in-storyline-360
I see. So my initial reaction to INCREASE the resolution because the picture was so blurry probably made the problem worse? I will watch the webinar and try adjusting the resolution of both the course and the image. Thanks!
It's hard to say. When images get compressed, it's always a trial and error process.
Thanks, Tom and Renato, for your help! I was able to significantly improve the visual quality of the parallax interaction. I deleted the hover state and that kept it from changing focus. I increased the slide size and decreased the image size and resolution to ease compression. I will probably tweak it a bit more, but now I know it can be saved and I can use this in my course. :-)