http://celebratedesign.org/connect Browsing through sites I came across this page that has an interesting affect that I want to try on my own website. When the user scrolls down there is a diagonal slicing effect that goes across the page. I can't seem to access the affect through developer tools on any browser I use I have no idea what to call it when googling. Does anyone know what this effect is called and how it was implemented in the code? Is it a plugin or is it just an animation? Please let me know if I need to be more clear.
That is not a plugin, that appears to be animated svg, possibly canvas.
Related
I'm developing a website for someone who requested a dynamic sliding page when you scroll (i.e. like this). At first I was thinking it was something I could use CSS transitions for, but then I realized there might be a JS tool out there which could make it work.
I discovered this page of dynamic movement examples with an associated library on github, but I'm not quite sure how to make it work. Basically, I'd like the page to listen for the event of a scroll, and then slide up a section of the page in the same way as the example above. When looking through the code for the dynamic movement examples, it seems like it's a a bunch of cases in the JS file that get used somehow in the event of a button press.
Please, if anyone is familiar with building something like this, please let me know how it might be done.
I would encourage you to make use of fullPage.js.
It is nowadays the most popular library for single scrolling pages. It has plenty of options, methods and callbacks and you can almost do whatever you think of with it.
Compatible with old browsers, kinetic scrolling (Apple laptops) and touch devices.
I'm trying to create a page similar to new google calendar landing page http://www.google.com/landing/calendar/
I'm using skrollr(https://github.com/Prinzhorn/skrollr) but I can't get the effect right, on google landing page if you do a small scroll it will send you to the next block and with skrollr I'm not able to get that navigation. Any ideas how I could reproduce that? is it possible to do with skrollr or you would recommend another js plugin?
Thanks!
In case you still haven't found a solution yourself, I've been tasked with doing a very similar thing. There are two ways of achieving this that I researched and choosing the right one mostly depends on the complexity of your design/expected result. Unfortunately I can't provide a link because the site won't be live for next couple of weeks.
This is what worked for me:
I used fullpage.js library to achieve 'full-page' scroll effect. You could also take a look at onepage-scroll.js and see which one fits you most - they don't differ that much in terms of functionality though.
Benefits of using fullpage.js (among other things):
integration is quick and simple
allows a lot of customisation through options hash
provides callbacks when scroll to another section is triggered (before or after it happens)
enables you to manually trigger a scroll via 'methods'
works surprisingly good on iPad/iPhones. Probably on other mobile devices as well, although I can't fully confirm that since that
wasn't a requirement for my project.
Now when you've got section-to-section scrolling in place, what's missing is the animations. Considering that fullpage.js provides you with callbacks, it's as easy as adding a class when a transition to another section/slide happens and then using that class to trigger an animation of your choice through CSS. This is what worked for me without facing major problems.
For more advanced things:
If you're looking to build something more complex, then I strongly recommend that you take a look at tween.js. This is what google used on the landing page that you've provided in your question.
It's a very powerful tool hence it requires quite some setup + it moves animations to javascript, which might be a hassle. I would rather keep them in CSS where they belong and dont use javascript until I really need to.
FYI I also started with skrollr but it won't really work with 'fullpage scroll' because what it really does is disabling scrolling and animating body/html through translate. Skrollr bases it's behaviour on scroll event which will not fire if you use libraries I proposed.
EDIT:
It appears that you can actually use skrollr in par with fullpage.js. You can see the answer on how in it's FAQ site. Thanks to Alvaro for claryfing that! Even then, I wouldn't use skrollr unless you really need it for some advanced parallax scrolling effect - as said before, depends on your needs though. :)
Let me know if you have any doubts or something is not clear in my answer.
Good luck!
I find my problem a little bit difficult to ask about, because I don't know how to explain it or how to even start searching for an answer. I will try here because I'm really stuck and I know Stack Overflow always helps me find a way to keep going and learning. See if someone can open my eyes.
What I'm looking forward to is to achieve a similar effect as the navigation in uzik's page: (see the grey banner at the bottom? well, that). So, yes, I know how to overlap two divs and just slide one or the other on top using jQuery. In fact, there's this demo that shows how to do that and more beautifully (very interesting link to keep ;) ).
But my problem is something else. Notice that when you click on the slider that will overlap the main content, the url changes. That's what I would like to achieve and I don't know if both divs (main content and overlapping content) are on the same page and the url is being changed using some js; or if the overlapping div is, in fact loaded from an external source.
In my case, I would like to load from an external page. Say, for instance, someurl.com and someurl.com/blog. The aim is, having both preloaded (I guess) to slide one on top of the other.
Is this even possible? I would like to think it is. I can follow js and jQuery instructions more or less, but need some guidance as to where to start off searching info, specifically on the loading content from some other url part.
Any tip is appreciated.
Kind regards, Bea.
Greeting's and thanks for your time.
I just started a new job building a new marketing site for a headphone company. I'am still a student with a year left and I trying to figure out the best way to proceed with a challenge I've been given for this site.
The site is a parallax scrolling site, with movement horizontally and vertically.
The area I need advice on is with the site being a scrolling site there is no natural point to do a page refresh. We have near 25 products, each with several variations totally over 250 images. My boss wants the site to scroll as seamlessly as possible, i.e. the user will move left/right to see the products, then the user moves up/down to see the variations of that particular product.
What would be the most effective means to load these images?
My first thought was to have the pre-loader begin loading everything after the home pages loads. This seems like the easiest solution but probably less effective?
My next thought was to have the scroll trigger additional pre-loader events? I've looked into this and I could use some advice on how to best accomplish this? I'am trying to avoid, within reason, the user seeing a loading gif.
Haven't had a next thought? but please let me in on any other process that might be better.
I'am not looking for an explicit answer, although if you want to provide one... I'am really just looking for advice and hopefully some articles that can get things going.
I was in a similar situation, although my parallax site was just for experiment/fun, but I found https://github.com/protonet/jquery.inview/ to be a possible solution. A loader for the first sections then after that inview would load in the next ones on scroll.
Im currently developing a car related website in which I want to create a very stylish progress bar with javascript (not flash). I want it to look similar to a speed indicator, like this: http://www.crestock.com/images/1260000-1269999/1260687-xs.jpg
So I have done great couple of Google searches for javascript bars but only found simple horizontal bars.
Any ideas of how I should proceed?
It is actually quite doable - see this article on CSS3 rotation and filters in Internet Explorer, and also search for the CSS3 Transform property - http://www.useragentman.com/blog/2010/04/05/cross-browser-animated-css-transforms-even-in-ie/
Although I would state right here and then that whatever purpose you might have use for a Javascript loading bar be 90% of the time it can't be good. If your page is so big that it'll require a loading bar then you really really should consider a redesign/rewriting of your code and design for the site. The same would be if you want animation just for the sake of animation.
But I'm afraid I might have said a little too much - don't let that discourage you from having a look at a very interesting technique, or from using it on whatever you deem necessary. If you need more help just drop a comment on this question.
give JQueryUI a shot. It has some rich effects and UI widgets.
Grtz
EDIT:
I came across this one:
http://dev.sencha.com/deploy/ext-4.0.2a/examples/charts/Gauge.html