I have an array in which I put all the elements that have the class Box, then I add a new div with Vue, which is added correctly, but I try that the last div that I add appears with an opacity effect (I will change it for a better one), but the result is not the expected one.
What happens is that the new element is added, but the effect adds it to the previous one and I want that it is always in the new element that I add above all, that is to say, it would be the one of the index 0,
¿? What am I doing wrong?
html code:
<!DOCTYPE html>
<html lang="es">
<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>Preguntas en vivo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<div class="mt-5 d-flex flex-column align-items-center container">
<div>
<input type="text" v-model="nuevoAutor"><br>
<input type="text" v-model="nuevaPregunta"><br>
<button #click="agregarMensaje">Agregar</button>
</div>
<div class="box" v-for="pregunta in preguntas">
{{pregunta.autor}}: {{pregunta.mensaje}}
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="js/vue.js"></script>
<script src="js/index.js"></script>
</body>
</html>
Vue code:
const app = new Vue({
el: "#app",
data: {
preguntas: [
],
preguntasAprobadas: [
],
nuevoAutor: "",
nuevaPregunta: "",
boxes: []
},
methods: {
agregarMensaje: function(){
this.preguntas.unshift({
autor: this.nuevoAutor,
mensaje: this.nuevaPregunta,
publicado: false
});
this.nuevaPregunta = "";
this.nuevoAutor = "";
boxes = document.querySelectorAll(".box");
this.agregarClase();
},
agregarClase: function(){
boxes[0].className += " animation";
}
}
})
css code:
.box {
width: 100%;
background-color: rgb(255, 224, 174);
border: 1px solid rgb(255, 210, 137);
padding: 20px;
margin-top: 30px;
min-height: 200px;
}
.animation {
animation: show 5s;
-webkit-animation: show 5s;
}
#keyframes show {
0% { opacity: 0; }
100% { opacity: 1; }
}
EDIT:
I have simplified it, there is only one class, the div is added, with the class box, but it loads the style to the last one, that is, the one at the bottom, and not to the last one that is added.
.box {
background-color: rgb(255, 224, 174);
border: 1px solid rgb(255, 210, 137);
padding: 20px;
margin-top: 30px;
min-height: 200px;
width: 100%;
opacity: 1;
animation: show 1s;
-webkit-animation: show 1s;
}
#keyframes show {
0% {
width: 1%;
opacity: 0;
}
100% {
width: 100%;
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="es">
<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>Preguntas en vivo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<div class="mt-5 d-flex flex-column align-items-center container">
<div>
<input type="text" v-model="nuevoAutor"><br>
<input type="text" v-model="nuevaPregunta"><br>
<button #click="agregarMensaje">Agregar</button>
</div>
<div class="row box" v-for="pregunta in preguntas">
<div class="col-12">
{{pregunta.autor}}: {{pregunta.mensaje}}
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="js/vue.js"></script>
<script src="js/index.js"></script>
</body>
</html>
You're looking for the vue component transition-group (see docs).
It's a component that adds css classes as the elements are added / removed / reordered, so it lets you animate them.
Here's an example:
<template>
<div id="app">
<transition-group name="fade" class="questions" mode="in-out">
<div v-for="question of questions" :key="question.id" class="item">
{{ question.msg }}
</div>
</transition-group>
<button #click="addQuestion">Add question</button>
</div>
</template>
<script>
export default {
data () {
return {
questions: [
{ id: 1, msg: 'Hey'},
{ id: 2, msg: 'there'},
{ id: 3, msg: 'General'},
{ id: 4, msg: 'Kenobi'},
],
}
},
methods: {
addQuestion () {
const newId = Math.floor(Math.random() * 1000 + 4)
const newQuestion = { id: newId, msg: 'New question' + newId }
this.questions.push(newQuestion)
}
}
}
</script>
<style>
#app {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 16px;
max-width: 300px;
margin: 0 auto;
height: 80vh;
}
.questions {
display: flex;
flex-direction: column;
gap: 8px;
}
.questions .item {
background: #fafafa;
border: 1px solid lightgray;
text-align: center;
min-width: 130px;
padding: 4px 12px;
}
// Fade animation for each item
.item.fade-enter-active {
transition: opacity 1s;
}
.item.fade-enter, .item.fade-leave-to {
opacity: 0;
}
</style>
Every time you add an item (at the beginning, at the end, in the middle, it doesn't matter), it will have this css transition applied. Same for when they are removed (see fade-leave-to class)
See example as CodePen
Related
I created a skill progress bar for my project using HTML CSS and jquery. All things working fine but the percent counter option is not working when the animation run.
I need to count the percentage from 0 to the value along with the animation bar. Please help me. Thanks.
jQuery(function($){
$(window).scroll(function() {
var top_of_element = $(".work-process").offset().top;
var bottom_of_element = $(".work-process").offset().top + $(".work-process").outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
var top_of_screen = $(window).scrollTop();
if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
$('.project-percent').each(function(){
var $this = $(this);
var percent = $this.attr('percent');
$this.css("width",percent+'%');
$({animatedValue: 0}).animate({animatedValue: percent},{
duration: 2000,
step: function(){
$this.attr('percent', Math.floor(this.animatedValue) + '%');
},
complete: function(){
$this.attr('percent', Math.floor(this.animatedValue) + '%');
}
});
});
}
});
});
.nb-progressbar-row {
width: 90%;
margin: 0 auto;
}
.project{
width: 60%;
margin: 0 auto;
}
.work-process h3 {
margin: 30px 0px 10px;
}
.project-bar {
height: 18px;
background: #e0e0e0;
border-radius: 30px;
}
.project-percent {
height: 18px;
background-color: #2196F3;
border-radius: 30px;
position: relative;
width: 0;
transition: 2s linear;
}
.project-percent::before {
content: attr(percent);
position: absolute;
right: 0px;
left: 0px;
padding: 1px 0px;
color: #ffffff;
font-size: 15px;
border-radius: 25px;
font-weight: bold;
width: 20px;
margin: 0px auto;
}
<!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">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>
<section class= " my-5 nb-progressbar-wrapper">
<div class="container my-5 nb-progressbar-conainer">
<div class="row nexnomic-progressbar-row">
<div class=" col work-process">
<h2 class="text-center my-5">SCROLL DOWN</h2>
<div class=" pt-5 project">
<h6>Xyzzz & ABCD</h6>
<div class="project-bar">
<div class="project-percent" percent="95"></div>
</div>
</div>
<div class="project">
<h6>Abcd-xyz</h6>
<div class="project-bar">
<div class="project-percent" percent="80"></div>
</div>
</div>
<div class="project">
<h6>ABCDYZX</h6>
<div class="project-bar">
<div class="project-percent" percent="75"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</body>
</html>
I'm new to web development and I challenged myself with this task to master JavaScript. My task is to make different divs on the page flippable on click and interact with each other based on the current status.
I would like to learn two more things:
shorten/simplify the current JS code (if possible)
Have the divs interact with each other: when 'on click' the current one opens, but if any other of them was already open, it'll close. So only one div stay open at a time.
My current code (codepen: https://codepen.io/Loomeus/pen/RwKELbx):
HTML
var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
card.classList.toggle('is-flipped');
});
var card2 = document.querySelector('.card2');
card2.addEventListener( 'click', function() {
card2.classList.toggle('is-flipped');
});
var card3 = document.querySelector('.card3');
card3.addEventListener( 'click', function() {
card3.classList.toggle('is-flipped');
});
#media screen and (min-width:650px){
.flipping {display: flex;
justify-content:space-between;
}
}
.scene, .scene2, .scene3 {
width: 200px;
height: 200px;
perspective: 1200px;
margin-left: auto;
margin-right: auto;
}
.card, .card2, .card3 {
width: 200px;
height: 200px;
position: relative;
transition: transform 1.5s;
transform-style: preserve-3d;
}
.card__face, .card__face2, .card__face3 {
position: absolute;
width: 200px;
height: 200px;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.card__face--front, .card__face--front2, .card__face--front3 {
background: red;
}
.card__face--back, .card__face--back2, .card__face--back3 {
background: blue;
transform: rotateY( 180deg );
}
.card.is-flipped, .card2.is-flipped, .card3.is-flipped {
transform: rotateY(180deg);
}
<!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">
<script defer src="/script.js"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<section class="flipping">
<div class="scene">
<div class="card">
<div class="card__face card__face--front">Front of first div</div>
<div class="card__face card__face--back">Back of first div</div>
</div>
</div>
<br>
<div class="scene2">
<div class="card2">
<div class="card__face2 card__face--front2">Front of second div</div>
<div class="card__face2 card__face--back2">Back of second div</div>
</div>
</div>
<br>
<div class="scene3">
<div class="card3">
<div class="card__face3 card__face--front3">Front of last div</div>
<div class="card__face3 card__face--back3">Back of last div</div>
</div>
</div>
</section
</body>
</html>
Would you be able to help me out?
Thanks!
You could simplify your code by using a common card class on all your cards. Then, you would need to remove the is-flipped class from all cards before flipping the clicked one:
var cards = document.querySelectorAll('.card');
cards.forEach(function (card) {
card.addEventListener('click', function () {
// Remove the class on all, toggle the clicked one
cards.forEach(function (c) {
if (c !== card) c.classList.remove('is-flipped');
else c.classList.toggle('is-flipped');
});
});
});
Fixed CodePen
Stack Snippet:
var cards = document.querySelectorAll('.card');
cards.forEach(function (card) {
card.addEventListener('click', function () {
// Remove the class on all, except the clicked one
cards.forEach(function (c) {
if (c !== card) c.classList.remove('is-flipped');
else c.classList.toggle('is-flipped');
});
});
});
#media screen and (min-width:400px){
.flipping {display: flex;
justify-content:space-between;
}
}
.scene, .scene2, .scene3 {
width: 100px;
height: 100px;
perspective: 1200px;
margin-left: auto;
margin-right: auto;
}
.card {
width: 100px;
height: 100px;
position: relative;
transition: transform 1.5s;
transform-style: preserve-3d;
}
.card__face, .card__face2, .card__face3 {
position: absolute;
width: 100px;
height: 100px;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.card__face--front, .card__face--front2, .card__face--front3 {
background: red;
}
.card__face--back, .card__face--back2, .card__face--back3 {
background: blue;
transform: rotateY( 180deg );
}
.card.is-flipped, .card2.is-flipped, .card3.is-flipped {
transform: rotateY(180deg);
}
<!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">
<script defer src="/script.js"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<section class="flipping">
<div class="scene">
<div class="card">
<div class="card__face card__face--front">Front of first div</div>
<div class="card__face card__face--back">Back of first div</div>
</div>
</div>
<br>
<div class="scene2">
<div class="card">
<div class="card__face2 card__face--front2">Front of second div</div>
<div class="card__face2 card__face--back2">Back of second div</div>
</div>
</div>
<br>
<div class="scene3">
<div class="card">
<div class="card__face3 card__face--front3">Front of last div</div>
<div class="card__face3 card__face--back3">Back of last div</div>
</div>
</div>
</section
</body>
</html>
I know that z-index has problems with different positionings and in this snippet I need them to work together so that I could replicate the navigation on this website http://www.ericryananderson.com/
The problem is that when the overlay is activated the button needs to be z-indexed which the position sticky doesn't like and doesn't allow it causing the overlay to be unclosable. The position sticky is on the nav bar. Is there a workaround this?
var bars = document.querySelector('.bars')
var overlay = document.querySelector('.overlay')
var isMenuOpened = false;
bars.addEventListener('click', function() {
if (isMenuOpened === false) {
bars.classList.remove('fa-bars');
bars.classList.add('fa-times');
overlay.style.display = 'block'
isMenuOpened = true;
bars.style.position = 'fixed'
bars.style.top = '40px';
bars.style.right = '60px';
}else{
bars.classList.remove('fa-times');
bars.classList.add('fa-bars');
overlay.style.display = 'none'
bars.style.position = 'static'
isMenuOpened = false;
}
})
body{
height: 3000px;
}
.video{
width: 100%;
height: 700px;
background: red;
}
nav{
display: flex;
/* position: sticky; */
top: 0px;
justify-content: space-between;
padding: 50px;
background: green;
height: 10px;
}
i{
font-size: 30px;
z-index: 10;
}
.overlay{
position: fixed;
top:0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
display: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="video">
</div>
<div class="navigation">
<nav>
<h4>koreys site</h4>
<i class="fas fa-bars bars"></i>
</nav>
</div>
<div class="overlay">
</div>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
I have been trying/learning to use fullpagejs to create a website but i'm having problem creating autoplay slider. i've only been able to create
horizontal scroll which isnt really what i wanted to achieve here. Any help on how to achieve this without using horizontal scroll?
Hi guys, I have been trying/learning to use fullpagejs to create a website but i'm having problem creating autoplay slider. i've only been able to create
horizontal scroll which isnt really what i wanted to achieve here. Any help on how to achieve this without using horizontal scroll?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<!--Custom script -->
<script type="text/javascript" src="js/fullpage.js"></script>
<script type="text/javascript">
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
$(document).ready(function(){
// $('#fullpage').fullpage({
// sectionSelector: '.vertical-scrolling',
// slideSelector: '.horizontal-scrolling',
// controlArrows: false
// // more options here
// });
// variables
var $header_top = $('.header-top');
var $nav = $('nav');
// toggle menu
$header_top.find('a').on('click', function() {
$(this).parent().toggleClass('open-menu');
});
// fullpage customization
$('#fullpage').fullpage({
sectionsColor: ['firstSection'],
// sectionSelector: '.vertical-scrolling',
// slideSelector: '.horizontal-scrolling',
navigation: true,
slidesNavigation: true,
controlArrows: false,
afterLoad: function(anchorLink, index) {
$header_top.css('background', 'rgba(0, 47, 77, .3)');
$nav.css('background', 'rgba(0, 47, 77, .25)');
if (index == 5) {
$('#fp-nav').hide();
}
},
});
});
</script>
#homepage {
position: relative; }
#homepage .slider {
background-size: cover !important; }
#homepage .slider .hero {
padding: 0 25px;
display: flex;
flex-direction: column;
height: calc(100vh - 10%); }
#homepage .slider .hero .header {
padding-top: 20px;
flex: 1 1 70px;
display: flex;
align-items: center;
justify-content: space-between; }
#homepage .slider .hero .header .logo img {
cursor: pointer;
image-rendering: -webkit-optimize-contrast; }
#homepage .slider .hero .header i {
color: #fff;
cursor: pointer; }
#homepage .slider .hero .welcome {
display: flex;
justify-content: center;
flex: 10 10 300px;
text-align: center;
align-items: center; }
#homepage .slider .hero .welcome div {
align-self: flex-end; }
#homepage .slider .hero .welcome div .hero-headings {
line-height: 90px;
font-size: 155px;
color: #fff;
font-family: '__ITC Avant Garde Gothic Pro_5';
font-weight: 700;
letter-spacing: -5px;
text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.8); }
#homepage .slider .hero .welcome div .hero-description {
padding-bottom: 50px;
font-family: Georgia;
font-size: 20px;
line-height: 22px;
font-weight: bold;
letter-spacing: 5px;
color: #fff;
text-transform: uppercase;
/*text-shadow: 0px 0px 15px rgba(0,0,0,0.8);*/ }
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>branding</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" type="text/css" href="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" />
</head>
<body>
<div class="container">
<div id="homepage" class="main">
<div id="fullpage">
<section class="slider section" style="background: url('http://neonrobot.com/wp-content/uploads/2014/09/unsplash-1.jpg') center center;">
<div class="hero">
<div class="header">
<div class="logo"><img src="assets/img/logo.png" alt="logo"></div>
<i id="menu-open" class="fa fa-bars fa-lg"></i>
</div>
<div class="welcome">
<div>
<div class="hero- headings">Hello.</div>
<div class="hero-description"></div>
</div>
</div>
</div>
<div class="clients">
<div class="padding25">
<div class="clients-intro">Our Clients. <i class="fa fa-angle-right"></i><i class="fa fa-angle-right"></i></div>
<div class="clients-logos">sds</div>
</div>
</div>
</section>
</div>
</div>
</div>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
You need to change your afterLoad callback function like this:
I have used setInterval function to make it automated by calling moveSlideRight function at interval of 1 sec.
afterLoad: function(anchorLink, index) {
$header_top.css('background', 'rgba(0, 47, 77, .3)');
$nav.css('background', 'rgba(0, 47, 77, .25)');
setInterval(function () {
$.fn.fullpage.moveSlideRight();
}, 1000);
if (index == 5) {
$('#fp-nav').hide();
}
},
Here is an example link: codepen link
I use the slick framework that allows me to have a carousel.
The problem is that on the second page of my carousel there is a css effect that starts. (code below)
The problem is that the css effect starts when the site is opened. So when I scroll the
caroussel the effect is already "past". I want the effect to start after clicking on one of the two
arrows (right and left).
I import the slick framework through url and saw that the button code is on
one of the url so I modify myself the button in my code (javascript).
After doing that nothing happens.
I do not understand !
Looking forward to an answer from you for my two problems.
Cordially.
/*(function() {
var slideContainer = $('.slide-container');
slideContainer.slick({
//id added to execute the function below
//https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js
//In this url you can see that prevArrow and nextArrow are the buttons
prevArrow: '<button id="prev" type="button" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button>',
nextArrow: '<button id="nex" type="button" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button>',
});
$("#prev, #nex").click(function() {
$(".expand").addClass("myeffect2");
});
*/
$(".slide-container").slick({
});
body {
background-color: black;
color: #9E9E9E;
}
.slide-container {
margin: auto;
width: 600px;
text-align: center;
}
.wrapper {
padding-top: 100px;
padding-bottom: 40px;
}
.wrapper:focus {
outline: 0;
}
.card {
background: white;
width: 300px;
display: inline-block;
margin: auto;
border-radius: 19px;
position: relative;
text-align: center;
-webkit-box-shadow: -1px 15px 30px -12px black;
box-shadow: -1px 15px 30px -12px black;
}
/***** Effect *****/
.expand-bg {
background: none repeat scroll 0 0 #e6e6e6;
border-radius:16px;
height: 16px;
margin-bottom: 5px;
}
.expand {
border-radius: 13px;
height: 12px;
margin: 2px;
position: absolute;
}
.myeffect2 {
width:90%;
background:#000000;
-moz-animation:myeffect 8s ease-out;
-webkit-animation:myeffect 8s ease-out;
}
#-moz-keyframes myeffect2 {
0% {
width:0px;
}
100% {
width:90%;
}
}
#-webkit-keyframes myeffect {
0% {
width:0px;
}
100% {
width:90%;
}
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css'>
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="slide-container">
<!--page1-->
<div class="wrapper">
<div class="card profile">
<div class="card__level card__level--profile">
<p>My name</p>
</div>
</div>
</div>
<!--end page1-->
<!--page2-->
<div class="wrapper">
<div class="card skills">
<div class="card__unit-name"</div>
</br>
<h3>My effect</h3>
<div class="expand-bg"> <div class="expand myeffect2"> </div> </div>
</div>
</div>
<!--end page2-->
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Scope the myeffect2 class or any class with an animation that you don't want to run unless the slide is active to the slick-active class.
Slick adds the "slick-active" class to slides that are in view.
.slick-active .myeffect2 {
width:90%;
background:#000000;
-moz-animation:myeffect 8s ease-out;
-webkit-animation:myeffect 8s ease-out;
}