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.
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 have a Photoshop image that I have created for December 1st. This image will be used as a calendar for an intranet site. Like any normal calendar, it has a door that I wish the user to press. I have a copy of the original document and in place of the door when the user presses this I want to show the new image so it looks like the user has reveled what is behind the door.
I thought I could achieve this task using Photoshop's slice tool. I can achieve this if my calendar door links to a URL, but not another .jpg file.
I also thought I might be able to complete this in Flash by importing my .jpg file and creating a link, but once again I think this is just for URL's.
I know that there is a better way to do this but I am short on time. Would ActionScript in Flash enable me to complete this task?
My original web site that will contain this image is Visual Studio 2005. It has some very basic JavaScript which automatically loads the correct image for each day (since I need 25 of these for the month of December [Day1.jpg, Day2.jpg etc etc]). This works fine. I just need to create the calendar images for each day and the content behind the door.
Yes, a simple actionscript using flash will help you. You can create a document with a button (the button will be the door, you can fill up the background of the button with the door image). Your flash movie may contain 2 keyframes (1 with the default background including the image-button and another keyframe with the image to be displayed when button-pressed). Add some actionscript for the button (basically a GoToAndPlay(# of keyframe with the image) and also a "stop()" action on the image keyframe. Here is a basic example on YouTube Click here. By the kind of thing I guess you want, a little bit of flash animation will make it look better i.e. (door opening clip, 2nd image slide, etc)
As Chris said, a simple JavaScript image swapping code will work too. Here are a couple of examples in StackOverFlow Click Here.
Also you can try some CSS, for example a DIV with the background door and a Hover action that sprite the background to the calendar (click would not be necessary, just hover). Here is a video
I hope any of those solution will work for you, I recommend the CSS one, because it can work with mobile devices, don't require javascript to be enabled, and it's fast and easy.
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...
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.
What i want to do is have a user upload his image. When its complete it will display the image on the same page w/o refreshing. Here is the part i need to figure out, how do i have the user select a box in the image? so i can crop it when the user is done? (using ImageMagick).
If possible i would like a border for the user to stretch to edit the width and height. Then click within the rect to move around.
There's a ton of ways; including several pre-written plugins available through the web.
Are you using any frameworks?
Of the below, I've used Jcrop and Lasso.Crop and they've both worked out well. Haven't tried the others.
Here's a non-exhaustive listing:
Pure Javascript
http://www.dhtmlgoodies.com/index.html?whichScript=image-crop
jQuery
http://deepliquid.com/content/Jcrop.html
MooTools
http://www.nwhite.net/2009/02/25/lassocrop-preview/
Prototype
http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/