I have created a simple webpage with 4 different page. On home page there is a navigation link of each page like -
Page1
page2
Page3
Page4
So now I want to implement something like if I will click on any link it should open that page like we flip pages of a book with some transition effects. So how can achieve this by using html5 or css3 etc?
As it has been said, your question lacks a bit of former investigation to get some concrete answers, but here are some insights which can maybe help you:
Flip transform
Using CSS3 2D transforms and clipping
See the example made by Román Cortés: http://www.romancortes.com/blog/pure-css3-page-flip-effect/ (Only works with Chrome - the demo is quite old, when only this browser was handling those CSS properties, with the webkit- prefix)
The superposition of div with different z-index and the use of CSS3 2D translation/rotation transforms (with adapted origins) do most of the trick here. `box-shadow' and 'gradient' are added to simulate depth. The method by Hakim El Hattab, presented by nlob, is a kind of variant using the canvas to draw the flip instead.
Advantages:
Light + Compatible with IE9+, Firefox 19+, Chrome 25+,...
The example shows both the front and back of the pages
Inconvenient:
A bit flat...
Using CSS3 custom filters
See the example in Adobe's FilterLab: http://html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/ ('Add Filter' > 'Custom' > 'page-curl' - Only works with Firefox Aurora and properly-set Chrome Canary - ie by enabling "CSS Shaders" in 'about:flags')
The trick here is to use a quite new CSS3 feature, the custom shaders, which allow you to apply webGL-like shaders to your DOM elements (A nice introduction to those notions here: HTML5rocks.com - Introduction to Custom Filters (aka CSS Shaders) by Paul Lewis). You can find many resources to implement the shaders. For instance:
Deforming Pages of 3D Electronic Books - Paper by Lichan Hong, Stuart K. Card, and Jindong (JD) Chen
Adobe's page-curl shader - Github
Advantages:
Real 3D rendering, with possibility to change the point of view, the lighting, ...
Inconvenient:
New technology - currently only compatible with Firefox Aurora and Chrome Canary + some restrictions to the DOM elements (see an example in this other thread)
Animation & Interface
All those solutions use the CSS transition to create the animation, by tweening the properties of the 2D transforms or the input attributes of the shaders.
The animation can be triggered by a basic CSS state (:hover for instance) or through Javascript, by handling the chosen event (click, drag, ...). You can for example use this handler to set the classes of your DOM element to trigger the transition:
CSS:
.page {
transform: translate(0px, 0px) rotate(0deg);
transition: transform 1s;
}
.curled-page {
transform: translate(42px, 42px) rotate(42deg);
}
- JS:
document.getElementById('page1-corner').onclick = function() {
var page1 = document.getElementById('page1');
page1.className += ' curled-page'; // Supposing page1 already has "page" as class.
};
If you dig a bit in all the given answers, you should be able to find your way.
Good luck!
you need to have understanding of following properties in css and basic javascript events.
preserve 3d,
transform origin,
transform rotate,
z-index.
And you cannot use hyperlinks for navigation as reloading the page would conflict your requirement of flipeffect.Nobody will be providing you the entire script for your task.you have to do it yourself.
The following is text-based. You do have to edit a file that is a sequence of page URLs, to make nextPage prevPage work.
https://pittendrigh.org?robopage=FliesBook
Related
I am very much new to programming, stackoverflow and everything here in general. So please bear with me.
I have made simple scenes using Three.js and some effects using HTML Canvas separately.
I'd like to know if there is anyway to combine the two, or in general, how to combine the Three.js renderer canvas with other HTML elements.
My current code includes something like :
var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.domElement.id = 'WebGLCanvas';
document.body.appendChild(renderer.domElement);
A seamless integration of WebGL content and HTML elements is not possible. You can position HTML elements on top of the renderer's canvas element or you can do it the other way around. By setting the alpha flag of THREE.WebGLRenderer to true, you can place the renderer's canvas on top of other HTML content.
However, you should keep in mind that WebGL content is always rendered separately. It's not possible to merge 3D objects like meshes, lines or point clouds with HTML elements so they are sorted and rendered together.
The usage of THREE.CSS3DRenderer in combination with THREE.WebGLRenderer is a good example for a proper usage. Check out the following demo that shows both renderers integrated in simple application.
https://threejs.org/examples/css3d_orthographic.html
I'm trying to add web animation to my app.
I want to avoid using neon-animation as it is now deprecated.
I read this instructions : https://medium.com/collaborne-engineering/polymer-2-0-replace-neon-animation-with-web-animations-api-e82d7bd82e6 but I can't figure out how to use it in my case :
I have a page with two custom elements that are displayed if the route matches :
<app-route route="{{route}}" pattern="/list" active="{{listActive}}"></app-route>
<app-route route="{{route}}" pattern="/product/:id" active="{{productsActive}}" data="{{productsData}}"></app-route>
<catalog-product-page hidden$={{!productsActive}}></catalog-product-page>
<catalog-list-page id="productPage" hidden$={{!listActive}} item-route="{{route.prefix}}/product"></catalog-list-page>
The catalog-list-page contains a dom-repeat that loads a list of items pointing to a catalog-product-page.
How can I make catalog-product-page to get animated when an item is selected ?
Even though neon-animation is already deprecated but it's still a good example of using Web Animations. I recommend you to look its source code especially neon-animated-pages and neon-animatable.
How can I make catalog-product-page to get animated when an item is selected?
It has a lot of ways to do.
One of the simplest things I come up is this. In that plunker it has 2 components are my-app and my-page. Switch to first version (versions on the sidebar) is just a simple toggle display block to none and so on. Then switch to second version you will see simple transition and the added code is
if (selected === this.selected) return
this.animate({
opacity: [0, 1],
transform: ['translateY(16px)', 'translateY(0)']
}, {
duration: 250,
easing: 'ease-in-out'
})
This mean for entry page (switch to selected) it will play animation as the code shown. For exit page (switch to not selected) it will do nothing because its display is none. For other pages just return.
More examples of using Web Animations see here and W3C specification see here. I hope this help.
Note: In my experience of using Web Animations. It works very well in supported browsers but others it's not that good (you can find some issue on their repo).
Lots of new functions released with React 16. One of them is the ReactDOM.createPortal(child, container) API, which is handy for visually breaking out of its container.
However, it seems like that it not only breaks out its container but also breaks the basic html rules which I learned from the first day of web development. The createPortal API let you render your component out of its parent, and break the html structure convention we expected.
In the other hand, we do retrieve more flexibility and now can render DOM in the sibling or else components.
IMO, I don't think this is a good deal to gain more flexibility by trading html convention in. Also the example supplied by official does not convince me.
What I am curious about is:
Is there anyone who face any condition that createPortal API is a must?
thanks
The examples in the docs are some of the cases where createPortal is really useful - specifically dialogs, hovercards, and tooltips.
The docs also specifically state:
Note:
It is important to remember, when working with portals, you’ll need to make sure to follow the proper accessibility guidelines.
As an example, the docs show how a modal could be built using createPortal(). You'll notice the modal is created in the #modal-root element, which is a root element alongside the #app-root element. This is a great example of how createPortal() can be used without violating any HTML rules.
<div id="app-root"></div>
<div id="modal-root"></div>
I ran into another use case a few months ago. Because React 16 portals were not available, I had to use a home-baked portal implementation.
I was creating SVG graphs. All of the lines, paths, and so forth needed to be rendered inside an <svg> element. But I wanted to use HTML to render text labels (for a number of reasons). This meant that an object on the graph and its label would necessarily be in separate parts of the DOM. But with portals, I could still keep all of a graph component's logic together. Here's a fictitious example:
const LabeledPoint = ({ x, y, r, labelText }) => [
<circle cx={x} cy={y} r={r} />,
<GraphLabel x={x + 5} y={y}>{labelText}</GraphLabel>,
];
You would use this component inside an <svg> element. The GraphLabel component would use a portal to render labelText in an HTML div element at the same coordinates as that <svg>, using absolute positioning to place it at the correct coordinates.
This way, all of the logic for a single component could be in one place even if I needed to render the actual DOM elements in different places for technical reasons.
Portals is very useful feature when you need to render your component outside the DOM hierarchy of the parent component.
You define a portal using the following syntax:
ReactDOM.createPortal(child, container)
The first argument (child) is any renderable React child, such as an
element, string, or fragment. The second argument (container) is a DOM
element.
See the following tutorial to see how and why to use portals:
https://www.youtube.com/watch?v=lOMU9BeIrO4
Before going into my answer, I'll just note that I interpret the question as "in which cases is there no alternative to using a portal, or a portal would be a demonstrably much better solution?"
There are very few cases where portals are the only solution. A lot of the time there's a way to structure your app so that you don't need to use them. There's some niche use cases, but even there it's usually not the only solution.
For example in the SVG use case, you could instead create a Labels component that takes an SVG React element as argument, and then loops recursively over the children to construct an HTML element with matching labels in the right position. That would as a bonus also make the SVG code a lot simpler. If the SVG is user editable, you'd have to store its state as a whole anyway on each change, allowing you to easily pass the state back into both SVG and label elements. That said, here the portal solution seems at least on par with the alternatives, and could be the simplest in some circumstances.
Dispatching plugin components
Portals can be useful for library/framework authors. It allows plugins to render multiple components in the same element, each of which the framework then portals to a different position in the UI (e.g. editor area, sidebar).
WordPress's block editor uses this for a few things, they call it SlotFill. For example if you're coding a new block in a plugin. You always provide an edit component for each block, which is rendered to the WYSIWYG editor. If it includes an InspectorControls component, everything inside it will go into the sidebar.
The Block Toolbar works in the same way. Content of the <BlockControls/> element is moved to the toolbar that is displayed right above the block content.
This is implemented as a portal to a registered slot.
The advantage of a portal here is that it allows a block's code to reuse the state and hooks in all components, even though they are not rendered in the same place. This makes the process of adding sidebar code very easy and with minimal repetition. If plugins instead needed to provide each of these components as a standalone React component, managing their state would be much more complex.
Example
You won't find ReactDOM.createPortal in the example itself. It's rather an example of how a plugin can benefit from a framework that uses it. See WordPress's source code if you're interested in the implementation details.
I added a simple useState hook to the mentioned InspectorControls example and removed some irrelevant parts.
edit: ( { attributes, setAttributes } ) => {
const [myColor, setMyColor] = useState('#fff');
return (
<div>
<InspectorControls key="setting">
// Simplified HTML, real world blocks use more complex HTML here.
<ColorPalette
value={myColor}
onChange={ setMyColor}
/>
</InspectorControls>
<TextControl
value={ attributes.message }
onChange={ ( val ) => setAttributes( { message: val } ) }
style={ {
backgroundColor: myColor,
color: attributes.text_color,
} }
/>
</div>
);
},
I embedded live web cam to html page. Now i want to find hand gestures. How to do this using JavaScript, I don't have idea. I Googled lot but didn't get any good idea to complete this. So any one know about this? how to do this.
Accessing the webcam requires the HTML5 WebRTC API which is available in most modern browsers apart from Internet Explorer or iOS.
Hand gesture detection can be done in JavaScript using Haar Cascade Classifiers (ported from OpenCV) with js-objectdetect or HAAR.js.
Example using js-objectdetect in JavaScript/HTML5: Open vs. closed hand detection (the "A" gesture of the american sign language alphabet)
Here is a JavaScript hand-tracking demo -- it relies on HTML5 features which are not yet enabled in all typical browsers, it doesn't work well at all here, and I don't believe it covers gestures, but it might be a start for you: http://code.google.com/p/js-handtracking/
You need to have some motion detecting device (Camera) and you can use kinect to get the motion of different parts of the body. You will have to send data in browser telling about the body parts and position where you can manipulate the data according to your requirement
Here you can find how you can make it. Motion detection and rendering
More about kinect General info
While this is a really old question, theres some new opportunities to do handtracking using fast neural networks and images from a webcam. And in Javascript. I'd recommend the Handtrack.js library which uses Tensorflow.js just for this purpose.
Simple usage example.
<!-- Load the handtrackjs model. -->
<script src="https://cdn.jsdelivr.net/npm/handtrackjs/dist/handtrack.min.js"> </script>
<!-- Replace this with your image. Make sure CORS settings allow reading the image! -->
<img id="img" src="hand.jpg"/>
<canvas id="canvas" class="border"></canvas>
<!-- Place your code in the script tag below. You can also use an external .js file -->
<script>
// Notice there is no 'import' statement. 'handTrack' and 'tf' is
// available on the index-page because of the script tag above.
const img = document.getElementById('img');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
// Load the model.
handTrack.load().then(model => {
// detect objects in the image.
model.detect(img).then(predictions => {
console.log('Predictions: ', predictions);
});
});
</script>
Demo
Running codepen
Also see a similar neural network implementation in python -
Disclaimer .. I maintain both projects.
I have been working on a web application for some time now and did notice that the CPU usage was a bit high a long time ago, but the development has been halted for a while.
Recently I started developing again and discovered that the CPU usage goes high after an animated GIF image has been display as the background image.
I use Ajax to update content and apply CSS classes to elements to display a loading indicator. I remove the CSS class when the content has finished loading. If I comment out the classes in the stylesheet that contains the GIFs, everything looks normal.
I have tested it in Internet Explorer 7 and Internet Explorer 8.
What can be done to alliviate this problem?
var blabla = function() {
var element = $('id of element');
element.addClassName('a css classname');
new Ajax.Request({some parameters},
onSuccess: function() {
element.removeClassName('a CSS classname');
....
},
onFailure: function() {
element.removeClassName('a CSS classname');
....
},
onComplete: function() {
element.removeClassName('a CSS classname');
....
}
}
}
It's possible that this issue is related to how Internet Explorer loads data needed from CSS classes. Might I suggest an alternate approach: instead of using the loading animation contained within a CSS class, just put the .gif in a visible <img> tag straight into the HTML. Then, when onSuccess or another method is called, you can just run:
$("#ajax-gif").hide();
As already commented on, it looks like it doesn't have anything to do with the GIF image itself, especially not one at 20x20 pixels.
If you are changing the background of a page with a GIF image, it must redraw what's on top of it to a certain extent.
To bring down the CPU usage, either reduce what's on your page before you change the background or stop using GIF images, it's 2011!
If this problem is only occurring in Internet Explorer, it is indeed the redraw issue that commenters to Barnzy's answer have talked about. It should create similar problems across other browsers as well.
One solution would be to use the JavaScript onload event handler to preload all of your GIF images in the DOM, which would reduce the need to redraw and should stop escalating the CPU cycles.
I agree that in 2011 using GIF images is probably not the best approach for web design.