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
CSS animation-timing-function Property
The animation-timing-function property in CSS is used to specify how an animation makes transitions through keyframes. It defines the speed curve of the animation, determining how the intermediate keyframes are calculated and the pacing of the animation. Syntax: animation-timing-function: linear | e
4 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
Loading Text Animation Effect using CSS
There are a lot of animations possible in CSS and today we will look at the loading text animation. The basic idea behind the working of this animation is the application of animation delay. Every alphabet is delayed by .1s so that each alphabet animates with a little delay and give the loading anim
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
Foundation CSS Kitchen Sink Orbit
Foundation CSS is the frontend framework of CSS, built by the ZURB foundation in September 2011, that is used to develop 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,
5 min read
Cartoon animation loader using CSS
In the operating system, all the loading of programs and libraries are handled by a loader which is one of the important processes for starting a program. The programs are kept in the memory for further execution.HTML Code: In this section, the basic structure of the code is designed.HTML <!DOCTY
3 min read
Fading Text Animation Effect Using CSS3
The fading text animation effect is one of the most demanding effects on UI/UX designing. This effect can be achieved by using HTML5 and CSS3. In the fading text effect, whenever we load the window, the text will slowly start disappearing. We can implement this effect using the animation property in
2 min read