This is an amazing effect like PPT. Link is here :
http://udc.weibo.com/builder2011/data.html
I know single part was made by css3-animation effects but I don't know
1.how to play all these effects in a timeline?
2.how to make position change and local to whole effect?
Where can I find a tutorial like this?
Thanks cordially.
You could actually make the whole thing out of CSS3.
Keyframes is how you'd be able to time the different functions: http://www.leemunroe.com/css3-animations/
You would need something like an entire CSS3 powered page page, and then just place a window over that with overflow hidden. Use keyframe to move the page around but the window will only show a portion of it.
Just realized, that actually happens to be exactly what they did.
Related
Currently, I'm browsing some pages and I found that there's a page where the design is very pleasing to me. So I'm trying to replicate it, but unfortunately that I can't figure it out due to my lack of CSS skills.
So here's how that page work:
Whenever the class is active, it'll hop up a bit (the page I'm looking at is using Swiper, too!)
But however, the Hop-up image will go out of the box of Swiper
And what I'm doing right now, there's a box just like that page, but the image or anything else if it's larger than the current box, it'll be cut. I can't make it go outside of the Swiper's box.
Here's how I'm currently doing it, I made a quick dataSample and then mapped it, get the current slide to have the active class, and then CSS it. Any help is appreciated, many thanks.
I've left comment on what I'm doing in the CSS at CodeSandbox.
Code: CodeSandbox - Trying to create Hop-up image using Swiper
Here is a canvas: https://www.docker.com/#canvasCircle
I am thinking to use the function/images that creates this canvas. You can see that the circles are created first and then there is a ribbon like movement of the line from first canvas to last.
I have been trying to find either the images or the animation function. But couldn't. I would like to modify it and use it for my website.
In my case, as a front-end , I would use Photo Shop. Transfer everything to layers and extract the images. Than with css or Jquery , you can add :focus or :hover to make them pop or animate them. Not sure exactly what you want with it. With css you can also use transform etc. Hope this helps. It would help to know what exactly do you want the images to do so we can think of a code.
I've been experimenting with this for over a week and I'm about to give up, as I think this is not possible, but I wanted to reach out to this awesome community first.
What I'm trying to achieve is to, somehow, overcome the stacked z-index settings.
Let me show you an example so you maybe get the idea faster:
http://raulmellado.com/clientes/zindextest/
What I'd like is to have the green div (#shouldbeontop) on top of all elements (I am setting it to position:fixed).
In other responses in stackoverflow (yes I've read dozens of threads here), the answer is to change the html, move elements around, etc, but my problem is that I'm creating the #shouldbeontop and #scrollbar elements dynamically using js (my application is a bit more complex than this example, but I've tried to simplify to share my problem here).
I've created a js that can be embedded (ideally) on any webpage which will add the elements, so I can use js if needed, but I can just assume that the #shouldbeontop and #scrollbar elements will be there; the rest could be any html/css combination that's already there.
Usually, where there is no z-index in different divs, this works beautifully, but as soon as there is some stacking, it breaks :-(
If you would like to see a real life application of this, here you can find a quick & dirty demo: http://videngage.me/demo/demo1.html (here there is no z-index, so the video [#shouldbeontop in my simplified demo] is always shown on top (when you scroll down), but here http://www.members.skolahudbyonline.eu/rytmus-trening-majstra/ the video goes behind when you scroll down)
Is there an universal solution for this (using css and/or js), or should I just give up?
Thanks sooooooooo much for your help
I have an image and want to create a mouse over effect as soon on the following page:
http://www.zalando.de/roxy-pam-snowboot-winterstiefel-grey-ro511c00e-101.html
To see the effect, move your mouse over the "Auf den Wunschzettel" on the right side. How are those tings done?
Thanks!
If you want to do this the 'easy way', take a look at the jQuery plugin qTip: little link.
If you want to build this yourself, here are the stuff you'll mostly likely need to learn:
CSS Positioning.
onmouseover/onmouseout events.
The CSS display property.
Hope that's enough to get you started!
Note: this might be possible to achieve using CSS only, but it's more paradigmatic to use JavaScript for such things.
I'm looking for a good way to implement reusable buttons in CSS on my forms. The requirements:
- Separate image and text (text is in many languages)
- Rollover effects
- Plays nicely cross browser
- No javascript (if possible)
- Rounded corners
Whats the best way to do this? Years ago I was using the sliding doors technique, but this seems out of date now. Would you use CSS3 with a fallback for older browsers? Any particularly well thought of techniques out there?
Jquery UI buttons are AWESOME. They're fully tested, completely compliant, and really look great. With one line of code, you can have a fully styled button in no time flat. Here's the thing--they can be executed without Jquery (go figure)
First, the tut
So, the standard method is to build an element (a, button, input) with an id and set it as a button in Jquery like this:$('#element').button()
However, if you do it in the manner that the tutorial shows, you just have to add some classes to an element to get a similar effect. So, to make a button out of an a tag, it would just be
Button
In this example, there's no need to set the button with the jQuery button declaration...you're doing it by style only. With the flexibility to style so many different type of elements, it opens up a ton of doors.
You would have to have the Jquery UI css loaded, which offers the added benefit of ThemeRoller, which can style elements on the page with a simple change of a file. It's really a great way to "theme" a site that has to change branding in a hurry, which has made custom themed apps my company puts out extremely profitable.
I would use css sprites for this. You can find out about them here:
http://css-tricks.com/css-sprites/
It is basically a way to make one large image that has all states of buttons(normal, hover, selected). The benefit is it is one http request and you don't see a flicker the first time a hover occurs. If you use this route, the css background property will be the image. You can then use text-align and line-height to center the text that you want to place over the image.
This library, Nifty Corners Cubed uses Javascript but is a fairly clean way to round div tags links, etc. It is tough to find a reusable solution without using a sliding doors derived technique. Otherwise you stuck making none-resuable buttons that have to fit to your size.
You can also take a look at PIE http://css3pie.com/
A sprite is a great option and I do use them from time to time.
Personally I don't mind if my websites aren't identical in all browsers and I go the CSS class route. I keep in mind what is and isn't supported by various browsers and if there is an element that needs to be a certain way I will double check with W3Schools for compatibility.
The main benefit the keeps me using CSS/CSS3 classes is if something changes it is done quickly by text in a single file, if need be I can do a quick change from a 10 year old computer with a dial-up connection (if they still exist) and no imaging software.
Where the advantage of a sprite is they are supported across all browsers and they will look identical (more or less). SpriteMe is a bookmarklet that I have heard of to help with sprites if you decide to go down this path.
I see this as a what do you prefer matter... these questions are what I ask myself when making this type of decision:
How often will it change? Big or small changes? Will it be a complete redesign job if it changes? What do you already know? How much time are you willing to spend learning something that you may not know? What does your gut say for this project?
I hope this can help you.