Menu icon Foundation

Developer

My Posts

  • 1
    Reply
  • Clearing + Block Grid

    By Steve Alpine

    clearingblock grid

    I made a gallery/lightbox with Clearing and used Block Grid to handle the layout of the thumbnails. This is the technique used on the Clearing documentation page, although there is no reference to it in the example code. The results were good except th... (continued)

    Last Reply by Matias Almeyda over 5 years ago



My Comments

Steve Alpine commented on pixelkai's post over 4 years

Hi Darryl,
Try using absolute positioning on the accordion-icon:before and set values for top and right.
Seems to work fine.
Best,
Steve

Steve Alpine commented on Steve Alpine's post over 5 years

Thank you for the helpful suggestions. Using the transitionend event I've been able to create the desired two step transition and the scaled images are being smoothed as exected (no jaggedness, blurriness in various browsers).
This option does work, but I'd really like to understand why the @keyframe animation results in the degraded image quality in this specific scenario (and if there is a way to make it work).

Steve Alpine commented on Steve Alpine's post over 5 years

I don't have a link because it is just on a local machine for now but I made this pen:

http://codepen.io/stevealpine/pen/igLhj

there are 3 sets of images (each has a row of 64 px which remains natural and a 512 px which gets scaled)

first set - no fade, all good

second set - faded with keyframe rule animation (64 px ok, 512 px scaled images are jagged in chrome)

third set - faded with transition (in this case simply on page load) - all good

So, to answer your question Karl the edges are only jagged in the animation version.

kept this simple and only put in -webkit- css rules

The pen appears OK in safari, but on the local machine with higher resolution jpg images, the scaled 512 which are jagged in chrome are pretty blurry.

I'm trying to do a multi step animation, first on the img and then on the containing li - that is why i'd like to use @keyframes animation.

thanks for any help!

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on pixelkai's post over 4 years

Hi Darryl,
Try using absolute positioning on the accordion-icon:before and set values for top and right.
Seems to work fine.
Best,
Steve

You commented on Steve Alpine's post over 5 years

Thank you for the helpful suggestions. Using the transitionend event I've been able to create the desired two step transition and the scaled images are being smoothed as exected (no jaggedness, blurriness in various browsers).
This option does work, but I'd really like to understand why the @keyframe animation results in the degraded image quality in this specific scenario (and if there is a way to make it work).

You commented on Steve Alpine's post over 5 years

I don't have a link because it is just on a local machine for now but I made this pen:

http://codepen.io/stevealpine/pen/igLhj

there are 3 sets of images (each has a row of 64 px which remains natural and a 512 px which gets scaled)

first set - no fade, all good

second set - faded with keyframe rule animation (64 px ok, 512 px scaled images are jagged in chrome)

third set - faded with transition (in this case simply on page load) - all good

So, to answer your question Karl the edges are only jagged in the animation version.

kept this simple and only put in -webkit- css rules

The pen appears OK in safari, but on the local machine with higher resolution jpg images, the scaled 512 which are jagged in chrome are pretty blurry.

I'm trying to do a multi step animation, first on the img and then on the containing li - that is why i'd like to use @keyframes animation.

thanks for any help!

Posts Followed

Following

  • No Content

Followers

  • No Content