I am using animate.css in order to animate text on page load. I am delaying the effects but it is showing the text then animating it see?
You can see the animation in action here: https://gyazo.com/a51b4248203c72cbf81012e7f7fad112.
If you need to closer to my HTML & CSS: https://hastebin.com/dawawecuvi.xml
#import url('https://fonts.googleapis.com/css?family=Pacifico');
.logotext{
color: limegreen;
font-size: 34px;
font-family: 'Pacifico', cursive;
}
.navbar-default{
background-color: dimgrey !important;
box-shadow: 0px 5px 0px limegreen !important;
}
.navbar-default .navbar-nav > li > a {
color: white !important;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: white !important;
}
li{
font-size: 20px;
}
.navbar-right{
padding-right: 80px;
}
.hvr-sweep-to-top:before {
background: limegreen ;
}
.container-fluid {
padding: 0px;
}
.aboutmediv{
background-color: black;
height: 900px;
}
.imagetextbig {
position: absolute;
top: 240px;
width: 100%;
color: goldenrod;
font-size: 90px;
text-align: center;
animation: slideInLeft 1s;
animation-delay: 0.9s;
}
.navbar-fixed-top{
animation: slideInDown 1s;
animation-delay: 0.1s;
}
.imgtext2{
margin-top: 100px;
animation: slideInRight 1s;
animation-delay: 0.9s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Nydigov">
<meta name="description" content="Nydigovs portfolio site. Check out my recent work!">
<meta name="keywords" content="Fellex,Nydigov,NY,nydigov,fellex,fell,fellex.me,Fellex.me">
<link rel="shortcut icon" href="img/athyslogo.png">
<title>Nydigov</title>
<!--All links secure-->
<!--Latest compiled and minified CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--Secure link to paper bootstrap theme -->
<link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.min.css" integrity="sha384-I3UMl9KZhtYWd8htMkmvi+cG4KsfRMyoiX7O3teTUiqrP+34X3fuqYI5GUOC0N82" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--Animate.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw" crossorigin="anonymous">
<!--FontAwesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!--Hover CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.1.1/css/hover-min.css" integrity="sha384-VTeRBIyCP1UOtJsYqkdWx9FnCcVTZlBzNKjt0R0FMPZUVvNmz2bflo5bg7kbZDU1" crossorigin="anonymous">
<!--Main Stylesheet-->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><p class="logotext">Nydigov</p></a>
</div>
<ul class="nav navbar-nav pull-right navbar-right">
<li class="hvr-sweep-to-top">Home</li>
<li class="hvr-sweep-to-top">Past Work</li>
<li class="hvr-sweep-to-top">Contact</li>
</ul>
</div>
</nav>
<!--Content-->
<div class="container-fluid">
<!--Image-->
<div class="image">
<img src="images/imagebacktop.jpg" alt="" class="img-responsive mainimg">
<h2 class="imagetextbig">Hi, I'm Nydigov</h2>
<h2 class="imagetextbig imgtext2">And this is my site</h2>
</div>
<!--About Me-->
<div class="aboutmediv"></div>
</div>
</body>
</html>
Looking at your CSS, I presume these are the two elements we're talking about:
.imagetextbig {
position: absolute;
top: 240px;
width: 100%;
color: goldenrod;
font-size: 90px;
text-align: center;
animation: slideInLeft 1s;
animation-delay: 0.9s;
}
.imgtext2{
margin-top: 100px;
animation: slideInRight 1s;
animation-delay: 0.9s;
}
If you want them hidden at first and then to slide in from the sides of the page, you have two options. The first option is to change the CSS so they start off-screen and animate on-screen. But there isn't a plug-and-play solution for that where you can just use the animate.css animation out of the box and have it work.
So we can do the second option, which is to hide them as the page is loaded, then have them appear when the animation starts. Use visibility: hidden in your default styles for the elements to hide them when the page first loads.
.imagetextbig {
position: absolute;
top: 240px;
width: 100%;
color: goldenrod;
font-size: 90px;
text-align: center;
animation: slideInLeft 1s;
animation-delay: 0.9s;
visibility: hidden; /*add this*/
}
.imgtext2{
margin-top: 100px;
animation: slideInRight 1s;
animation-delay: 0.9s;
visibility: hidden; /*add this*/
}
Then, in the animation, we want to make sure they switch to visibility: visible, otherwise you'll be animating an invisible element.
If we go to the animate.css website and check their source code, we can see that the animation for slideInLeft looks like this:
#keyframes slideInLeft {
0% {
transform: translate3d(-100%,0,0);
visibility: visible;
}
to {
transform: translateZ(0);
}
}
In other words, setting the elements to visible at the start of the animation is already taken care of for you. So just adding visibility: hidden to the default styles at the start is all you need. The slideInRight animation is similar to the slideInLeft one: it also sets visibility: visible at its start. So nothing to worry about there either.
Related
When my web page loads it plays this bottom border animation, then afterwords it will display a static bottom border. The issue is, you can see from this snippet that the animated border is shorter than the static border.. How can I center this so both borders are identical at the end result? I would ideally like both borders to look like the second, longer one shown in the snippet.
I have played around with the width but can't seem to figure out what parameter needs a change.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>
.border-bottom-animate:after {
content: "";
display: block;
border-bottom: 5px dotted black;
width: 100%;
animation-duration: 3s;
animation-name: border-animation;
}
#keyframes border-animation {
from {
width: 0%;
}
to {
width: 100%;
}
}
.border-bottom-noanimate {
content: "";
display: block;
border-bottom: 5px dotted black;
width: 100%;
}
</style>
</head>
<body>
<div class="container border-bottom-animate">
<p style="font-size: xx-large">
border animation
</p>
</div>
<div class="container border-bottom-noanimate">
<p style="font-size: xx-large">
border no animation
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
you can add a position:relative to the container, and set its after pseudo-element’s pasition to absolute and left to 0, so that it’ll start right from the beginning of its container.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>
.container{
position:relative;
}
.border-bottom-animate:after {
content: "";
position:absolute;
left:0;
display: block;
border-bottom: 5px dotted black;
width: 100%;
animation-duration: 3s;
animation-name: border-animation;
}
#keyframes border-animation {
from {
width: 0%;
}
to {
width: 100%;
}
}
.border-bottom-noanimate {
content: "";
display: block;
border-bottom: 5px dotted black;
width: 100%;
}
</style>
</head>
<body>
<div class="container border-bottom-animate">
<p style="font-size: xx-large">
border animation
</p>
</div>
<div class="container border-bottom-noanimate">
<p style="font-size: xx-large">
border no animation
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
The :after pseudo-element is only as wide as the content inside the padding. You need to add the size of the padding to your :after's width. Then adjust the margin to account for the greater width. Bootstrap uses calc(var(--bs-gutter-x) * .5) to define the padding-left and padding-right of a .container.
See my comments in the snippet CSS below. I minimalized the snippet but, there are only 2 lines with a change plus 2 comment lines from your code.
.border-bottom-animate:after {
content: "";
display: block;
border-bottom: 5px dotted black;
/* add the bootstrap gutter width */
width: calc(var(--bs-gutter-x) + 100%);
animation-duration: 3s;
animation-name: border-animation;
/* give a negative x margin half the gutter width */
margin: 0 calc(var(--bs-gutter-x) * -.5);
}
#keyframes border-animation {
from {
width: 0%;
}
to {
width: calc(var(--bs-gutter-x) + 100%);
}
}
.border-bottom-noanimate {
content: "";
display: block;
border-bottom: 5px dotted black;
width: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container border-bottom-animate">
<p style="font-size: xx-large">
border animation
</p>
</div>
<div class="container border-bottom-noanimate">
<p style="font-size: xx-large">
border no animation
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
Am having some trouble with toggling a FAB from hamburger to x.
The FAB has one primary icon, & three secondary icons. Clicking the primary icon will toggle the secondary icons vertically, & it should also toggle the animation from hamburger to x at any click within the primary icon.
Currently, my code does not toggle the animation from hamburger to x if a user were to precisely click on either of the three hamburger lines.
I do hope someone is willing to help explain where I have gone wrong, coz it just feels so close but I'm not able to figure out where my mistake is.
Tutorial Credits:
Tran Anh Tuat
w3newbie
I am new to coding & my codes below are the combination of my efforts from studying tutorials from the above links. Will be grateful for any & all help. Thank you in advance!
let fabAnim = document.querySelector('.priFabWhite')
let fabItems = document.querySelectorAll('.secFabOrange')
showItems = () => {
fabItems.forEach((e, index) => {
e.style.bottom = `calc(${(index + 1.5) * 70}%)`
})
}
hideItems = () => {
fabItems.forEach(e => {
e.style.bottom = `20px`
})
}
/* Triggers click animation rotation of fabToggle button */
fabAnim.addEventListener('click', (e) => {
e.target.classList.toggle('active')
if (e.target.classList.contains('active')) {
showItems()
} else {
hideItems()
}
})
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html, body{
height: 100vh;
background-color: black;
position: relative;
}
.wrapper{
position: absolute;
display: grid;
place-items: center;
width: 100px;
height: 100px;
cursor: pointer;
right: 10px;
bottom: 50px;
}
.wrapper > button {
position: absolute;
outline:transparent;
border: transparent;
cursor: pointer;
}
.secFabOrange{
background-color: rgb(209, 84, 0);
width: 50px;
height: 50px;
font-size: 25px;
transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
display: grid;
place-items: center;
border-radius: 30px;
color: white;
}
.secFabOrange > i{
transition: 0.6s ease-in-out;
}
.priFabWhite {
background-color:white;
width: 70px;
height: 70px;
position: absolute;
border-radius: 50px
}
.line{
position: absolute;
right:25%;
height:6px;
width: 50%;
border-radius: 8px;
transition: all cubic-bezier(0.26, 0.1, 0.27, 1.55) 0.35s;
}
.topGreen{
top:25%;
background: green;
}
.middleRed{
top: 47%;
background: red;
}
.bottomBlue{
bottom: 25%;
background: blue;
}
.priFabWhite.active .topGreen{
transform: rotate(45deg);
top:45%;
}
.priFabWhite.active .middleRed{
transform: rotate(-45deg);
top: 45%;
}
.priFabWhite.active .bottomBlue{
transform: rotate(-45deg);
top: 45%;
}
/* START popup style */
.popup {
position: absolute;
top:50%;
left:40%;
transform: translate(-50%, -50%);
width:70%;
height:90%;
padding:30px 20px;
background:#f5f5f5;
border-radius:10px;
box-sizing:border-box;
z-index:2;
text-align:justified;
}
.popup .title {
margin:5px 0px;
font-size:24px;
font-weight:600;
}
.popup .description{
color:#222;
font-size:16px;
padding:5px;
}
/* END popup style */
<!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>Fab Toggle Anim</title>
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- START fab divs -->
<div class="wrapper">
<button class="secFabOrange">
<i class='bx bx-trip'></i>
</button>
<button class="secFabOrange">
<i class='bx bx-trip'></i>
</button>
<button class="secFabOrange">
<i class='bx bx-exit'></i>
</button>
<button class="priFabWhite">
<span class="line topGreen"></span>
<span class="line middleRed"></span>
<span class="line bottomBlue"></span>
</button>
</div>
<!-- END fab divs -->
<!-- START popup divs -->
<div class="popup center">
<div class="title">
FAB Hamburger to X Animation
</div>
<br>
<div class="description">
<h3>Intention:</h3>
<ol>
<li>Anim1: Toggle <strong>secFabOrange</strong> from <strong>priFabWhite</strong> on click.</li>
<li>Anim2: Hamburger to x.
<li><mark>Anim3: Toggle Anim1 & Anim2 <strong>from any point within priFabWhite</strong> on click.</mark></li>
</ol>
<br>
<h3>Problem with Current Code:</h3>
<ul>
<li>For point 3, my code toggles Anim1 & Anim2 <strong>only when white portion of priFabWhite is clicked</strong></li>
<li>If user <strong>precisely clicks</strong> either of the three hamburger lines (green, red, blue), <strong>only Anim1 is triggered</strong>.</li>
</ul>
<br>
<h3>Tutorial Credits:</h3>
<ul>
<li>Tran Anh Tuat</li>
<li>w3newbie</li>
</ul>
</div>
<!-- END popup divs -->
<script src="scripts.js"></script>
</body>
</html>
Managed to find a solution for the problem. Added class avoid-clicks in html and css.
let fabAnim = document.querySelector('.priFabWhite')
let fabItems = document.querySelectorAll('.secFabOrange')
showItems = () => {
fabItems.forEach((e, index) => {
e.style.bottom = `calc(${(index + 1.5) * 70}%)`
})
}
hideItems = () => {
fabItems.forEach(e => {
e.style.bottom = `20px`
})
}
/* Triggers click animation rotation of fabToggle button */
fabAnim.addEventListener('click', (e) => {
e.target.classList.toggle('active')
if (e.target.classList.contains('active')) {
showItems()
} else {
hideItems()
}
})
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html, body{
height: 100vh;
background-color: black;
position: relative;
}
.wrapper{
position: absolute;
display: grid;
place-items: center;
width: 100px;
height: 100px;
cursor: pointer;
right: 10px;
bottom: 50px;
}
.wrapper > button {
position: absolute;
outline:transparent;
border: transparent;
cursor: pointer;
}
.secFabOrange{
background-color: rgb(209, 84, 0);
width: 50px;
height: 50px;
font-size: 25px;
transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
display: grid;
place-items: center;
border-radius: 30px;
color: white;
}
.secFabOrange > i{
transition: 0.6s ease-in-out;
}
.priFabWhite {
background-color:white;
width: 70px;
height: 70px;
position: absolute;
border-radius: 50px
}
.line{
position: absolute;
right:25%;
height:6px;
width: 50%;
border-radius: 8px;
transition: all cubic-bezier(0.26, 0.1, 0.27, 1.55) 0.35s;
}
.topGreen{
top:25%;
background: green;
}
.middleRed{
top: 47%;
background: red;
}
.bottomBlue{
bottom: 25%;
background: blue;
}
.priFabWhite.active .topGreen{
transform: rotate(45deg);
top:45%;
}
.priFabWhite.active .middleRed{
transform: rotate(-45deg);
top: 45%;
}
.priFabWhite.active .bottomBlue{
transform: rotate(-45deg);
top: 45%;
}
/* START popup style */
.popup {
position: absolute;
top:50%;
left:40%;
transform: translate(-50%, -50%);
width:70%;
height:90%;
padding:30px 20px;
background:#f5f5f5;
border-radius:10px;
box-sizing:border-box;
z-index:2;
text-align:justified;
}
.popup .title {
margin:5px 0px;
font-size:24px;
font-weight:600;
}
.popup .description{
color:#222;
font-size:16px;
padding:5px;
}
/* END popup style */
.avoid-clicks {
pointer-events: none;
}
<!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>Fab Toggle Anim</title>
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- START fab divs -->
<div class="wrapper">
<button class="secFabOrange">
<i class='bx bx-trip'></i>
</button>
<button class="secFabOrange">
<i class='bx bx-trip'></i>
</button>
<button class="secFabOrange">
<i class='bx bx-exit'></i>
</button>
<button class="priFabWhite">
<span class="line topGreen avoid-clicks"></span>
<span class="line middleRed avoid-clicks"></span>
<span class="line bottomBlue avoid-clicks"></span>
</button>
</div>
<!-- END fab divs -->
<!-- START popup divs -->
<div class="popup center">
<div class="title">
FAB Hamburger to X Animation
</div>
<br>
<div class="description">
<h3>Solution:</h3>
<ol>
<li>HTML: Added <strong>avoid-clicks</strong> into each span class for priFabWhite button in lines 30-32.</li>
<li>CSS: Defined <strong>avoid-clicks</strong> in lines 123-125.
</ol>
<br>
<br>
<h3>Tutorial Credits:</h3>
<ul>
<li>Tran Anh Tuat</li>
<li>w3newbie</li>
</ul>
</div>
<!-- END popup divs -->
<script src="scripts.js"></script>
</body>
</html>
So I have been searching to find a way to change the color of the bottom border of my navigation bar links with a linear animation starting from the bottom going upwards. I was able to find a thread with some code that I semi-understand, just a few CSS lines which has sent me in the right direction, however the colour change is animated from the top down, whereas I would like the opposite.
I am using Bootstrap if that makes any different, is there any way I can do the opposite and have the transition start from the bottom and go upwards? My code is posted below...
* {
box-sizing: border-box;
}
body {}
#header-nav {
background-color: #262626;
font-family: 'Kanit', sans-serif;
font-size: 1.1em;
text-transform: uppercase;
border-bottom: #212121 thick solid;
}
#header-nav .container {
padding-top: 10px;
padding-bottom: 10px;
/* border-bottom: purple thick solid;*/
margin: 0px;
}
/*212121*/
#header-nav a {
color: #FFF;
margin-right: 2rem;
padding: 10px;
/* border-bottom: purple thick solid; */
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
#header-nav a:hover {
text-decoration: none;
/* background-color: purple;*/
border-bottom: white thick solid;
}
<!DOCTYPE html>
<html>
<head>
<!-- Meta & Other -->
<title>Infamous | Home</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Infamous official website">
<meta name="keywords" content ="Infamous, Minecraft, Server, Game, Gaming">
<meta name="author" content="MrWardy">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="./Stylesheets/default.css">
<!-- Fonts -->
<script src="https://kit.fontawesome.com/35fad75205.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Kanit&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar-nav ml-auto">
<div class="container">
<a class="active" href="#"><i class="fas fa-home"></i> Home</a>
<i class="fas fa-question"></i> About
<i class="fas fa-book"></i> Rules
<i class="fas fa-vote-yea"></i> Vote
<i class="fas fa-tags"></i> Store
</div>
</nav>
</header>
<!-- JavsScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
Use gradient for this:
.box {
background:#000;
padding:10px 20px;
}
a {
display:inline-block;
color:#fff;
font-size:30px;
text-decoration:none;
padding-bottom:10px; /* control the space for the gradient */
background:
linear-gradient(currentColor,currentColor)
bottom /* make it bottom */
/100% 0px /*start at heght = 0; */
no-repeat;
transition:0.3s all;
}
a:hover {
background-size:100% 6px; /* make the height 6px*/
}
<div class="box">
a link
</div>
Another syntax where you adjust the position instead:
.box {
background:#000;
padding:10px 20px;
}
a {
display:inline-block;
color:#fff;
font-size:30px;
text-decoration:none;
padding-bottom:10px;
background:
linear-gradient(currentColor,currentColor)
left 0 bottom -7px
/100% 6px
no-repeat;
transition:0.3s all;
}
a:hover {
background-position:left 0 bottom 0;
}
<div class="box">
a link
</div>
I am trying to implement this example:
https://mdbootstrap.com/snippets/jquery/bartek-malanowski/517057
However, seems like the CSS files from mdboostrap are not being loaded:
I imported the mdboostrap CSS and JS links and I have a custom css file with the custom css, but it's not working... Can you help me please?
Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.0/css/mdb.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/Custom.css">
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.0/js/mdb.min.js"></script>
</head>
<body>
<div class="container"><br/>
<div class="col-lg-8 m-auto d-block">
<!-- Switch -->
<div class="p-5">
<div class="switch switch-info">
<label>
Off
<input type="checkbox">
<span class="lever"></span> On
</label>
</div>
</div>
</div>
</div>
</body>
</html>
And the css file:
/* Switch info */
.switch-info label input[type=checkbox]:checked+.lever {
background-color: #33b5e5;
}
.switch-info label input[type=checkbox]:checked+.lever:after {
background-color: #0099CC;
}
Use the following code :-
HTML -
<label class="custom-control custom-checkbox"><span>Grayscale:</span>
<input type="checkbox" id="grayscale" class="custom-control-input">
<span class="custom-control-indicator"></span>
</label>
CSS -
/*-------------------------------------------------- Custom Check Box -----------------------------------------------------------------------*/
.custom-control-input {
display: none;
}
.custom-checkbox {
min-height: 1rem;
padding-left: 0;
margin-right: 0;
cursor: pointer;
}
.custom-checkbox .custom-control-indicator {
content: "";
display: inline-block;
position: relative;
width: 30px;
height: 10px;
background-color: #818181;
border-radius: 15px;
margin-right: 10px;
-webkit-transition: background .3s ease;
transition: background .3s ease;
vertical-align: middle;
margin: 5px 16px;
box-shadow: none;
float: right;
}
.custom-checkbox .custom-control-indicator:after {
content: "";
position: absolute;
display: inline-block;
width: 18px;
height: 18px;
background-color: #f1f1f1;
border-radius: 21px;
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
left: -2px;
top: -4px;
-webkit-transition: left .3s ease, background .3s ease, box-shadow .1s ease;
transition: left .3s ease, background .3s ease, box-shadow .1s ease;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-indicator {
background-color: #f57727;
background-image: none;
box-shadow: none !important;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-indicator:after {
background-color: #f57727;
left: 15px;
}
.custom-checkbox .custom-control-input:focus ~ .custom-control-indicator {
box-shadow: none !important;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
body {
background-image: url("bg.jpg");
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
ul {
list-style-type: none;
padding: 0;
overflow: hidden;
background-color: #000000;
margin-left:100px;
}
li {
float:left;
}
li a {
display: block;
color: white;
text-align: left;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #000000;
}
img {
position: absolute;
margin-top:10px;
border: 1px solid #ccc;
}
img img {
width: 100%;
height: auto;
}
img:nth-of-type(2){
-webkit-animation: fadeInOut 15s linear 5s infinite;
}
img:nth-of-type(3){
-webkit-animation: fadeInOut 15s linear 5s infinite;
}
img:nth-of-type(4){
-webkit-animation: fadeInOut 15s linear 5s infinite;
}
img:nth-of-type(5){
-webkit-animation: fadeInOut 15s linear 5s infinite;
}
#-webkit-keyframes fadeInOut{
0% { opacity:1; }
17% { opacity:1; }
25% { opacity:0; }
92% { opacity:0; }
100% { opacity:1; }
}
.image-wrapper {
position: relative;
height: 600px; // change to whatever works for you
}
.image {
position: absolute;
top: 50%;
border: 1px solid #ccc;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.container { width: 1000px; }
.logo {
float: left;
width: 100px;
height: 50px;
}
.nav {
float: right;
width: 880px;
}
</style>
<title>Badass Burgers</title>
</head>
<body style="height:1500px">
<img class="logo" src='logo.jpg'/>
<div class="container">
<ul class="nav">
<li><a class="active" href="homepage.php">Home</a></li>
<li>About</li>
<li>Team</li>
<li>Menu</li>
<li>Book A Table</li>
<li>Message Us</li>
</ul>
<div style="clear: both"></div>
</div>
<div class="image-wrapper">
<img class="image" src='food1.jpg' width="1400" height="600" />
<img class="image" src='Food2.jpg' width="1400" height="600" />
<img class="image" src='Food3.jpg' width="1400" height="600" />
<img class="image" src='Food4.jpg' width="1400" height="600" />
</div>
</body>
</html>
hi, i am trying to fade between these 4 images for a website. so far
so good, however im trying to alter this code. does anyone know how to
alter the code such that each image changes after 5 seconds please ?
any help is very appriciated
As litel says, the bootstrap carousel would be perfect for your example. W3 Schools have a good tutorial on Bootstrap here, which is what I used to build my first carousel.
But to answer your question in your present context, I think it would be much easier to do it with a short script rather than the CSS animations. I added the following code to the end of your document and that seemed to do what you were asking. Hope that helps.
<style>
.image-wrapper .image{
display: none; /*Hide the images to begin with*/
}
</style>
<script>
var currentImage = 0;
$(document).ready(function(){
imageChanger(); /*First image fades in on page ready*/
setInterval(imageChanger, 5000);}); /*set a timer of 5000ms for each subsequent image*/
function imageChanger(){
$('.image-wrapper img').eq(currentImage).fadeOut();
currentImage = (currentImage+1)%4;
$('.image-wrapper img').eq(currentImage).fadeIn();
}
</script>