CONTEXT
We want to create an effect similar to what has been implemented here. I am however looking to make the 360 video act as the hero element of a longer page.
PROBLEM
The best solution I've found so far for the 360 video is to use Mozilla's aframe, as is done here. However, the problem I come against is that adding an <a-scene></a-scene> to my longer page essentially breaks the rest of the page, making me unable to see elements underneath (thought they are in DOM). One solution I found was to put the a-scene on a separate page and then display it in an iframe on my page. this works fine when I scroll next to the iframe, but scrolling does not work within the iframe.
Typical solutions for this scroll problem say to you use overflow: hidden, but this did not work so I thought maybe there is a different approach I can take, which makes mouse movements over the 360 video control the camera, whereas scroll controls the parent page.
https://aframe.io/docs/0.4.0/components/embedded.html
Use the embedded component then style the scene element.
<a-scene embedded>
Related
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 need to disable the bouncy page-level scroll for iOS while preserving the ability to scroll inside a div. The solution to the most popular StackOverflow question on the matter seemed to work for me at first, but I found that with certain positions/transforms, the solution would break.
If I disable -webkit-overflow-scrolling, it works fine, but the user experience without it is greatly diminished in my opinion.
I am using THREE.js's CSS3DRenderer to do the positioning because in the project this is for, I need to composite the dom element on top of a 3D scene and have the cameras match. But essentially, its just adjusting the transforms and nothing more.
I created a CodePen that shows clearly that camera/object position consistently scrolls while blocking page scrolling and another breaks it.
http://codepen.io/aaronmeyers/pen/LKgsG/
please see codepen
I'm trying to create the effect of zooming in on a webpage but focusing on one particular element and allowing navigating / scrolling to be present.
I found a few plugins online but none do what I'm really looking for and I've found nothing else. Fancybox, Zoomooz etc are great but I need to be able to scroll.
The element in question is a PDF document. I need the user to be able to zoom in and still navigate up/down the page.
Possible?
Here is an example of what you could do... http://www.sitepoint.com/html5-javascript-mouse-wheel/ and http://blogs.sitepointstatic.com/examples/tech/mouse-wheel/index.html
However I would consider the above as a secondary option. There are many other ways to present the presentation and embed it onto your page. A slider is limited to "slide" only. You can for example use a presentation software and embed it onto your page as a widget e.g. http://prezi.com/ as freeware.
Hope that helps.
The Problem:
I have a web application on the iOS homescreen so there is no browser window and it looks and functions very well. I've figured out how to make inner div elements do the touch scrolling events and use the momentum/bounce style in iOS, and that works perfectly... the issue I run into now is that the bounce scrolling (again, iOS-only) is messing up any fixed elements or site-related animations I have on the page.
When I try the following:
document.ontouchmove = function(e) {e.preventDefault()};
The issue stops, but now I can't scroll anywhere on my application.
What I Need:
I want the body to be completely locked in place... If someone grabs, say, my sidebar or navbar and then pulls on the page, the body bounces! But if someone is inside the content area, there is no issue at all--the application scrolls flawlessly and looks great. If I stop scrolling on the sidebar or navbar or body, all scrolling in the application will not working and is essentially nonfunctional.
tl;dr: Body bounces on scroll. I want a scrolling content area and no scroll anywhere else. The body should NEVER move, but elements I deem scrollable within the body should.
As a sidenote, I've browser the following popular questions/solutions posted (among many others):
1
2
3
I just wanted to post that up before people assumed I didn't do any searching... I've been at this for hours now and have seen even more solutions than posted above, but I wanted to get the most popular ones listed above so no one thought this was a duplicate question.
I figured this out a few days ago and have this handy jsbin set up to demonstrate what I did to make this work:
My Working jsbin Example
When you open this link on an iPad, the text should be scrollable. Try tugging around the rest of the screen when there is no current touchmove event currently working.
If you play around with it, you'll notice that only the inner textfield moves as expected. This is determined by putting my .scrollable class within the .container class. The .scrollable class takes up the full height of it's parent container.
Now make the container a larger height, like height: 500px. The goal here is to make it large enough to have no overflow yet small enough to have other whitespace on the iPad still. Try scrolling it or pulling it... No touchmove events are fired and the screen stays in place.
My JS determines if an object has overflow after being touched. If it does, it scrolls. If it does not, it does not send a scroll event.
Play with it and let me know if I can provide any better examples and also if you run into any bugs... Right now the only one I know of is if you're really trying to break it and start tugging around the site while a current touchmove event is being fired, or the page is first loading... I wouldn't count those as "bugs", but if you can find a fix for those too, I'm all ears!
I'm trying give users the option of selecting a different homepage by clicking left or right, and having an entirely new page appear. I'm aware of a few jQuery carousels that accomplish this in a purely x axis, or y axis manner, but not a rotation. Ideally the background images will sync up, and the overall effect would be like a globe spinning, with a different set of elements at a different portion of the globe. The elements at each section of the globe still need to be interactive and
Does anyone have any ideas on that?
using jQuery, you should be able to do this using the .slideDown and slideUp methods.
Essentially, when they perform the action that you want to trigger a switch, you add a slideUp() to the 'current' container and do a slideDown() on the next one. The animations will run concurrently.
http://jsfiddle.net/g19fanatic/stLvj/
Not many people here will write you a full solution, but they'll be happy to work through specific issues.
Are these homepages on different domains and/or are they under your control?
How globe-like do you mean? A kind of sphere distortion, or just seamlessly connected at the edges?
How important is the smoothness of the concept?
Off the top of my head, here's how I would (attempt to) do it:
Load the homepages in separate iframes
Stretch the iframe to the window's dimensions
Adapt a carousel script to animate iframes instead of images
Some sort of "prev/next" controls overlaying the iframe. Maybe with z-index.
Check out landing.js file on http://thetruth.com/ (or just let the page timer run to see the carousel)
What you want is basically that but with animations instead of fading the page in/out.
Just add CSS3 transforms to scale and slide instead of the fadein/out when a new page loads.
A polyfill will add the transform capability in JS (see jquery.transform.js, jquery.transition.js by https://github.com/louisremi and Modernizr)