I'm trying to find out what method this site uses to achieve their eased scrolling effect.
I searched through their minified code and found some instances of 'scroll', but nothing I can use to identify how it's being done:
...Width":"Height",o="scroll"+r,s="client"+r,a=document.body;return n===e||...
Any ideas what code, method or library is being used to get this scrolling effect?
Thanks in advance for any help you may have.
Related
I recently came across a slider on this website - https://antoni.de/. I really like the transition effect but I can't for the life of me figure out how it's done. I get how the slider works but its the actual transition that is baffling me. I have no idea what this effect is called and I am not sure if it is done by CSS or JS? Would love to be able to imitate the same sort of transition effect. Does anyone know how this done and can point me in the right direction to building something similar?
This is an image of the transition effect:
Its made with canvas HTML5, you can see this in source code.
I actually messaged the developer to find out how he made this. It is made using webGL!
I'm currently facing a visual annoyance using the bookblock.js plugin
The website I'm referring to is:
http://indiewhip.com/projects/pulse.html
The page turn effect is cool, but very jittery. By Jittery, I mean that it jumps frames turning the page when loading the video or image.
I was wondering if anyone had any fixes, or resources I could use in attempt to achieve a more elegant effect?
all help and advice is greatly appreciated!
I am playing around and trying to build a parallax website - yes, I know they are an annoying fad but I would still like to have a go. So, for inspiration, I have been looking at various examples of good parallax websites and came across this one: https://victoriabeckham.landrover.com/INT.
It has smooth scrolling using the mouse wheel, scrollbar, and anchor links. I have been searching for jQuery plugins that would achieve this effect but can only seem to find ones that use internal page links - anchor or ID's (detailed below) - but, not mouse wheel and scrollbar. There is a good chance that I am searching using the wrong keywords. Does anyone know the correct terminology to find these plugins or know any plugins that would achieve this effect?
On a side note, I am currently learning jQuery and Javascript but am in the very early stages - still trawling through codeacademy and not made it onto any real world code yet. So at the moment I am playing with plugins as a way of learning but hopefully in a few months I can build my own stuff!
Smooth scrolling to anchor tags or ID's:
http://archive.plugins.jquery.com/project/ScrollTo
http://jsfiddle.net/9Amdx/7/
http://arthurclemens.github.com/jquery-page-scroll-plugin/
http://www.learningjquery.com/2007/09/animated-scrolling-with-jquery-12
http://www.designova.net/scrollerbird/
http://chris-spittles.co.uk/?p=462
http://joelb.me/scrollpath/ (*courtesy of #DrunkRocketeer)
And, another example of a parallax website using a similar technique for scrolling:
http://www.ascensionlatorre.com
Try this one. https://nicescroll.areaaperta.com/
It has got
$().scrollTop()
jQuery event listener too so you can have scroll path configured with parallax script.
I think you have to combine several of these effects in order to make something that resembles the Landrover site. A Smooth scroll script, a scroll path script and a parallax script.
This is an interesting site for the path element of that website:
http://joelb.me/scrollpath/
Though the best way to find out how these sites work is to examine them! Some cool sites useing parallax:
http://www.awwwards.com/?s=parallax&post_type=all&search=Ok
I hope this was of some help/inspiration!
I am hoping to build my navigation bar into something like:
http://www.taylorhowes.com/#/portfolio/knightsbridge?imageid=1
where the navigation links appear and disappear on mouseover from a specified area of the page. Is this possible without using Flash (I have CS5 but have never used Flash before and find it all slightly daunting!!).
If this is possible in css and javascript, does anyone know of anywhere online where I could find a tutorial or a script to manipulate to implement on my site?
Thanks!
JD
This is definitely possible to do without Flash. Look into jQuery. Specifically: http://api.jquery.com/animate/
There are so many things here, it is hard to point you in a specific direction, but that should get you started with what you want to do.
You can achieve similar effects using JavaScript and CSS.
There are some javascript navigations that you can copy & paste to your site, for example: http://www.menubasic.com/Menu/Menus.aspx?p=1
404 Page or 500 Page
Anyone have any idea how to do this sort of thing? The animation that moves with your mouse? Thanks for the correction, #Alin. Just a link to a tutorial would be nice.
EDIT: Just also learned it's the parallax effect. That should help.
The effect is accomplished with javascript, not just CSS.
The source code is on the page you linked to.
Have a look at jParallax, which makes it easy to implement the effect in a robust way on your own site:
http://stephband.info/parallax.html
Guess you can always start by firing up FireBug and have a look at the source.