圈動畫
這是我試圖創建的圈子越來越多的動畫。
的什麼happends短explination:
- 需要一個容器元件(相對定位)。
- 點擊元素(絕對位置)。
- 在元素上添加單擊事件偵聽器。
- 單擊事件創建一個同級元素(絕對定位)。
- 將此元素定位在點擊元素的中心。
- 增加圓圈的大小。
/*document.addEventListener('"DOMContentLoaded', function() {*/
var spesial = document.getElementsByClassName("spesial");
var container = document.getElementsByClassName("container");
var togglecircle = false;
spesial[0].addEventListener('click', function() {
var circle = document.createElement('div');
circle.className = "circle"
container[0].appendChild(circle);
var size = 0;
if (this.offsetWidth > this.offsetHeight) {
size = container[0].offsetWidth;
} else {
size = container[0].offsetHeight;
}
console.log(this.offsetTop);
circle.style.top = this.offsetTop + (this.offsetHeight/2) + "px";
circle.style.left = this.offsetLeft + (this.offsetWidth/2) + "px";
circle.style.width = size * 2 + "px";
circle.style.height = size * 2 + "px";
});
/*});*/
.container {
position: relative;
height: 300px;
background-color: black;
overflow: hidden;
}
.spesial {
z-index: 10;
position: absolute;
top: 50px;
left: 50px;
width: 50%;
height: 150px;
background-color: yellow;
border: 2px solid #888;
cursor: pointer;
}
.circle {
position: absolute;
z-index: 1;
border-radius: 50%;
width: 0px;
height: 0px;
transition: width 3s, height 3s;
background-color: yellow;
transform: translate(-50%, -50%);
}
<div class="container">
<div class="spesial">
<h1>Cool header</h1>
<p>lorem ipsum etc, etc,</p>
</div>
</div>
這工作,相當不錯。但是當這個容器需要降低屏幕時會發生什麼?假設上面有一個導航條和標題圖像,那麼容器div在那之後開始。從「overflow:hidden」這個圓圈的高度不會被限制在容器的頂部嗎? – tehfailsafe
只要容器很大,您就可以隨時在身體中的圓圈。 (容器可以是身體) – Persijn