<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://w-web.de/myquery/myquery-min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
<style>
header{
position:relative;
display:flex;
height:150px;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-content: center;
align-items: center;
overflow:hidden;
}
header p{
font-size:1.75em;
font-weight:bold;
font-family: "Arial Black";
color:white;
text-align:center;
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
margin:0;
padding:0;
}
.bg-color{
position:absolute;
background: linear-gradient(to right, #4A00E0, #8E2DE2);
height:150px;
width: 100%;
z-index:-2;
}
</style>
</head>
<body>
<main class=container>
<header>
<p>Animated Backgound<br>JS.animate()
<div class="bg-color"></div>
</header>
<h1>Lorem ipsum.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste alias modi voluptatem voluptatibus ab, inventore tenetur iure veniam incidunt neque.</p>
</main>
<script>
"use strict";
function randomAni ( mySel, count=50 ) {
const myAni = function ( evt, el ){
const getNewBallPosition = function ( el ) {
let {top,left,width,height} = el.getBoundingClientRect()
let pCoord = $(el).parent().n.getBoundingClientRect()
let newTop = Math.random()*(pCoord.height-height)
let newLeft = Math.random()*(pCoord.width-width)
left = left-pCoord.left
top = top-pCoord.top
let hyp = Math.hypot((newLeft-left), (newTop-top))
return{left, top, newLeft, newTop, hyp}
}
//is first call?
let aktEl = el ? el : this.effect.target
var {left,top,newLeft,newTop,hyp} = getNewBallPosition(aktEl)
//new Elements....
if (el){
let pCoord = $(el).parent().n.getBoundingClientRect()
let {width, height} = el.getBoundingClientRect()
left=Math.random()*(pCoord.width-width)
top=Math.random()*(pCoord.height-height)
hyp = Math.hypot((newLeft-left), (newTop-top))
}
let myKeyframes = [
{ transform: `translate3d(${left}px,${top}px,0)` },
{ transform: `translate3d(${newLeft}px, ${newTop}px,0)` }
]
let myOptions = {
direction: "normal",
fill: "both",
iterations: 1
}
myOptions.duration=hyp*aktEl.dataset.speed
let myAnimation = aktEl.animate(myKeyframes, myOptions)
myAnimation.addEventListener('finish', myAni, { once: true })
}
for (let i=1; i<=count; i++){
let width = (Math.random() * 30) + 5;
myAni(null,
$(
$(mySel)
.append('div')
.setData('speed', (Math.random() * 80) + 20)
.addClass('myAni')
.styles()
.position('absolute')
.borderRadius(`${(Math.random() * 50) + 1}%`)
.zIndex('-1')
.top('0px')
.left('0px')
.width(`${width}px`)
.height(`${width}px`)
.border(`1px solid ${['white', '#eee','#ddd','#ccc', '#bbb'][Math.floor(Math.random()*5)]}`)
.opacity('.5')
.parent()
).n)
}
}
randomAni('header')
</script>
</body>
</html>
the documented source code of my-query
the gzipped myquery-min.js version needs under 3K
Top comments (0)