Delay in Responsive layout? - html

I would like to know how do you create the "delay" in Responsive design?
What I mean is, take the site awwwards.com as an example. When you reduce the width of the browser there is a bit of a delay for the site to respond.
I would of imagined the code being this:
html, body {transition: all 0.2s ease-in-out;}
but clearly it isnt (...or is it?!)
Just want to apply this effect on my own site which is Blue Harlequin

Add -webkit-transition: width 0.3s linear; to your .w css class like this
CSS:
.w {
width: 960px;
margin: 0 auto;
-webkit-transition: width 0.3s linear;
}
Because the .w is the container for all your elements so add the the transition to that class will make the layout as how you expect.

It does have transition: width 0.3s linear 0s; but it on the wrapper div.

Related

Delaying a second css property until after the first transition is complete

I have a div that has a css animation transition for it's height when you hover over it. When you also hover over it, the background color change from pink to orange. However, I don't want this background color to change until after my height is done transitioning. Is there a way I can do this? I looked into using transition-delay but it seems that it can only be applied to one transition property? Thanks!
div {
margin: 3rem;
height: 10rem;
width: 10rem;
background: pink;
transition: height 0.3s ease;
}
div:hover {
height: 20rem;
background: orange;
}
<div />
You can specify delays for any property you like:
div {
transition: height 0.3s ease, background 0.3s ease 0.3s;
}
(In this case the last 0.3s defines the delay for the background color, see e.g. on MDN)

How to collapse in the bootstrap nav from right side? [duplicate]

Is there a way to collapse the the Bootstrap Collapse plugin from horizontally instead of vertically? Looking at the code this ability doesn't seem to be built in, but I'm hoping I'm just missing something...
Any help will be greatly appreciated. Thanks!
I figured out how to do this very easily without modifying or adding any javascript.
First you define the following CSS after all Twitter Bootstrap CSS:
.collapse {
height: auto;
width: auto;
}
.collapse.height {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
}
.collapse.width {
position: relative;
width: 0;
overflow: hidden;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
.collapse.in.width {
width: auto;
}
.collapse.in.height {
height: auto;
}
Next, on the target element (where you define the .collapse class) you need to add the class .width or .height depending on what property you want to animate.
Finally, you must wrap the contents of the target element and explicitly define its width if animating the width. This is not required if animating the height.
You can find a working example here -> http://jsfiddle.net/ud3323/ZBAHS/
With bootstrap 3.0.0, you just need to add the width class to the target element and then the following css if you want it to animate.
.collapse.width {
height: auto;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
Updated 2019
Bootstrap 4.x
Bootstrap 4 horizontal collapse transition is basically the same, expected the visible class is now .show instead of .in. It also may help to specify display:block since many elements are now display: flex.
.collapse.show {
visibility: visible;
}
4.x horizontal collapse demo
4.x sidebar demo
Also see:
Bootstrap horizontal menu collapse to sidemenu
How to slide nav bar from left instead from top?
Bootstrap 3.3.7 (original answer)
None of the existing answers worked for me. To make the collapse animation horizontal in the latest versions you need to set both transition to width, and also use visibility.
.collapse {
visibility: hidden;
}
.collapse.in {
visibility: visible;
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition-property: height, visibility;
transition-property: height, visibility;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
.collapsing.width {
-webkit-transition-property: width, visibility;
transition-property: width, visibility;
width: 0;
height: auto;
}
3.x demo
In my version of bootstrap 3 (using LESS), I simply had to include this in my global less file:
.collapsing.width {
width: 0;
height: auto;
.transition(width 0.35s ease);
}
The extra class has to be width since the collapse.js looks for this class for the transition. I tried everyone else's suggestions, but they didn't work for me.
It doesn't appear to be an option for that particular plugin. It looks like you may need to modify it or hook into it somehow to get it to work that way...
After looking at the JS file for a bit I noticed a couple things. First thing is that it looks like it might be using bootstrap-transition.js ,which appears to be using CSS3 transitions. So it might be possible to write a new transition. I am not 100% certain if that is how it is working though.
Option One
My suggestion would be to either poke around in the bootstrap-collapse.js plugin file for a while and see if you can figure out how it is working.
In particular I would look at this part... bootstrap-carousel.js
this.$element[dimension](0)
this.transition('addClass', $.Event('show'), 'shown')
$.support.transition && this.$element[dimension](this.$element[0][scroll])
It looks like .transition is a callback from bootstrap-transition.js
Option Two
My second suggestion would be to just write something of your own.
My Answer
And finally my answer is that from looking at the bootstrap documentation it doesn't appear to be an option.
Some additional info:
This website seems to be doing similar stuff with CSS3 transitions.
http://ricostacruz.com/jquery.transit/
i think translateX(-100%) and translateX(0) might be the way to go rather than animating width as uses hardware acceleration correctly when supported
Good answers here, but I had to make some modifications for a cleaner, two-way transition:
.collapse.width, .collapsing {
height: 25px; /* depending on your element height */
overflow: hidden;
-webkit-transition: width 0.25s ease;
-moz-transition: width 0.25s ease;
-o-transition: width 0.25s ease;
transition: width 0.25s ease;
}
Setting a fixed height also helped prevent page "jump" as the element collapsed and expanded.

Resizing nav menu PNGs on screen resize

I have a nav bar made up of png icons. When resizing a page or displaying on other windows, the icons do not move so get cut off. I cannot find a way to resize the icons on different screens and make the icons white on hover? I know as they are .png’s I may have to create all of the icons in white aswell?
Anyway you can see it live at http://www.ssangar.com/
Here is my code for the nav:
http://cdpn.io/msjzi
Thanks in advance!
I'm not quite sure if I understand your question 100%, but just as Racil put it, you want to create a css, and set it to a percentage or with pixels...
If you want to add some transformations, I use this code on my website:
nav li a:hover, nav li a.current {
color: #0099CC;
-o-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-webkit-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-ms-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-moz-transition: background 0.3s linear 0s, color 0.3s linear 0s;
transition: background 0.3s linear 0s, color 0.3s linear 0s;}
The reasoning behind all the different transitions is for the all the old browsers that do not accept the transition code.
*Note: You will need to supply more nav info in your css code, the above is to only make it have a transition effect..*
Depending on what you're trying to achieve, instead of creating another set of icons in white, you probably can use opacity alpha layer. Check this tutorial. Here are the basics:
.myMenuItem:hover
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
As for the resizing, you can simply set the size to percentage:
.myMenuItem
{
width: 30%;
height: 20%;
}
You can also use transition or transform to add some effects:
transform: scale(.5);
transition:width 0.5s ease;

Show/hide div with link same link should also work for the tab content

The title may seem little bit confusing so I draw a sketch, so you can understand more what I want to achieve: https://www.dropbox.com/s/luoiz4erg4jfk8y/howitshouldwork.png
The tab function is based on liquidslider
I've start on the transition part, but I need some help...
CSS:
li a:onClick + .bottom {
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
transition: height 0.3s ease-in-out;
bottom: 400px;
}
http://jsfiddle.net/ea9VT/1/
It should not be a scroll.
Can anybody explain how this should be done?
My Suggestion is you can use Jquery for this Animation. I hope this done very simple by using JQuery animate function.

Trouble adding css transformation to background images

I'm creating a simple web page and I'm having trouble adding a fade animation to the css when the background image is changed. I know I need to use something along these lines but whenever I try it, it doesn't seem to work...
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
I'll put a link to my css and html below, if anyone could take a look, I would be very grateful :)
CSS: http://pastebin.com/9k1tSiAE
HTML: http://pastebin.com/2K7GFWjN
The problem is you are changing the background image in addition to simply changing properties on the background itself. I've setup a fiddle with some random background tiles. You'll see the background slides but the image changes immediately without a transition:
http://jsfiddle.net/jimjeffers/a2jAF/
You'll need to settle on one image for the background but right now you have three:
background-image:url(nav-bg-initial.png);
background-image:url(nav-bg-secondry.png);
background-image:url(nav-bg-tertiary.png);
You'd need to condense those into one sprite. But once you apply a transition to background and adjust the background position, the background slides rather than fades. So depending on the effect you're going for - transitioning the background may not be the best option for you.
Instead -- what you may need to do is use some nested empty container elements. It's not semantically nice but it could achieve what you want if you want to use CSS transitions to perform a cross fade.
<ul id="navigation-list">
<li><a class="navigation-button" id="nav-button-1" href="#">HOME</a><span class="initial"></span><span class="secondary"></span><span class="tertiary"></span></li>
...
</ul>
The CSS then would be:
.navigation-button { position: relative; }
.initial, .secondary, .tertiary {
bottom: 0;
left: 0;
opacity: 0;
position: absolute
right: 0;
top: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
z-index: -1;
}
.initial { background-image:url(nav-bg-initial.png); }
.secondary { background-image:url(nav-bg-secondry.png); z-index: -2; }
.tertiary { background-image:url(nav-bg-tertiary.png); z-index: -3; }
And then you'd toggle their appearances like this:
#navigation-buttons:hover #nav-button-1 .tertiary { opacity: 1; }
It's a bit more work but you'd have to do something along those lines to cross fade different background images at various positions without getting a slide effect.