Skip to content

Instantly share code, notes, and snippets.

View rohanb10's full-sized avatar

Rohan rohanb10

15 followers · 2 following
View GitHub Profile
@rohanb10
rohanb10 / _README.md
Last active July 2, 2020 11:12
Dynamic keyframe animation for floating elements using vanilla CSS + JS

Dynamic keyframes for floating elements

Randomly generated floating/hovering animation in JS

All four of the circles below are using a different set of keyframes

balls

Usage




  


  




    


          
    

      

        
        

          

              @rohanb10
          

          

            
                rohanb10
                / code.scss
            
            

              Last active
              November 10, 2022 21:36
            

              
                Staggered Delays for Animations in SCSS
              
          

        

      

        

  

    
    


        



  


  

        

          
          /**
        

        

          
           * @param $interval       - The interval between each delay, defaults to 500ms
        

        

          
           * @param $startTime      - The start time of the animations, defaults to 0ms
        

        

          
           * @param $numberOfDelays - The total number of delays to be generated, defaults to 10
        

        

          
           */
        

        

          
          @mixin delays($interval: 500, $startTime: 0, $numberOfDelays: 10) {
        

        

          
          	@for $i from 0 through $numberOfDelays {
        

        

          
          		$ms : $startTime + ($i * $interval);
        

        

          
          		&.delay-#{$ms} {
        

        

          
          			animation-delay: #{$ms}ms;
        

  





    


  




    


          
    

      

        
        

          

              @rohanb10
          

          

            
                rohanb10
                / _README.md
            
            

              Last active
              January 30, 2024 06:12
            

              
                Implementing Search on a Static Website
              
          

        

      

        

  

      

    
Implementing Search on a Static Website


Need search on your website but don't want to do all the work of setting up a server or a db? Here's how to do it:


Unfortunately, this method requires jQuery, so if you're trying to avoid that you're out of luck.


Search results will show up on the same page as the search input.