I am attempting to use the Animate.css library to achieve the following: Fading the "Simply Reiki" logo together with a string of successive <p> elements. Each<p> will need to fade in and out, one after the other.
The page in question can be viewed at Simply Reiki test page
OBSERVATIONS
Obviously, "animation-delay" does not function. Each<p> element immediately overlaps the others.
It does not seem that "both" will work on the
fadeIn and perform the fade out.
Here are code snippets for my HTML and CSS:
h1.animated {
font-size: 5.5em;
font-weight: normal;
font-family: 'Allura', cursive;
color: #e8e8ea;
margin: auto;
position: absolute;
z-index: 1;
animation: fadeIn forwards 7s 0.5s;
opacity: 0;
}
p.animated {
font-size: 1.5em;
font-family: 'Muli', cursive;
color: #e8e8ea;
margin: auto;
position: absolute;
top: 105px;
left: 45px;
z-index: 1;
opacity: 0;
}
p.animated1 {
animation: fadeIn both 7s;
}
p.animated2 {
animation-delay: 14s;
animation: fadeIn both 7s;
}
p.animated3 {
animation-delay: 21s;
animation: fadeIn both 7s;
}
<div class="hero-text-wrapper">
<h1 class="animated">Simply Reiki</h1>
<p class="animated animated1">Pure · Positive · Powerful</p>
<p class="animated animated2">Just for today, I will not be angry.</p>
<br>
<p class="animated animated3">Just for today, I will not worry.</p>
<br>
<p class="animated animated4">Just for today, I will be grateful.</p>
<br>
<p class="animated animated5">Just for today, I will do my work honestly.</p>
<br>
<p class="animated animated6">Just for today, I will be kind to every living thing.</p>
</div>
use javascript with like this
.quotes {display: none;}
<h2 class="quotes">first quote</h2>
<h2 class="quotes">second quote</h2>
// code gets installed at the end of the body (after all other HTML)
(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
})();
See also Working demo:
http://fiddle.jshell.net/jfriend00/n4mKw/show/
Related
I'm somewhat new to Vue, and I'm working on trying to make a transition work. The outcome would look similar to the gif below. The element moving from right to left is one component in Vue, but the issue is I'm transitioning it from one Bootstrap column to another. From what I've seen online, there isn't an easy way to CSS transition while also changing the parent element, so what I've done is basically rendered the component twice, and delayed the second one. In the gif, you can see the point where it transitions and its a bit clunky.
I'm wondering if this is best practice, or if there's another, easier way to do this. Should I rework my whole structure to make them live under the same parent, and just change the position via CSS, or should I continue with what I've done and just work to smooth out the transition between the two elements?
<div class="d-flex align-items-center min-vh-100 hero">
<div class="container-fluid">
<div class="row hero-row d-flex">
<div class="col hero-left d-flex align-items-center">
<div class="w-100">
<transition appear name="fade-left" mode="out-in" >
<HeroNav v-if="$route.name!='Home'"/>
<h1 v-else>Hey, I'm George.</h1>
</transition>
</div>
</div>
<div class="col d-flex hero-right align-items-center">
<transition name="slide" mode="out-in">
<HeroNav v-if="$route.name=='Home'"/>
<div v-else>
</div>
</transition>
</div>
</div>
</div>
</div>
</template>
<script>
import HeroNav from '#/components/HeroNav.vue'
export default {
name: 'Hero',
components: { HeroNav }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hero {
background: #24292E;
height: 100%;
}
.hero-row {
height: 30em;
}
.hero-left {
border-right: 1px solid #AEC6CF;
}
.hero-left .nav-text{
float: right;
margin-right: 3em;
z-index: 1;
}
.hero-right .nav-text{
margin-left: 3em;
}
h1 {
color: #CFAEB5;
font-family: 'Lato', sans-serif;
font-size: 4rem !important;
font-weight: 100 !important;
text-align: right;
}
h3 {
color: #ffffff;
}
.fade-enter-active,
.fade-leave-active {
transition: all .5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
.fade-left-enter-active,
.fade-left-leave-active {
transition: all 1s ease;
transition-delay: .15s;
}
.fade-left-enter-from,
.fade-left-leave-to {
opacity: 0;
}
.slide-enter-active,
.slide-leave-active {
transition: all 1.7s cubic-bezier(.17,.67,0,1);
}
.slide-leave-to {
transform: translateX(-29.4em);
opacity: 1;
}
</style>```
i want to move an img by button click. I know this question has been asked a lot, but i couldnt use them.
Heres the relevant HTML:
<button class="ggE" (click)="gegenEnemy(chosenHero, actualEnemy);moveFist(); ...
<div class="col">
<img id="img" class="fist" src="...">
This is the function (typescript):
moveFist(): void {
document.getElementById('img').classList.add('fist');
}
And my css, which makes the picture move from left to right:
.fist {
width: 70px;
height: 70px;
position: relative;
animation-name: example;
animation-duration: 2s;
}
#keyframes example {
0% {left:50px; top:20px;}
100% {left:450px; top:20px;}
}
So why cant i connect it with a button click?
First of all validate your HTML code
<button class="ggE" onclick="moveFist();">button</button>
<div class="col">
<img id="img" class="" src="https://via.placeholder.com/150">
<div>
Edits:
function moveFist(){
document.getElementById("img").classList.remove("fist");
// element.offsetWidth = element.offsetWidth;
// Do this instead:
void img.offsetWidth;
document.getElementById("img").classList.add("fist");
}
set the width of img by it's offset width that is,
img.offsetWidth;
Can you something like this ?
function moveFist(){
document.getElementById("img").classList.remove("fist");
// element.offsetWidth = element.offsetWidth;
// Do this instead:
void img.offsetWidth;
document.getElementById("img").classList.add("fist");
}
img{
width: 70px;
height: 70px;
position: relative;
left:50px;
animation-duration: 2s;
top:20px;
}
.fist{
position:relative;
animation-name: example;
}
#keyframes example {
0% {left:50px; top:20px;}
100% {left:450px; top:20px;}
}
<button class="ggE" onclick="moveFist()">button</button>
<div class="col">
<img id="img" class="" src="https://via.placeholder.com/150">
<div>
I'd like to animate a list of items. The first should animate with 0ms delay, the second should do the same animation with 50ms delay, third with 100ms delay and so on. The list is dynamic so I won't know the length.
Is this possible? Note: I don't need help with animations / keyframes specifically, but how to use nth-child or nth-of-type (or anything else?) to achieve a progressive animation delay based on relative position between siblings.
I'm using React / SASS / Webpack if that helps. I can use jQuery if necessary but I'd rather avoid it if possible.
Here's an example on how to do something like this with pure CSS.
You can easily alter it to bring it to your needs.
$(document).ready(function() {
$('.myList img').each(function(i){
var item = $(this);
setTimeout(function() {
item.toggleClass('animate');
}, 150*i);
})
});
#keyframes FadeIn {
0% {
opacity: 0;
transform: scale(.1);
}
85% {
opacity: 1;
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.myList img {
float: left;
margin: 5px;
visibility: hidden;
}
.myList img.animate {
visibility: visible;
animation: FadeIn 1s linear;
animation-fill-mode:both;
animation-delay: .5s
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myList">
<img src="http://placehold.it/350x30" />
<img src="http://placehold.it/350x30" />
<img src="http://placehold.it/350x30" />
<img src="http://placehold.it/350x30" />
<img src="http://placehold.it/350x30" />
</div>
I am needing to fadeIn a list of text and then fade each one out individually using css. Here is an example I did using javascript. Any help would be appreciated. I have read some examples of how to animate stuff with css but do not know the best practices or anything to complex.
I am thinking I need to create a wrapper div with a overflow of hidden and a separate div with all the text that is position absolute in the wrapper. Then animate the .text div up or down to show the text. I have no experience with css animations.
Here is what I want to do but with css not javascript:
http://jsfiddle.net/trav5567/8ejqsywu/
Here is my javascript:
var quotes = $(".whoiam").find('h2');
var quoteIndex = -1;
quotes.hide();
function showNextQuote() {
++quoteIndex;
console.log(quoteIndex);
if(quoteIndex === quotes.length){
console.log($(this));
//console.log('index greater than or equal to h2 length');
//$(this).fadeIn('200');
}else{
console.log('Kepp going');
quotes.eq(quoteIndex % quotes.length)
.fadeIn(500)
.delay(500, checkIndex(quoteIndex,quotes.length))
.fadeOut(500, showNextQuote);
}
}showNextQuote();
function checkIndex(index, length){
var length = length-1
if(index === length){
console.log('check good');
end();
}
}
Here is my HTML:
<div id="splash-wrapper">
<div class="row">
<div class="small-12 columns">
<h1>Travis M. Heller</h1>
<div class='whoiam'>
<h2>Front End Developer</h2>
<h2>Illustrator</h2>
<h2>Web Master</h2>
<h2>Front End Developer</h2>//This value will be the last to show on loop.
</div>
<button class="btn center gotoPortfolio">ENTER</button>
</div>
</div>
</div>
An experiment with just css animations: http://jsfiddle.net/8ejqsywu/6/
There is one animation which moves the text list verticaly, and another which fades in and out the text. The difficulty was to synchronize them!
#container{
overflow:hidden;
height:48px;
}
.whoiam{
-webkit-animation: move;
position:relative;
-webkit-animation-duration: 8s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: step-start;
-webkit-animation-delay: 0.5s
}
h2{ height:48px;margin:0;padding:0}
#-webkit-keyframes move {
0% { margin-top: 0em; }
25% { margin-top: -48px; }
50% {margin-top: -96px;}
75% {margin-top: -144px; }
100% {margin-top: 0;}
}
h2{
-webkit-animation: fade;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes fade {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
I'm trying to make an animated menu that when I hover over it , the background (or image) reduces and at the same time the text expands.
Thats my style sheet :
.menus {
float: left;
background-image: url(images/menus_bg.png);
width: 208px;
height: 283px;
}
.menusimg {
width: 208px;
height: 283px;
position: absolute;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
background-image: url(images/menu1.png);
}
.menusimg:hover {
background-size: 80% 80%;
}
.menusimg, .menusimg:hover {
-webkit-transition: background-size 0.2s ease-in ;
}
.menustxtbox {
font-family: MP;
padding-top: 240px;
width: 208px;
height: 283px;
color: #4c4c4c;
font-size: large;
text-shadow: gray 0.1em 0.1em 0.2em;
}
.menustxtbox:hover {
padding-top: 235px;
font-size: x-large;
color: #4fa3f9;
}
.menustxtbox, .menutxtbox:hover {
-webkit-transition:font-size 0.1s linear;
-moz-transition:font-size 0.1s linear;
}
and the html :
<div class="menus">
<div class="menusimg">
</div>
<div class="menustxtbox">
Text
</div>
</div>
Any ideas? A simple Java script or anything that will solve this problem? :)
Thank you in advance ^^
I second what ntgCleaner said.
In addition you can use:
$('.menus').hover(function(){
$('.menusimg').addClass('active');
$('.menustxtbox').addClass('active');
}, function(){
$('.menusimg').removeClass('active');
$('.menustxtbox').removeClass('active');
});
And your css would have:
.menusimg.active, .menusimg.active{
-webkit-transition: background-size 0.2s ease-in ;
}
etc.
Well, without any code to see that you've done anything or tried anything with javascript, I would suggest this:
Change your CSS to make real sizes of font size first:
.menustxtbox {
font-size:40px;
}
then make some jquery
$('.menus').hover(function(){
$('.menusimg').animate({width: "100px"});
$('.menustxtbox').animate({fontSize: "90px"});
}, function(){
$('.menusimg').animate({width: "208px"});
$('.menustxtbox').animate({fontSize: "40px"});
});
Then delete your :hover css styles
And if you want to use hover, I would suggest looking into hoverintent
UPDATE for a comment below
To do this for each separate menu item, you will have to name things a certain way. Here's an example.
HTML
<div class="menu">
<div class="menuItem" id="menu1">
<div class="menusimg"></div>
<div class="menustxtbox"></div>
</div>
<div class="menuItem" id="menu2">
<div class="menusimg"></div>
<div class="menustxtbox"></div>
</div>
<div class="menuItem" id="menu3">
<div class="menusimg"></div>
<div class="menustxtbox"></div>
</div>
</div>
Then with jQuery, you will have to use $(this) and .children()
$('.menuItem').hover(function(){
$(this).children('.menusimg').animate({width: "100px"});
$(this).children('.menustxtbox').animate({fontSize: "90px"});
}, function(){
$(this).children('.menusimg').animate({width: "208px"});
$(this).children('.menustxtbox').animate({fontSize: "40px"});
});
When you use $(this), you will do whatever you want to the specific thing you are trying to use. Then you just go up or down from there using parent or children to do something to either of those.