I want to know how exactly to get this output. Mentioned in the Hammer.js homepage itself. I tried to do it by copying the same code and while emulating, I get the event notifications as 'spanleft' or 'panright'. But my div does not move or animate like shown there. What am I missing? Any HTML5 animation?
EDIT : I'm adding a fiddle here. When I debug it in my phone using phonegap method, it does identifies my multi-touch pinch and rotate actions and appends the value to a preset
<p id="text"></p>
However image stays static. It doesn't change position or size.
Related
I am trying to create a slider, using javascript and css. I recognize that there are "tons" of them out there, but I am building this to educate myself.
I have attached a video showing the HTML of an example I am trying to recreate. In particular this shows how the MARGIN-LEFT property is being changed, making the images slide to the left. (see the 3rd line from the top)
Does anyone know, or deduce how the MARGIN-LEFT property is being changed in this way?
I have normally just used the CSS transition property to cause the images to slide, but this seems to be doing something else.
Click for my video
There seems to be a bug with the embedded scene and the option of mouse cursor (cursor='rayOrigin: mouse'),
i've put an mouseenter and mouseleave event on a box to change it's size. It works fine as long as the page is contained in the browser, but when the page is "scrollable" the events get messed up ( like showed in the gif, link bellow). I don't know if I messed up somewhere but it seems that it comes from Aframe. There's a link bellow for the github issue ( more details on it).
GIF :
Github Issue :
https://github.com/aframevr/aframe/issues/3410
The mouse-cursor component uses the whole window to calculate the position, so You'd have to rewrite it, to utilize the <canvas> for raycasting.
There is a workaround, you can make a fullscreen scene and put it in an <i-frame>, where the window is the iframe's body.
Example here.
everyone!
So, I'm trying to implement parallax with skrollr.js. This is my first attempt and I am pulling my hair out. I've been all over the web from searching Google, YouTube and StackOverflow. I'm trying to implement a parallax effect on a header image somewhat similar to this example except the image doesn't need to be the full height of the viewport and I only need one image to have a parallax effect. I'm going for something very similar to this on Squarespace's page.
I've been trying to simply use the code from the examples provided in the Skrollr.js repo. But after hours of failure, I turn to the trusty SO community!
Here is the page I have currently been testing the parallax header image on.
The classes .scollable-between and .scrollable-after are being altered on scroll but nothing is happening. Also, I am trying to implement this for mobile but I can't even scroll the page on mobile.
Any help is certainly appreciated! Thank you so much!
A couple issues:
First, position: fixed really doesn't play well with skrollr... whenever it is enabled on an element, the position relative to the scrolling element basically no longer exists, and skrollr events stop firing.
Second, it looks like the element with the background image (.parallax-image) is both being shown by the class '.skrollr-between' and also has a transform-3d property on it. When I disable the tranform3d property with the inspector, I can see the image.
It seems like you are combining two methods of parallax: Skrollr is one way of doing it via JavaScript, and CSS transforms are a way of doing it without Javascript... it would probably be best to chose one and roll with it.
Skrollr/JS method:
https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/
CSS only method:
http://keithclark.co.uk/articles/pure-css-parallax-websites/
I have searched a lot but i could not find any proper solution for my requirement.
I want a functionalty in my website where user can select any area on browser or anywhere in desktop and convert the selected area into image.
I know this can be done in windows form,there you do have options to track mouse movements and capture image from screen.
I know if i wan this functionality in web i have to get cordinates via javascript and hen maybe make an ajax request to webservice and get my image.
first of all i cannot find a proper way in javascript that will get me mousedown and mouseup coordinates.
I have seen jquery 's Dragable and resizable div.I want something lke that for user to select the area which has to be converted to image.
I can even get Origal mouse position,Current mouse position and the size of div using jquery dragable and reszable div.
and Second i want some advice as to how i should grab the selected area as image.
Kindly help me out.
Not possible with JavaScript. Web pages are (intentionally!) not capable of tracking mouse movements outside the browser window, nor of reading an image off the user's desktop.
You mean something similar to: http://www.screenr.com/record ?
You can use the clientX and clientY of an event to get the mouse coordinates. For example:
http://jsfiddle.net/yN3S5/1/
HTML:
<p id="x" ></p>
<p id="y" ></p>
Javascript:
document.onmousemove=function(e){
x=document.getElementById('x');
y=document.getElementById('y');
x.innerHTML=e.clientX;
y.innerHTML=e.clientY;
}
First, to convert your page to image, there is a very cool library that can do that. Its use the canvas, and render on it the full page by reading it
Get the code and see the examples from here.
http://html2canvas.hertzen.com/
Once you have the page in canvas you can thn conver it to png and get a part of it by selecte it.
See this example ! http://hertzen.com/experiments/jsfeedback/examples/dusky/index.html
Click on the send feedback, then select an area on the page, then click on preview ! Its very near for what you ask, but instead make a red rectangle you cut this part of the image.
more examples like the last one : http://hertzen.com/experiments/jsfeedback/
Forget to capture anything outside the browser.
I installed the supersized plugin for wordpress, which is working great. I have set it up as a slideshow to autoplay without control buttons. Still working great.
Now, my client wants to have certain divs (with content) rotate alongside the background image. So, when supersized shows the first image in the slideshow div1 shows on the page. When the slideshow moves to the second slide, div1 needs to go away and show div2, and so on.
Currently, I can do this by hacking into the supersized.js and add a custom function that passes the current slide number inside the nextSlide() function.
Instead of hacking it, though, I would like to hook into it somehow.
Something like: $.supersized.api.currentslide or something similar.
Would this be possible at all?
Thanks!
This example fits with your Answer:
http://www.cirmiz.eu/supersized/
You need to configure a Theme with the init event and api.options.
In this example in the file supersized.shutter.min.js
Requires supersized 3.2.5 ¡important!
I think you are looking for this variable
$.supersized.vars.current_slide
good luck