I got inspired by this website: https://brittanychiang.com/ especially the animations.
The ones which appear at the header when page is loaded are just typical css animations with delay or something. But when you scroll down and the another sections are visible the animation appears again and only once. Can you do it with pure CSS or you need to include JS?
Are you talking about the float-up animations on scroll? If yes, that can be done using CSS but might require some javascript as well based on your requirements to setup the animations. You can read more about it here.
Alternatively, you can use this as well to get your work done easily! However, since you want the animation to show up only once, you might have to make some changes using javascript.
Related
How do I create a text animation like on this page.
http://www.kikk.be/2016/
When you hover over Main Menu item this menu item starts random animate each latter in this menu titel.
The animation you are talking about, don't even use javascript. You can see this when you disable javascript and visit the site.
My guess would be, that they just use css for the animation and that it is not realy random, but just a set of animation frames played fast.
Here is an explanation on how to use css animations in general.
And here is an explanation on the hover selector in css which allows you to specify mouseover actions and can be simply used together with the animations.
I have a page with dynamic content which has around 1600 lines on the <body>, and on the CSS a lot of images (I'm using CSS sprites and only using image where it's really necessary). But I still need to use jQuery UI effects and .fadeIn() and .fadeOut().
But when I use those effects, they run very slow. Not slow like .fadeIn('slow'), but slow like breaking, like it's not normal... they don't look like the demo on jQuery website.
So, I assumed that was the large content of the page and images, so I made a test: run the page with just the header and the menu (where the jquery effects are running). With that, there was only a few images and only a few html elements and the effects run fine.
But I can't remove all the content and leave just that, I need the effect to run smoothly like it did with nothing there. Is there a way to do that? How?
Right now, every time I try to render a page, I will calculate the $(window).width() first and then add a corresponding class for the root html element, which will final determine the block width of some main responsive elements in the page. But this approach goes with a problem. It will first render the page with a initial default width, and then after the class is added, it will adjust the element width, which will create a non-smooth visual effect.
To overcome this, I then make all the responsive elements display: none in the first place and make them visible after the width calculation is done. But for a user, it takes more time to see the page in this way.
So I was wondering if there is a way to achieve this responsive page in a more efficient and faster way?
If you are using javascript to create a responsive site, there are much easier ways.
For example, there are TONS of free CSS based frameworks you can utilize to make responsive pages that the CSS controls, which doesn't eat up nearly as many resources as a javascript solution. Lots of DOM manipulation with javascript can get pretty hairy pretty quickly.
My suggestion would be to look into some of the following:
Foundation: http://foundation.zurb.com/index.html
Skeleton: http://www.getskeleton.com/
I personally use foundation for my development, as its easy to read/understand and it produces rapid development.
Example: http://www.sinsysonline.com/secondhomehostel
If you are ABSOLUTELY dead set on having Javascript handle your DOM rendering, it's going to be much slower than a CSS responsive site.
If so, try out:
Response JS: http://responsejs.com/
If you would like further clarification for a specific problem, could you please provide your code and I'm more than happy to provide some feedback on that.
CSS media queries allow you to apply CSS based on screen size. The advantages of this over your approach are:
1) The CSS will read the window size immediately
2) The page will automatically adjust if the user resizes the window (or rotates their tablet)
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
You need to use css3 media queries which is very useful to create responsive website. You need to write css according to viewport width. Please refer the link from which you will get all the idea about responsive website.
I hope this will help yo to work on the responsive websites.
I have a grid of div boxes that I will be animating. They will be moving across the screen after a user drags one of the boxes (to re-align into a grid).
Currently I am using JQuery to change the css left and top positions of all of the divs and running this on an interval.
It is laggy if there are more than 50 boxes. How do I make this less laggy? Is there an animation library that is better for this, or do I just need to limit it to 50 boxes?
Image of layout:
You have a few options to optimize the performance.
Newer browsers have requestAnimationFrame that lets the browser take care of the animation timing in order to optimize Javascript animations. Rather than using times to perform the animation, which is what jQuery framework uses, you repeatedly a callback to requestAnimationFrame. The browser will call your function with a progress variable for the animation, and you render the current stage of your animation based on the progress variable. requestAnimationFrame for smarting animating talks about this in depth. Google Closure is the only framework I am aware of that uses requestAnimationFrame however, and it's rather heavyweight.
CSS animations. jQuery offers CSS animation, so do many other frameworks. CSS animations give you hardware acceleration, so the animation is much faster. Unfortunately, CSS animations are relatively new and not yet well supported, so you'll probably end up falling back to Javascript animation on older browsers, depending on the library you use.
Optimize your Javascript. Instead of animation each and every box in the grid, encapsulate each row in a div and animate the entire div instead. That should speed the animation up by a bit. I'm sure there are other ways you can optimize based on your current implementation.
Honestly, I don't know of any library that will make this work more efficiently for you, though there are many libraries out there that are faster than jQuery. The issue isn't just the jQuery, its the fact that you have 50 elements that are all moving/draggable, thus requiring a lot of the browser's resources.
If you can post your code there may be a few things that we could suggest to speed it up slightly.
The two biggest things problems that I can think of are if you added those boxes programmatically and added the handler for each as you added the element to the page, and if you don't store your selectors in variables. Aside from that I would have to see the code.
Have a look at:
jQuery isotope
It has options to allow you to use css3 animations if available or use jQuery / JS animations.
Handy for grid like animation and arrangements.
Some brave soul has managed to add drag and drop to isotope too. http://tyler-designs.com/masonry-ui/ (a bit clunky but works)
There are several ways of increasing the performance. One would be to reduce the amount of DOM elements required for each box. Another is to not animate (and render) boxes outside of the current viewport. Give all boxes that are outside of the viewable area "display: none;" and exclude them before starting a new animation. If you want to go even further you can start to recycle boxes instead of showing and hiding them when the user is scrolling through the page.
This way you will always get the same performance no matter how many boxes you have (above the amount that you can fit in the viewport).
This technique is called UI virtualization. There are several projects that use it like: http://github.com/mleibman/SlickGrid/wiki. It's really useful when you need to render a lot of elements (hundreds, thousands, millions). But it takes quite some work to get it right. And I don't know about any generic working components that are easy to plug in. I tried to find an article that explains it. This is the only thing I could come up with for now, it's for Silverlight though: http://www.silverlightshow.net/items/Virtualization-in-Silverlight-4-RC.aspx
Also try this this plugin for jQuery. Use the regular 'animate' method and it will try to use (hardware accelerated) CSS animations where possible: http://playground.benbarnett.net/jquery-animate-enhanced/
What would be the points you validate when considering a new menu for your website?
Why should i choose complete CSS based menu ?
Why should i choose Javascript/CSS based menu ?
whats is the benefit in choosing either of them?
Is CSS menu old ? or is it limited in features! I dont think CSS menu is old as i still a pick a thousand web2.0 site using complete CSS menu (No javascript to control its dropdowns).
I default to pure CSS unless there is something I can't pull off with CSS animations, then I'll consider switching to JS. It's pretty rare you'll need the JS unless you need some fancy timed animation across multiple elements or something wacky that CSS animations can't handle.
Using pure CSS the menu still works even when the client has JS disabled. Plus with pure CSS it's usually less code, which is always nice.
A nice way to look at it: would you use JS to change the color of a link when you hover over it, or CSS? This is just a more complicated, but usually similar, question.
CSS controls the layout (and limited interactions, such as hover) while Javascript controls logic.
If you don't need any logic in your menu (such as displaying a hidden div element as a submenu), then using CSS on its own is just fine.