I have two div
and want to create an animation icons between them using reactjs/javascript/css, like this https://parceljs.org/ (in this site, between subtitle and the box)
I found libraries like react-spring
but doesn't seem that what i want. Can anyone help me further?
It uses the assets/icons.js
javascript file to generate these icons.
Look in the sources tab using your developer tools to get all used documents for a webpage.
The assets/icons.js
file:
var icons = ['js', 'json', 'css', 'sass', 'less', 'html', 'jpg', 'png', 'gif', 'bmp', 'svg', 'raw', 'rs', 'ts']
var container = document.querySelector('.icons')
function spawn() {
var icon = icons[Math.floor(Math.random() * icons.length)]
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
svg.style.left = 25 + Math.random() * 50 + '%'
svg.setAttribute('class', 'icon')
var use = document.createElementNS('http://www.w3.org/2000/svg', 'use')
use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'assets/icons.svg#' + icon)
svg.appendChild(use)
container.appendChild(svg)
setTimeout(function() {
container.removeChild(svg)
}, 3000)
}
setTimeout(function run() {
spawn()
setTimeout(run, 500 + Math.random() * 400)
}, 500 + Math.random() * 400)
spawn()
So if you just want to copy this example you will be using examples of w3.org to obtain these icons.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.