Change CSS class when element scrolls into viewport
I had a neat visual gimmick on the start page of this blog, that the gray-scaled header image of a post in the list scaled up to 100% and became colored, when the user hovered over it:
1 | .article-inner .article-photo { |
Nice, but a little bit useless on smartphones or tablets, where HOVER doesn’t really work.
A better idea was to transform the header image automatically, when it becomes visible to the user. So I changed the HOVER selector into a class…
1 | .article-photo.in-view { |
… and wrote a little JS function to determine the point, where the images is fully visible in the viewport:
1 | function isVisibleInViewPort(e) { |
This function I had to bind to the windows scroll event to all header images only:
1 | $(window).on('scroll', function() { |
You can interact with this article (applause, criticism, whatever) by mention it in one of your posts, which will also be shown here as a Webmention ... or you leave a good old comment with your GitHub account.
Webmentions
No Webmentions yet...
In case your blog software can't send Webmentions, you can use this form to submit me a mention of this article...
Comments