이 효과는 무엇이라고 불릴까요?

나는이 효과를 codepen에서 발견했으며, 나는 이것을 무엇이라고 부르는 지 궁금해했다. (Taken from here)이 효과는 무엇이라고 불릴까요?

/* JS scripts are added see github repo for more 
 
https://github.com/fralec/ElegantJS */ 
 

 
$('#stay').elegant({ 
 
    clickNextToClose: true, 
 
    newTab: true, 
 
    facebook: { 
 
     id: 'alec.vonbarnekow' 
 
    }, 
 
    twitter: { 
 
     id: 'fralec_' 
 
    }, 
 
    github: { 
 
     id: 'fralec' 
 
    }, 
 
    website: { 
 
     id: 'https://fralec.com' 
 
    }, 
 
    instagram: { 
 
     id: 'fralec__' 
 
    } 
 
});

body { 
 
    background-color: #80339E; 
 
    font-family: Verdana; 
 
} 
 

 
button { 
 
    position: absolute; 
 
    min-width: 200px; 
 
    width: 30%; 
 
    background-color: transparent; 
 
    border: 3px solid #FFF; 
 
    margin: auto; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    height: 4em; 
 
    color: #FFF; 
 
    font-size: 20px; 
 
    cursor: pointer; 
 
    text-transform: uppercase; 
 
}

<!-- head --> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
 
<script src="//rawgit.com/fralec/elegantShareJS/master/script/elegant.js"></script> 
 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">  
 
<link rel="stylesheet" href="//rawgit.com/fralec/elegantShareJS/master/css/elegant.css"> 
 
<!-- body --> 
 
<button id="stay">Stay in touch</button>

출처

2017-03-26 Anonymous

그것은 불투명도의 변화에 페이드 전환된다.

출처

2017-03-26 01:46:50

우아함은 여기 맞춤 기능입니다. 해당 라이브러리가있는 코드를 포크해야합니다. 여기 JQuery와 fadein 및 페이드 아웃을 사용하여 같은 효과를 달성하기 위해 시도 할 수 있습니다 : 정말 아직 자바 스크립트를 배운하지 않은 https://www.w3schools.com/jquery/jquery_fade.asp

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
     // $("#div1").fadeIn(); 
     $("#div2").fadeOut(3000); 
     $("#div3").fadeIn(3000); 
    }); 
}); 
</script> 
</head> 
<body> 

<p>Demonstrate fadeIn() with different parameters.</p> 

<button>Click to fade in boxes</button><br><br> 

<div id="div2" style="width:80px;height:80px;display:block;background-color:red;position:absolute"></div><br> 

<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;position:absolute"></div> 


</body> 
</html>

출처

2017-03-26 01:53:04 Coder756

합니다. 당신이 어떻게 할 것인지 예를 들어 주시겠습니까? –

비슷한 코드를 추가했습니다. – Coder756

기본적으로 codepen에서와 같이 페이지를 전환하려고합니다. 그래서 버튼을 클릭하면 페이지가 사라지고 홈 페이지로 돌아 가기 위해 오른쪽 상단에 'x'가 표시됩니다. –

이 효과는 무엇이라고 불릴까요?

답변

관련 문제