http://www.giampierocruceli.com/
How did this person achieve this? And is there any term so I can google that and maybe find a template or something.
Thanks.
It's just an on-scroll binding that overrules what should happen, then scrolls down to another element and said elements fill the entire screen. In my opinion and experience, these things are incredibly annoying to end users and extremely bug sensitive, but if you want I could write up an example for you... For googling purposes, try "Scroll full page" or something.
There are also plugins that take care of this, like this one: https://alvarotrigo.com/fullPage/#3rdPage
Related
I've dug through the internet and found some things that seem to be going in the right direction but nothing that seemed like a complete solution. Here's what I found:
The upcoming CSS property backdrop-filter, which is currently only supported in Safari and behind a Chrome developer flag. Exactly what I need, but it needs better support.
The JavaScript library Blur.js, which seems to have all but disappeared from the internet. (Even the official website leads to a GoDaddy page.) It may have been a solution but I'm not sure what happened to the project.
The JavaScript library StackBlur, which seems to be a brilliant blurring solution, but I haven't the slightest idea how I would use it to blur BEHIND an element.
Any ideas? Perhaps someone has used StackBlur to do this and has a CodePen I could poke through or something? Basically, I have a grid of element each using jQuery UI Draggable that I would like to make translucent with a nice blur behind each one. The blur needs to update as expected when the elements are dragged around.
One last thought. Right now what I'm using is a pure CSS "solution", but it has some annoying limitations. If you are going to suggest a solution with only CSS it's probably what I'm already doing. The issues with it are the following:
The area behind the element isn't really blurred, just an arbitrary background image.
The edges or the blurred area do not cleanly cut off the blur. This is a bit hard to describe, but just trust me when I say that it's doesn't look great.
Unless I missed something huge in all my searching, I think I'm going to need JS for this one.
Barmar is correct. Give two objects the same absolute position. Blur one object and assign it a lower z-index. Bob's your uncle.
If you need some clearer specifics, then please post your code following the SO guidelines.
Does anyone know if any open source animate sliders exist, like the one on this Wordpress theme: http://vencorp.venmond.com/index-revolution.php
The only ones I can find are plugins for Wordpress websites, I was hoping there would be some standalone versions.
Thanks
Are you looking for a carousel/cycle type thing?
Like this? http://jquery.malsup.com/cycle/ or this http://sorgalla.com/jcarousel/
Just to clarify, I wanted something very similar to the example I showed. Other well known sliders are too basic.
I found a solution though and I thought I'd answer in case it helps anyone else.
I opted for: http://www.themepunch.com/codecanyon/revolution/liveguide/02.Sample-Fullwidth.html
...which you can buy at http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848
Seems really good so far.
The best example site I can give about this effect which I'm struggling to articulate is Facebook. When you click a photo, you get a div that floats on the top of everything enlargening the photo and giving extra info. It's kind of similar to something you'd find in a conventional app - like a sub view kind of thing.
http://img.photobucket.com/albums/v282/Ace_of_Spades01/fb_zps2047caf8.png
Is there a framework or other pre-built solution out there or will I have to roll my own.
Shadowbox let's you do this. It can display HTML and is easy to implement.
http://www.shadowbox-js.com/usage.html
The feature you describe is known as a lightbox.
If you use jQuery, you can use something like fancybox - http://fancyapps.com/fancybox/
If not, there are many alternatives if you Google 'lightbox'.
Drop Down menus are a common and almost ubiquitous UI element, and yet, I find it really hard to "pick one". before heading down the long road of rolling and "battle testing" my own, I'd like to put it out there and find out what others are using.
What are the most popular solutions for jquery, or javascript dropdown menus ?
Should be, lightweight, easy to customise and properly cross browser compatible, and at least function appropriately down to IE8.
Ones I've tried and used in the past with the best experience that meet this criteria inlcude :
Super fish - http://users.tpg.com.au/j_birch/plugins/superfish/
Dynamic Drive Smooth Menu http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm
To Clarify: looking specifically for multilevel drop down menus similar to the examples above. I'm also open to "avoid these they're sh*t" type answers if you feel so inclined.
PS: please avoid adding 5 from one of the 500 drop down menu articles that appear when first searching on google, I'd like to know about what YOU"RE using, what dropdown menus YOU love and hate.
have you tried this may be this can give you what you want
http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
I personally have used SuperFish, in it's standard form, it's not too pretty but with quite a bit of adjustments I find it can look quite nice.
Then using something like this: http://snook.ca/archives/javascript/jquery-bg-image-animations
Demo: http://snook.ca/technical/jquery-bg/
Can make them look very cool!
After a fair amount of research and messing about, quite honestly I'm fairly disappointed with the options in this area there are a couple options but as commented above rolling my own seems to be the best way forward.
i bet everyone of you has seen www.tumblr.com
right on the registration page on the bottom you see the '30 reasons...' link that slides the complete page up and reveals a second one.
i found ways to do this with putting two sides into one and just scrolling to the second part, but tumblr seems to have 2 different pages there that swap somehow with a slide effect.
im pretty sure it is done with some jQuery but i have not found any more information about how to achieve something like this.
it is a question out of pure interest because i really love the effect =)
it would be great if someone would give me a hint how to do something like that.
thanks in advance,
sebastian
It is indeed a nice effect. It's a bit of a combination of CSS and javascript really. I would use jQuery for sure. I've knocked up a little jsFiddle to show you how it can be done:
http://jsfiddle.net/SufZD/