Joomla Templates Club 406,261 posts

[sobe Friend sobeJoin date: June 2010Posts: 249Downloads:13Uploads:20 Thanks: 32 Thanked: 4 times in 1 posts]

#813924

The logo image becomes out of focus when it becomes smaller upon scrolling down on the browser. Rather than using the small-logo-image defined in the template settings, it seems the blurry image is the same as the large-logo-image, but resized via code, which may be causing the blur.

This problem happens in the JA Magz II demo-template as well. The small logo becomes very blurry right in the end of the resizing transition.

How can one prevent this blurry effect?

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#815106

Hi @sobe,

May I know your site url so I can have a look at the problem first ?

[sobe Friend sobeJoin date: June 2010Posts: 249Downloads:13Uploads:20 Thanks: 32 Thanked: 4 times in 1 posts]

#829135

Hi Adam,
The site hasn’t been uploaded, but this issue clearly occurs in the demo page (when scrolling downwards).

http://www.joomlart.com/demo/#magz-ii

I still haven’t found what’s causing the blur, as the logo image is sharp until the very last moment when the resizing-transition concludes.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#829689

Hi @sobe,

Actually it’s normal result when we scale the logo via CSS code. If you don’t want to scale it, just open file templates/ja_magz_ii/css/custom.css (if you don’t have this file, please create a new one) then add this code :

.scrollDown .t3-header .logo-img,
.scrollUp .t3-header .logo-img {
     transform: none;
}

[sobe Friend sobeJoin date: June 2010Posts: 249Downloads:13Uploads:20 Thanks: 32 Thanked: 4 times in 1 posts]

#829747

Hi Adam,
Thanks for the explanation.

Your suggestion, however, keeps the logo from resizing at all, dramatically affecting the visual aesthetic of the template. Simply put, a large logo does not look good in the smaller menu bar.

Is there anyway to keep the size-transition and have it conclude with another separate smaller image (thus, it wouldn’t need to be scaled)? Or any other solution to prevent the blur?

I’m rather disappointed this template creates the blurry logo, whatever the explanation. I’ve never seen this in other sites, and it makes it look unprofessional.

Thanks for helping out.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#830545

Hi @sobe,

You can try to replace the current logo with mobile logo (smaller) when scroll. Open custom.css file above then add this code :

.scrollDown .t3-header .logo-img,
.scrollUp .t3-header .logo-img {
    display: none;
}
.scrollDown .t3-header .logo-img-sm,
.scrollUp .t3-header .logo-img-sm {
    display: block;
}

[sobe Friend sobeJoin date: June 2010Posts: 249Downloads:13Uploads:20 Thanks: 32 Thanked: 4 times in 1 posts]

#837180

Thanks Adam, that worked great!

I was looking for the "Thank you" button, but I guess the new Joomlart layout doesn’t have it anymore…

Quick question: though the scrolling logo is now on focus, is there anyway to keep the smooth transition between the big and small logo?

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#837958

Hi @sobe,

Unfortunately it’s pretty tricky to do that, since you can easily apply a transition to 1 element (opacity, scale, etc …) but in this case, it’s about hide 1 element and show another element when scroll up / down. Whatever we implement here, the page still "jump" due to the difference between theirs height.

[sobe Friend sobeJoin date: June 2010Posts: 249Downloads:13Uploads:20 Thanks: 32 Thanked: 4 times in 1 posts]

#838424

Hi Adam, thanks again for the follow-up explanation.

I’m currently facing two rather disappointing options, either an out-of-focus logo (original code) or a motion hiccup (after suggested edits). I presume a proper solution to either will not only be helpful to me, but it may ultimately be added to future updated versions of the template, and thus serving other Joomlart customers as well.

Is there no better way to fix this?

Going back to the template’s original format/code, I’m rather puzzled by the blurry result. I’ve scaled images before and they rarely change in appearance, only when the size dimensions are different. Is that what’s happening?

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#838909

Hi @sobe,

Actually I’m testing at my end with a normal LCD instead of a high resolution one, so I cannot see the blur image you’re mentioning about, just try to provide another way till you’re satisfied with it.

In case the above solution is not good enough for you, we can try to resize the logo instead of scale it. First, revert all changes above and add this code to custom.css file and let me know the result :

.t3-header .logo-img {
     height: 55px;
}
.scrollDown .t3-header .logo-img,
.scrollUp .t3-header .logo-img {
     transform: none;
}
.scrollDown .t3-header .logo-img {
     height: 35px;
}

[sobe Friend sobeJoin date: June 2010Posts: 249Downloads:13Uploads:20 Thanks: 32 Thanked: 4 times in 1 posts]

#839370

Hi Adam,
Your most recent suggestion actually makes the logo small from the beginning (the same size as when previously scrolling). And now when I scroll, the image goes even smaller.

The blur did mostly disappear however, suggesting that such resizing works. We just need to figure out a way to keep the sizes as before.

I’m surprised you can’t see the blur on a LCD screen. It may we worthwhile to see this problem on a more common screen, as your suggestions should likely be adopted into updated versions of the template. I’m definitely not the only one who sees the blur.

Thanks again for your assistance. I’ll await further instructions.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#839778

Hi @sobe,

In this case, mostly because you’re using different logo size, please provide your site url so I can have a look first and assist you better.

[sobe Friend sobeJoin date: June 2010Posts: 249Downloads:13Uploads:20 Thanks: 32 Thanked: 4 times in 1 posts]

#840514

Hi Adam,
After a lot of research I found a rather simple solution.

One simply needs to add the following edit to custom.css:

.scrollDown .t3-header .logo-img, .scrollUp .t3-header .logo-img {
transform: perspective(1px) scale(0.7);
}

I recommend adding the following code to the template in its next update.

Thanks again for your help!

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#841160

Hi @sobe,

I’ve just created an issue so our development team can check and update it in the template. If you still have any question, feel free to let us know.

Best regards,

Adam.

[Author]

Posts