HTML CSS & JAVASCRIPT, YouTube

css background animation effects | Dots Dashes field

css-background-animation-effects

Coding BD given css background animation effects. You can create css background animation effects. We created a css animation. It is the most important part Of background image animation css. We have given more importance to CSS Animation and Hover Effects. They used pure javascript effects. because they need highly effective javascript. Thank you so much.

😍😍 If You like this video Please like, share and subscribe This video.😍😍

😍😍 Check Others Programming Video👇

➡️Responsive website html css javascript | part( 1 ): https://www.youtube.com/watch?v=g0ART2Jc3yw&t=3s

➡️ Responsive Services Section: https://www.youtube.com/watch?v=wvLkyrkoS_w&t=69s

➡️ CSS Clip Path Hover Circle Hover Effects: https://www.youtube.com/watch?v=cRSgoViJdR0

➡️ CSS Responsive CARD Hover Effects & Adding Stroke to Text | Html5 CSS3 2021: https://www.youtube.com/watch?v=QVMJ5PdX7Ag&t=14s

➡️ Neon Light Button Animation Effects on Hover | CSS Snake Border: https://www.youtube.com/watch?v=GtVSF-efdJQ&t=102s

➡️ Responsive Box Model Web Design Using CSS Flexbox: https://www.youtube.com/watch?v=03RuVB6B5KQ

➡️ Digital Clock with Animated Progress-bar | HTML CSS & Vanilla Javascript: https://www.youtube.com/watch?v=6A6HpxMmfX4

➡️ How to create a light to dark mode for HTML CSS & Vanilla Javascript 2021: https://www.youtube.com/watch?v=43FbR6ailIk&t=28s

➡️Scroll top button : https://www.youtube.com/watch?v=9fDEJkXQIIs&t=77s

Here is all Source code. You can follow this steps:

  1. Create 1 folder
  2. create 1 HTML file: index.html
  3. create 1 CSS file: style.css
  4. copy HTML code and pest HTML file, copy CSS code and past CSS file
  5. Now give a smile and jump out loud. 😍😍
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation Slider</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="345" height="345" viewBox="0 0 345 345" overflow="visible">
    </svg>

    <script src="./app.js"></script>
</body>
</html>

  body {
    display: flex;
    width: 100%;
    height: 100vh;
    align-items: center;
    animation: background 10s linear infinite;
    background-color: white;
    background-blend-mode: darken;
    background-size: 200px 200px;
    background-size: cover;
    overflow: hidden;
    opacity: 1;
    justify-content: center;
    -webkit-animation: background 10s linear infinite;
}
/* @keyframes background {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 200px 200px;
    }
  } */
  
  svg {
    background-color: white;
    overflow: visible !important;
  }
  svg circle {
    fill: black;
  }
  svg path {
    stroke-dasharray: 6 2;
    stroke-width: 1px;
  }
/* Properties */
const svg = {
    el: document.querySelector('svg'),
    path: document.querySelector('svg path'),
    width: 1,
    height: 1,
    x: 0,
    y: 0
  }
  
  const dots = []
  
  const circle = {
    radius: 3,
    margin: 20
  }
  
  const mouse = {
    x: 0,
    y: 0,
    prevX: 0,
    prevY: 0,
    speed: 0
  }
  
  const ticker = {
    fps: 60,
    fpsInterval: 1000 / 60,
    lastTickTime: null
  }
  
  /* Resize */
  function resizeHandler () {
    const bounding = svg.el.getBoundingClientRect()
    
    svg.width = bounding.width
    svg.height = bounding.height
    svg.x = bounding.left
    svg.y = bounding.top
  }
  
  /* Create dots */
  function createDots () {
    resizeHandler()
    
    const dotSize = circle.radius + circle.margin
    
    const rows = Math.floor(svg.height / dotSize)
    const cols = Math.floor(svg.width / dotSize)
  
    const x = ((svg.width % dotSize) / 2)
    const y = ((svg.height % dotSize) / 2)
  
    for (let row = 0; row < rows; row++) {
      for (let col = 0; col < cols; col++) {
        const dot = {
          anchor: {
            x: x + (col * dotSize) + (dotSize / 2),
            y: y + (row * dotSize) + (dotSize / 2)
          }
        }
  
        dot.position = {
          x: dot.anchor.x,
          y: dot.anchor.y
        }
  
        dot.smooth = {
          x: dot.anchor.x,
          y: dot.anchor.y
        }
  
        dot.velocity = {
          x: 0,
          y: 0
        }
  
        dot.move = {
          x: 0,
          y: 0
        }
        
        dot.color = {
          r: 255 * (1 - (dot.anchor.x / svg.width)),
          g: 255 * (dot.anchor.x / svg.width),
          b: 255 * (dot.anchor.y / svg.height)
        }
  
        dot.el = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
        dot.el.setAttribute('cx', dot.anchor.x)
        dot.el.setAttribute('cy', dot.anchor.y)
        dot.el.setAttribute('r', circle.radius / 2)
        
        dot.path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
        dot.path.setAttribute('stroke', 'rgb(' + dot.color.r + ', ' + dot.color.g + ', ' + dot.color.b + ')')
  
        svg.el.append(dot.el)
        svg.el.append(dot.path)
        dots.push(dot)
      }
    }
  }
  
  /* SVG to background */
  function svgToBackground () {
    const serializedSVG = new XMLSerializer().serializeToString(svg.el)
    const base64Data = window.btoa(serializedSVG);
    const url = 'data:image/svg+xml;base64,' + base64Data
    
    document.body.style.backgroundImage = 'url("' + url + '")'
  }
  
  /* Check mouse move */
  function mouseHandler (e) {
    mouse.x = e.pageX
    mouse.y = e.pageY
  }
  
  /* Check mouse speed */
  function mouseSpeed () {
      const distX = mouse.prevX - mouse.x
      const distY = mouse.prevY - mouse.y
      const dist = Math.hypot(distX, distY)
  
      mouse.speed += (dist - mouse.speed) * 0.5
    
      if (mouse.speed < 0.001) {
        mouse.speed = 0
      }
  
      mouse.prevX = mouse.x
      mouse.prevY = mouse.y
    
      setTimeout(mouseSpeed, 20)
  }
  
  /* Tick */
  function tick (nowTime) {
    const elapsedTime = nowTime - ticker.lastTickTime
      
    if (elapsedTime > ticker.fpsInterval) {
      dots.forEach(dot => {
        const distX = mouse.x - svg.x - dot.position.x
        const distY = mouse.y - svg.y - dot.position.y
        const dist = Math.max(Math.hypot(distX, distY), 1)
  
        const angle = Math.atan2(distY, distX)
  
        const move = Math.min((500 / dist) * (mouse.speed * 0.1), 50)
  
        if (dist < 100) {
          dot.velocity.x += Math.cos(angle) * -move
          dot.velocity.y += Math.sin(angle) * -move
        }
  
        dot.velocity.x *= 0.9
        dot.velocity.y *= 0.9
  
        dot.position.x = dot.anchor.x + dot.velocity.x
        dot.position.y = dot.anchor.y + dot.velocity.y
  
        dot.smooth.x += (dot.position.x - dot.smooth.x) * 0.1
        dot.smooth.y += (dot.position.y - dot.smooth.y) * 0.1
    
        dot.el.setAttribute('cx', dot.smooth.x)
        dot.el.setAttribute('cy', dot.smooth.y)
  
        const d = 'M' + dot.anchor.x + ',' + dot.anchor.y + ' L' + dot.smooth.x + ',' + dot.smooth.y
        dot.path.setAttribute('d', d)
      })
      
      svgToBackground()
      
      ticker.lastTickTime = nowTime - (elapsedTime % ticker.fpsInterval)
    }
    
    requestAnimationFrame(tick)
  }
  
  /* Ready */
  (function() {
    // Resize
    window.addEventListener('resize', resizeHandler)
    
    // Mouse
    window.addEventListener('mousemove', mouseHandler)
    mouseSpeed()
  
    // Dots
    createDots()
    
    // Tick
    tick()
  })()

Don’t Forget to Follow me on all Social Network

YouTube: https://www.youtube.com/channel/UCw9etYfx-25oKB_qt1fFNWw

Facebook Page: https://www.facebook.com/codingbd2021

LinkedIn: https://www.linkedin.com/in/sajjat-ho… 

GitHub: https://github.com/cgsaleh8383

You can see Image Hover Effect

Leave a Reply

Your email address will not be published.