In my one-pager website I have some containers that has this property
.containers {
transition: opacity 1000ms cubic-bezier(.25, .46, .45, .94), transform 1600ms cubic-bezier(.19, 1, .22, 1);
}
#page {
position: fixed;
overflow: scroll;
width: 100vw;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
}
where #page is the main wrapper I use in position fixed to prevent browser pull/bounce and make the website feel like an app.
and in my JS I have a function that detects the scroll
$('#page').scroll(function() {
$(".containers").each(function() {
$(this).css('transform', 'translate3d(0, ' + (-$("#page").scrollTop()) + 'px, 0)');
});
});
so whenever the container contains an image the scroll is like butter and silk on both chrome and safari
but when the container contains a paragraph of text. it become jittery
I know the problem can be the fact i have a 1600ms setup that it may create a conflict but why only in Safari (both mobile iphone and desktop)??
I tried different solutions suggested out there, but so far the one that helped me the most is using -webkit-transform: along with transform: and now it feels much better especially on mobile
I am trying to mimic the CSS animations from a website here: https://stanographer.com/
I want to copy the way the site:
starts by showing a full screen black div sliding away to the right
"loads" the black background (div tags) behind text (as in "Hi, I'm Stanley Sakai"), expanding left to right and
"loads" the text over the black background div, expanding left to right.
Now you might ask, "Why not just inspect the page, look at the classes on the divs and text, then inspect the CSS sheet in the network tab?" And I've tried that. The CSS looks weird. My friend said it is pre-processed by SASS, whatever that means. Anyway, I cannot decipher the code.
I've been to a few different StackOverflow pages (here's one) & over a dozen different pages on Google. I learned about using keyframes but I haven't figured out how to recreate the effect on Stanographer.com. My friend, who owns the website, also provided this example, but I don't get how to apply it to individual divs. He said something about using the z-index but I just don't see it.
I know that to make the page start with a full black screen & then slide out, I have to trigger a class change using JavaScript. I have:
let blackStuff = document.getElementById("blackness");
window.addEventListener("load", () => {
console.log("loaded");
blackStuff.setAttribute("class", "black-box-out");
},
false
);
.black-box {
position: fixed;
float: left;
top: 0;
width: 100%;
height: 100%;
bottom: 0;
background-color: #000;
z-index: 999999;
-webkit-animation: powerslide 0.5s forwards;
-webkit-animation-delay: 2s;
animation: powerslide 0.5s forwards;
animation-delay: 2s;
}
#-webkit-keyframes powerslide {
100% {
left: 0;
}
}
#keyframes powerslide {
100% {
left: 0;
}
}
.black-box-out {
margin-left: 100%;
animation: slide 0.5s forwards;
-webkit-transition: slide 0.5s forwards;
transition: slide 0.5s forwards;
}
<div id="blackness" class="black-box"></div>
But this just makes the "blackness" div disappear instantly on page load. I want it to slide out. Clearly, I don't get how to use CSS animations.
If you are interested in seeing more of what doesn't work, read on. Otherwise, you can skip this section: it only shows my failed trials.
I've learned how to make a CSS animation expand horizontally from 0:
.wrapper {
position: relative;
overflow: hidden;
width: 500px;
height: 50px;
border: 1px solid black;
}
.slide-custom {
width: 500px;
height: 50px;
background: cyan;
position: relative;
-webkit-animation: slideIn 2s forwards;
animation: slideIn 2s forwards;
}
/* moz and webkit keyframes excluded for space */
#keyframes slideIn {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
<div class="wrapper slide-custom">
<h1 class="slide-custom">
<span>MEET ROLY POLY.</span>
<!-- expands horizontally from 0 width to 100% width -->
</h1>
</div>
And I've learned to make text "slide in" from the left, though it starts at 100% width when I want it to start at 0% width:
/* CSS */
.test-slide {
animation-duration: 3s;
animation-name: testSlide;
}
#keyframes testSlide {
from {
margin-left: 0%;
width: 50%;
}
to {
margin-left: 100%;
width: 100%;
}
}
<div class="test-slide">
<h1><span>ABOUT.</span></h1>
<!-- will slide in from the left -->
</div>
There's more -- unfortunately none of it mimics the website I'm trying to copy.
Explanation
There are multiple ways to achieve what you want actually. I did not opt to animate width. The first few frames of the animation will be not as expected.
So instead, we can use clip-path. What clip-path basically does is masking. You can "crop" a div such that only a part of it is visible. We will utilise clip-path and ::before or ::after pseudo-element (either is fine) to create this animation. What we need to do:
Create the pseudo-element and position it such that it covers (is on top) the whole animatable element (position: absolute)
Set the pseudo-element's background to black
Using clip-path, mask the animatable element to display no parts of the element (this will also cause the pseudo-element to not be displayed as it is part of the element). The direction of the clipping is important. The direction here is from the right side to the left side.
Using animation and #keyframes, unmask the previously masked div. This will reveal it slowly from the left side to the right side (because initially, we masked it from the right to left; upon unmasking, the reverse direction happens)
Upon unmasking the element, the pseudo-element will be on top of the text we want to display
After a short while later, mask the pseudo-element (not the whole element) from the right direction to the left direction, again using clip-path so that the text seems revealed slowly
It works! However, I recommend reading about clip-path. Also, one really handy clip-path CSS generator I really like to use is this (if you want to clip from the right to left, you should drag the points from the right to left). I also highly recommend reading about CSS positioning (a staple in good CSS animations). You needn't be using z-index: 9999; you generally want to keep track of the z-index you use.
Solution
Here's a working solution using the described method. Try running it.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Helvetica;
}
body,
html {
width: 100%;
height: 100%;
}
#wrapper {
background: #555555;
width: 100%;
height: 100%;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#wrapper * {
margin: 5px;
}
.heading {
font-size: 3em;
padding: 10px 5px;
}
.caption {
font-size: 1em;
padding: 5px;
font-family: Courier;
}
.animatable {
position: relative;
clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
animation: .75s cubic-bezier(1,-0.01,.12,.8) 1s 1 reveal forwards;
}
.animatable::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #20262b;
padding: inherit;
animation: .75s cubic-bezier(1,-0.01,.12,.8) 1.75s 1 hideBlack forwards;
}
#keyframes reveal {
from { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); }
to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
#keyframes hideBlack {
from { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
to { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
}
<div id="wrapper">
<div class="heading animatable">Hi, I am Richard!</div>
<div class="caption animatable">I am a person.</div>
</div>
Although the simple animation you wanted can be created using merely CSS, I still suggest you read about how to make animations using JavaScript and the various libraries it has in making animations. This is because once there are many animations and transitions going on, it becomes hard to keep track of animations (especially when you want animations to start after another animation ends). A good library is anime.js (do explore more options before settling on one). Furthermore, notice how the animations only appear upon scrolling down in the website you provided? That's doable only with JS (one such method is using IntersectionObserver API provided by most browsers).
Here you have some CSS3 animations, you trigger that animation when the .entrance-animation gets the .active class.
You'll need an observer to watch when the item gets into view and, when the item is visible, you add the .active class to it.
Hope it helps!
setTimeout(() =>
{
let animate = document.querySelectorAll('.entrance-animation');
animate.forEach(item => item.classList.add('active'));
}
,1000);
.entrance-animation
{
position: relative;
color: blueviolet;
white-space: nowrap;
font-size: 24px;
width: 0;
overflow: hidden;
transition: width 0.5s ease;
}
.entrance-animation::before
{
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100%;
background-color: black;
z-index: 10;
transition: width 0.5s ease;
transition-delay: 0.5s;
}
.entrance-animation.active
{
width: 100%;
}
.entrance-animation.active::before
{
width: 0%;
}
<p class="entrance-animation">
Hello
</p>
<p class = "entrance-animation">
Here we are
</p>
You can use CSS3 transitions or maybe CSS3 animations to slide in an element.
For browser support: http://caniuse.com/
I made two quick examples just to show you how I mean.
CSS transition (on hover)
Demo One
Relevant Code
.wrapper:hover #slide {
transition: 1s;
left: 0;
}
In this case, Im just transitioning the position from left: -100px; to 0; with a 1s. duration. It's also possible to move the element using transform: translate();
CSS animation
Demo Two
#slide {
position: absolute;
left: -100px;
width: 100px;
height: 100px;
background: blue;
-webkit-animation: slide 0.5s forwards;
-webkit-animation-delay: 2s;
animation: slide 0.5s forwards;
animation-delay: 2s;
}
#-webkit-keyframes slide {
100% { left: 0; }
}
#keyframes slide {
100% { left: 0; }
}
Same principle as above (Demo One), but the animation starts automatically after 2s, and in this case I've set animation-fill-mode to forwards, which will persist the end state, keeping the div visible when the animation ends.
Like I said, two quick example to show you how it could be done.
EDIT: For details regarding CSS Animations and Transitions see:
Animations
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
Transitions
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
Hope this helped.
I'm trying to get a button to slide up and appear in the bottom right corner of the screen after a user is on the page for 30 seconds.
How to do I start with the div hidden and then make it slide in from the bottom as it appears?
This hasn't worked so far:
<div id="buttonContainer" class="">
<button>Submit</button>
</div>
function showSurvey(){
$('#buttonContainer').slideUp('slow');
};
#surveySpot {
position: fixed;
bottom: 20px;
right: 20px
}
JQuery's .slideup() doesn't actually move the element, it's just an animation trick to hide and show elements.
Instead, you can do this entirely with CSS animation, no need for jQuery at all. You can create a keyframe animation to move the element into frame and then set a 30 second animation delay.
.survey {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 50px;
background: cornflowerblue;
/* translate off the bottom of the screen */
transform: translateY(100%);
/* call the slideup keyframes and have them take 500 milliseconds */
animation: slideup 500ms ease-out forwards;
/* delay the start of the animation by 5 second, you can use 30 */
animation-delay: 5s;
}
/* a very simple from/to keyframe we can call with the "animation" property */
#keyframes slideup {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
<p>Wait 5 seconds for the survey to show...</p>
<div class="survey">This is a survey</div>
I am trying to animate an object in second page from one position to another using the below code.
#myimg2{
position: absolute;
-webkit-animation: myfirst2 3s none; /* Chrome, Safari, Opera */
-webkit-animation-direction: top; /* Chrome, Safari, Opera */
animation: myfirst2 3s none;
}
#-webkit-keyframes myfirst2 {
0% { left: 10%; top: 1325px;}
100% { left: 10%; top: 1285px;}
}
Here, I have hardcoded top and it is working perfectly fine.
I can extract the height of the screen using
var hgt = $('#img1').height();
Can anyone suggest how i can set this var+40 as top for 100 percent animation and var for 0 percent animation rather than hardcoding with 1325 and 1285 respectively
I am trying to get an effect which is to zoom in on a logo centred on the page when the page is loaded. I am using the following HTML and JS code:
<div style="display: table-cell; vertical-align: middle; text-align: center;">
<img id="logo" src="images/logo2.png" style="zoom: 200%; transition: zoom 1s ease-in-out;"/>
</div>
JS
document.addEventListener("load", pageFullyLoaded, true);
function pageFullyLoaded()
{
var elem = document.getElementById("logo");
elem.style.zoom = "300%";
}
The result is really odd.
It display the logo in it's normal size,
then it jumps on a super zoomed in version of the logo (> 1000%),
zoom in on the logo even more (1000% to 1500% say) for the duration of the transition,
jump back to the normal logo size and position (which is correct, and this is the final positon and size I want).
So obviously this technique doesn't work:
the jump at the beginning is ugly but I only suppose this happens because 2) is incorrect anyway. As it should start by default with a zoom value of 200% (which is defined in the style of the div) and then the JS should make it zoom to 300%. So there should be no jump visible really.
I don't understand why I get this incredibly zoomed in version of the logo at the start of the animation. Basically it's almost like if the entire image was filling up the screen.
Any idea on how to do this reliably, please? Thank you.
I would do this in only CSS like so:
Set the image to scaleX and scaleY 0 (or hide it in some other way)
On $(window).load or $('document').ready add a class with keyframe animations
Do whatever you need afterwards.
Fiddle
$(window).load(function(){
$('img.zoom').addClass('element-animation');
});
You can also listen to animation end events like so https://github.com/daneden/animate.css#usage
That library (Animate.css) is also pretty handy and you might be able to find some useful effects in it.
If you're looking to scale an image, you don't need to use zoom or transform or anything. Just alter the width directly and the browser will scale the image for you:
http://jsfiddle.net/C4JZv/
HTML:
<div class="wrapper">
<img class="tiny" src="http://placehold.it/200x150" />
</div>
CSS:
.wrapper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.wrapper img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
transition: width 1s ease-in-out;
width: 200px;
}
.wrapper img.tiny {
width: 10px;
}
JS:
document.querySelector('.wrapper img').className = "";
EDIT: You mentioned in the comments that you wanted to see this done using transform. Again, it's just a case of having a shrunken image (using transform's scale), having a transition property and then removing the CSS class that shrinks the image:
http://jsfiddle.net/C4JZv/1/
HTML & JS: Same
CSS: Mostly the same, but with a couple of changes (plus a load of vendor prefixes):
.wrapper img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
-webkit-transition: -webkit-transform 1s ease-out;
-moz-transition: -moz-transform 1s ease-out;
-ms-transition: -ms-transform 1s ease-out;
-o-transition: -o-transform 1s ease-out;
transition: transform 1s ease-out;
}
.wrapper img.tiny {
-moz-transform: scale(0.1);
-webkit-transform: scale(0.1);
-o-transform: scale(0.1);
-ms-transform: scale(0.1);
transform: scale(0.1);
}