Foundation CSS Orbit Using Animation
Last Updated :
29 Jun, 2022
Foundation CSS is an open-source front-end framework that makes it simple and quick to create an appealing responsive website, email, or app. ZURB released it in September 2011. Numerous businesses, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This platform, which resembles SaaS, is built on the Bootstrap framework. It is more unique, flexible, and complex. Because of its command-line interface, dealing with module bundlers is likewise a joy. Email framework creates HTML emails that are accessible on all devices and mobile-friendly. Using Foundation for Apps, you can make fully responsive web applications.
Foundation CSS Orbit is used to create the slider that can swipe the elements using the orbit class. We can store any type of content in the slider such as text, images, etc.
Foundation CSS Orbit Using Animation Classes:
- orbit: This class is added to create the basic orbit.
- orbit-container: This class is added to build an orbit container.
- orbit-wrapper: This class is added to wrap the whole orbit container leaving the bottom bullets.
- orbit-controls: This class is added to the buttons that will control the slides of the orbit.
- orbit-image: This class is added to insert an image in the slide.
- orbit-previous: This class is added to traverse the previous slide.
- orbit-next: This class is added to move to the next slide.
- orbit-slide: This is used to create a slide in the orbit container.
Foundation CSS Orbit Using Animation Attributes:
- data-orbit: This attribute th
- data-options:
- data-slide:
Example 1: The code below demonstrates how to make a basic slider with text-only with slide-in-left, slide-in-right, slide-out-left, and slide-out-right as values of the data-options attribute.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"/>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-prototype.min.css"/>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-float.min.css"/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.css"/>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.js">
</script>
</head>
<body>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Foundation CSS Orbit Using Animation</h3>
</center>
<div class="row float-center " style="width: 38rem; margin-top: 2rem;">
<div class="columns">
<div class="orbit" role="region" aria-label="" data-orbit
data-options=
"animInFromLeft:slide-in-left; animInFromRight:slide-in-right;
animOutToLeft:slide-out-left; animOutToRight:slide-out-right;">
<ul class="orbit-container">
<button class="orbit-previous" aria-label="previous">
<span class="show-for-sr">Previous Slide</span>◀
</button>
<button class="orbit-next" aria-label="next">
<span class="show-for-sr">Next Slide</span>▶
</button>
<li class="is-active orbit-slide" style="">
<div>
<h3 class="text-center"> GeeksforGeeks 1 </h3>
<p class="text-center">
A Computer Science portal for geeks.
</p>
</div>
</li>
<li class="orbit-slide">
<div>
<h3 class="text-center"> This is the 2nd slide </h3>
<p class="text-center">
It contains well written, well thought
and well explained computer science and
programming articles.
</p>
</div>
</li>
<li class="orbit-slide">
<div>
<h3 class="text-center">3rd slide faded in from right</h3>
<p class="text-center">
Computer Science portal
</p>
</div>
</li>
</ul>
<nav class="orbit-bullets">
<button class="is-active" data-slide="0">
<span class="show-for-sr">First slide details.</span
><span class="show-for-sr">Current Slide</span>
</button>
<button data-slide="1">
<span class="show-for-sr">Second slide details.</span>
</button>
<button data-slide="2">
<span class="show-for-sr">Third slide details.</span>
</button>
</nav>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Output:
Example 2: The code below demonstrates how to make a basic slider with images with fade-in, fade-in, fade-out, and fade-out as values of the data-options attribute.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" />
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-prototype.min.css">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-float.min.css">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.css" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.js">
</script>
</head>
<body>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Foundation CSS Orbit Using Animation</h3>
</center>
<div class="row float-center" style="width: 38rem;">
<div class="columns">
<div class="orbit" role="region" aria-label=""
data-orbit data-options="animInFromLeft:fade-in;
animInFromRight:fade-in; animOutToLeft:fade-out;
animOutToRight:fade-out;">
<ul class="orbit-container">
<button class="orbit-previous" aria-label="previous">
<span class="show-for-sr">Previous Slide</span>◀</button>
<button class="orbit-next" aria-label="next"><span
class="show-for-sr">Next Slide</span>▶</button>
<li class="is-active orbit-slide">
<img class="orbit-image" src="1.png" alt="">
<figcaption class="orbit-caption">First Slide</figcaption>
</li>
<li class="orbit-slide">
<img class="orbit-image" src="2.png" alt="">
<figcaption class="orbit-caption">second slide</figcaption>
</li>
<li class="orbit-slide">
<img class="orbit-image" src="3.png" alt="">
<figcaption class="orbit-caption">Third Slide</figcaption>
</li>
</ul>
<nav class="orbit-bullets">
<button class="is-active" data-slide="0"><span
class="show-for-sr">First slide details.</span>
<span class="show-for-sr">Current Slide</span></button>
<button data-slide="1"><span class="show-for-sr">
Second slide details.</span></button>
<button data-slide="2"><span class="show-for-sr">
Third slide details.</span></button>
</nav>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Output:
Reference: https://get.foundation/sites/docs/orbit.html#using-animation
Similar Reads
Foundation CSS Motion UI Animation A Foundation is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is
5 min read
Foundation CSS Orbit Slide Contents Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Lib sass
3 min read
CSS Floating Animation CSS Floating Animation creates a visual effect where elements appear to float smoothly, often mimicking natural movement like drifting in water or air. This effect is achieved using CSS properties such as @keyframes, transform, and animation, giving elements a subtle, continuous floating motion.CSS
1 min read
CSS animation-duration Property The animation-duration property in CSS is essential for controlling the length of time an animation takes to complete one cycle, making it a vital tool for creating dynamic and engaging web designs.Syntax:animation-duration: time | initial | inherit;Property Value:time: This value is used to specify
3 min read
Foundation CSS Orbit Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework
4 min read