Animating background foofs

Developer
Anya Craig
Size
2,077 Kb
Views
44,528
  1. Animating background foofs Previews
  2. Animating background foofs HTML Codes
  3. Animating background foofs CSS Codes
  4. Animating background foofs JS Codes

How do I make an animating background foofs?

Animating background foofs into the viewport using JS. This could be triggered with ScrollMagic or something.. What is a animating background foofs? How do you make a animating background foofs? This script and codes were developed by Anya Craig on 26 August 2022, Friday.

Animating background foofs Previews
IQ Test

Animating background foofs - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animating background foofs</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">
</div>
<button id="foofIt">Foof it</button>
<button id="unfoofIt">Unfoof it</button> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animating background foofs - Script Codes CSS Codes

.container { border: 5px solid black; width:60%; height: 300px; background-image: url("http://pngimg.com/upload/duck_PNG5005.png"), url("http://www.pngmart.com/files/2/Duck-PNG-Free-Download.png"); background-size: 150px, 250px; background-repeat: no-repeat; background-position: left -150px top -20px, right -250px top -20px; transition: .5s all ease-in-out;
}
.foofed { border: 5px solid red; background-position: left 20px top 20px, right 20px top 20px;
}
#unfoofIt { display: none;
}
button { margin-top: 25px; padding: 15px 35px; background: tomato; border: 0; font-size: 18px; color: white;
}

Animating background foofs - Script Codes JS Codes

var foofIt = function(){ $(".container").addClass("foofed"); $("#foofIt").hide(); $("#unfoofIt").show();
}
var unfoofIt = function(){ $(".container").removeClass("foofed"); $("#foofIt").show(); $("#unfoofIt").hide();
}
$("#foofIt").on("click", function(){ foofIt();
});
$("#unfoofIt").on("click", function(){ unfoofIt();
})
Animating background foofs - Script Codes
Animating background foofs - Script Codes
Home Page Home
Developer Anya Craig
Username AnyaCraig
Uploaded August 26, 2022
Rating 3
Size 2,077 Kb
Views 44,528
Do you need developer help for Animating background foofs?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anya Craig (AnyaCraig) Script Codes
Name
Leaf animation with Snap.svg on scroll-by
Flex Baseline Test
Responsive Image Height Test
Making an img fill a div while maintaining aspect ratio - Three Imperfect Solutions
Fancy Two-Border Buttons
Border-image for Frames
Drawing Tablet
Hover zoom on a background image
Overlay Hover Effect
Rainbow Pride Slide
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!