I want to implement the fade and scale effect shown here:
http://tympanus.net/Development/ModalWindowEffects/
but for a page (with width and height of 100% of the browser) not a modal.
How can I do that using jquery or css? I tried copying the code on the page but it works best for modals not for pages that have width and height of 100%.
On the page are elements with minimum width of 1024px.
Updated the jsFiddle to show it containing elements that are at least 1024px.
You'll want to put your entire page into a wrapper element, and then give it the animation class on DOM Ready.
The CSS will be something like:
body,html{
height:100%;
margin:0;
}
.page-wrapper{
height:100%;
overflow:auto;
overflow-y:auto;
overflow-x:hidden;
transform:scale(0);
opacity:0;
transition: transform 1s ease, opacity 1s ease;
}
.page-wrapper.fade-and-scale{
transform:scale(1);
opacity:1;
}
And the jQuery will be something like this:
$(document).ready(function(){
$('.page-wrapper').addClass('fade-and-scale');
});
This solution has the benefit of:
"Growing" from the centre of the page, and falling back gracefully on older browsers
Falling back gracefully on older browsers
Not animating any fundamental css properties (ie. width or height)
Fiddle: https://jsfiddle.net/gk5c08rc/4/
Did you mean something like this?
https://jsfiddle.net/rn8ho7wL/
Wrap your page in a wrapper, and set a smaller (or whichever style you like to go FROM) into the base styles for that wrapper. Add in a transition-duration property.
#wrapper {
transition: all 2s;
-webkit-transition: all 2s;
width: 10%;
height: 10%;
background: red;
margin: 0 auto;
opacity: 0;
}
Then, define a class where you want the page to go TO. Styled the same way.
#wrapper.open {
width: 100%;
height: 100%;
opacity: 1;
}
And in your javascript file (assuming jQuery is loaded), simply apply the style.
$(function(){
$('#wrapper').addClass('open');
});
Bear in mind that CSS3 transitions are not supported by IE9 and below, and also require some vendor prefixes to be largely compatible. For using the transform, as described in another answer, apply the following:
-webkit-transform: scale(0); /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
-ms-transform: scale(0); /* IE 9 */
transform: scale(0);
Edit:
The issue with the min-width can easily be solved by adding overflow: auto to your wrapper element.
https://jsfiddle.net/rn8ho7wL/2/
Related
I have a serious issue with my dropdown settings on iOS Safari. Imagine a website, which has a header on the top. If you click the header, it will slide down, just like any notification center on mobile phones. The way I chose was quite simple. I have a <div class="settings hide"> with this css:
.settings{
position: fixed;
width: 100%;
height: calc(100vh + 60px);
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 10;
}
.hide{
top: -100vh;
}
Now, this makes it look like so:
Now, the next step was to create it "slide-able" which I've done using jQuery, by adding class called "show".
.show{
top: calc(0vh - 60px);
}
And this actually made it great. It just worked! Suddenly I tried the website on my iPhone, and because of the bottom bar, always showing until you scroll, my hipe was all gone.
Because it look like this:
Getting it so far? My menu did slide correctly, looks great in any browser, but here in Safari, it is hidden right behind the bar, so user actually can't close it.
I tried my best to solve this issue, butnothing really worked as I wanted.
PS: I assume you know that, but it kinda works when you use bottom: 0;, then it "knows" about the bar and stops correctly right above it. But because the setting is calculated with top position, it does not do the animation, which is necessary for my design.
Any help/solution appreciated!
David, unfortunately iOS Safari is full of unpleasant surprises.
One of them is what iOS Safari considers 100vh.
Viewport height in iOS Safari is not equal window inner height as in Chrome or Firefox.
E.g. on iPhone 7plus 100vh == 696px, but window.innerHeight == 628px.
On iPhone 6 100vh == 628px, but window.innerHeight == 559px.
And so on...
So the solution is getting rid of 100vh.
Assuming that body is offset parent of .settings use 100% instead:
.settings {
position: fixed;
width: 100%;
height: calc(100% + 60px);
...
}
.hide {
top: -100%;
}
Also you do not need to use calc in your .show class (since 0vh === 0):
.show {
top: -60px;
}
I am trying to hide a div with an animation on some action. My initial pass at it looked as follows:
.row {
height: 50px;
transition: height 200ms ease-in-out;
&.hidden {
height: 0;
}
}
Where my DOM structure was as follows (with react):
<div className={styles.container}>
<div className={styles.row} />
<div className={classnames(styles.row, { [styles.hidden]: !this.state.active })}
</div>
While this did work, it was very slow. I have heard that transforms are efficient to transition in CSS, so I decided to try the following instead.
.row {
height: 50px;
transform-origin: top;
transition: transform 200ms ease-in-out;
&.hidden {
transform: scaleY(0);
}
}
However, within the container, the second row is still displaying as a 50px box, but the inspector says that it has 0 height.
How can this transform be correctly applied to hide the second box?
3D transforms are efficient because the browser will composite the targeted elements into their own layers and offload the animations to the GPU. height and even scaleY() are not 3D transformations and do not benefit from GPU acceleration (the CPU still handles it).
To go back to your example with height, you can force the browser to use GPU acceleration by tricking it with a fake transform property like transform: translateZ(0); (translateZ() is the 3D component of translate3d(), much like scaleZ() is the 3D component of scale3d()).
Here's a quick demo:
document.querySelector('button').addEventListener('click', function() {
document.querySelector('.row').classList.toggle('hidden');
});
.row {
background-color: green;
height: 50px;
overflow: hidden;
transition: height 200ms ease-in-out;
transform: translateZ(0); /* or translate3d(0,0,0), rotateZ(360deg), etc. */
}
.row.hidden {
height: 0;
}
button {
left: 0;
position: absolute;
top: 100px;
}
<div class="row">Some text</div>
<button>Toggle Row Visibility</button>
With the added property, the browser should utilize GPU acceleration, significantly improving the animation. See this question for more information related to transforms and GPU acceleration.
I would recommend trying this first to see if it speeds up the animation enough in your app. You could alternatively try adding the will-change property though this is part of a working draft and currently non-standard.
I'm developing an cordova app with 3 "pages". The "pages" are divs with a fixed height and the with of 100%. (see div1, div2, div3 in the picture)
I'm currently using jquery show and hide functions with a slide but the performance on mobile phones is very bad. So I thought of using css, I cant get an idea of how to make is so you can swipe the current visible div to sort of snap the next div in place.
Maybe this picture wil clear my story up: picture
I hope someone can push me in the right direction css and javascript wise..
You should still use jQuery Mobile to detect swipe left/right events on each div, but instead of animating div's position, you should add/remove class for the previous/active/next DIV. Classes should look something like this:
.container {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100vh;
transition: all 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940); // this will add nice inertia effect upon switching DIVs
}
.container.previous {
transform: translateX(-100%);
}
.container.active {
transform: translateX(0%);
}
.container.next {
transform: translateX(-100%);
}
I am currently working on an iOS webapp and have run into an odd issue. I use -webkit-overflow-scrolling: touch; to make a scrollable DIV which works great however when I update the DOM in combination with a scrollup effect in CSS the content is no longer viewable when scrolling down. It 'knows' the height of the content as scrolling is unaffected however nothing below the current view is actually viewable and seems to be cut off. Does this make any sense? If so, any ideas as to what might be going on?
Here is the 'scrollup' effect:
#-webkit-keyframes slideup {
from {
-webkit-transform: translateY(100%);
}
to {
-webkit-transform: translateY(0);
}
}.favup {
-webkit-animation-name: slideup;
-webkit-animation-duration: 350ms;
-webkit-animation-timing-function: ease-in-out;
}
This is the CSS for the content DIV which is where everything is being modified at:
#content {
width: 100%;
position: absolute;
z-index: 1;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
Lastly this is the trigger that ends up breaking everything basically:
document.getElementById('content').innerHTML = "<div id=\"fav\" class=\"favup\"></div>";
I also update the height after every DOM update to keep the scrolling working properly as talked about here: iOS div momentum scrolling without fixed height (content loaded via ajax)?
I am trying to redo the a tutorial I had posted links to in previous question to have as much HTML5 and CSS3 code. I read in some online article's that in HTML5 they are trying to get rid of the idea of Div tags, rather they are pushing for something known as section. Is that a correct observation. For example I have this section of code from the above tutorial.
https://skitch.com/android86/r67ey/dreamweaver
and what I am interested to know if I should be using div tags in my HTML5 code as well or is there a better way to do it rather than using Div's?
What I have in my HTML5 code at present is the following.
https://skitch.com/android86/r67ej/dreamweaver
Thanks for the group's valuable input.
a proof of concept for a sliding link over content (with display: block) on hover, using CSS3 transitions only.
NOTICE: this is a webkit (safari & chrome) only syntax, for the syntax for the rest of the browsers go here: http://css3.bradshawenterprises.com/transitions/
a simple element, with the following style:
a {
z-index: 100;
position: fixed;
-webkit-transition: all 1s ease-in-out;
display: block;
background-color: black;
width: 100%;
height: 500px; }
and the hover state style:
a:hover { height: 700px; }
The code submitted looks good, however I would include the extra lines to cover Firefox and Opera.
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
You can then use Modernizr (http://www.modernizr.com/) to cover all browsers with backup Javascript.
I would use something like this:
a.slideDown {
z-index: 100;
position: fixed;
display: block;
background-color: black;
width: 100%;
height: 500px;
-webkit-transition: top .2s ease;
-moz-transition: top .2s ease;
-o-transition: top .2s ease;
transition: top .2s ease;
top:5px;
}
a:hover.slideDown {
top:495px;
}
If you are including CSS3 as part of HTML5 (which you have to to allow animation!), have a look at: http://css3.bradshawenterprises.com/sliding/ . The jQuery isn't necessary, you could use the :target pseudo element instead.
For your case, just set a transition on the element, then change the height, or top value using the target selector.
It's probably around 4 lines of code if you only want it to work in newer browsers.
I'd agree with the comments about using CSS3 for transitions. I used this on a portfolio site and it looks fairly good. It's just a couple lines of code and if the browser doesn't support the transitions it will still display the content on hover, just without the animation.