Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have an example of what I'm thinking of as I can't really describe it, I hope people won't mind me putting a direct link to a commercial website but anyway:
https://www.bladux.com/shared-hosting
Near the bottom theres a segment with 6 div elements that animate in similar ways when you hover over each one.
At first I suspected that onmouseenter the still background images were being replaced with GIFs but then I realised that onmouseleave was somehow "reversing" the animation from the point at which the animation had completed when onmouseleave occurred.
I'd love to know from a technical standpoint how someone goes about doing this, I don't need any specifics or examples. I just can't think of anything past GIFs.
The cleanest way to handle animations is with pure CSS, so that you don't bog down your Javascript code with styling logic unnecessarily. From my experience, if you can handle these things in CSS, that's usually the best solution.
Here's an example of how to implement the basic effect that you're trying to accomplish.
The key elements to notice here are the transforms and transitions. No JS necessary.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
http://www.mikimottes.com/ this is the website I'm asking about!
I've learned how to make simple animations. But when I discovered this website, I fell in love with it and want to learn how to make such websites. And I'm wondering how can for example the images animations, how are they developed? I have a few suggestions that it may be something related to GIFs but how then the GIF can be controlled? As sometimes animations of images stop and then something triggers them to animate. It seems impossible with GIFs. It doesn't seem like a js animation. Please assist me on that question. :)
These effects are based on plain CSS animations. You can easily see the styles and parameters used by a given animation with your browser developer tools (e.g. in Firefox, right click on an animation and select "Inspect Element").
For instance the little blue critter hovering between the two wind turbines in the top left corner is animated using this image:
To get a very basic idea of how it's done, you can look for instance at this blog post
I suspect you would need some extra tool like a decent paint program to automate some steps (e.g. using layers and generating the succession of frames automatically from a collection of drawings) but I guess it can be done by hand for simple cases.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
i'm trying to build a bootstrap design with nothing special but a few columns and some information. First of all, i'd like to know if my code is alright, because I can see that items are not going like column below column as it should be after seeing the page from the small devices. I'm actually feeling now pretty sad about this, because i'm so exhausted that I cannot fix it anymore. Trying, trying and trying, but no results. Maybe you can have a look at my code? (I'd like to add a snippet, but for proper results there is a full source which I added here
Another question, I need to setup the min-size where bootstrap starts wirking from 320px. Where could I do this?
Fiddle HERE!
I took a look at your code and it seems that your problem is mostly just a general misunderstanding of how bootstrap responsiveness works. I would suggest reading up on a bit more to get an idea of how it is used in practice. When you set all your columns to be the same size then you take away what makes bootstraps responsiveness useful. Try making it so as the screen gets smaller, the components get more columns such as
<div class="col-lg-6 col-md-9 col-sm-12">...</div>
This will take a good amount of experimentation for it to look perfect! :)
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
My website is not mobile friendly. The problem is with the main banner and menu. The main banner is not coming properly in mobile devices. Remaining things are coming fine. Kindly give me the solution to this problem. Below is my site link.
http://www.unicomlearning.com/2016/NFT_Con/
People will get frustrated at you if you ask a question without giving specific prior results from what you've tried and the actual code you think might be the problem. That being said from what you said I can try to help you. So the most obvious thing for responsive design is using pixels for measurements is usually going to be a no go. If the header is the problem you should probably make sure all of your width is based in percentages instead of pixels. Also make sure your media queries actually work. Best of luck! Keep in mind for the future people are pretty wary of visiting strange websites and also nobody wants to help when you just give us your project and tell us you need it fixed! Best of luck however!
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
There's this really cool effect I'd like to recreate, however I don't understand how the developer is achieving it. I've looked at the source - but I still don't quite understand.
The site is: http://drewwilson.com and below will be a couple of screenshots of what is happening.
When I click on the ellipsis on the header, a little about element pops up and the actual site 'zooms' backwards, leaving whitespace around it's border and greys out.
I can't see any javascript or jQuery doing it, so i'm assuming it's css?! - Although I might have missed something totally - so any help is appreciated :)
Inactivated
Activated
I think the whole page is wrapped in a div which have a 100% height and 100% width. So you have a control over everything inside that element.
You can achieve that by using css3 transform: scale(value); and of course jQuery
see samples here
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 not sure if this should be under a different question or not, but I would like to know where to start with this. I have a set of 84 cards front and back, when a user starts, he/she sees the front(question) side of the card, then, he/she clicks the flip button and sees the back(answer) side. On the answer side, there's a button to continue to the next card. My question is, how would I set this up without creating a lot of show/hide/toggle functions, while animating each of them, for each card?
Take a look at jQuery plugins at official website or at Google. You need to find some plugins you want. See, for example:
http://www.jqueryrain.com/2012/12/best-jquery-page-flip-book-effect-with-examples/
http://blog.guilhemmarty.com/flippy/
You will get more help here with some code. But you need to find first the code example.
I think this links above are good places to start, and choose a plugin is probably the best way for you now. Maybe you find exactly what you want in a plugin, maybe you just need to extend it.
I like this 3d card flip jquery plugin: http://www.zachstronaut.com/projects/rotate3di/#demos
If you want to use jQuery as a starting point for the abstraction of this problem, then maybe jQuery widgets are a good pattern: http://jqueryui.com/widget/