This is what I have:
.s2 {
top: 150px;
left: 20px;
position: absolute;
transition: left 300ms linear;
}
I change the left position dynamically on scroll with JavaScript. At the moment the performance is bad on mobile and even in a desktop browser.
How can I improve this? Is there a better approach for this?
Consider throttling the scroll using requestAnimationFrame
use properties such as translate if you can instead of left or top
Ad translateZ(0) or translate3d(0,0,0) to trigger GPU on mobile (not always guaranteed)
Also since you are animating during scroll, you do not need to use the transition property, unless you have breakpoints/thresholds where you set the property once scroll amount exceeds a certain value.
Related
Is this impossible? I am using CSS and HTML, I have a sidebar and I have found ways to make it stick (not scroll at all) but none of the parallax examples I can find work.
I really want to avoid using JS.
<html container>
<content>
<left column>
This content is very very long and goes for a long way down.
</left column>
<right column>
This is the sidebar and is much shorter, so I want it to scroll slower than the main content.
</right column>
</content>
</html>
Is this even possible without javascript?
Using CSS3 perspective this is indeed possible. In fact, as the parallax is handled by the browser, it will likely behave more smoothly than if you used JavaScript. The downside is that older browsers will not support it.
CSS3 perspective involves transforming the elements along the Z axis. Elements further away will scroll more slowly. Thus you would not transform your main content along the Z-axis, so that it scrolls at its default speed, and you would transform the sidebar down the Z-axis - away from the user so to speak - so that it would scroll slower.
As you transform into the Z-axis the sidebar will become smaller (or larger if you move up the axis) as it is further away from the user. You will need to calculate the correct scale for its distance and apply that, making it appear at its original size.
I can't guarantee that this code will work with your current implementation as you haven't provided your CSS. But it would typically work something like this:
content {
...
perspective: 1px;
height: 100vh;
overflow-x: hidden;
}
column {
...
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
left {
left: 0;
transform: translateZ(0);
}
right {
left: 50%;
transform: translateZ(-1px) scale(2);
}
Using the perspective and translateZ values, the scale factor to appear at its original size is 1 + (translateZ * -1) / perspective.
A codepen that demonstrates this with a long content section and shorter, slower scrolling sidebar is found at https://codepen.io/jla-/pen/NOGxpQ.
This article has more information on implementing a parallax effect in CSS.
I've found that the contact section of the following site keeps spilling over at the bottom, especially when the window width is reduced to mobile size:
http://phixhut.com/test/1page/onepage.html#contact
The CSS I have for the overlay section is:
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
padding: 55px 0 15px 0;
width: 100%;
background-color: #83aa30;
background-color: rgba(131, 170, 48, 0.6);
background-image: url("../images/GPlay.svg");
position: absolute;
bottom: 0px;
top: 0px;
The spill at the bottom disappears if I remove the "top: 0px" but then it appears to spill over at the top.
Not sure how to go about getting the contact section to resize pefectly to stop these spills. Any help would be greatly appreciated!
The solution, albeit inefficient, would be overflow: hidden
You shouldn't use that, however, because the majority of the time the use of that is to basically hide unwanted code. Rather, try to fix the issue in CSS without using the overflow: hidden, so that when you resize nothing overflows.
You could do that by making sure certain items aren't set to a fixed width or height, because if a screen resolution is smaller than that, it will overflow.
Hope that helps.
There is a few thing's causing your problem but the easiest way to sort it would be to remove the current height you have for class="contact" and set it to the height of your overlay container.
Personally I would re write your code.
It would make more sense to have your map and overlay as one background image and remove your absolute positioning and the extra div's you have in there.
It would A. Streamline your code and B. Reduce the amount of HTTP request's & C. your site would act in the fluid nature you are after.
i'm working on a project where i need a semi-transparent div to slideover the entire page at a certain point. i have a version working currently, but it's not as smooth as i'd like it to be.
http://jsfiddle.net/27e310e8/
jQuery from above example:
var windowWidth = $(window).innerWidth();
var windowHeight = $(window).innerHeight();
function blackOut() {
$('#fail-screen').css({
"width": windowWidth + "px",
"height": windowHeight + "px"
});
$('#fail-screen').delay(1000).animate({
top: '0px'
}, 1000, 'linear');
}
$(document).ready(function () {
blackOut(windowWidth, windowHeight);
});
as you can see i'm getting the innerWidth and height to set the "fail-screen" div, as setting it to 100% wasn't working well. i'm using jQuery to animate the top position of the "fail-screen" div.
again, i'm just looking to refactor this code and improve overall presentation and performance. i'm open to using animation/physic libraries if anyone knows of any that would be good to use here.
appreciate any suggestions.
As #Jason has mentioned, I strongly recommend using CSS transforms instead of fiddling with the offsets. That is being not only are CSS transforms offloaded to the GPU (intelligently determined by the browser as of when needed, but you can also force it), but it allows for subpixel rendering. Paul Irish published a rather good write-up on this topic back in 2012.
Also, your code is slightly problematic in the sense that it fails to handle viewport resize events. In fact, a more straightforward solution would simply be using position: fixed, and then playing around with CSS transform to bring the element into view after a delay.
See updated fiddle here: http://jsfiddle.net/teddyrised/27e310e8/2/
For the JS, we simply use the .css() method. The delay, animation duration and even the timing function can be easily done via CSS.
The new JS is rather straightforward: we set the transform of #fail-screen so that we move it back to its original vertical position. jQuery automagically prefixes the transform property ;)
$(document).ready(function () {
$('#fail-screen').css({
'transform': 'translateY(0)'
});
});
For the CSS, we initially set a vertical translation (translateY) of -100%, which means we push the element upwards by its own height. Using fixed positioning and declaring all four offsets as 0, we can force the element to fill the viewport without any advanced hack of listening to window resize events via JS. Remember that you will have to add vendor prefixes to the transform property to maximize cross-browser compatibility.
CSS can also handle transition delay, duration and even the timing function, i.e. transition: [property] [duration] [timing-function] [delay]; Since in your jQuery code you have set both duration and delay to be 500ms, it should be transition: all 0.5s linear 0.5s. However, the linear timing function doesn't look good — perhaps using ease-in-out would be better, or even a custom cubic-bezier curve, perhaps?
Also, I recommend moving the opacity to the background-color value, simply because if you set an opacity on the element itself, all child nodes will be rendered at 0.6 opacity, too... it might be something that you do not want to achieve.
#fail-screen{
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0,0,0,.6); /* Moved opacity to background-color */
position: fixed; /* Use fixed positioning */
z-index: 303;
/* Use CSS transform to move the element up by its own height */
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
/* CSS transition */
transition: all .5s ease-in-out .5s;
}
How can I make a simple javascript animation to scroll a div (#MyDiv) from say 300px to - 300px over 15 seconds, pause for 15 seconds, then replay, and keep doing this on an endless loop?
I tried with css using multiple methods but its just not smooth enough for my needs.
My experience is that CSS3 animations are almost always more smooth than animations done by Javascript libraries.
Here's a way to do it without any Javascript, with CSS3 animations:
#scrollingContent
{
animation: scroll 30s linear 0s infinite normal;
-webkit-animation: scroll 30s linear 0s infinite normal;
}
#keyframes scroll
{
0% { top: 300px; }
50% { top: -300px; }
100% { top: -300px; }
}
#-webkit-keyframes scroll
{
0% { top: 300px; }
50% { top: -300px; }
100% { top: -300px; }
}
Working demo: http://jsfiddle.net/nj9yfk7b/
And here's an alternative way to do it with native Javascript and CSS3 transitions:
Working demo and code: http://jsfiddle.net/yfk7330j/
In this case, the transitions are triggered by Javascript by setting and un-setting a certain class name on the element that should be scrolling.
The transition version allows for better control with Javascript, while the animation version just does it's looping thing infinitely.
I tried to keep the code clean as possible, but please let me know if it needs any clarification.
Maybe the functions ScrollBy and SetInterval can help you:
http://www.w3schools.com/jsref/met_win_scrollby.asp
http://www.w3schools.com/jsref/met_win_setinterval.asp
You can use the intervals to jump every x ms y pixels, and then wait 15 seconds after you have reached an amount of pixels.
Also, I've seen this JQuery plugin, maybe it can also help (though I haven't researched it properly though):
Scrolld.js
Rememberer that people here won't write the code for you, but will happily help you pass through specific problems.
For a number of projects now I have had elements on the page which I want to translate out of the screen area (have them fly out of the document). In proper code this should be possible just by adding a class to the relevant element after which the css would handle the rest. The problem lies in the fact that if for example
.block.hide{
-webkit-transform:translateY(-10000px);
}
is used the element will first of all fly out of the screen unnecessarily far and with an unnecessarily high speed. And purely from an aesthetic point of view there's a lot left to be desired (Theoretically speaking for example a screen with a height of 10000px could be introduced one day in the future).
(Update) The problem why percentages can't be used is that 100% is relative to the element itself, rather than to the parent element/screen size. And containing the element in a full-sized parent would be possible, but would create a mess with click events. And after a few answers, allow me to point out that I am talking about translations, not about position:absolute css3 transitions (which are all fine, but once you get enough of them they stop being fun).
What aesthetically pleasing solutions to allow an element to translate out of a screen in a fixed amount of time can you guys think of?
Example code can be found in this jsfiddle demonstrating the basic concept.
http://jsfiddle.net/ATcpw/
(see my own answer below for a bit more information)
If you wrap the .block div with a container:
<div class="container">
<div class="block"></div>
</div>
<button>Click</button>
you could expand and then, translate the container itself after the click event
document.querySelector("button").addEventListener("click", function () {
document.querySelector(".container").classList.add("hide");
});
with this style
.block {
position:absolute;
bottom:10px;
right:10px;
left:10px;
height:100px;
background:gray;
}
.container {
-webkit-transition: -webkit-transform ease-in-out 1s;
-webkit-transform-origin: top;
-webkit-transition-delay: 0.1s; /* Needed to calculate the vertical area to shift with translateY */
}
.container.hide {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
/* background:#f00; /* Uncomment to see the affected area */
-webkit-transform: translateY(-110%);
}
In this way, it is possible to apply a correct translationY percentage ( a little more than 100%, just to have it out of the way ) and mantaining the button clickable.
You could see a working example here : http://jsfiddle.net/MG7bK/
P.S: I noticed that the transition delay is needed only for the transitionY property, otherwise the animation would fail, probably because it tries to start before having an actual value for the height. It could be omitted if you use the horizontal disappearing, with translateX.
What I did is use the vh (view height) unit. It's always relative to the screen size, not the element itself:
/* moves the element one screen height down */
translateY(calc(100vh))
So if you know the position of the element in the screen (say top:320px), you can move it exactly off the screen:
/* moves the element down exactly off the bottom of the screen */
translateY(calc(100vh - 320px))
I know this is not exactly what you were asking but...
Would you consider using CSS animations with Greensock's Animation Platform? It is terribly fast (it claims it's 20 times faster than jQuery), you can see the speed test here: http://www.greensock.com/js/speed.html
It would make your code nicer I believe, and instead of trying to hack CSS animations you could focus on more important stuff.
I have created a JSFiddle here: http://jsfiddle.net/ATcpw/4/
Both CSS and possible JS look simpler:
document.querySelector("button").addEventListener("click",function(){
var toAnimate = document.querySelector(".block");
TweenMax.to(toAnimate, 2, {y: -window.innerHeight});
});
CSS:
.block{
position:absolute;
bottom:10px;
right:10px;
left:10px;
height:100px;
background-image: url(http://lorempixel.com/800/100);
}
I recently built an app which used precisely this technique for sliding 'panels' (or pages) and tabs of the application in and out of view. A basic implementation of the tabs mechanism can be seen here.
Basically (pesudo-code to illustrate the concept, minus prefixes etc):
.page {
transform: translateY(100%);
}
.page.active {
transform: translateY(0%);
}
The problem I had was that Android Webkit in particular wouldn't calculate percentage values correctly. In the end I had to use script to grab the viewport width and specify the value in pixels, then write the rules using a library for dynamic stylesheet parsing.
But eventually, and in spite of only these minor platform-specific problems, this worked perfectly for me.
Use calc method (http://jsfiddle.net/ATcpw/2/):
.block{
position:absolute;
top: -webkit-calc(100% - 110px);
right:10px;
left:10px;
height:100px;
background:gray;
-webkit-transition: all 2s;
/*this adds GPU acceleration*/
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
.block.hide{
top: -100px;
}
Since you are using -webkit prefix I used it as well.
calc is supported by majority of browsers: http://caniuse.com/#search=calc
One very simple, but not aesthetically pleasing solution is to define the class dynamically:
var stylesheet = document.styleSheets[0];
var ruleBlockHide;
and
//onresize
if(ruleBlockHide) stylesheet.deleteRule(ruleBlockHide);
ruleBlockHide = stylesheet.insertRule('.block.hide{ -webkit-transform:translateY(-'+window.innerHeight+'px); }',stylesheet.cssRules.length);
see: http://jsfiddle.net/PDU7T/
The reason a reference to the rule needs to be kept is that after each screen resize the rule has to be deleted and re-added.
Although this solution gets the job done, there has to be some DOM/CSS combination which would allow this to be done without javascript (something along the lines of a 100%x100% element containing such a block, but I haven't been able to figure out any transform based way).
get the document width. then use a java script trigger to trigger the css3 translation.
function translate(){
var width = document.body.Width;
document.getElementById('whateverdiv').style='translateX(' + width + 'px)';
}
This is simple
add the following to your div
.myDiv {
-webkit-transition-property: left;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-delay: initial
}
then change the "left" property of it either by adding an additional class or by jQuery
This will animate it along the x-axis
Note: you can change the -webkit-transition-property to any property you want and this will animate it