This is for my navbar on my personal website. I have my name displayed on the left side of the Navbar. I am trying to make a "wave effect" so that when I hover over my name (made of spans nested in a div), it will trigger the animations of the spans. Is there a better approach to this?
My Navbar now:
Imagine each character going up and back down when I hover across my name.
Part of React file:
<Navlink to="/" exact={true} className={styles['title-link']}>
<div className={styles.title}>
<span className={styles.animate1}>L</span>
<span className={styles.animate2}>e</span>
<span className={styles.animate3}>e</span>
<span> </span>
<span className={styles.animate4}>R</span>
<span className={styles.animate5}>e</span>
<span className={styles.animate6}>n</span>
<span> </span>
<span className={styles.animate7}>J</span>
<span className={styles.animate8}>i</span>
<span className={styles.animate9}>e</span>
</div>
</Navlink>
Part of SCSS file:
.title-link {
position: relative;
right: 275px;
text-decoration: none;
}
.title {
color: white;
font-family: 'Cedarville Cursive', cursive;
text-decoration: none;
font-size: 30px;
}
.title:hover {
span:first-child {
animation-delay: 0.11s;
}
span:nth-child(2) {
animation-delay: 0.22s;
}
span:nth-child(3) {
animation-delay: 0.33s;
}
span:nth-child(5) {
animation-delay: 0.44s;
}
span:nth-child(6) {
animation-delay: 0.55s;
}
span:nth-child(7) {
animation-delay: 0.66s;
}
span:nth-child(9) {
animation-delay: 0.77s;
}
span:nth-child(10) {
animation-delay: 0.88s;
}
span:nth-child(11) {
animation-delay: 0.99s;
}
}
.animate1, .animate2, .animate3, .animate4, .animate5, .animate6, .animate7, .animate8, .animate9{
animation-name: bounce;
animation-duration: 1s;
}
#keyframes bounce {
0% {
bottom: 0;
}
50% {
bottom: 5px;
}
100% {
bottom: 0;
}
}
I got your example working using css (not scss, counldnt find a fiddle host that allowed scss).
I think the main problem was using spans - they dont appear to animate inline elements. So I used a div with display: inline-block
http://jsfiddle.net/vdmpqawj/4/
<div id="title">
<div class="animate1">L</div>
<div class="animate2">e</div>
<div class="animate3">e</div>
<div class="animate4">R</div>
<div class="animate5">e</div>
<div class="animate6">n</div>
<div class="animate7">J</div>
<div class="animate8">i</div>
<div class="animate9">e</div>
</div>
#-webkit-keyframes bounce {
0%,
100% {
-webkit-transform: translateY(0);
}
50% {
-webkit-transform: translateY(-5px);
}
}
#keyframes bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
#title:hover > div:first-child {
-webkit-animation-name: bounce;
animation-name: bounce;
animation-duration: 1s;
}
#title:hover > div:nth-child(2) {
-webkit-animation-name: bounce;
animation-name: bounce;
animation-duration: 1s;
animation-delay: 0.11s;
}
#title:hover > div:nth-child(3) {
-webkit-animation-name: bounce;
animation-name: bounce;
animation-duration: 1s;
animation-delay: 0.22s;
}
#title:hover > div:nth-child(4) {
-webkit-animation-name: bounce;
animation-name: bounce;
animation-duration: 1s;
animation-delay: 0.33s;
}
#title:hover > div:nth-child(5) {
-webkit-animation-name: bounce;
animation-name: bounce;
animation-duration: 1s;
animation-delay: 0.44s;
}
#title:hover > div:nth-child(6) {
-webkit-animation-name: bounce;
animation-name: bounce;
animation-duration: 1s;
animation-delay: 0.55s;
}
#title:hover > div:nth-child(7) {
-webkit-animation-name: bounce;
animation-name: bounce;
animation-duration: 1s;
animation-delay: 0.66s;
}
#title:hover > div:nth-child(8) {
-webkit-animation-name: bounce;
animation-name: bounce;
animation-duration: 1s;
animation-delay: 0.77s;
}
#title:hover > div:nth-child(9) {
-webkit-animation-name: bounce;
animation-name: bounce;
animation-duration: 1s;
animation-delay: 0.88s;
}
#title {
color: black;
font-family: 'Cedarville Cursive', cursive;
text-decoration: none;
font-size: 30px;
}
#title > div {
display: inline-block;
}
Related
I'm working on a drop down menu as part of a school project. I've gotten most everything to work properly but I ran into an issue with JQuery events that I couldn't quite find the answer to, whenever I click on my list item it sets the list name properly but after that none of the events work. I put the handlers on parent elements to see if that helped but still nothing.
Here's a quick look at the JQuery.
$(document).ready(function(){
$('nav ul').on('mouseenter', '.menu1', function(){
$('.menu1 ul').removeClass("hidden");
});
$('nav ul').on('mouseleave', '.menu1', function(){
setTimeout(function(){
$('.menu1 ul').addClass("hidden");
}, 300);
});
$('nav ul').on('click', '.menu1 ul li', function(){
$('.menu1').text($(this).text());
});
});
I have a code pen for the list as well.
https://codepen.io/JFarenci/pen/gvoQvq
The issue is in $('.menu1').text($(this).text());
After this line gets executed on choosing an option, the portion inside the li tag changes to this: <li class="menu1">one</li> (assuming you had chosen 'one'). The ul tag along with the dropdown menu is overwritten.
To fix this, have a separate space to display the selected option above the li tag.
HTML:
<p id="selected"></p>
JAVASCRIPT:
$('nav ul').on('click', '.menu1 ul li',function({
$('#selected').text($(this).text());
});
Hope this helps!
I removed your mouseenter and mouseleave events and replaced it with mouseover.
On each click I added a span containing $(this).text(). Note that it's preceded by a remove() to handle for prior clicks when the text was set.
See runnable snippet to test.
$(document).ready(function() {
$('nav ul').on('mouseover', '.menu1', function() {
setTimeout(function() {
$('.menu1 ul').show();
}, 300);
});
$('nav ul').on('click', '.menu1 ul li', function() {
$('.menu1').find("#click").remove();
$('.menu1').append('<span id="click">' + $(this).text() + '<span>');
});
});
nav {
padding: 50px;
text-align: center;
}
nav>ul {
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
background: #ddd;
border-radius: 5px;
}
nav>ul>li {
float: left;
width: 150px;
height: 65px;
line-height: 65px;
position: relative;
text-transform: uppercase;
font-size: 14px;
color: rgba(0, 0, 0, 0.7);
cursor: pointer;
}
nav>ul>li:hover {
background: #d5d5d5;
border-radius: 5px;
}
ul.dropMenu {
position: absolute;
top: 100%;
left: 0%;
width: 100%;
padding: 0;
}
ul.dropMenu li {
background: #666;
color: rgba(255, 255, 255, 0.7);
}
ul.dropMenu li:hover {
background: #606060;
}
ul.dropMenu li:last-child {
border-radius: 0px 0px 5px 5px;
}
.hidden {
display: none;
/*opacity: 0;*/
}
li:hover>ul.dropMenu {
-webkit-perspective: 1000px;
perspective: 1000px;
}
li:hover>ul.dropMenu li {
opacity: 0;
-webkit-transform-origin: top center;
transform-origin: top center;
}
li:hover>ul.dropMenu li:nth-child(1) {
-webkit-animation-name: fold-out;
animation-name: fold-out;
-webkit-animation-duration: 120ms;
animation-duration: 120ms;
-webkit-animation-delay: 0ms;
animation-delay: 0ms;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
li:hover>ul.dropMenu li:nth-child(2) {
-webkit-animation-name: fold-out;
animation-name: fold-out;
-webkit-animation-duration: 120ms;
animation-duration: 120ms;
-webkit-animation-delay: 60ms;
animation-delay: 60ms;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
li:hover>ul.dropMenu li:nth-child(3) {
-webkit-animation-name: fold-out;
animation-name: fold-out;
-webkit-animation-duration: 120ms;
animation-duration: 120ms;
-webkit-animation-delay: 120ms;
animation-delay: 120ms;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
li:hover>ul.dropMenu li:nth-child(4) {
-webkit-animation-name: fold-out;
animation-name: fold-out;
-webkit-animation-duration: 120ms;
animation-duration: 120ms;
-webkit-animation-delay: 180ms;
animation-delay: 180ms;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes fold-out {
0% {
opacity: 0;
-webkit-transform: rotateX(-90deg) translateY(10px);
transform: rotateX(-90deg) translateY(10px);
}
60% {
-webkit-transform: rotateX(15deg);
transform: rotateX(15deg);
}
100% {
opacity: 1;
-webkit-transform: rotateX(0deg) translateY(0px);
transform: rotateX(0deg) translateY(0px);
}
}
#keyframes fold-out {
0% {
opacity: 0;
-webkit-transform: rotateX(-90deg) translateY(10px);
transform: rotateX(-90deg) translateY(10px);
}
60% {
-webkit-transform: rotateX(15deg);
transform: rotateX(15deg);
}
100% {
opacity: 1;
-webkit-transform: rotateX(0deg) translateY(0px);
transform: rotateX(0deg) translateY(0px);
}
}
li>ul.dropMenu {
-webkit-perspective: 1000px;
perspective: 1000px;
}
li>ul.dropMenu li {
-webkit-transform-origin: top center;
transform-origin: top center;
}
li>ul.dropMenu li:nth-child(4) {
-webkit-animation-name: fold-in;
animation-name: fold-in;
-webkit-animation-duration: 120ms;
animation-duration: 120ms;
-webkit-animation-delay: 0ms;
animation-delay: 0ms;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
li>ul.dropMenu li:nth-child(3) {
-webkit-animation-name: fold-in;
animation-name: fold-in;
-webkit-animation-duration: 120ms;
animation-duration: 120ms;
-webkit-animation-delay: 60ms;
animation-delay: 60ms;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
li>ul.dropMenu li:nth-child(2) {
-webkit-animation-name: fold-in;
animation-name: fold-in;
-webkit-animation-duration: 120ms;
animation-duration: 120ms;
-webkit-animation-delay: 120ms;
animation-delay: 120ms;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
li>ul.dropMenu li:nth-child(1) {
-webkit-animation-name: fold-in;
animation-name: fold-in;
-webkit-animation-duration: 120ms;
animation-duration: 120ms;
-webkit-animation-delay: 180ms;
animation-delay: 180ms;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes fold-in {
0% {
-webkit-transform: rotateX(0deg) translateY(0px);
transform: rotateX(0deg) translateY(0px);
}
100% {
opacity: 0;
-webkit-transform: rotateX(-90deg) translateY(10px);
transform: rotateX(-90deg) translateY(10px);
}
}
#keyframes fold-in {
0% {
-webkit-transform: rotateX(0deg) translateY(0px);
transform: rotateX(0deg) translateY(0px);
}
100% {
opacity: 0;
-webkit-transform: rotateX(-90deg) translateY(10px);
transform: rotateX(-90deg) translateY(10px);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<ul>
<li class="menu1">
<ul class="dropMenu hidden">
<li>one</li>
<li>two</li>
<li>three</li>
<li>fork</li>
</ul>
</li>
</ul>
</nav>
I'm trying to use the fade-out property on a home page to the #logo and at the same time fade-in to .container (whole page) . So while the logo is fadding out, the main page it's fadding in. I'm trying with some code that I found but no success. Does anyone know some proper documentation for reach it? THANKS
<div class="container">
<div id="logo" class="animated fadeOut"></div>
</div>
.animated {
z-index: 0;
background-image: url(../../static/logo.svg);
background-repeat: no-repeat;
background-position: center;
padding-top: 95px;
margin-bottom: 60px; -webkit-animation-duration: 5s;
animation-duration: 5s; -webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
# - webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
This should work. HTML:
<div class="animated fadeIn container">
<div id="logo" class="logo animated fadeOut"></div>
</div>
CSS:
#-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.logo {
z-index: 0;
background-image: url(../../static/logo.svg);
background-repeat: no-repeat;
background-position: center;
padding-top: 95px;
margin-bottom: 60px;
}
.animated{
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
.fadeIn {
-webkit-animation-name: fadeOut;
animation-name: fadeIn;
-webkit-animation-direction: reverse; //reverse direction of animation
animation-direction: reverse;
}
I was trying to add a preloader function to my page. It's done. but the preloader is fade out like the image below.
Here is my Code..
$(document).ready(function() {
//Preloader
$(window).load(function() {
preloaderFadeOutTime = 5000;
function hidePreloader() {
var preloader = $('.spinner-wrapper');
preloader.fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
});
.spinner-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
z-index: 999999;
}
.spinner.windcatcher {
margin: 0 auto;
top: 46%;
left: 48%;
border: 0;
position: absolute;
width: 4em;
perspective: 50em;
-webkit-animation: rotate 4s linear infinite;
animation: rotate 4s linear infinite;
}
.spinner.windcatcher .blade {
height: 0.5em;
background: red;
margin-bottom: 0.1em;
-webkit-animation: windcatcherSpin 4s linear infinite, windcatcherBg 2s linear infinite;
animation: windcatcherSpin 4s linear infinite, windcatcherBg 2s linear infinite;
}
.spinner.windcatcher .blade:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; }
.spinner.windcatcher .blade:nth-child(2) { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; }
.spinner.windcatcher .blade:nth-child(3) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.spinner.windcatcher .blade:nth-child(4) { -webkit-animation-delay: 0.75s; animation-delay: 0.75s; }
.spinner.windcatcher .blade:nth-child(5) { -webkit-animation-delay: 1s; animation-delay: 1s; }
.spinner.windcatcher .blade:nth-child(6) { -webkit-animation-delay: 1.25s; animation-delay: 1.25s; }
.spinner.windcatcher .blade:nth-child(7) { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }
.spinner.windcatcher .blade:nth-child(8) { -webkit-animation-delay: 1.75s; animation-delay: 1.75s; }
<div class="spinner-wrapper">
<div class="controls"></div>
<div class="spinner windcatcher" id="windcatcher">
<div class="blade"></div>
<div class="blade"></div>
<div class="blade"></div>
<div class="blade"></div>
<div class="blade"></div>
<div class="blade"></div>
<div class="blade"></div>
<div class="blade"></div>
</div>
</div>
In the above picture, Preloader is Fadeout from Right to left. But I need it should not be Fadeout from Right to left. It should fadeout from the current position. Please help.
Thank you.
Try .fadeOut instead of .hide method.
JSFiddle sample
I am trying to select an element, add hover to it, then have it select the child of that element. So, in this case, the hover should select the div and apply the animation to the p nested inside of it.
I have looked around on the w3schools website. I thought adding the :only-child selector might work, but it doesn't seem to. Perhaps that is not a valid syntax.
If possible, I would like to keep this CSS if possible, but perhaps it needs jquery. Does anyone know how to do this? Any input is appreciated.
HTML
<section class="secLI">
<a href="index.html">
<h3>Home</h3>
</a>
<div id="dropDown1" class="dropHide">
<p class="dropP">
This is information about the company.......
</p>
</div>
</section>
CSS
#dropDown1:hover:only-child {
/*****Display P in Drop Down on Hover*****/
-webkit-animation-name: displayP;
-webkit-animation-duration: .12s;
-webkit-animation-delay: 1s;
-webkit-animation-fill-mode: forwards !important;
-moz-animation-name: displayP;
-moz-animation-duration: .12s;
-mozt-animation-delay: 1s;
-moz-animation-fill-mode: forwards !important;
-ms-animation-name: displayP;
-ms-animation-duration: .12s;
-ms-animation-delay: 1s;
-ms-animation-fill-mode: forwards !important;
-o-animation-name: displayP;
-o-animation-duration: .12s;
-o-animation-delay: 1s;
-o-animation-fill-mode: forwards !important;
animation-name: displayP;
animation-duration: .12s;
animation-delay: 1s;
animation-fill-mode: forwards !important;
}
/*****Display P in Drop Down*****/
#-webkit-keyframes displayP {
from { opacity: 0; }
to { opacity: 1; }
}
#dropDown1:hover .dropP {
Should do the trick. The .dropP specifies the element with class dropP that is a child of #dropDown1 when #dropDown1 is being hovered.
Hover somewhere below Home to see the text showing :)
You need to add prefixes for all vendors in you keyframes for this to work properly .
Change your css like this
.dropP{
opacity: 0;
}
#dropDown1:hover .dropP {
-webkit-animation-name: displayP;
-webkit-animation-duration: .12s;
-webkit-animation-delay: 1s;
-webkit-animation-fill-mode: forwards !important;
-moz-animation-name: displayP;
-moz-animation-duration: .12s;
-mozt-animation-delay: 1s;
-moz-animation-fill-mode: forwards !important;
-ms-animation-name: displayP;
-ms-animation-duration: .12s;
-ms-animation-delay: 1s;
-ms-animation-fill-mode: forwards !important;
-o-animation-name: displayP;
-o-animation-duration: .12s;
-o-animation-delay: 1s;
-o-animation-fill-mode: forwards !important;
animation-name: displayP;
animation-duration: .12s;
animation-delay: 1s;
animation-fill-mode: forwards !important;
}
/*****Display P in Drop Down*****/
#-webkit-keyframes displayP {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-moz-keyframes displayP {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-ms-keyframes displayP {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-o-keyframes displayP {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes displayP {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<section class="secLI">
<a href="index.html">
<h3>Home</h3>
</a>
<div id="dropDown1" class="dropHide">
<p class="dropP">
This is information about the company.......
</p>
</div>
</section>
I made attempts to create a CSS animation, when you hover over the box, it reveals the div using CSS animations. I have used the following site as reference. click here however i can't seem to achieved the efx. On my site i have use JqUERY for a show and hide function, my addClass and RemoveClass works however overall the function isn't working how it should do. Can someone guide me in the right direction.
/** HTML **/
div class="box">
<div class="trigger">hhh</div>
<div class="overlay">
<h1>box 1</h1>
</div>
</div>
<div class="box">
<div class="trigger">hhh</div>
<div class="overlay">
<h1>box 1</h1>
</div>
</div>
<div class="box">
<div class="trigger">hhh</div>
<div class="overlay">
<h1>box 1</h1>
</div>
</div>
/* jquery **/
$(".overlay").addClass("visible");
$(".overlay").removeClass("visible");
$(".trigger").hover(function(){
var $this = $(this);
$this.next(".overlay").addClass("visible");
});
$(".trigger").mouseleave(function(){
var $this = $(this);
$this.next(".overlay").removeClass("visible");
});
/** CSS ANIMATION **/
.fadeInDown {
-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 1s;
-moz-animation-delay: 2s;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
-o-animation-duration: 1s;
-o-animation-delay: 2s;
-o-animation-timing-function: ease;
-o-animation-fill-mode: both;
animation-duration: 1s;
animation-delay: 2s;
animation-timing-function: ease;
animation-fill-mode: both;
}
#-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 1s;
-moz-animation-delay: 2s;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
-o-animation-duration: 1s;
-o-animation-delay: 2s;
-o-animation-timing-function: ease;
-o-animation-fill-mode: both;
animation-duration: 1s;
animation-delay: 2s;
animation-timing-function: ease;
animation-fill-mode: both;
}
#-Webkit-keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: translateY(20px);
}
Add following css and HTML tag .
HTML code:-
<h1 class="animated fadeInUp" >Example</h1>
CSS code:-
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
Try using the css classes that you have provided, and pass a second parameter to the "addClass" call indicating the number of milliseconds that it should animate. For example:
$(".trigger").hover(function(){
var $this = $(this);
$this.next(".overlay").addClass("fadeInDown", 1000);
});