I am trying to create an html layout that is similar to Flipboard's page flip animation.
First I thought to use some jQuery library to achieve this, but none of them seems to have all the features that I need. For example one of the libraries is BookBlock, but it uses CSS transitions for the animation, so I can't control the flip when I move my finger back and forth.
After some research I have found this excellent demo that looks almost exact match for what I need, but
it flips pages like a book, from left to right and I need this from bottom to top.
I have spent couple of hours trying to change various CSS and JavaScript properties from this demo, but I did not succeed much in changing the page's flip direction.
I do not expect somebody to write code for me but I would be glad if someone could point me in the right direction or any other suggestion.
First things first,
if you want something for long term, i would suggest you to go with some library similar to bootstrap or semantic UI (my favorite)
Semantic UI transition
Bootstrap flip example
for the finger back and forth which is swipe left and right use hammer.js
Hammer Library
On swipe left you can initiate the flip transition
Build it smaller and modular, you will eventually reach your goal
Related
Finally trying to learn responsive design and needed a slideshow. I was able to easily get Owl Carousel up and running on one page and love it (right above footer on test page): http://cismiami.org/new.html
I'd like to tweak the slideshow to use for staff photos: http://cismiami.org/owlstaff.html
I found instructions for switching to arrows and getting them on the same line as the images, but cannot figure out how to get them to appear outside the image carousel instead of superimposed on them. I'm using a separate folder for the CSS files so I don't mess up the first sample, but here are my CSS files for the Staff page:
http://cismiami.org/js/owlstaff/assets/owl.carousel.css
http://cismiami.org/js/owlstaff/assets/owl.theme.default.css
Any help would be greatly appreciated.
I'm not a professional (just a hobbyist), but would like to think i know bit of this and that. It's difficult to test this myself since most of the assets are elsewhere and you're working on someone else's code, which itself is often messy to begin with. If you would've designed and coded it from the ground-up, you would know exactly how to do it. Learning so much in the process.
Anyways, in 'owl.theme.default.css' the arrows can be customized as you said. The quick and dirty method (and bad solution in this case) of getting the arrows outside of Carousel would be to add a negative positional value to left and right arrows. Since they are absolutely positioned, they can be moved around quite freely but are not exactly responsive on their own. This following method is breaking their intended purpose, staying on top of the pictures and thus with the flow.
Add negative value to left and right, say 40px:
.owl-prev { left: -40px; }
.owl-next { right: -40px; }
This will however break the responsiveness, since once you start scaling down the page, the arrows will disappear outside of the flow of the page. They are absolutely positioned after all, and reliant on their parent / container objects. Maybe there's a way they can shift back to these original positions once scaled down enough but it's difficult to say from these bare messy beginnings. So many things can go wrong. Maybe Media Query methods once it reaches certain pixel count, then changes to left:0; right:0;? I haven't used them myself, but will need to with my current project soon enough.
In my opinion, shifting the arrows outside of the nice responsive design is also against the look of the site. It'll break the cohesion. To me these arrows look absolutely fine on top of the pictures and hardly intrusive. Maybe adding some transparency / opacity to the arrows would make them less problematic to your eye, hover over them could resume their current visibility? That's about it for now.
I've been looking for a library or a solution to implement Tumblr's scroll effect.
I previously worked with libraries like fullpage.js but the thing is Tumbler effect is a bit different.
To be more specified, when you scroll up/down sections cover each other, but in libraries like fullpage.js sections push each other to up and down.
I'll appreciate if you guys have any solution or library to implement this effect.
Update 2018:
There's an article about it here. Which makes use of fullPage.js. instead.
You are looking for pagePiling.js, the small brother of fullPage.js.
You can even use fullPage.js to do exactly the same as long as you use the parallax extension with the offset value set to 100, and then place all your content in the background element. So it will move at the same time that the background.
The advantage of using fullPage.js is that you'll have plenty of more options, methods and callbacks than when using pagePiling.js, which hasn't been updated in a long time.
I have been doing an fancy rotating menu last few days with using transition effects and unfortunately I needed to use jQuery script for it.
Back to the point. I have developed advanced stage of menu and now struggling with navigation arrows. Moving with keyframes direction so from left to right is quite right (it's getting little messed after few clicks)
However if you click an right arrow for example three times each one by one and then click left arrow it's starting from original position instead where does it has been stopped.
I just ran out of ideas how to solve it in appropriate way.
I have prepared an example of my work. Most of elements are dropped due to keeping it much simple way
jsfiddle
NOTE - I am aware that I should use -webkit- but for this stage I am keeping it like this
I would greatly appreciate your help.
in a project where I need to build something like the famous parallax-powered Mario Kart Wii Experience site, which also comes with horizontal and vertical scroll (if you haven't seen it, here it is: http://www.nintendo.com.au/gamesites/mariokartwii/#home)
For the scrolling effect, I grabbed the JQuery Scroll Path plugin (website here: http://joelb.me/scrollpath/), and it seems to suit my needs concerning the free scrolling.
The problem comes when I try to include some plugin to generate the parallax effect. I tried several plugins (including Stellar.js, jInvertScroll, Parallax.js, Parallax-JS), but none of them seem to work properly. I assume that there's some kind of relationship between the custom scroll that comes with the Scroll Path plugin and the need of the parallax plugins of working with the navigator scroll to make the effect work.
I searched in Google for some similar situation (i.e., implementing Scroll Path with some parallax plugin) but I didn't find anyone in my current situation, and it seems that the Scroll Path plugin isn't maintained anymore.
Any idea for making it work would be appreciated!
PS: Sorry for the grammar mistakes, I'm still in process of learning english.
To make 2 plugins working together you should understand how they work. Parallax effect is achieved with few layers that are moved with different speed - the closest to you moves fastest, the most distant moves slowest. Most of the parallax-effect plugins are based on scrollTop calculation - i.e. layers are moved depending on current scroll offset multiplied by delta-value (which differs depending on layer position).
In your case you should connect jQuery ScrollPath scroll event to parallax plugin. In ScrollPath you should generate scroll event (that will be handled by parallax plugin) in function scrollToStep (look at row 490 in jquery.scrollpath.js). To make calculations simplier you can use 'top' value applied to scrollbar * some delta (you should pick out delta value by yourself). Then in parallax plugin you should modify event handler that applies parallax effect from scroll/mousewheel to event you generate in ScrollPath plugin.
To connect 2 plugins together you should modify their code which means that you won't be able to easily update these plugins to newer version. You should make comments to all your changes in order to reapply them if plugins will be updated in future.
I have been trying to understand how they did those effects in http://artofflightmovie.com/ with no success so far. I am not even sure what to google for for help. Could any one ellaborate on it and perhaps put links to plugins\tutorials\other websites doing the same thing?
There is already a similar question, but it didn't help me a bit ^^
Custom scroll bar behavior in Javascript?
All of the answers here so far are spot on and cover various pieces of the execution. Joseph's post about how we 'contained' and 'maneuvered' the site are dead-on, and those mentioning jQuery accurately depict our heavy reliance on it :)
With that said, the other concept of moving along a non-linear path was probably the most difficult part. We literally used an Illustrator file that was setup like a piece of graph paper and drew a bezier path that reflected the movement we wanted from the scrollbar. Then we 'downsampled' the path by converting the curved lines into a bunch of straight lines that represented the curve (similar to downsampling audio waveforms) to keep performance/speed high. We took those coordinates, gave them to our designer, and he created a gigantic design file and literally designed each content section at the designated 'stop' points. Next we mapped each coordinate along the path to a percentage value of the scroll position. We stored these values in a JavaScript array. Lastly we wrote some JS functions that we pipe the scroll position through to determine how to offset the positioning of the site 'container'. (It basically 'tweens' between each coordinate allowing us very fine/precise values at any given scroll percentage) The scroll functionality is handled by a tall div that basically sets our document height to force a scrollbar, and we just read it's position during a Scroll Event and slide the container around to where it should be using the above mentioned functions.
The parallax effect is achieved by applying a percentage of the position offset (what we use to move the container around) and applying it to the sub-containers of the various content sections. This makes the subcontainers move slower or faster than the background, but on the same motion path.
Lastly, the little snowboarders and helicopters (which have CSS3 rotations in addition to x,y movement in some browsers!) are positioned by using a simliar array of 'start' and 'end' positions and tweening between them based on the scroll percentage.
I'll leave it at that to keep this from turning into a book, but I'd be happy to elaborate on specifics if you're interested.
Full disclosure: I was lead developer on the site. I'm not posting to 'toot my own horn' or anything like that, just to be helpful and provide assistance to a fellow tinkerer. I come here a lot to dig through and get insight from others. (many, many thanks to those who have helped us!) Also, shameless plug, but the film is breath-taking... go rent it if you haven't yet, you won't be sorry. :)
That's a pretty cool website ;)
Basically using some javascript you can detect how far a person has scrolled. Considering the amount of scrolling you can move the contents of your webpage around if their position is absolute.
There are a couple of jQuery plugins that allow you to do simular stuff although I'm not sure you can "scroll through" a sequence of coordinates.
Here are a couple of jQuery plugins that helps you get simular effects:
http://johnpolacek.github.com/scrolldeck.js/
http://johnpolacek.github.com/scrollorama/
http://demos.flesler.com/jquery/scrollTo
http://webdev.stephband.info/parallax.html
I just picked a couple I'm familiar with but there are many plugins that are alike.
edit:
Decided to add some more simular websites for your pleasure.
http://www.activatedrinks.com
http://www.beetle.de
http://www.nikebetterworld.com
the whole page is an "overlay" - a full width and height wrapper <div>. sort of how modal windows do their "full page shadow" effect and have a small div float inside. the whole page content is in that wrapper. the scroll path is a script. the script captures the body scroll and moves the contents of the div accordingly to the positions provided by the script. with a body long enough to be scrollable (which cannot be seen since the wrapper covers the whole page), it's as if you are scrolling sideways, upwards etc.
an analogy is a modal window. the wrapper is the full-page shade. the modal window is the content. and notice how modal windows stick to the middle? that's using a script to calculate it's position to stay in the middle by moving the modal window down, relative to the page's top. but in that website's case, they move in different directions.
It doesn't seem too complicated.
Using the .scroll(function() {}) in jQuery you listen for a scroll event. When triggered you set the position style (left, top) of the content div to give the appearance of moving sideways instead of down.
I guess you'll need overflow:none property on the div to prevent users from scrolling over the area you don't want them to see.
Sounds like a lot of effort for a clunky user interface in my opinion.