How to get content to slide in on scroll? - javascript

I just wondered how to get content blocks to slide in horizontally on scroll? It seems quite common on a lot of modern themes and I'm hoping to add this kind of effect on the homepage of http://brokernotes.co where we have the three 'how to' sections.
Any pointers on how to do this would be much appreciated.

There are lots of way to achieve this.
I would highly recommend using JavaScript over anything else to tackle this challenge, and on top of that I would suggest using jQuery where you can find some methods like $.hide() and $.show() which also allow you some nice animated transitions.
I also think that the example you provided relies on jQuery as well (they have jquery.min.js included as a script, etc.) so this is definitly the point where you want to start.
w3schools provides a tutorial series about jQuery where you can get started:
http://www.w3schools.com/jquery/jquery_examples.asp

Related

Scroll-based animations: how to create them

I've come across this webpage: http://www.wsj.com/ad/cocainenomics
It shows exactly the kind of animations I would like to learn to create.
Nothing massively complex, just elements or layers coming in while the user scrolls the page (don't consider the 'powder' animation on hero visual).
What technique / programming language / js-based library would you expert animators advice as the best option to achieve this?
I'm considering:
pure jQuery animations
jQuery triggered css3 animations
a velocity.js-based approach with minimal jQuery use only for chaining an animation call onto a jQuery element object
What approach between these you guys deem to be preferable? Or do you have something else in mind?
Do you think that the mighty power of velocity.js is disproportionate for animations this simple? I've seen velocity demos and they are way more complex than the scroll-based animations the above website includes.
I've found success with Skrollr before for this sort of thing:
Check out the demo at https://prinzhorn.github.io/skrollr/
Look at the code at https://github.com/Prinzhorn/skrollr
EDIT: I've just looked at the Skrollr docs and noticed it stopped being maintained about a year ago. A quick Google brought up ScrollMagic as a possible alternative. I'd also recommend digging into the source code of the example site you provided, and seeing if you can get an insight into what they've used!
Velocity.js isn't necessarily something you'd go to specifically for the kind of scroll-position-based animations you're looking for - it's just an alternative option for doing the same as you'd do with jQuery's animate() but with behind-the-scenes magic to make the animations more efficient.
Strictly speaking, StackOverflow probably isn't the best place for this type of question (see the guidelines for questions over at https://stackoverflow.com/help/dont-ask) - so your question might get flagged by moderators!
please check this, https://codyhouse.co/gem/vertical-timeline/ i believe its exactly what you are looking for, check the demo here : https://codyhouse.co/demo/vertical-timeline/index.html
i believe its a pretty simple option, since its free and its fully customizable.
(also its almost only css with a little jquery)

What's an easy way to get started with an interactive Javascript slideshow / image viewer?

I'm very very new to Javascript. What I'd like to do is one of those rows of smaller images, that when you click on one it pops up bigger with left and right arrows for sliding through the photos.
What's the easiest way to get started doing something like that?
Any help is greatly appreciated, thanks.
You know we're not your research site, but since you're asking for the easiest way, I'd recommend HighSlide JS. It doesn't require JQuery, is highly personalizable, comes with examples which you can just copypasta and a nice tutorial.
Of course, if you'd include the JQuery lib to your page, you could also try one of these fancier plugins. And there are also some JQuery carousel plugins as noted by #Nupul.
Check out the galleries plugins at Web Resource Depot

Javascript / jQuery plugin to allow horizontal scroll effect

Basically I would like to archive results like that: http://www.pixelapse.com/#
Does someone know any nice plugins for that or good articles explaining how to do such effect. I'm able to google http://flowplayer.org/tools/scrollable/ but maybe you know some alternatives?
This effect is called a carousel. Typically you shift through elements in a list with some sort of animations and controllers.
This article from Tripwire Magazine should give you a pretty good overview of what's out there. As you can see, a lot of the carousels out there are intended for displaying picture galleries, so it might require a bit of hacking on your part to get the result you want.

flash website redone in jquery? feasible?

I'm considering attempting a redesign of a flash website with jquery effects and transitions in place. I just wanted to reach out to the community to maybe see how feasible this really is considering the particular transitions and effects this website has.
Here's the link:
http://antonynicoli.com/english.html
The gallery I guess can be recreated by carousel plugin, but there are so many out there so maybe could suggest a stable one that would be be best suited to this job. The other items that really caught my attention in which I wouldn't really know where to start is the navbar and the effect that looks like a book opening when you click on a link on the navbar. Any and all input would be appreciated. Thanks.
This is probably doable, but I'm wondering about the motivations behind changing to an HTML/jQuery solution when it looks pretty good right now (as Brad pointed out above, it would require a total rework). I see a couple of things going on:
Carousel: jCarousel (http://sorgalla.com/jcarousel/) (never used it but it is popular)
Animations: jQuery Animate (http://api.jquery.com/animate/)
Other widgets/interactions: jQueryUI: (http://www.jqueryui.com)
Not sure how you would go about the open-book animation, but I suspect you could accomplish it with some clever jQuery animations.
The best way to see if it could be done is: start doing it! jQuery has tons of resources and you'll get good help here on StackOverflow.
After looking at the site i do believe most of the effects can be recreated fairly well using jQuery. Of course, your end-result might not be as smooth as the flash implementation but i think it can be done.
If you look at using HTML 5 i believe a lot of animations such as page transition with the opening book can be simulated with the canvas element. Same with the navigation elements.
https://developer.mozilla.org/en/canvas_tutorial
http://diveintohtml5.ep.io/canvas.html#divingin
As you mentioned some of the effects such as the carousel can be recycled from existing plugins. The only holdback really is how much time do you want to invest in porting a design to a language not as well suited to do the job. jQuery is an excellent framework but it is far from a drop-in replacement to create effects that are trivial to create in Flash/Actionscript.
the whole site can be done with jquery. all you have to do is map out all the animation done on the site and write it on paper. then look for the jquery alternatives online and check them off one by one. some things might not be exact but it will do the job.

Rotating images + content - jQuery or MooTools?

I've found a feature on two different websites that I'd like to include on one of my web projects, but I can't figure out how they're doing it. I think they're using either jQuery or mootools, but I'm not sure.
http://www.x-plane.com/index_desktop.html
I'm new here so I don't have the reputation to post the other link, but if you do a Google search for "Andrews Institute of Orthopaedics" its the top result. I'll see if I can answer a few questions to earn my keep.
The thing that I like about these is that the images and text (including links) are all rotated together. I've done a few web searches related to cycle, rotate and slide but it's not coming together for me. Can anyone give me a nudge in the right direction?
The page you linked is using prototype for this (usually because that's what the author knew, as with most libraries), and it is custom script they've written. However, jQuery has a lot of plugins with various styles, just see what one fits your taste best. I'd suggest taking a look here and a look here.
Anything you find can be automated on a timer like the site you linked, or use buttons, or both. These are all pretty flexible, I'd start by finding the plugin you want, try and get it going, then asking a question here if you have problems getting it to behave exactly how you want.

Categories