Let's say I have figured out the interface of a video editor in plain HTML5. I have all the necessary tools I need for the user to be able to create a video - except rendering it to a MP4 or MOV or whatever.
I also want to create the video using HTML, CSS & CSS animations, as then it would be easier. There is NO JavaScript framework of any sorts which is changing the HTML that will be used to make a video.
So, is there a program (preferably server-side) which can convert Styled HTML and CSS animations/transitions into an actual video that can, say for example, be uploaded to YouTube?
This may be what you are looking for: https://www.remotion.dev
Essentially, it is a ReactJS framework that uses SVG and WebGL to create complex motion graphics, which can include videos and images.
(I have no relation to the framework or its developers)
Related
I am building a WebGL Unity 3D game and want to make some css changes to the webGL build but I am failing to do so. For example I want to be able to move my game to the center of the page and give it a border. Is that possible? Is there a way to do it using browser scripting?
I have been able to create a plugin that embeds an iframe in the build but other than that I wasn't able to change the css
I'm not sure I understand the question. When you build your game for WebGL, you already use a template HTML page where the webGL content is integrated in. You have full control over those templates. Though even when you just use one of the default testing templates, you can edit them after the build. A Unity build doesn't really haev any html elements besides the canvas element. So what elements you want to format with your changed CSS?
There are several plugins for viewing interactive 360-spin images of products, such as this: https://www.ajax-zoom.com/index.php?cid=home&tag=spin360
However, my question is whether there are any current or proposed solutions for this that are browser-native, so don't require any plugins? One analogy would be how gifs are now natively supported by most browsers without the need for a plugin.
Many thanks!
First, it is important to differentiate between the common types of 360 spin:
Spin from images
Spin from 3D model
You are asking about a spin from a set of images (photos). There is no native file format for 360 spins generated from a series of images. The spinning effect is achieved with JavaScript and browsers don't have the capability to display these animations natively.
The closest you can get is what Sirv does, to generate a .spin file, which can be viewed as a standalone URL like this:
https://demo.sirv.com/example.spin
However, it is rendered as an HTML file and in the background it still serves up all the unique images and JavaScript required to create the spinning effect. That file cannot be embedded in a page like native files (e.g. images or videos) with an img or other tag - it still need the .js to be embedded in the page too, like this:
<script src="https://scripts.sirv.com/sirv.js"></script>
<div class="Sirv" data-src="https://demo.sirv.com/example.spin"></div>
If instead you wanted to embed a 3D model, then yes, WebGL is the browser-native solution.
This is my first time working with SVG files and I wasn't able to google the answer for this question. I have a .svg illustration created from Adobe Illustrator. I want to load this image into a web page and be able to manipulate it with javascript. Is there a javascript library that allows me to do this? The library has to work on current mobile devices. Fantasy code that illustrates what I'm trying to do:
<img src="pic.svg" id="pic"/>
$('#pic').rotate('90')
$('#pic').scale('200%')
$('#pic').move(x, y)
I know you can manipulate DOM elements like this using javascript, but will the svg image be scaled without distortion? Also, I think SVG has other fancy transformations that javascript doesn't normally support. Ideally, I'd want to use those too.
If you incorporate your SVG graphics with <img>, you'll be able to do exactly the same stuff as with any other image format - no more and no less. (The only benefit might be that you can change width/height without losing crispness.)
If you want to transform or otherwise change any elements of the SVG itself, it's a good idea to make the SVG inline. Maybe this answer helps. If your SVG was generated by Illustrator, cleaning the SVG might drastically decrease the file size and make it more friendly for JavaScript manipulation.
If you stick with <img>, you can still use CSS3 transforms (see the specs for an exhaustive description).
I am a complete novice at web development and I am wondering a few things about graphics rendering using JavaScript (not Flash or some other plugin). For example, is it possible to render arbitrary graphics (e.g. lines, curves, text, images etc.) inside a web page without using the Canvas feature found only in HTML5? I ask because I believe I have seen Google for example showing interactive graphics for one of their logo enhancements on their homepage for special anniversaries and the like before HTML5 was around and currently in browsers which don't even support HTML5. I also remember seeing animations in web pages during the 90s that were done in pure JavaScript.
So:
1) Is such graphics rendering possible using pure JavaScript?
2) If so, which APIs or libraries are being used?
3) Is it possible to decorate standard HTML controls with arbitrary graphics?
I am trying to determine the bounds of what is possible in a web-based UI.
For example, is it possible to render arbitrary graphics (e.g. lines, curves, text, images etc.) inside a web page without using the Canvas feature found only in HTML5?
Yes. Have a look at SVG, which has been around in some form or another since... 1992 or thereabouts.
There are plenty of docs and tutorials on the Mozilla Developer Network.
I ask because I believe I have seen Google for example showing interactive graphics for one of their logo enhancements on their homepage for special anniversaries and the like before HTML5 was around and currently in browsers which don't even support HTML5.
You saw SVG, which Google has used for Google doodles in the past and still uses for all sorts of stuff (portions of Google Maps on some platforms).
I'm trying to create a web-based WYSIWYG editor that consists of a canvas and a tool bar with widgets such as text object, shape object, line object, image object, video object and photo gallery object. A person can click and drag objects from the tool bar and place them into the canvas area. Once placed in canvas, they can change the properties of the objects. Properties they can change are width, height, color, z-index etc....
Does anyone know if there's an off the shelf solution I can start from and customize? If not, then what libraries and technologies should I be aware of to build this from scratch?
I'm primarily a backend developer, so I'm not up to speed with all the new things that come with HTML5 and CSS3, so not sure if they are relevant to what I need to do.
we (#work) have started a research project with University of Padua (italy - course of Software Engineering) aimed to obtain a web page generator. It's a WYSIWYG and you can Drag and drop widgets from toolbar into canvas :) unfortunately, the UI is in Italian but the code is very good.
It's an open source project and you can take a look # the source.
The technologies that have been used are:
HTML5 (<canvas> to easily represent shapes and easily zoom-in/out)
javascript/jQuery
Php (backend script to save/load templates)
references: http://sketchyoursite.sourceforge.net/ (http://sourceforge.net/projects/sketchyoursite/)
Edit: another tool that could be helpful is https://gomockingbird.com/mockingbird/
About starting from scratch, I suggest you to use the following architecture/technologies:
HTML+css obv for the basic layout (widget toolbar, canvas area...)
Tons of JS to represent each different object. I.e. you could map a particular widget with a pure JS object that could have some properties. These props are rendered when you click the object inside the canvas area. When you want to drag an object inside the area, resize it etc you should use a js lib (personally, I prefer mootools, also coz it simplifies OO through the Class system).
Server side scripts (Php, ruby, java...) to save (XML, Json..DB?) and load.
check http://fabric.js
I am developing a diagram tool using this similar to dia , awesome support for drap-drop-scale
I recently stumbled across Hotglue, it works like that but unfortunately without canvas. I guess they (and me) would be very happy to transform it from div positioning to canvas, it is in their todo list for a far away release at least.