Vertical single-page fuild CSS layout - javascript

I wanted to know if anyone could provide more insight into the design style of the following website:
http://mailchimp.com/goes-with-you/
I'd like how certain elements remain fixed, while others are responsive, and appear behind layers etc.
Basically I would like to learn more about this style of layout, what it's called, and I wanted to know if anyone could provide me with some links to online resources that go a little further into similar designs.
Any information would be very very appreciated.
Thank you!

It is known as Parallax Scrolling effect. There are many tutorials about it. Just try to use the web search with this keywords.

You seem to be looking for details about layout style called parallax:
http://www.creativebloq.com/web-design/parallax-scrolling-1131762
There are js libraries like jQuery.parallax and parallax.js that may help you developing such a site.

Related

Weather App Hourly Scroll Effect

I see in a few places that people are looking for the weather app effect. A lot of those questions are for android apps or JAVA, but I'm looking for the use on an HTML/CSS/Javascript site. Is this even possible?
I'm specifically looking for the finger/cursor scroll effect when you look at the hourly forecast.
Pointing me in ay direction would really help.
Even if I have to dig into another language like Ruby on Rails, that would be helpful to know.
Thanks.
Based on your comment, if you wish to implement a feature where the user can swipe left or right between images or areas then you should consider looking at a framework like Hammer.js http://hammerjs.github.io/ or Zingchart https://zingchart.github.io/zingtouch/.
These are Javascript library's that allow you to implement gesture functionality to a website.

How to get content to slide in on scroll?

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

How to prevent window-resizing affects your elements

Okaay, ive been dealing with this problem for quite some time now, and i really need to get an answer now :D The problem is, when im resizing the window, all my elements just messes up. When i try resize other websites(could be anyone; facebook, twitter, even stackoverflow) it does NOT harm any elements. The view just get smaller. How do i do this?
General answer in a general tone:
Conduct some research on responsive web design practice. Learning about different types of layouts (Flexible, full responsive etc.) will certainly help understand the possibilities you have with only CSS and HTML. At least discovering this knowledge will enable you to speak more closely with your developer and head in the right direction.
Cheers!
LaddtheImpaler

Web page floating pointer

I want to place arrows and small explanations floating over the top of my web page when they first signup to kinda teach them the basics. I want like a tooltip with an integrated pointer/arrow but is not activated on mouseover, it is just loaded on the page when it is loaded and visible. Is there a jQuery or javascript that will do this?
Many thanks
Paul
I don't think you really need javascript for that. Some custom CSS will do just fine!
Or do you want the tooltips to (dis)appear? I mean like a some kind of a tutorial?
I am using this one: http://flowplayer.org/tools/tooltip/index.html and can't be happier with it :)
You can also take a look here to see different types of tooltips.

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.

Categories