Imitate a iPhone swipe view on a webapp (like the weather app) - javascript

I'm trying to find a Javascript snippet that I can archive the UIScrollView + UIPageControl effect of the iOS using Javascript and CSS3.
Generating the page control to a dot to each view and do the switching is very easy, but the complicated part it is to do the elastic movement.
I would want to do this myself, but it seems to much work to me, like hours of work, tried googling, but I not found anything. I don't like JQuery but the mobile framework doesn't seems to do this.
If I had to do this by myself, do you guys have any suggested approach? I'm thinking in using a parent div, with a bunch of divs inside for each view. Use the parent with overflow: hidden;
and attach event to the parent view and listen to drags and bind to the horizontal scroll offset. This would be a good way? or using css transitions with left or translate-x would be more smooth?
EDIT:
This is what I tried (not working very well): JSFIDDLE

Yeah,
Im not sure about touch swipes, although i think the 'activate' or 'touchstart' handler might be useful. Using CSS3 transitions to achieve the elastic movement is quite smooth, just alter the left or right style property of your internal div and the transfom will move from its current position to where you need it to be.
This is not the worlds bestt example but have a look here
villasanrafael.eu/Gallery.php

Related

How can I make .hover() work with a swiping finger on a touch device?

So, here's the thing. I am using this library
This works by having a container div full of img elements, and changing their respective z-index depending on the mouse position while hovering the container. My goal is for it to work with a swiping finger instead of a hovering mouse.
After a fair bit of research I only found solutions similar to this, but it does not help me because my library uses .hover() in jquery and not the css :hover state.
I also tried mmy luck with an .ontouchmove replacing the .hover() but it broke the whole thing, I'm pretty sure I did not even use it correctly, I am am pretty lost with javascript without jquery.
So how could I possibly simulate/make this work with swiping a finger on the screen ? I'm a bit lost :(

Unable to get skrollr parallax effect on header image

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/

page animation on scrolling it like movie

I found this page http://www.wanderworld.io/ when you scrolling its start animation on scrolling and scenes are changing. how to create something like this? Please help me, any example on jsffidle or codepen?
To point you in the right direction, this is called parallax scrolling and can be accomplished using CSS, but is most commonly done in Javascript / jQuery.
This library is great for parallax animation and would probably accomplish most, if not all, of what the example site does: http://prinzhorn.github.io/skrollr/
Basically the idea is to have a page scroll listener that tracks the window.scroll position. At certain ranges, elements move in and out of the screen. The concept behind it is relatively simple, but it can be difficult to implement and can be as complicated as you choose to make it.

Parallax scrolling without scrollbar

I wanted to know if there are some javascript libraries that handles parallax scrolling, with panes, but without using scrollbars ?
My client doesn't want any scrollbars and the website works like panels that show when you scroll.
I tried Skrollr, but when I overflow : hidden, it doesn't work.
thanks
I think you always have to write some code to "parallax" the whole thing , but, I once used this library
jQuery mousewheel
https://github.com/brandonaaron/jquery-mousewheel
because I did not want scrollbar's in my website , it was really helpful. It allows you to detect scrolling in every div of your document , so you're not obliged to bind action to window.scroll.
The only issue if you're not using jQuery is that this library requires it.
Anyway I think that jQuery is always a good idea.

custom scrollbar not working on touch device

following problem. im using a simple jquery plugin located here
it works fine so far, problem is when im testing it on a touch device (eg ipad2) its not possible to scroll within a div. it does not work with 2 finger swipe too!
i guess the behaviour is not the same to the "standard" scrollbar. but is there any solution to make this touchable?
im in the testing phase, which means the body code is pretty simple
$(document).ready(function() {
function appenddiv() {
var $scrolling = $('<div id="test" class="scrolling">A lot of text in here ...<div id="scroll2"><img src="../images/31670035.jpg"></div></div>');
$scrolling.appendTo($('#container')).scrollbar();
}
$('#scrollbar-link').on('click', function() {
appenddiv();
});
});
<body>
Klick mich!
<div id="container">
</div>
</body>
Do i need something like a "touchable" script which makes it possible to swipe the scroller?
Thanks
:-) Yes, this is definetly an issue...
The root problem is the following:
To create custom scrollbars you need to make DIV overflow: hidden - to hide sys scrollbars. This is OK. BUT on mobile (iPad too) devices from this point your DIV will not be scrollable. It will be (only), if you use overflow: auto ... This is logical - more or less. But drives you to the headache you have now :-)
So, you have to make a choice at this point..
a) you forget your custom scrollbar on touch devices - keep overflow: auto there
b) you implement a drag&drop feature manually - if you detect a mobile device
version b) would be tricky - again. since the event we know as "mousedown" event works differently on touchscreens. There is not only one mousedown - in fact there may be an array of "mousedown"s since you touche the screen with your finger, then you touch the screen with another finger, and so on... so on touchscreens this is a touch[] array...makes sense absolutely, but complicates things...
Either way, I don't know about any less complex solutions... If anyone does, I'm curious about that too!! :-)
We did a lot of testing and put many effort into this issue (and to other issues too) while was working on our NiceScrollbars library project...
I'm here if you would like to discuss this problem deeper! Will try to help
Either way, I don't know about any less complex solutions... If anyone
does, I'm curious about that too!! :-)
In theory, we could add a div with opacity=0.000000000001, z-index -1 (-1 index from the original div. i.e. the original div has a z-index of 10, then the new div would have a z-index of 9) and scroll=auto. The new div would be a copy of the div with scroll=hidden attributes in terms of content and css.
The scroll event would fire via the hidden div and then update the visible div.
Too bad we have to go to that extend, but it seems to be another clean solution/hack beside the fact that you have to duplicate the content or create an element that holds the content height.

Categories