I just came across a simple flash animation on flip card
The Playing Card Effect
The card has 2 images "front" image and "back" image,
when clicked the card toggles with rotating along Z axis
showing the front and back face accordingly.
Can the same effect be achieved using HTML5 / Canvas / CSS3 ??
PS: I'm complete newbie/noob when it comes to HTML5 and CSS3 stuff.
Thanks all
When rotation makes it so the card shows its backside, switch the graphic to the "back side" graphic. Otherwise, set the image src to the front side graphic.
You can also skew with the html5 canvas context using setTransform. Or you could take the slow route and manipulate pixel data manually.
This isn't a answer, but I saw what I believe you're talking about implementing done after submitting the form featured here: http://sublimevideo.net/
A lot of their CSS and JS is obfuscated, but from what I can glean it looks like they're using webkit transforms via a JS class switch. It's very fluid and actually surprised me by how stunning it looked. Hopefully some of the source can help you out.
Related
I am making a basic webpage on React with two Parallax Layers with images, the first layer image is a drawing of a room, and the second layer image is a drawing of a doorway, with a transparent cutout where the door is. I plan on doing a bunch of parallax scrolling in the future for this site, and want to use the react-spring package since it has many features I'm keen on using.
As the user scrolls down, I want to zoom and increase the width of the doorway image (yellow box) from the center point, till it is no longer visible and gives way to the room illustration, instead of it scrolling up and disappearing. Essentially, an illusion of entering a room through a door.
Here is the jist of my code on codesandbox, if you scroll you can see some of the react-spring Parallax in effect. I have spent about 12 hours looking for an answer on how to increase the width of the doorframe image (yellow box) as I scroll, and have had no working results. I'm running out of things to Google - I've tried methods with Javascript, where I give the CSS style a variable, Jquery that tracks scroll distance, using Spring native to, and pure CSS and still can't seem to find a solution compatible for the react-spring package.
https://codesandbox.io/embed/practical-sea-2tecb?fontsize=14&hidenavigation=1&theme=dark
Since I am trying to use React and the react-spring library, I think I've made this issue complicated. But, as I develop more of the site, I want to be able to use the features on react-spring. Any guidance would be so, so helpful.
Thanks
I am trying to create a web design with a unique shape. This is a simple coming soon template with the top left corner for info button and the bottom right corner for contact button. The green center area for the logo and other basic stuff.
The basic layout looks like this. I did this by creating 3 div elements. When it comes to the background color, this is fine. But the challenge is that I want those white pieces are like cut off from the green one. Something like this.
I also wish to have an output similar to the above image when it comes to playing a slideshow or Youtube/Vimeo video or custom video.
This is a Youtube video playing on the green area. But not the way I want it to be.
I want the final output to look similar to this. On the body background a pattern or a small animating pattern. Above that the cut-out layout and over that custom design another darker pattern to make it bit more attractive.
I know I am asking a lot here. But I never see any such design with a splitting of something from parent div (I did try overflow method, it didn't work or I missed something.) On top of this, the design should be responsive and the size of cutoffs (white triangles) must decrease in size with the very smaller displays.
I really need help from you guys. Thank you so much in advance.
I have a general question about creating a photo which can be animated.
My example is if you take a computer you could do a 360 degree view of the computer and giving the user the ability to click and drag to open and close the computer.
I was wondering if there is some specific way on how to animate a photo to do something like that in html, css, and some script language and if there is a specific term for it?
Your best bet would be using HTML canvas and do 3d animation (using javascript, no css used in this case). You will need to detect mouse event , rendering, animation frame , etc to accomplish it. this one is an example to your problem
http://www.kevs3d.co.uk/dev/phoria/
Try to learn canvas by googling. you can try search canvas 2d animation first, or you can just directly search 3d canvas animation.
I'm making a ecard. When the user clicks the card, it will open and show its contents. How do I make this in CSS and javascript? I am using perspective and rotation, as you can see here. If you know an example that looks like what I'm trying to do, please post the link.
Here's the solution that I've played with:
Create a style that does the rotation animation.
Create a style for the end result of the animation (basically the same as your to section in the animation style.
Create a button or trigger to add the rotation style to your <div>
Set a timeout in JavaScript for the same duration as your animation.
Once the timeout triggers, remove the animation style and add the end result style
Here's a modification of your jsFiddle. Getting the back side to work had a few quirks. The backside has to be positioned so that its right edge lines up with the front side's left edge. Then, you must rotate the back side -180 degrees so that it starts out behind the front page. Also, I had to switch the z-indexes once the animation had reached the midpoint.
All of this is hard to explain here, so I devoted an entire blog post to it. I created a bunch of visuals to help make it clear.
There's also a more simple solution to work with; instead of switching z-indexes with a timer, you just need to specifiy that elements have no backside (-webkit-backface-visibility: hidden), and flip the yellow card 180 degrees, so its back touches the red backside.
This way, you only need to flip the container containing oth the yellow and red cards, which can be done by adding a class (e.g. class="card opened").
Here's your example code with these changes:
http://jsfiddle.net/pYJm6/90/
Trying to find out if it's possible to 'shrink' an animated gif. Not in file size but in regard to the dimensions of the image.
If not, is there any way to catch the animation with jquery/javascript so I can shrink the size my moving the image out of view with css?
Or alternately after there any libraries out there for simple image manipulation type stuff for HTML5 Canvas?
EDIT:
The first mock up of the image is at http://swmohappening.info/. It's essentially a website that I'm doing to help out a local youth group retreat.
I'm wanting to shrink the portion of the letters that run-on so it's a more manageable banner to leave on the page. I do need to maintain the dimensions of the center/main section of the image.
Take a look at the animate function in jQuery - you can change the size of an image and specify the time that takes too.
As what I've read makes it seem as though the jquery animate will simply change the dimensions of an image (which isn't what is needed at the moment). I think I'll most likely end up using animate to move the image out of view to 'shrink' it that way...