Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am designing a website using the MEAN stack, although there are numerous tutorials guiding how to go about the development of a web application using the MEAN stack, am not sure what is the best way to add animation to your application. Specifically, should all the animation just sit in the CSS and the html templates reference those classes. What about adding advanced animation features using the HTML5 canvas, what part of the project does it sit in. What is the most generic and cleanest way to add animation to your MEAN application, is ng-Animate in Angular the way to go about it ?
EDIT: What I specifically am looking to implement is an image of a box gift wrapped in a present with a ribbon hanging on the left side of it. Now I want a little boy/girl to drag the ribbon from left to right and unwrap the present. What is the best way to do this , that fits well with the MEAN stack?
This is a very broad question. It depends entirely on what kind of animations you hope to achieve.
Nonetheless, here are a few of my favourite libraries based on experience:
AOS (Animate on Scroll) -
It is a pure CSS3 driven animation library that animates HTML elements in lots of useful ways.
Demo: http://michalsnik.github.io/aos/
Code: https://github.com/michalsnik/aos
Implementation:
You can use a package manager (npm or bower) to install for use in your project. Or download the source code directly.
Spark Scroll -
A Javascript library that also handles scroll-based animations, as well as animations based on view-port visibility. Very powerful, and can be used to do things such as: draw borders on HTML elements when scrolled into view, trigger styling changes based on viewport visibility (ie. opacity), and many other things. Also, very customizable.
Demo: http://gilbox.github.io/spark-scroll/demo/
Code: https://github.com/gilbox/spark-scroll
Implementation:
Unfortunately, there is no native Javascript implementation for this library. Using Spark Scroll requires utilizing either ReactJS (Facebook) or Angular (Google).
Last but not least,
WOW.js -
Another Javascript library that handles a lot of different animations.
Demo: http://mynameismatthieu.com/WOW/
Code: https://github.com/matthieua/WOW
Implementation: http://mynameismatthieu.com/WOW/docs.html
Honestly, I suggest you edit your post and identify what exactly you're trying to accomplish. I will update this answer after you conduct some research with the resources I've provided and determine what animations you wish to implement.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I've been working on an Admin interface for a desktop-first web application. There will be an iOS application for mobile users and if we need browser support on mobile, a mobile-first UI will likely be designed. I've only been working with CSS/JS/HTML for about 30-days, so please forgive any mistakes I make.
to get rolling, I started using Bootstrap, however, I ran into a number of issues and decided to abandon it. I do not require responsiveness in the traditional sense of a grid system and fine tuning my design using a grid model was truly painful.
I discovered on my journey that using #Media, I could adjust the CSS for various elements based on screen resolution and even go so far as to remove an element using width="0" and introduce a new element by turning it's width on. I'm using flexbox for my layout, which I find to be incredibly effective to work with and provides me with solid control over the presentation of my UI.
I plan to eventually convert my admin into a EmberJS app, which give me even more control over when and how elements are displayed.
Although I'm still learning, I've found resources like w2schools.com to be very helpful in adding elements like a sidebar using plain JS and CSS. This keeps my application simple and easy to follow, rather than having to work with a monolith framework.
My question is, is it acceptable to adjust your design based screen size and add and remove elements using a width="0" as the toggle or is there a better way? Also, is it acceptable to adjust your layout overall using #Media versus a grid?
I'd like to eventually turn my app into a native Windows app using Electron so I'd like to not make any bad choices that will cause me problems later.
Thank you for your help.
is it acceptable to adjust your design based screen size and add and
remove elements using a width="0" as the toggle or is there a better
way
there is a better way:
use css display: none property to hide and show elements but this also removes the space occupied by elements.
If you just need to set visibility off then use visibility: hidden
is it acceptable to adjust your layout overall using #Media versus a grid
yes its fine to use #media queries. But using bootstrap grid system is pretty easy and it can also handle cross browser issues which otherwise you would have to handle manually.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
So I have created a layout for polymer that could be used as a general site layout. Which in the processes I created 2 custom elements, which are available via git hub.
The problem I am having is the CSS cannot be set for sub components.
I am thinking that is a browser issue but I am trying to verify. It works perfectly in Chrome (of course).
But in Firefox and IE the main header does not change.
Then there are other various differences. For example in IE if you open the search none of the drop down options appear until you click on it. In FireFox when you open the search the layout is off.
To view it you can goto
This is the default/original layout just something for a starting point.
http://trutekinnovations.com/
This is a dark theme I am working on and how you can see the issue
http://trutekinnovations.com/jbtheme.html
This is actually for a couple of personal projects I am hoping to launch within 6 months to a year. I know polymer is not production ready but I am betting the farm per say that it will be by that time.
Does anyone have any suggestions. I tried turning the CSS into variables in the component but that did not work.
I was about to try pulling out the CSS and then seeing if I Could make it external and have the CSS url be a variable that defaulted to a local version.
That is what I will probably try tomorrow. The problem is I understand this is new and instead of doing what I have done in the past on new emerging technology (which is beat my head against the wall till I get it to work) I want to actually try using the community.
Plus I hope people check out my components and help me improve them. Thanks for any tips/suggestions.
Well, I was able to solve my own issue using the method I suggested about dynamically loading CSS.
I found the following site:
http://japhr.blogspot.com/2014/06/dynamically-adding-external-styles-to.html
Which I was then able to use that code to modify it so I can load a base CSS class and then load a custom theme, or multiple custom CSS. Technically I can pull out colors and have it dynamically load the base css, and then load a default theme. Which is probably what I will add next.
To see the code you can view the github
https://github.com/tikicoder/trutek-header-panel-drawer
To view the demos:
http://trutekinnovations.com/
http://trutekinnovations.com/jbtheme.html
It would have been nice if I could have done it using something like
I did try that but it did not pull the variable. I could do that in the style tag and pass custom CSS, but it only worked in Chrome.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Im trying to get a sense for proper web development techniques , and im wondering if there are any habits i should be developing outside of css usage in terms of structure and layout.
What I've gotten so far is a sense that strategic and logical use of divs can help to give needed control when working with javascript and css.
But are there any other basic things i should consider that may not be aware of?
For example, I know people used to control layout with tables, but is that still a thing? Or is it now bad practice?
Looking forward to your suggestions.
Regarding your table question- People generally choose divs over tables, BUT some things cannot be done well without tables. They still have their place. Divs and Tables inset within each other are often used for datagrid styled layouts for example. Often replacing tables with divs creates a nasty (oversized) amount of css code. If you can use divs cleanly, that is perfect. If it overbloats your code, then use the simpler cleaner old faithful table code - or combine them where it makes for better results.
More info on that here: Tables instead of DIVs (Joel Coehoorn's detailed answer: "The whole "Tables vs Divs" thing just barely misses the mark. It's not "table" or "div". It's about using semantic html.")
Regarding the topic of non-CSS since your question also refers to layout design formatting:
There are some things you cannot do well also without pure CSS, that in and of itself allows modern formats to work on multiple devices. This will reach more customers.
For newer layout types for sections of pages needing icons or photos, look into the use of inline-block styled lists. CSS does wonders with them. It is a nice third alternative.
For cross-device development, you should check out responsive and fluid formatting options. A good place to start is to look at http://html5boilerplate.com/ and also http://www.initializr.com/ (boilerplate and bootstrap).
If you haven't worked with them before, look into media queries for browser sizing and device orientation displays (landscape or portrait) - part of the fundamentals in responsive web development. You can then use your regular html within the constraints you set with these.
Try to think of your pages/documents in terms of structure rather than appearance. For example, a book is made up of a title page, table of contents and chapters. Similarly, the contents of a web page can usually be broken down into logical blocks, which are then styled as required. Don't forget that web pages may be read by screen readers - your want to structure your page so the spoken output makes sense.
There has been a discussion of tables vs CSS at Why not use tables for layout in HTML?. You may also want to check out CSS Zen Garden, mentioned in that thread. Beyond this, I strongly recommend validating any HTML and CSS you write. Check out http://validator.w3.org/ for that purpose.
Divs are span are a better options for laying out a page. Tables should be used if tabular data is to be displayed.
Other than that you should mostly consider re-factoring redundant code regularly and resolve paths to directories in config files. This will help you to manage your project better. Redundant code can become a huge problem, since making changes requires changing code at several places. Make sure that you re-factor code that is being used more than once or twice into functions and call them instead.
Try diving into CSS frameworks such as bootstrap or foundation since a big community contributes there and are usually built with best practices in mind. You will be surprised to see the problems you run into have already been encountered by many others and they have found an efficient way around it too. There are frameworks and libraries for JS too. Feel free to explore.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm a beginner in web animations(canvas and svg). I have seen some work and examples in Chrome Experiments and am really excited to dive in. However, whenever I'm trying to do anything remotely decent or following any tutorial that seems a little bit interesting, the sheer amount javascript that has to be put in is proving to be a huge turn off.
For example, if I want to do any simple svg animation, I have to manually place the co-ordinates to achieve the effects. If there were any GUI tool to work with SVG or Canvas that would produce the initial movements(i.e. If I want to move an object from A to B, I'd like to do it by hand rather than counting the pixels) then the subsequent tweaking would be a lot easier. Are there any tools that help you achieve the effects? If not, what's the standard way to draw and animate svg graphics/canvas animation today?
Hype, Sencha Animator , Adobe Edge Animate are tool you might want to use if your purpose is to do animation with web technologies.
The problem with the link you provided is many of the exemples involve quite a lot of programming. It's not like Flash where you could do crazy stuffs with little programming knowledge. So you are not going to do crazy stuffs with any of the program I cited. By the way flash now exports to web techs so you might want to look into that.
You will have to write some javascript to make a decent animation with Canvas or SVG, as most of the previous software work with the DOM.
But you can cheat, a lot of agencies now use video (from After Effect) for animation directy, and you can manipulate video through canvas, do compositing etc ... the problem will be the size in that case.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
Does html5 help developers animate vector graphics in any way? I'm talking about straight key-frame vector animation, such as what flash does.
Is the way to do this basically using javascript to manipulate SVG graphics (such as what http://www.raphaeljs.com does? which is a bit weird to me since it's been supported in browsers for quite some time) or does html5/canvas lend itself someway to vector graphics animation?
I'm just trying to understand what's the "new" way developers will animate vectors on the web if/when flash plug-in eventually dies.
Thanks
There's also CSS animation, which is declarative and can be more efficient because the JavaScript code is not pushing the animation.
But there's nothing inherently wrong with the SVG approach and it's more compatible as well.
Currently there is no alternative for complex animations like the animations you can create with Flash (eg. shape-tweens or animations with 3d or bones), and I personally I think Flash is the way to go if you want crossbrowser killer animation. The Flash IDE offers lots of animation features which are not implemented in any other current web based tool. HTML/css is very limited, since it does not fully support skew/rotation/perspective in all browsers and in HTML you cannot animate background images too. However you can create programmatic tweens (like motion-tweens) with Javascript. At this state of HTML you must be a bit hardcore programmer to get a serious DHTML animation and I think you have to deal with CSS sprites or other blitting techniques to get some performance. Beside animation, Flash offers filtering and blendmodes too, which you would like to use in great animations too.
You can use the animate() function from jQuery for very simple animations (move, fade, slide); you can change properties over time. For a lot of web applications; this could enough. But if you want to animate vectors or want frame based animations; Flash is currently the best choice.
PS. What is wrong with animated GIF's?
This might be interesting in the future. It is a flash to Html5 conversion tool form Adobe. Maybe there is a future on the web where the two technologies converge to a single purpose in stead of being two concurrent technologies side by side.
We may well agree that flash has some drawbacks, closed, slow technology. But I can not believe there is no knowledge in the flash source code, its developers and the large amount of users that could be helpful in the development of Html5. Flash is an easy to use environment for creating animations. Such an environment just does not exist for Html 5. So I believe there is room for flash and Html 5 together.
Edit
You should check out Adobe Edge Preview. a new tool from Adobe for creating rich HTML5 animations.