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 7 years ago.
Improve this question
I have a problem with this animation in jquery, it seems to be jerky with all browser.
This is the link:
HERE
You have to click to "Fotovoltaico" and "Fotovoltaico a concentrazione" for see the animation problem.
It's your margin-top rule, i guarantee it, i've had this before. Add easing to avoid the jerkiness
As I first suggested below, I have confirmed it is your jquery version...
http://jsfiddle.net/4EKk8/1/
I can prove it by using the above jsfiddle that is just a copy/paste your actual code on the example site.
Simply switching the jsfiddle to use jQuery 1.5.1 from 1.2.6 (your version) fixes the issue.
So... As I said at first.
First of all you are using jQuery 1.2.6, I would recommend using an updated version.
I had some jerky animations -- my problem was that I had a min-height on the element in the CSS -- removing that fixed it.
This animations are dependent on the performance of your browser/computer; also how many elements and how much redrawing is required on our page when things are moved around.
Unfortunately there isn't a lot you can do apart from reduce the amount of elements/js on the page.
If it's any consolation, I've been running FF all day and it worked fine for me.
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
So I was working on a web development project using HTML and Tailwind css, Everything is looking fine on desktop mode but as soon as go to mobile mode the index page shows some extra space on the right side of the page. Tried using overflow-x :hidden but it doesn't fix anything. I have attached the Image and Live demo of the project below.
Heroku Live demo
Hi,
this problem faced me and i have solution.
This problem because you make the menu to go right and this cause scrolling horizontally and overflow doesn't work
Mobile Ignore overflow on body tag
Try to make div and hold your page content and give him
overflow-x: hidden.
It will work
The problem is related to the markers added by some lib, maybe the one taking care of the animations.
If you remove them before changing to mobile view, the space on the right side disappears.
I had same problem and for me was hepful overflow-x: hidden
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 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.
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 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
I am working on a jQuery slider for a web page. Everything looks great in IE, but in Chrome and Firefox, there is some kind of weird padding issue going on above and below the slider.
EDITED: See my solution in the answers.
Never, ever use IE as a reference for how things should work. Always, always use any other browser first. THEN look to see how IE screws things up.
Your doctype is incorrect for the modern web and puts IE, and other browsers, into "quirks mode" where you never want to be. Then you marked up your page with that browser, assuming IE, that's pretending it's 1998 all over again. Change your doctype to this one <!DOCTYPE html> and use Firefox or Chrome to correct your markup cause, then, even IE will look different. Yes, it might only mean making adjustments or, possibly, starting all over again.
This is not including your 13 HTML validation errors and 14 CSS errors.
Woot! I figured it out. There was a "display: table" line in the CSS that was jacking it up. Removed that, and it works fine now.