I have seen a previous thread on this topic (see here) but working with multiple offset percentages ruins the way the animation works.
For example, this is how the animation works currently:
Splitting();
:root {
--black: #000000;
--white: #ffffff;
}
body {
background: var(--black);
color: var(--white);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
h2 {
font-size: 100px;
}
#keyframes bounce-char {
20% {
transform: translateY(0%) scale(1.3, 0.8);
}
70% {
transform: translateY(-40%) scale(0.8, 1.2);
}
}
h2 .char {
line-height: 1;
transform-origin: center bottom;
animation-timing-function: cubic-bezier(0.77, 0.02, 0.11, 0.97);
animation-iteration-count: infinite;
animation-fill-mode: both;
animation-delay: calc(0.05s * var(--char-index) );
animation-duration: calc( 0.8s + ( 0.03s * var(--char-total)) );
animation-name: bounce-char;
}
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/splitting/dist/splitting.css" />
<h2 data-splitting>Hello</h2>
And what I'm trying to do is to make it bounce once, then bounce again after 5 seconds. To achieve this, I've had a play around with the offsets, as the previous thread suggested, but here are my results:
Splitting();
:root {
--black: #000000;
--white: #ffffff;
}
body {
background: var(--black);
color: var(--white);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
h2 {
font-size: 100px;
}
#keyframes bounce-char {
2%, 18% {
transform: translateY(0%) scale(1.3, 0.8);
}
4%, 16% {
transform: translateY(0%) scale(1.3, 0.8);
}
6%, 10%, 14% {
transform: translateY(0%) scale(1.3, 0.8);
}
8%, 12% {
transform: translateY(-40%) scale(0.8, 1.2);
}
18.1% {
transform: translate3d(0px, 0, 0);
}
}
h2 .char {
line-height: 1;
transform-origin: center bottom;
animation-timing-function: cubic-bezier(0.77, 0.02, 0.11, 0.97);
animation-fill-mode: both;
animation-delay: calc(0.05s * var(--char-index));
animation-name: bounce-char;
animation-duration: 5s;
}
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/splitting/dist/splitting.css" />
<h2 data-splitting>Hello</h2>
Unsure how I can extend two transform properties over multiple offsets to achieve this.
Any ideas?
The keyframes don't have to be quite so complicated.
What we want is for a character to bounce and then to stay unbounced for 5 seconds.
So the whole duration of a character's animation has to extend by a further 4.2 seconds (roughly, you'll want to play around with the timing to get it exactly as you want it).
Splitting();
:root {
--black: #000000;
--white: #ffffff;
}
body {
background: var(--black);
color: var(--white);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
h2 {
font-size: 100px;
}
#keyframes bounce-char {
2% {
transform: translateY(0%) scale(1.3, 0.8);
}
7% {
transform: translateY(-40%) scale(0.8, 1.2);
}
12%,
100% {
transform: translateY(0%);
}
}
h2 .char {
line-height: 1;
transform-origin: center bottom;
animation-timing-function: cubic-bezier(0.77, 0.02, 0.11, 0.97);
animation-iteration-count: infinite;
animation-fill-mode: both;
animation-delay: calc(0.05s * var(--char-index));
animation-duration: calc(4.2s + 0.8s + ( 0.03s * var(--char-total)));
animation-name: bounce-char;
}
<head>
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/splitting/dist/splitting.css" />
<h2 data-splitting>Hello</h2>
Related
I'm using the 'success' event from Clipboard.JS to change the button text after some one have click it to provide a feedback that the text is successfully copied.
There are multiple span inside the button element, the feedback/new string (Copied!) will replace the original text (Take Me There) and be applied to the first span when the function is invoked.
If the feedback/new string apply to the first span, then the original text (Take Me There) will not be replaced instead the feedback will be appear on top since it applied to the first span.
How do I make the new string to the span that include the original text(the last span)? Please try to run the code for clearer illustration.
Below is my code:
var clipboard = new ClipboardJS('.copyElement')
clipboard.on('success', function(e) {
let span = e.trigger.querySelector('span')
let oldtext = span.textContent
span.textContent = 'Copied!'
setTimeout(() => span.textContent = oldtext, 2000)
});
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 330px;
background-color: #000;
}
.Big {
width: 257px;
padding: 33px 0 30px 0;
font-size: 21px;
}
.RedPhotonEffect {
color: rgba(239, 71, 111, 1);
overflow: hidden;
position: relative;
border: none;
background-color: rgba(239, 71, 111, 0.12);
cursor: pointer;
}
.RedPhotonEffect span:nth-child(1){
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to right, #000, #ef476f);
animation: animate1 3s linear infinite;
animation-delay: 1.5s;
}
#keyframes animate1 {
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
.RedPhotonEffect span:nth-child(2){
position:absolute;
top: 0;
right: 0;
width: 3px;
height: 100%;
background: linear-gradient(to bottom, #000, #ef476f);
animation: animate2 3s linear infinite;
}
#keyframes animate2 {
0%{
transform: translateY(-100%);
}
100%{
transform: translateY(100%);
}
}
.RedPhotonEffect span:nth-child(3){
position:absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to left, #000, #ef476f);
animation: animate3 3s linear infinite;
animation-delay: 1.5s;
}
#keyframes animate3 {
0%{
transform: translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
.RedPhotonEffect span:nth-child(4){
position:absolute;
bottom: 0;
left: 0;
width: 3px;
height: 100%;
background: linear-gradient(to top, #000, #ef476f);
animation: animate4 3s linear infinite;
}
#keyframes animate4 {
0%{
transform: translateY(100%);
}
100%{
transform: translateY(-100%);
}
}
<button
class="copyElement RedPhotonEffect Big"
data-clipboard-text="123"
>
<span></span>
<span></span>
<span></span>
<span></span>
<span>Take Me There</span>
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
Then try using a class instead
var clipboard = new ClipboardJS('.copyElement')
clipboard.on('success', function(e) {
let span = e.trigger.querySelector('.label')
let oldtext = span.textContent
span.textContent = 'Copied!'
setTimeout(() => span.textContent = oldtext, 2000)
});
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 330px;
background-color: #000;
}
.Big {
width: 257px;
padding: 33px 0 30px 0;
font-size: 21px;
}
.RedPhotonEffect {
color: rgba(239, 71, 111, 1);
overflow: hidden;
position: relative;
border: none;
background-color: rgba(239, 71, 111, 0.12);
cursor: pointer;
}
.RedPhotonEffect span:nth-child(1){
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to right, #000, #ef476f);
animation: animate1 3s linear infinite;
animation-delay: 1.5s;
}
#keyframes animate1 {
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
.RedPhotonEffect span:nth-child(2){
position:absolute;
top: 0;
right: 0;
width: 3px;
height: 100%;
background: linear-gradient(to bottom, #000, #ef476f);
animation: animate2 3s linear infinite;
}
#keyframes animate2 {
0%{
transform: translateY(-100%);
}
100%{
transform: translateY(100%);
}
}
.RedPhotonEffect span:nth-child(3){
position:absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to left, #000, #ef476f);
animation: animate3 3s linear infinite;
animation-delay: 1.5s;
}
#keyframes animate3 {
0%{
transform: translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
.RedPhotonEffect span:nth-child(4){
position:absolute;
bottom: 0;
left: 0;
width: 3px;
height: 100%;
background: linear-gradient(to top, #000, #ef476f);
animation: animate4 3s linear infinite;
}
#keyframes animate4 {
0%{
transform: translateY(100%);
}
100%{
transform: translateY(-100%);
}
}
<button
class="copyElement RedPhotonEffect Big"
data-clipboard-text="123"
>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="label">Take Me There</span>
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
I am a noob at web dev and I am teaching myself using different online platforms (YouTube, Udemy, StackSkills, etc.).
Right now I am trying to focus on learning the basics of HTML, CSS, and JavaScript/JQuery.
I created this hamburger menu for a custom site I am working on to help me learn and I wanted to try and get the bouncing hamburger menu to stop after a certain time threshold has passed.
I tried creating a class using JQuery that I could then use the CSS animation-duration property, but it stopped the bounce completely.
This is what I did using JQuery and CSS to try and get the effect I wanted that completely stopped the bounce animation effect rather than having it stopped after 5 seconds:
JQuery
function bounceDuration() {
document.querySelector('.hamburger-menu').classList.toggle('bounce-duration');
};
CSS
.hamburger-menu.bounce-duration {
animation-duration: 5s;
}
Below you will find the current working code I have in its entirety (HTML, CSS, and JQuery). As you can see, the hamburger menu bounces indefinitely and I would like to somehow give it a timeout or duration of some sort. Any assistance with this is greatly appreciated.
function sidebarToggle() {
document.querySelector(".hamburger-menu").addEventListener("click", () => {
document.querySelector('.hamburger-menu').classList.toggle('bounce-stop');
document.querySelector(".container").classList.toggle("sidebar-toggle");
});
}
sidebarToggle()
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
.hamburger-menu {
width: 3rem;
height: 3rem;
position: fixed;
top: 5rem;
right: 5rem;
z-index: 200;
display: flex;
flex-direction: column;
justify-content: space-evenly;
cursor: pointer;
transition: 0.7s;
}
.hamburger-menu.bounce-stop {
animation-name: none;
}
.line {
width: 100%;
height: 0.2rem;
background-color: #fff;
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2);
}
/*
Hamburger Menu Bounce
---------------------
Description: - Up/Down animation
*/
.hamburger-menu {
-moz-animation: bounce 1s infinite alternate;
-o-animation: bounce 1s infinite alternate;
-webkit-animation: bounce 1s infinite alternate;
animation: bounce 1s infinite alternate;
animation-duration: 0.5s;
}
#-moz-keyframes bounce {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
#-o-keyframes bounce {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
#-webkit-keyframes bounce {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
#keyframes bounce {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
.sidebar-toggle .hamburger-menu {
right: 33rem;
background-color: #555;
}
.header {
width: 100%;
height: 100vh;
position: relative;
perspective: 100rem;
overflow: hidden;
background-color: rgba(0, 0, 0, .8);
}
.sidebar {
width: 40rem;
height: 100vh;
position: fixed;
top: 0;
right: -40rem;
background-color: #ffffff;
transition: right 0.5s;
}
.sidebar-toggle .sidebar {
right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<body>
<div class="container">
<div class="hamburger-menu">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<header class="header"></header>
<section class="sidebar"></section>
</div>
</body>
</html>
Set the iteration count to 2 (or any other number) rather than infinite:
function sidebarToggle() {
document.querySelector(".hamburger-menu").addEventListener("click", () => {
document.querySelector('.hamburger-menu').classList.toggle('bounce-stop');
document.querySelector(".container").classList.toggle("sidebar-toggle");
});
}
sidebarToggle()
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
.hamburger-menu {
width: 3rem;
height: 3rem;
position: fixed;
top: 5rem;
right: 5rem;
z-index: 200;
display: flex;
flex-direction: column;
justify-content: space-evenly;
cursor: pointer;
transition: 0.7s;
}
.hamburger-menu.bounce-stop {
animation-name: none;
}
.line {
width: 100%;
height: 0.2rem;
background-color: #fff;
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2);
}
/*
Hamburger Menu Bounce
---------------------
Description: - Up/Down animation
*/
.hamburger-menu {
-moz-animation: bounce 1s 2 alternate;
-o-animation: bounce 1s 2 alternate;
-webkit-animation: bounce 1s 2 alternate;
animation: bounce 1s 2 alternate;
animation-duration: 0.5s;
}
#-moz-keyframes bounce {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
#-o-keyframes bounce {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
#-webkit-keyframes bounce {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
#keyframes bounce {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
.sidebar-toggle .hamburger-menu {
right: 33rem;
background-color: #555;
}
.header {
width: 100%;
height: 100vh;
position: relative;
perspective: 100rem;
overflow: hidden;
background-color: rgba(0, 0, 0, .8);
}
.sidebar {
width: 40rem;
height: 100vh;
position: fixed;
top: 0;
right: -40rem;
background-color: #ffffff;
transition: right 0.5s;
}
.sidebar-toggle .sidebar {
right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<body>
<div class="container">
<div class="hamburger-menu">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<header class="header"></header>
<section class="sidebar"></section>
</div>
</body>
</html>
Just set some digit instead of infinity in animation
.hamburger-menu {
-moz-animation: bounce 1s 5 alternate;
-o-animation: bounce 1s 5 alternate;
-webkit-animation: bounce 1s 5 alternate;
animation: bounce 1s 5 alternate;
animation-duration: 0.5s;
}
it is animation-iteration-count
I have this code for full css ticker.
Currently, item 1 appears once the list is fully passed, so the list start again.
I'd like to make a "loop". I mean I'd like to get item 1 just after item 4.
Sorry if I'm not clear...
I'd like to know if there is a way to improve with some jquery ?
* {
box-sizing: border-box;
}
#-webkit-keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
#keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.ticker-wrap {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
height: 4em;
background-color: #ffc846;
padding-left: 100%;
box-sizing: content-box;
}
.ticker-wrap .ticker {
display: inline-block;
height: 4em;
line-height: 4em;
white-space: nowrap;
padding-right: 100%;
box-sizing: content-box;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: ticker;
animation-name: ticker;
-webkit-animation-duration: 20s;
animation-duration: 20s;
}
.ticker-wrap .ticker__item {
display: inline-block;
padding: 0 3em;
font-size: 2em;
color: #333;
}
<div class="ticker-wrap">
<div class="ticker">
<div class="ticker__item">item 1</div>
<div class="ticker__item">item 2</div>
<div class="ticker__item">item 3</div>
<div class="ticker__item">item 4</div>
</div>
</div>
I'm looking to synchronise the keyframe animation of three different elements.
They are basically three hearts and I want them to follow a heartbeat animation when they are clicked.
When two or more are clicked, I want them to "beat" in sync.
You can check a JSbin here
What I have so far is :
.rating {
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 140px;
height: 50px;
padding: 5px 10px;
margin: auto;
border-radius: 30px;
background: #FFF;
display: block;
overflow: hidden;
unicode-bidi: bidi-override;
direction: rtl;
}
.rating:not(:checked)>input {
display: none;
}
/* - - - - - LIKE */
#like {
bottom: -65px;
}
#like:not(:checked)>label {
cursor: pointer;
float: right;
width: 30px;
height: 30px;
display: block;
margin-right: 7.5px;
color: rgba(233, 54, 40, .4);
line-height: 42px;
text-align: center;
transition: color 0.2s;
}
#like:not(:checked)>label:hover,
#like:not(:checked)>label:hover~label {
color: rgba(233, 54, 40, .6);
}
#like>input:checked+label:hover,
#like>input:checked+label:hover~label,
#like>input:checked~label:hover,
#like>input:checked~label:hover~label,
#like>label:hover~input:checked~label {
color: rgb(233, 54, 40);
}
#like>input:checked~label {
color: rgb(233, 54, 40);
animation: 1s heartbeat infinite;
}
#keyframes heartbeat {
from {
transform: scale(1);
transform-origin: center center;
animation-timing-function: ease-out;
}
10% {
transform: scale(1.2);
animation-timing-function: ease-in;
}
15% {
transform: scale(1);
animation-timing-function: ease-out;
}
25% {
transform: scale(1.15);
animation-timing-function: ease-in;
}
35% {
transform: scale(1);
animation-timing-function: ease-out;
}
}
<section id="like" class="rating">
<!-- THIRD HEART -->
<input type="radio" id="heart_3" name="like" value="3" />
<label for="heart_3" class="heart-slider">♥</label>
<!-- SECOND HEART -->
<input type="radio" id="heart_2" name="like" value="2" />
<label for="heart_2" class="heart-slider">♥</label>
<!-- FIRST HEART -->
<input type="radio" id="heart_1" name="like" value="1" />
<label for="heart_1" class="heart-slider">♥</label>
</section>
What is the good way to achieve sync ?
Thank you
EDIT
Following Rounin's answer, here's the updated CSS that gets the job done :
#like {
}
#like:not(:checked) > label {
cursor:pointer;
float: right;
width: 30px;
height: 30px;
display: inline-block;
color: (255, 255, 255);
transition: color 0.2s;
}
#like:not(:checked) > label:hover,
#like:not(:checked) > label:hover ~ label {
color: rgba(252, 108, 133, 1);
}
#like > input:checked + label:hover,
#like > input:checked + label:hover ~ label,
#like > input:checked ~ label:hover,
#like > input:checked ~ label:hover ~ label,
#like > label:hover ~ input:checked ~ label {
color: rgb(252, 108, 133);
}
#like > input:checked ~ label {
color: rgb(252, 108, 133);
}
#heart_1:checked ~ label {
animation: heartbeat1 1s infinite;
}
#heart_2:checked ~ label {
animation: heartbeat2 1s infinite;
}
#heart_3:checked ~ label {
animation: heartbeat3 1s infinite;
}
#keyframes heartbeat1 {
from {
transform: scale(1);
transform-origin: center center;
animation-timing-function: ease-out;
}
10% {
transform: scale(1.2);
animation-timing-function: ease-in;
}
15% {
transform: scale(1);
animation-timing-function: ease-out;
}
25% {
transform: scale(1.15);
animation-timing-function: ease-in;
}
35% {
transform: scale(1);
animation-timing-function: ease-out;
}
}
#keyframes heartbeat2 {
from {
transform: scale(1);
transform-origin: center center;
animation-timing-function: ease-out;
}
10% {
transform: scale(1.2);
animation-timing-function: ease-in;
}
15% {
transform: scale(1);
animation-timing-function: ease-out;
}
25% {
transform: scale(1.15);
animation-timing-function: ease-in;
}
35% {
transform: scale(1);
animation-timing-function: ease-out;
}
}
#keyframes heartbeat3 {
from {
transform: scale(1);
transform-origin: center center;
animation-timing-function: ease-out;
}
10% {
transform: scale(1.2);
animation-timing-function: ease-in;
}
15% {
transform: scale(1);
animation-timing-function: ease-out;
}
25% {
transform: scale(1.15);
animation-timing-function: ease-in;
}
35% {
transform: scale(1);
animation-timing-function: ease-out;
}
}
You can set up 3 identical animations and style your inputs and labels such that when a new radio button is selected, the old animation stops and the new one begins. That way the hearts will always be in sync:
Working Example:
div {
display: block;
position: relative;
width: 125px;
height: 60px;
box-shadow: 3px 3px 3px rgba(127, 127, 127, 0.4);
}
input {
display: none;
}
label {
position: absolute;
display: inline-block;
top: 0;
font-size: 40px;
line-height: 60px;
color: rgba(255, 127, 127, 0.75);
}
label:hover,
label:hover ~ label {
color: rgba(255, 0, 0, 0.75);
}
.like1 {
left: 10px;
}
.like2 {
left: 50px;
}
.like3 {
left: 90px;
}
#like1:checked ~ label {
animation: heartbeat1 0.8s infinite;
}
#like2:checked ~ label {
animation: heartbeat2 0.8s infinite;
}
#like3:checked ~ label {
animation: heartbeat3 0.8s infinite;
}
#keyframes heartbeat1 {
0% {
color: rgba(255, 0, 0, 0.5);
}
50% {
color: rgba(255, 0, 0, 1);
}
}
#keyframes heartbeat2 {
0% {
color: rgba(255, 0, 0, 0.5);
}
50% {
color: rgba(255, 0, 0, 1);
}
}
#keyframes heartbeat3 {
0% {
color: rgba(255, 0, 0, 0.5);
}
50% {
color: rgba(255, 0, 0, 1);
}
}
<div>
<input type="radio" id="like3" name="likes" value="3" />
<label class="like3" for="like3">♥</label>
<input type="radio" id="like2" name="likes" value="2" />
<label class="like2" for="like2">♥</label>
<input type="radio" id="like1" name="likes" value="1" />
<label class="like1" for="like1">♥</label>
</div>
Modified #Rounin's answer to give you the output you require.
div {
display: block;
position: relative;
width: 125px;
height: 60px;
box-shadow: 3px 3px 3px rgba(127, 127, 127, 0.4);
}
input {
display: none;
}
label {
position: absolute;
display: inline-block;
top: 0;
font-size: 40px;
line-height: 60px;
color: rgba(255, 127, 127, 0.75);
}
label:hover,
label:hover~label {
color: rgba(255, 0, 0, 0.75);
}
.like1 {
left: 10px;
}
.like2 {
left: 50px;
}
.like3 {
left: 90px;
}
#like1:checked~label {
animation: heartbeat1 0.8s infinite;
}
#like2:checked~label {
animation: heartbeat2 0.8s infinite;
}
#like3:checked~label {
animation: heartbeat3 0.8s infinite;
}
#keyframes heartbeat1 {
0% {
transform: scale( .75);
}
20% {
transform: scale( 1);
}
40% {
transform: scale( .75);
}
60% {
transform: scale( 1);
}
80% {
transform: scale( .75);
}
100% {
transform: scale( .75);
}
}
#keyframes heartbeat2 {
0% {
transform: scale( .75);
}
20% {
transform: scale( 1);
}
40% {
transform: scale( .75);
}
60% {
transform: scale( 1);
}
80% {
transform: scale( .75);
}
100% {
transform: scale( .75);
}
}
#keyframes heartbeat3 {
0% {
transform: scale( .75);
}
20% {
transform: scale( 1);
}
40% {
transform: scale( .75);
}
60% {
transform: scale( 1);
}
80% {
transform: scale( .75);
}
100% {
transform: scale( .75);
}
}
<div>
<input type="radio" id="like3" name="likes" value="3" />
<label class="like3" for="like3">♥</label>
<input type="radio" id="like2" name="likes" value="2" />
<label class="like2" for="like2">♥</label>
<input type="radio" id="like1" name="likes" value="1" />
<label class="like1" for="like1">♥</label>
</div>
I need some help here:
I'm trying to move to another page when I click on the LAST ONE h2 element, but what happens is that it's working with ALL the h2 elements.
Here's the thing:
<script>
function ini(){
document.location.href='home.php';
}
</script>
the elements:
<h2>Inove.</h2>
<h2>Evolua.</h2>
<h2>Apareça.</h2>
<h2 onMouseUp="ini()">Destaque-se.</h2>
that's inside this div:
<div class="os-phrases" id="os-phrases">
<h2>Inove.</h2>
<h2>Evolua.</h2>
<h2>Apareça.</h2>
<h2>Destaque-se na</h2>
<h2>V1TR1NE.com.br</h2>
<h2></h2>
<h2></h2>
<h2 onMouseUp="ini()">Iniciar...</h2>
</div>
and the css treat it as a child.
.os-phrases h2 {
font-family: 'Dosis', 'Lato', sans-serif;
font-size: 70px;
font-weight: 200;
width: 100%;
overflow: hidden;
text-transform: uppercase;
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
letter-spacing: 14px;
text-align: center;
}
.os-phrases h2,
.os-phrases h2 > span {
height: 100%;
/* Centering with flexbox */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.os-phrases h2 > span {
margin: 0 15px;
}
.os-phrases h2 > span > span {
display: inline-block;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.os-phrases h2 > span > span > span {
display: inline-block;
color: hsla(0,0%,0%,0);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-animation: OpeningSequence 5.2s linear forwards;
-moz-animation: OpeningSequence 5.2s linear forwards;
animation: OpeningSequence 5.2s linear forwards;
}
.os-phrases h2:nth-child(2) > span > span > span {
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
animation-delay: 5s;
}
.os-phrases h2:nth-child(3) > span > span > span {
-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
animation-delay: 10s;
}
.os-phrases h2:nth-child(4) > span > span > span {
-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
animation-delay: 15s;
}
.os-phrases h2:nth-child(5) > span > span > span {
font-size: 150px;
-webkit-animation-delay: 21s;
-moz-animation-delay: 21s;
animation-delay: 21s;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
animation-duration: 8s;
}
.os-phrases h2:nth-child(6) > span > span > span {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
.os-phrases h2:nth-child(7) > span > span > span {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
#-webkit-keyframes OpeningSequence {
0% {
text-shadow: 0 0 50px #fff;
letter-spacing: 80px;
opacity: 0;
-webkit-transform: rotateY(-90deg);
}
50% {
text-shadow: 0 0 1px #fff;
letter-spacing: 14px;
opacity: 0.8;
-webkit-transform: rotateY(0deg);
}
85% {
text-shadow: 0 0 1px #fff;
opacity: 0.8;
-webkit-transform: rotateY(0deg) translateZ(100px);
}
100% {
text-shadow: 0 0 10px #fff;
opacity: 0;
-webkit-transform: translateZ(130px);
pointer-events: none;
}
}
#-moz-keyframes OpeningSequence {
0% {
text-shadow: 0 0 50px #fff;
letter-spacing: 80px;
opacity: 0.2;
-moz-transform: rotateY(-90deg);
}
50% {
text-shadow: 0 0 1px #fff;
letter-spacing: 14px;
opacity: 0.8;
-moz-transform: rotateY(0deg);
}
85% {
text-shadow: 0 0 1px #fff;
opacity: 0.8;
-moz-transform: rotateY(0deg) translateZ(100px);
}
100% {
text-shadow: 0 0 10px #fff;
opacity: 0;
-moz-transform: translateZ(130px);
pointer-events: none;
}
}
#keyframes OpeningSequence {
0% {
text-shadow: 0 0 50px #fff;
letter-spacing: 80px;
opacity: 0.2;
transform: rotateY(-90deg);
}
50% {
text-shadow: 0 0 1px #fff;
letter-spacing: 14px;
opacity: 0.8;
transform: rotateY(0deg);
}
85% {
text-shadow: 0 0 1px #fff;
opacity: 0.8;
transform: rotateY(0deg) translateZ(100px);
}
100% {
text-shadow: 0 0 10px #fff;
opacity: 0;
transform: translateZ(130px);
pointer-events: none;
}
}
.os-phrases h2:nth-child(8) > span > span > span {
font-size: 30px;
-webkit-animation: FadeIn 4s linear 28s forwards;
-moz-animation: FadeIn 4s linear 28s forwards;
animation: FadeIn 4s linear 28s forwards;
}
#-webkit-keyframes FadeIn {
0% {
opacity: 0;
text-shadow: 0 0 50px #fff;
}
100% {
opacity: 0.8;
text-shadow: 0 0 1px #fff;
}
}
#-moz-keyframes FadeIn {
0% {
opacity: 0;
text-shadow: 0 0 50px #fff;
}
100% {
opacity: 0.8;
text-shadow: 0 0 1px #fff;
}
}
#keyframes FadeIn {
0% {
opacity: 0;
text-shadow: 0 0 50px #fff;
}
100% {
opacity: 0.8;
text-shadow: 0 0 1px #fff;
}
}
/* Bold words */
.os-phrases h2:first-child .word3,
.os-phrases h2:nth-child(2) .word2,
.os-phrases h2:nth-child(4) .word1 {
font-weight: 600;
}
I tried to use it as link but I couldn't make it works. The final effect ends in this line (.os-phrases h2:nth-child(8) > span > span > span). Here the "Iniciar..." stops and I want to make it an event on click to take me to page home.php.
How does the CSS look like? I guess the problem is in there somewhere. Because the following HTML work fine for me: the message box only pops up when I click the last entry:
<script>
function ini(){
alert('test');
}
</script>
<h2>Inove.</h2>
<h2>Evolua.</h2>
<h2>Apareça.</h2>
<h2 onMouseUp="ini()">Destaque-se.</h2>
I tested this with Chrome and Safari. It's not terribly good HTML (in fact it's pretty bad) but it does work.