I've been trying to analyse how this is done for the past few hours and just can't get it working.
Here's an example: http://vpthemes.com/preview/Modality/
If you go there, look at the 4 boxes under the text "CLEAN DESIGN & GREAT FUNCTIONALITY". If you resize your browser window, you'll notice that the boxes will go 2 side by side, and then if you go even smaller, they'll all go one under the other. The WHOLE website is like that; everything seems to resize perfectly depending on the size of the window.
How the HELL is that done? I've tried so many CSS styles it's boggling my mind.
Thanks!
As kumar said its done by media querys. You could take off the responsive css classes or overwrite it with '!important'
This is Bootstrap magic. You can configure each element in order to stay still, push right, left, etc. In the end, you have a layout that magically reorganize itself according to the size of the window and the configuration you've done. The mechanics of Bootstrap are partly in JS.
Amazing, isn't it?
But, wait. There will be a time at which you will be really pissed off of magic.
With #media rules and CSS3 possibilities, you can manage to reproduce Boostrap features in order to kill the magic with fire!
Related
I am doing an website where I have to keep one image fixed to the screen and on scroll I want different elements to appear one by one and stick to one position. When this is done I continue to the footer of the website.
I have done tried to reach that but whatever I do the page keeps scrolling and does not wait for all the elements to appear on the screen.
Example of what I want to do can be seen here Link on the second page where the mobile phone it is sticked in the screen and on scroll different content appear one by one.
How do I achieve this ? What kind of libraries would you suggest?
Thank you in advance.
stuff like this is usually done with js libriaries, as you already wrote. One that is actively supported and works quite well is Scrollmagic. It should be able to do what you describe, at least it can do the stuff in the example you linked: It can "pin" elements on the page for a defined duration (= "scroll duration") or animate elements controlled by the scroll position.
Scrollmagic can be found on Github or here: http://scrollmagic.io/ , examples to be seen here: http://scrollmagic.io/examples/index.html
Your fixed html content should have css position: fixed;.
Have you tried position: sticky? There may be browser compatibility issues but there are polyfils out there to fix that.
Find out a website http://www.boy-coy.com/#home. When you scoll down all content scrolls very smooth. Even if you scroll it fast, scroll is done at specific speed. This makes the website faster and responsive. How this can be achieved with the help of css and jquery?
At first glance.
Try reading their html source code output.
They use a few jquery plugins and legacy browser js plugin calls.
They have a custom and partially obfuscated .js script that is in depth, but you can see the specific properties it is setting on items in the page.
Barring any terms of use issues, you could likely decipher this pages cool scroll technique by working with this sample code as an example. But it is definitely a fair amount of work to write from scratch or post the entire solution here.
Im going to go and look for a smaller example that isnt as involved as this parallax.
And check out this link http:// codepen.io/JTParrett/pen/BkDie its got some starting principals here of some of the images positioning at different locations in the viewport when you scroll.
This link in SO can also help Can I change the scroll speed using css or jQuery?
Kirupa has a nice tutorial that can likely help in getting the smoothe scrolling effect stared too. http://www.kirupa.com/html5/smooth_parallax_scrolling.htm
And this one is pretty awesome. I think I would look into this demo. Be sure to test all of click event demos here. Im sure you could tie in your jquery tween event for the scroll bar with this http://plugins.compzets.com/animatescroll/
Another decent example http://bassta.bg/demos/smooth-page-scroll/
It is called Parallax,
Check this: http://www.w3schools.com/howto/howto_css_parallax.asp
http://matthew.wagerfield.com/parallax/
I've been investigating ways of creating a responive menu.
The standard technique would be to use a navicon on smaller devices which would trigger some kind of fly out/drop down menu.
I would like the most common options to show on screen, so I came up with the idea of a nav-bar, consisting of only a few important menu items, which would be visible on smaller devices. This would still need the navicon to display any additional items.
I then came across a menu which fulfills my requirements better in that it is more dynamic. The concept is that the menu grows as the screen size grows, but only displays an option when there is enough screen width to accomodate it fully. The remaining options are tucked beneath a dynamic navicon.
Here is the menu: http://www.money.co.uk/
As you will see changing the screen width changes the available options.
I could produce a semi-dynamic version using my media query breakpoints, but it would be good to be able to create a fully dynamic version. I'm guessing that it uses javascript - but as far as the techinque to be able to determine the available space and the space required, I don't know where to start.
I have some basic js/jquery knowledge, but would appreciate it if anyone could give me some guidance on how to go about approaching this one.
Thanks in advance.
Responsive menus are nothing, but its just a style manipulation as per screen size. You can go for CSS3 media queries to do it. It has inbuilt functionality to define the screen size.
#media (max-width: 912px) and (min-width: 681px)
Then, you need to manipulate the stylesheet. This is very common approach. Although, you can go with javascript as well by using window resize events and change your stylesheet accordingly. So whenever you will resize the window it will automatically overwrite the defined stylesheet.
Although, it is not recommended to manage it through javascript as it has lots of code complexity while managing the style. Use CSS media queries.
Hope this helps :)
I am a web design student and I am working on my portfolio site. I have a resume page that has a non-traditional design or layout. The problem I am running into occurs when the page is resized. Certain elements are pushed down as the window gets smaller. I need to find a way to adjust their top margin as the resize occurs, but I have not been able to accomplish this with media queries alone. Please see the following codepen for an example of the issue I am running into.
http://codepen.io/anon/pen/Hkpny
As the browser goes below 1440px, the boxes hanging from the ropes start to push down. Is there a way to use javascript to recalculate the margin-top and apply it to the elements when the user reduces or increases the window resize? The ultimate goal is to have the ropes stay connected where the red dots have been placed because I am going to give the hanging boxes a subtle swing or sway animation.
Any help would be greatly appreciated.
Thanks
I don't get it, all I had to do is to is what you did but for margin-top. You may want to play a bit with the values because I've never used scss before in my life (I'd do it with a <canvas> and javascript to begin with), but it works. http://codepen.io/anon/pen/iJgqn
Btw if you plan to display it in landscape mode on mobile, you may want to cut the shields left and right or it may get scaled very small. Maybe put them under the big shield in that case and get as much zoom on the rest as possible.
For a portfolio site I would recommend reconsidering the whole design. Just from this snippet, it seems the design is not very accessible and has too many dependencies. The concept is pretty cool but while you want to showcase your skills and creativity, you also want to showcase your understanding for accessibility (responsiveness), usability and what is trending right now (clean, minimal and flat design). I'm not saying you should fall in line and design what everyone else is, but you need to attract clients which is the whole purpose of a portfolio.
We're using this autoscroller script: http://scripterlative.com/files/autodivscroll.htm (the bottom version).
However, we got really stuck since we don't know how to replace the moving "scrollbar" on the scroller side with a pure and simple line with up arrow on top and bottom arrow on bottom.
Functions wise we want this sidebar to behave exactly like the original sidebar and of course be cross browser compatible. We just want to get rid of the original scrollbar and replace it with a much cleaner and more stylish style.
Is this doable?! How?
Best regards Stefan
Just found jScrollPane on AjaxRain.
Implementing an autoscroll would take some coding, but should definitely be possible by just sending the click messages to the div manually so that it would do the scrolling. If it looks like this will suit your needs, I'd chip in with some additional implementation code. That topic may actually be better suited for another question, if you decide on jScrollPane.
Edit: updated link above. also, there are demos there for scrolling on hover and clicking on a link to jump to an anchor. Custom code for an autoscroll should be relatively simple to write from there.