I'm currently using Angular 8, would like to know how to do the following animation from the fave website https://discover.myfave.com/sg
Here's my code
steps.html
<div class="step-flow">
<div class="step">
<div class="title">Title 1</div>
<div class="step-progress step-progress-1"></div>
<div class="description">
this is the first section
</div>
</div>
<div class="step">
<div class="title">Title 2</div>
<div class="step-progress step-progress-2"></div>
<div class="description">
this is the second section
</div>
</div>
<div class="step">
<div class="step-progress step-progress-3"></div>
<div class="title">Title 3</div>
<div class="description">
this is the third section
</div>
</div>
</div>
steps.css
.step-flow {
width: 45%;
.step {
position: relative;
border-left: 4px solid $color-black;
margin-bottom: 2rem;
padding-left: 2rem;
.step-progress {
position: absolute;
left: -4px;
top: 0;
right: auto;
bottom: 0;
background: $color-yellow;
width: 4px;
}
.step-progress-1 {
animation: fillin 2s infinite;
}
.step-progress-2 {
animation: fillin 2s infinite 2s;
}
.step-progress-3 {
animation: fillin 2s infinite 4s;
}
.title {
font-size: 1.5rem;
font-weight: 900;
margin-top: 1rem;
margin-bottom: 0;
}
.description {
margin-top: 0.5rem;
margin-bottom: 2rem;
}
}
}
#keyframes fillin {
0% {
height: 0;
}
100% {
height: 100%;
}
}
The animation just flows at the same time. How do I make it flow step by step? Do I use step() in css? Would like to achieve the same effect as the fave website, thank you :)
Appreciate your help, thanks!
Related
I ran into this issue where I am trying to rotate this div on hover, but when I hover, it tries to hover but then it goes back to the normal position. could you please help?
here is my fiddle: https://jsfiddle.net/Lcb7okfn/
.section-tours{
background-color:pink;
padding:5rem 0 50rem 0;
}
.center-text{
background-color:blue;
padding:30px 0;
}
.col-1-of-3{
width: calc((100%-20px)/3);
}
.card{
background-color: orange;
height:15rem;
transition: all .8s;
perspective: 1000px;
-moz-perspective: 1000px;
}
.card:hover{
transform: rotateY(180deg);
}
Apply the hover to a parent element and also move the perspective declaration to the parent:
.section-tours {
background-color: pink;
padding: 5rem 0 50rem 0;
}
.center-text {
background-color: blue;
padding: 30px 0;
}
h2 {
padding: 0;
margin: 0;
}
.col-1-of-3 {
width: calc((100%-20px)/3);
perspective: 1000px;
}
.card {
background-color: orange;
height: 15rem;
transition: all .8s;
}
.col-1-of-3:hover .card {
transform: rotateY(180deg);
}
<section class="section-tours">
<div class="center-text">
<h2>
Most popular tours
</h2>
</div>
<div class="row">
<div class="col-1-of-3">
<div class="card">
<div class="card class_side">
TEXT
</div>
</div>
</div>
<div class="col-1-of-3">
</div>
<div class="col-1-of-3">
</div>
</div>
</section>
I have the following accordion setup: https://jsfiddle.net/n4tmjaqd/1/
I would like to change the icons of the tabs so that they become plus and minus icon. Plus when closed, and minus when opened. How can I adjust the CSS in order to make this change? Can it even be done with CSS only or does the function have to change? Any guidance is much appreciated. Thank you.
$(function() {
$('.accordion .accordion-title').on('click', toggleAccordion);
function toggleAccordion(event) {
var target = $(event.target).closest('.accordion-item');
target.parent('.accordion').find('.accordion-item').not(target).removeClass('is-open');
target.toggleClass('is-open');
}
});
CSS:
.accordion .accordion-item {
border-bottom: 1px solid #000;
}
.accordion .accordion-title {
position: relative;
padding: 15px;
cursor: pointer;
}
.accordion .accordion-content {
display: none;
padding: 0 15px 15px;
}
.accordion .accordion-item.is-open .accordion-content {
display: block;
}
.accordion .arrow {
position: absolute;
display: inline-block;
padding: 5px;
top: 13px;
right: 15px;
background-color: inherit;
border: solid #000;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.accordion .accordion-item.is-open .arrow {
top: 20px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
HTML:
<div class="accordion">
<div class="accordion-item">
<div class="accordion-title">
TITLE 1
<span class="arrow"></span>
</div>
<div class="accordion-content">
CONTENT 1
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-title">
TITLE 2
<span class="arrow"></span>
</div>
<div class="accordion-content">
CONTENT 2
</div>
</div>
<div class="accordion-item">
<div class="accordion-title">
TITLE 3
<span class="arrow"></span>
</div>
<div class="accordion-content">
CONTENT 3
</div>
</div>
</div>
Made smooth transition when click on the button.
You don't have to use multiple div for this, you can still make it simple I have just retained your HTML code, you can think for making it optimized in future.
here is how it looks:
var acc = document.getElementsByClassName("accordion-title");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
.accordion-title {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion-title:hover {
background-color: #ccc;
}
.accordion-title:after {
content: '\002B';
color: red;
/* change the color you want here */
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.accordion-content {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion">
<div class="accordion-item">
<button class="accordion-title">TITLE 1</button>
<div class="accordion-content">
CONTENT 1
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-item">
<button class="accordion-title">TITLE 2</button>
<div class="accordion-content">
CONTENT 2
</div>
</div>
<div class="accordion-item">
<button class="accordion-title">TITLE 3</button>
<div class="accordion-content">
CONTENT 3
</div>
</div>
</div>
I've never felt so silly asking a SO question... but here is goes.
I've created a skew which works a charm, see here
.skewed-bg {
background: #E7ADBB;
padding: 200px 0;
transform: skew(0deg, -7deg);
margin-top: -200px;
z-index: 0;
color: white;
}
.skew-lb {
padding-bottom: 50px !important;
}
.content {
transform: skew(0deg, 7deg);
text-align: center;
}
<div class="skewed-bg skew-lb">
<div class="content">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-10 text-center">
<h1 class="h1 hero-title mb-3">Everything you need to know about...</h1>
</div>
</div>
</div>
</div>
</div>
But when I try to make the skew the opposite way round, everything just turns into mayhem and I have no idea why this is happening - surely it's just reversing the numbers of the skew around? This is my code...
.skewed-bg {
background: #E7ADBB;
padding: 200px 0;
transform: skew(-7deg, 0deg);
margin-top: -200px;
z-index: 0;
color: white;
}
.skew-lb {
padding-bottom: 50px !important;
}
.content {
transform: skew(7deg, 0deg);
text-align: center;
}
<div class="skewed-bg skew-lb">
<div class="content">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-10 text-center">
<h1 class="h1 hero-title mb-3">Everything you need to know about...</h1>
</div>
</div>
</div>
</div>
</div>
Can somebody put me out of my misery here? PS- I apologise in advance for being a plonker.
The reason it doesn't work is because skew(ax, ay). If you simply reversed the angles, you would be changing x-axis instead of y-axis. So use an inverse angle instead. 7deg becomes -7deg
Read about skew here.
Do it like this:
.skewed-bg {
background: #E7ADBB;
padding: 200px 0;
transform: skew(0deg, 7deg);
margin-top: -200px;
z-index: 0;
color: white;
}
.skew-lb {
padding-bottom: 50px !important;
}
.content {
transform: skew(0deg, -7deg);
text-align: center;
}
<div class="skewed-bg skew-lb">
<div class="content">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-10 text-center">
<h1 class="h1 hero-title mb-3">Everything you need to know about...</h1>
</div>
</div>
</div>
</div>
</div>
Here is an example of how you can achieve the same result using :before selector. Less nesting.
.container {
text-align: center;
height: 300px;
width:900px;
position: relative;
overflow: hidden;
margin: 0 auto;
}
.container:before {
content: "";
position: absolute;
background: darkOrange;
height:100%;
width: 200%;
transform: rotate(15deg);
top: -35%;
left: -25%;
z-index: -1;
}
h1 {
z-index: 1;
color: white;
width: 100%;
line-height: 120px;
text-align: center;
}
<div class="container">
<h1>Exmaple </h1>
</div>
Using this method, the text will not be skewed
change the -7 into a 7 in the skew
and for the content flip them over so ts like this skew(0deg, -7deg)
.skewed-bg {
background: #E7ADBB;
padding: 200px 0;
transform: skew(0deg, 7deg);
margin-top: -200px;
z-index: 0;
color: white;
}
.skew-lb {
padding-bottom: 50px !important;
}
.content {
transform: skew(0deg, -7deg);
text-align: center;
}
<div class="skewed-bg skew-lb">
<div class="content">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-10 text-center">
<h1 class="h1 hero-title mb-3">Everything you need to know about...</h1>
</div>
</div>
</div>
</div>
</div>
I have a set of tabs that each contain a child element that animates. What happens when I click each tab is that the animation of the child element within the tab runs. I do not want it to run. I want the animation to run the first time then not replay when it's parent switch from display:none to display:block.
In the example I made below I have 2 parent divs, each with a child div that animates over to the right. When each parent is set to block the animation replays, I do not want that to happen. I want each child to stay positioned over to the right. How can I make that happen?
$(".toggler").on("click", function() {
$(".parent").toggleClass("active");
});
.parent {
display: none;
cursor: pointer;
}
.child {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 200ms cubic-bezier(.91, .8, .54, 1.39);
}
.active {
display: block;
}
.child.red {
background-color: red;
}
.child.blue {
background-color: blue;
}
#keyframes move {
from {
left: 0;
}
to {
left: 180px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggler">Click this</a>
<div class="parent active">
<div class="child red"></div>
</div>
<div class="parent">
<div class="child blue"></div>
</div>
Fiddle Demo
Yes, animations will restart every time the display value is changed from none to something else.
As per W3C Spec: (emphasis is mine)
Setting the display property to ‘none’ will terminate any running animation applied to the element and its descendants. If an element has a display of ‘none’, updating display to a value other than ‘none’ will start all animations applied to the element by the ‘animation-name’ property, as well as all animations applied to descendants with display other than ‘none’.
There is no direct way to prevent this from happening because that is the intended behavior. You can workaround the situation by using other methods to hide the element instead of using display: none.
Following are a few suggestions on how the element could be hidden without display: none. It is not mandatory to use only one of the following workarounds, it could be some other way also as long as it doesn't involve changing the display property of the element.
Using height: 0, width: 0, overflow: hidden to hide the element.
$(".toggler").on("click", function() {
$(".parent").toggleClass("active");
});
.parent {
height: 0;
width: 0;
overflow: hidden;
cursor: pointer;
}
.child {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 200ms cubic-bezier(.91, .8, .54, 1.39) forwards;
}
.active {
height: auto;
width: auto;
overflow: visible;
}
.child.red {
background-color: red;
}
.child.blue {
background-color: blue;
}
#keyframes move {
from {
left: 0;
}
to {
left: 180px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggler">Click this</a>
<div class="parent active">
<div class="child red"></div>
</div>
<div class="parent">
<div class="child blue"></div>
</div>
Adding a container, using position: absolute and opacity: 0 to hide the element.
$(".toggler").on("click", function() {
$(".parent").toggleClass("active");
});
.container {
position: relative;
}
.parent {
position: absolute;
opacity: 0;
cursor: pointer;
}
.child {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 200ms cubic-bezier(.91, .8, .54, 1.39) forwards;
}
.active {
opacity: 1;
}
.child.red {
background-color: red;
}
.child.blue {
background-color: blue;
}
#keyframes move {
from {
left: 0;
}
to {
left: 180px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggler">Click this</a>
<div class='container'>
<div class="parent active">
<div class="child red"></div>
</div>
<div class="parent">
<div class="child blue"></div>
</div>
</div>
Adding a container, using position: absolute and visibility: hidden to hide the element.
$(".toggler").on("click", function() {
$(".parent").toggleClass("active");
});
.container {
position: relative;
}
.parent {
position: absolute;
visibility: hidden;
cursor: pointer;
}
.child {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 200ms cubic-bezier(.91, .8, .54, 1.39) forwards;
}
.active {
visibility: visible;
}
.child.red {
background-color: red;
}
.child.blue {
background-color: blue;
}
#keyframes move {
from {
left: 0;
}
to {
left: 180px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggler">Click this</a>
<div class='container'>
<div class="parent active">
<div class="child red"></div>
</div>
<div class="parent">
<div class="child blue"></div>
</div>
</div>
Adding a container, using position: absolute and z-index to hide the element.
$(".toggler").on("click", function() {
$(".parent").toggleClass("active");
});
.container {
position: relative;
}
.parent {
position: absolute;
z-index: -1;
cursor: pointer;
}
.child {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 200ms cubic-bezier(.91, .8, .54, 1.39) forwards;
}
.active {
z-index: 1;
}
.child.red {
background-color: red;
}
.child.blue {
background-color: blue;
}
#keyframes move {
from {
left: 0;
}
to {
left: 180px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggler">Click this</a>
<div class='container'>
<div class="parent active">
<div class="child red"></div>
</div>
<div class="parent">
<div class="child blue"></div>
</div>
</div>
I want the square like below for all screensize
But when i resize the window in smaller screen size it is looking like below:
Please help me to solve this problem.I tried in many ways but couldnot solve the problem.Related codes are given below :
Html:
<div class="price-area">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-12 col-sm-6">
<div class="square">
<fieldset class="price-border">
<legend>Standard</legend>
<p class="one" >Leaflet • Poster</p>
<p>Banner • Bill Board • Support 24/7</p>
</fieldset>
</div>
</div>
<div class="col-xs-12 col-sm-6">
</div>
</div>
<div class="col-xs-12"></div>
</div>
</div>
</div>
CSS:
.square {
position: relative;
}
.price-border {
margin-bottom: 25px;
}
.price-border legend {
width: auto;
margin-bottom: 2px;
margin-left: 42%;
}
.price-border p.one {
text-align: center;
margin-top: 20px 20px 10px auto;
}
.price-border p:last-child {
text-align: center;
margin-bottom: 50px;
margin-right: 20px;
}
.price-border:after {
height: 0px;
width: 0px;
border: 39px solid #000;
position: absolute;
top: 34%;
left: 93.5%;
content: "";
display: block;
z-index: ;
transform: rotate(45deg);
}
Change .price-border:after style
/* CHANGES */
.price-border:after {
left: auto;
right: -36px;
}
Basically you only want to move your element to the right for number of pixels and how your element has static width you can just set right attribute.
More generic solution would be doing it with transform. For your case, code bellow.
.price-border:after {
left: 100%;
transform: translateX(-55%) rotate(45deg);
}