I'm still new to web design and I am about to make my portfolio. I'm a designer who has worked in 2D and 3D art and would like my main page to show a 3D rendering of myself, that follows the mouse. Much in the style of the following website:
https://wannabe-store.webflow.io/
Does anyone have any suggestion on where to begin with this? What filetype do i render(i use blender), Can it be embedded in HTML? can the movement be coded in javascript perhaps?
Thank you for your patience, any help is welcome!
The linked website used Canvas to show the 3D model following arrow cursor. The following links might help you to achieve some of your goals.
Javascript - Track mouse position
https://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
https://tympanus.net/codrops/2019/10/14/how-to-create-an-interactive-3d-character-with-three-js/
Thank you!
Related
There is a video of concept desktop. https://www.youtube.com/watch?v=4ftpcHD3378
Well, may there is a way to make curved shape div... or at least to fake it. All I want to do is to bend div as it looks like a bit curved in 3D. I don't need any features as in video. If there is a way to do this in javascript/jquery tell me plz.
Another possibility is to use the perspective CSS property, I created a web photo gallery wall using this method, with similar results that you are looking for.
I used this website to help me build my gallery:
https://css-tricks.com/almanac/properties/p/perspective/
For my recent project I need to add a specific text animation - to achieve the effect of a pen writing some text on canvas.
I would like to hear your thoughts what would be the best way how to do that based on your experience?
Could you point me in the right direction and include some references where I could learn how to do that?
I am currently using Twitter Bootstrap Framework for Frontend.
http://lazylinepainter.info/
This is just the tool you need
There are a lot of libraries helping you to animate your content without using canvas (not cross browser...)
http://www.createjs.com/#!/TweenJS
http://www.greensock.com/gsap-js/
I need to make a vertical javascript timeline like below link which is now created with flash.
Can someone give me a reference plugin? Or kindly advice me is it possible with plane javascript or javascript frameworks. I have little bit idea about plane javascript and jquery.
http://www.guardian.co.uk/world/interactive/2011/mar/22/middle-east-protest-interactive-timeline
I did some research on it. But did't get any good result.
Thanks in advance.
https://github.com/balancemedia/Timeline
Demo: http://builtbybalance.com/github-timeline/
there could be some more: https://github.com/search?langOverride=&language=JavaScript&q=timeline&repo=&start_value=1&type=Repositories
A good tutorial:
http://www.9lessons.info/2012/01/facebook-timeline-design-using-jquery.html
the whole thing is done in flash. you can achieve this in javascript(definitely with css), but there is not straight forward method for it. Even in flash it wasn't done in a straight forward method. It took some efforts to sync the movements of the timeline and the events path. start with developing custom scroll bar using javascript and css, and then develop the rest.
I want to find a way to make possible to draw on the entire browser page or a part of it using the mouse pointer. It will be just a blue line that it will be created when the button is clicked.
Is there any technology instead of Flash?
Thank you
Take a look at this. It was the first result on Google when searching for JavaScript Painting. It's a step-by-step guide on how to use the JavaScript canvas to create a drawing tool.
http://dev.opera.com/articles/view/html5-canvas-painting/
I'm trying to superpose two GwtCanvas (which use an Html5 canvas). I am able to get this effect by using an absolute panel. But by doing this, I can't get my object to fill my panel. I would like to this so I can do a whiteboard in GWT. So far, I'm pretty advance but I would like to have multiple canvas overlay to support undo or preview. For example, if we draw a rectangle, it would be good to preview it as we move the mouse. I have found a javascript tutorial to do this :
ex:
http://dev.opera.com/articles/view/html5-canvas-painting/
There is a javascript example, but I'm not sure how to do the bridge between GWT and JavaScript. Any ideas ?
I think you should go for GWT JSNI - This way you would be able to access your JS from GWT code. You can find more information about JSNI at the following location:
http://code.google.com/webtoolkit/doc/latest/DevGuideCodingBasicsJSNI.html