I came across this page https://pepecph.com/ and thought the fade in effect of the pictures were really cool.
I tried to imitate that effect with styled-component to pass each picture's index as a way to separate them when they are all fading in.
-webkit-animation: ${props =>
`fadein ${props.index}s`}; /* Safari, Chrome and Opera > 12.1 */
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Here is the demo: https://codesandbox.io/s/focused-clarke-eduf1
However it is not quite doing what that page seems to be doing, no matter how I adjust the time of fade-in. On the original page(https://pepecph.com/), every picture is showing up fast and delayed differently for some time. And I inspect the image element of the original page, it has this line of css
transition: top 70ms cubic-bezier(0.25,0.46,0.45,0.94),left 70ms cubic-bezier(0.25,0.46,0.45,0.94),transform 70ms cubic-bezier(0.25,0.46,0.45,0.94),height 150ms cubic-bezier(0.25,0.46,0.45,0.94) 70ms,-webkit-transform 70ms cubic-bezier(0.25,0.46,0.45,0.94)
I am not good at css so I don't know if this has something to do with that visual effect.
I edited your code a little bit, let me explain what I've done:
First we need to start with zero opacity images till those are loaded, we can also add a delay transition based on the index of the image.
<Image
pose={pose}
{...props}
style={{
opacity: this.state.opacity,
transition: "opacity 2s cubic-bezier(0.25,0.46,0.45,0.94)",
transitionDelay: `${props.index * 0.5}s`
}}
/>
We also need to add a setter function to change the opacity state via refs:
toggleOpacity = o => {
this.setState({ opacity: o });
};
The tricky part was to track the images refs, this is how it looks, we also removed all keyframes since those are no longer necessary:
const Gallery = () => {
const [isSelected, setIsSelected] = useState(null);
const refs = {};
let images = [];
for (let i = 0; i < 10; i++) {
refs[i] = useRef(null);
let height = Math.floor(Math.random() * 400 + 400);
let width = Math.floor(Math.random() * 400 + 400);
images.push(
<PicContainer index={i} key={i} selected={isSelected}>
<ZoomImg
src={`https://source.unsplash.com/random/${height}x${width}`}
onLoad={() => {
// Calling ref function
refs[i].current.toggleOpacity(1);
}}
// Setting ref
ref={refs[i]}
index={i}
setIsSelected={setIsSelected}
/>
</PicContainer>
);
}
return (
<Mansory gap={"15em"} minWidth={600}>
{images.map(image => image)}
</Mansory>
);
};
Here is the full example.
Here's an example. The HTML requires a div to be wrapped around the whole of the body content if you want it to fade in all at once. Look for this:
<div class="wrapper fade-in">
There's a lot of stuff you can do with CSS, I've been using it for years and I still learn something new every once in a while.
All the animation commands will appear in your CSS like so:
#keyframes fadeIn
to {
opacity: 1; }
Then your divs are going to have a class that calls the animation (#keyframes):
.fade-in {
animation: fadeIn 1.0s ease forwards;
[other div properties can be included here]
}
The HTML will look like this:
<div class="fade-in">
[content]
</div>
Finally, you'll need to make sure you include the vendor codes to make it compatible with all browsers [which adds a fair amount of code, which is why jQuery can be a better option for this stuff]:
#keyframes fadeIn{
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
The vendor codes will have to be duplicated again in your div class in the CSS:
.fade-in {
animation: fadeIn ease 5s;
-webkit-animation: fadeIn ease 5s;
-moz-animation: fadeIn ease 5s;
-o-animation: fadeIn ease 5s;
-ms-animation: fadeIn ease 5s;
}
Related
I am building a simple login/signup screen. I'm toggling the login/signup forms through a state variable. The toggle works fine, but everything happens in just one frame and I want to animate the height transition of the form container, as well as fade the forms in or out as they switch. I am struggling to understand/tame the transition property and so far I managed to transition the height, but it only works once, and of course, I haven't been able to animate the forms opacity. Can anyone help me figure out what I'm missing? code sandbox link: https://codesandbox.io/s/wizardly-flower-e42dj
Better you paste your code here, but anyways
you can use CSS keyframes for fade-in effect.
.fade-in {
animation: fadeIn ease 1s;
-webkit-animation: fadeIn ease 1s;
-moz-animation: fadeIn ease 1s;
-o-animation: fadeIn ease 1s;
-ms-animation: fadeIn ease 1s;
}
#keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
When you are adding class to show login form and signup form, add this "fade-in" class too. Similarly, you can write the same for fading out.
https://codesandbox.io/s/broken-wildflower-dwn0q?file=/src/App.js
Updated your code for your reference.
I want create an fadeIn and fadeOut effect for my JS popup window in css.
fadeIn works fine but not the fadeOut effect, i dont know how i must change my JS time, i have tried some things, but if i use both, fideIn and fadeOut in CSS, the Popup just flashing.
But i want an 5 seconds effect for both and with an delay of also 5 seconds to show the popup.
CSS fadeIn:
.fadeInclass {
animation: fadeIn ease 5s;
-webkit-animation: fadeIn ease 5s;
-moz-animation: fadeIn ease 5s;
-o-animation: fadeIn ease 5s;
-ms-animation: fadeIn ease 5s;
}
#keyframes fadeIn{
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
JS:
var div = document.getElementById("show-popup");
var showFlag = true;
var myIntv = setInterval(function() {
if(showFlag){
div.style.display = 'block';
showFlag = false;
}
else{
div.style.display = 'none';
showFlag = true;
}
}, 5 * 1000);
Whats the best way to add the fadeIn and fadeOut effect, with js or CSS animation?
5 seconds fadeIn effect, then stay for 5 seconds and again 5 seconds fadeOut.
You could use a single animation to achieve all of this.
The first 5 seconds fades in the control, it stays fully visible for 5 seconds, and then fades out for 5 seconds.
.fadeInclass {
animation: fadeIn ease 15s;
background-color: red;
height: 50px;
opacity: 0;
width: 50px;
}
#keyframes fadeIn{
0% {
opacity:0;
}
33% {
opacity:1;
}
66% {
opacity:1;
}
100% {
opacity:0;
}
}
<div class="fadeInclass"></div>
You could simply use CSS transition with opacity:
#popup{
opacity: 0;
transition: ease opacity 5s;
}
#popup.fadeInclass{
opacity: 1;
}
And then just add/remove the .fadeInClass to your element in JS to achieve the desired goal:
function showPopup(){
var div = document.getElementById("popup");
div.style.display = 'block';
div.classList.add("fadeInclass");
}
function hidePopup(){
var div = document.getElementById("popup");
div.classList.remove("fadeInclass");
setTimeout(function(){
div.style.display = 'none';
}, 5000);
}
I'm trying to coding this text animation effect (please see video) but i'm quite far from solution!!
Can you please help me? maybe is better using js?
h1.fadeinone { animation: fadeinone 10s;}
h1.fadeintwo { animation: fadeintwo 10s;}
h1.fadeinthree { animation: fadeinthree 10s;}
#keyframes fadeinone {
0% {
opacity: 0;
}
33% { /* 3s for fade in */
opacity: 1;
}
}
#keyframes fadeintwo {
0% {
opacity: 0;
}
66% { /* 3s for fade in */
opacity: 1;
}
}
#keyframes fadeinthree{
0% {
opacity: 0;
}
100% { /* 3s for fade in */
opacity: 1;
}
}
#claim h1 {
font-size: 40px;
line-height:40px;
margin:0px;
padding:0px;
color:#FFF;
}
#claim {background-color:red;}
<div id="claim">
<h1 class="fadeinone">DESIGN</h1>
<h1 class="fadeintwo">loren ipsum</h1>
<h1 class="fadeinthree">DOLOR SIT</h1>
</div>
I think you are looking for the animation-delay property. It's a bit tedious, because you'll have to separate out each letter of each line into its own element (I used span in this case), and then you'll have to manually assign each span its own delay, but the effect matches what you provided.
Also, by using this method, you only need one set of keyframes, because you'll be using the delay to determine when the animation starts, rather than using a percentage over multiple animations.
div span
{
opacity: 0;
animation-name: fadein;
animation-duration: 3s;
animation-fill-mode:forwards;
}
div span:nth-child(1){animation-delay:0s}
div span:nth-child(2){animation-delay:0.2s}
div span:nth-child(3){animation-delay:0.4s}
div span:nth-child(4){animation-delay:0.6s}
div span:nth-child(5){animation-delay:0.8s}
div span:nth-child(6){animation-delay:1s}
#keyframes fadein
{
0%{opacity: 0}
100%{opacity:1}
}
<div>
<span>D</span><span>E</span><span>S</span><span>I</span><span>G</span><span>N</span>
</div>
Of course, you could do this with Javascript and the solution would likely be more elegant and easier to modify; however, then you have to deal with compatibility issues. You're going to be better off just sticking with strict CSS whenever possible.
Hi,
I have a problem on CSS animation and transition.
$(document).ready(function(){
$(".d1").click(function(e){
$(".d2").css("animation-direction", "reverse");
$(".d3").css("animation-direction", "reverse");
});
$(".d2").click(function(e){
$(".d1").css("animation-name", "none").css("opacity", 0);
$(".d3").css("animation-name", "none").css("opacity", 0);
});
$(".d3").click(function(e){
$(".d1").css("animation-name", "none").fadeOut("slow");
$(".d2").css("animation-name", "none").fadeOut("slow");
});
});
#keyframes inseq {
100% { opacity: 1; }
}
.d1, .d2, .d3 {
opacity: 0;
transition: all 2s;
animation: inseq 3s ease 1s forwards;
}
.d2 {
animation-delay: 1.3s
}
.d3 {
animation-delay: 1.6s
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
https://jsfiddle.net/v7mepwmg/2/
I have a starting-fade-in animation on a series of elements, and then using jquery click event to trigger fadeout; I have tried 3 methods (in example they are .d1 .d2 and .d3 click event) to achieve so, but none of them can do so while the animation finished.....
P.S. If the animation has not finished yet, they work well...
Do I miss anything ?? Thanks!
Updated this a little.
It has something to do with the opacity=0 set on the div elements and the use of animation-direction:reverse. Tough to explain. Basically it jumps to the initial key-frame without any animation. So I've created another set of keyframes for out animation instead of using animation-direction:reverse.
#keyframes in {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes out {
from {opacity: 1;}
to {opacity: 0;}
}
.d1,.d2,.d3 {
opacity: 0;
animation: in 3s ease 1s forwards 1;
}
.d2 {animation-delay: 1.3s}
.d3 {animation-delay: 1.6s}
And then used this to add the second animation and change the initial opacity.
$(document).ready(function() {
$('div').click(function(e) {
var selected = $(this).attr('class');
$('div').not("." + selected).css({
'opacity': '1',
'animation' : 'out 3s ease forwards 1'
}).delay('3000').fadeOut('0');
});
});
Here's the updated Fiddle.
https://jsfiddle.net/thelessergeek/0pwan8qm/
is it possible to detect where a user scrolls on a page to trigger a keyframe using pure javascript ?
.animations {
opacity: 0;
animation: animations-keyframes 2s ease forwards;
-webkit-animation: animations-keyframes 2s ease forwards;
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
#keyframes animations-keyframes {
to {
opacity: 1;
}
}
#-webkit-keyframes animations-keyframes {
to {
opacity: 1;
}
}
I want javascript to trigger this event when the user gets to a certain part of a page for example a content section. I don't know where to start
Using javascript, you could add the class animations to an element on mouseenter event and remove the class on mouseleave. Since you didn't mention jQuery, I will use simple JS, but I recommend using jQuery if you plan on doing a bunch of DOM manipulation since it is easier to maintain.
EXAMPLE:
http://jsfiddle.net/dirtyd77/z6xmuwse/2/
JAVASCRIPT:
var el = document.getElementById("animation");
el.onmouseenter = function (){
this.classList.add("animations");
};
el.onmouseleave = function (){
this.classList.remove("animations");
};
However, you can also accomplish this using just CSS and the pseudo :hover.
EXAMPLE:
http://jsfiddle.net/dirtyd77/z6xmuwse/3/
CSS:
.animations:hover {
opacity: 0;
animation: animations-keyframes 2s ease forwards;
-webkit-animation: animations-keyframes 2s ease forwards;
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
#keyframes animations-keyframes {
to {
opacity: 1;
}
}
#-webkit-keyframes animations-keyframes {
to {
opacity: 1;
}
}
Hope this helps and let me know if you have any questions!
Waypoints can be used to trigger events when scrolling to certain parts of a page.
http://imakewebthings.com/waypoints/
In simple terms, event listeners are created for scroll events - The distance scrolled down the page and distance of the element from the top of the page are compared. Events are triggered if the user has scrolled beyond the element ( distance scrolled > distance of element from top of page )