comprar viagra online
comprar viagra generico barato
comprar cialis generico online
comprar cialis online seguro
Your two cents - CSS3 animation and Lazy loading |
Normally, I would ask questions/opinions from people through Twitter. But sometimes, you really need more space for the question/opinion than 140 characters. That's why I wanted to try a new concept on Marcofolio, called Your two cents. I'll lay down two statements (one cent each), and you're free to share your opinion with the world. Of course, I'll share my opinion too. Keep in mind these are just opinions from me (and hopefully others in the comments) and not facts. If this concept gets loads of response, I'll continue thinking about other statements. Here are the two statements on which I'm very curious about what you think about them: “Animation properties, as added in CSS3, don't belong there.”Webkit based browsers (Safari and Chrome) support CSS animation ( “Lazyloading images should be implemented on every website.”Lazy loading delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. So, what do you think about these two statements? Join the discussion! My two cents Animation properties, as added in CSS3, don't belong there. I have to agree, using the Let's break it down into the two pieces: BehaviourThere always was a nice split between four different things:
I personally think the CSS animation properties are behavioral things - it tells an element what to do, not how it should look like. Currently, animations are the domain of JavaScript and I think it should stay there. ComplexityCheck out the following CSS animation examples in order to make a transition and an animation. selector { transition-property: margin-left, border-color, width, height; transition-duration: 0.5s; transition-timing-function: ease-out; } As you can see, the If you think the selector:hover { animation: 'wobble' 2s; } @keyframes 'wobble' { 0 { margin-left: 0; } 40% { margin-left: 15px; } 60% { margin-left: 75px; } 100% { margin-left: 100px; } } This looks more like JavaScript than CSS to me. As you can see, you declare some sort of function call ( "Lazyloading" images should be implemented on every website. At first, lazyloading looks great: it only gets the image from the server at the time the user actually needs it. This will probably save your server loads of bandwidth, especially when you have long pages with loads of images (which not all people will view). But only after seeing blogs like Francesco Mugnai and PSDTUTS+ having implemented the feature, it really started to annoy me a little bit. Bad user experienceThe solution could be very good for your server, but you'll remove some of the user experience. I normally would load a page (on a different tab), wait until it's fully (mostly) loaded and than start scrolling to view if I see something interesting. With the lazy image loading, I need to stop scrolling every time an image will appear. This makes multi-tasking pretty hard. Another downside is, when using this technique, when you don't set the What are your two cents? Tell us what you think! Tags: two cents opinion comments css3 transition lazyloading Interested in this topic? You might enjoy another article I've written called |
< Prev | Next > |
---|
Search |
---|
Or try the sitemap |