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!
Project Link
I'm trying to get my background image to be visible but it doesn't appear, Also my css animations don't work as well any information on how to correct this?
.bg-image {
/* The image used */
background-image: url("https://i.postimg.cc/Hn0vxz91/Bridge.jpg");
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border: solid 1px red;
object-fit: cover;
}
/* Position text in the middle of the page/image */
.bg-text {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}
body{
background-color:#28282B;
}
/* Style the links inside the pill navigation menu */
.pill-nav a {
display: inline-block;
color: black;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
border-radius: 5px;
}
/* Change the color of links on mouse-over */
.pill-nav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.pill-nav a.active {
background-color: dodgerblue;
color: white;
}
pulse a:hover{
animation: pulse 1s infinite;
animation-timing-function: linear;
}
#keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1);
100% { transform: scale(1); }
}
}
/* Style the container with a rounded border, grey background and some padding and margin */
.container {
border: 1px solid #ccc;
background-color: #eee;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
}
/* Clear floats after containers */
.container::after {
content: "";
clear: both;
display: table;
}
/* Float images inside the container to the left. Add a right margin, and style the image as a circle */
.container img {
float: left;
margin-right: 20px;
border-radius: 50%;
}
/* Increase the font-size of a span element */
.container span {
font-size: 20px;
margin-right: 15px;
}
/* Add media queries for responsiveness. This will center both the text and the image inside the container */
#media (max-width: 500px) {
.container {
text-align: center;
}
.container img {
margin: auto;
float: none;
display: block;
}
}
.checked {
color: orange;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
}
.title {
color: grey;
font-size: 18px;
}
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
a {
text-decoration: none;
font-size: 22px;
color: white;
}
#star{
background-color:#28282B;
}
.container{
background-color:#28282B;
}
.center {
background-color:white;
}
<header>
<title> Portfoilo</title>
<nav id="navbar">
<div class="pill-nav">
<div class="pulse">
<a class="active" href="#welcome-section">Home</a>
Projects
Certifications</nav> </div>
</div>
</header>
<main><section>
<div class="bg-image"></div>
<div class="bg-text">
<h1>I Am John Doe</h1>
<p>And I'm a Photographer</p>
</div>
</section>
<section id="welcome-section">
<h1 id="practice"> Welcome to My Practice Portfolio</h1></section>
<p>This is my practice portfolio to fune tune my skills when I am readyu to showcase my skills to the web I will link it to the actual one when it's ready and I am ready to share on the web thank you for reading this messgae.</p>
<section id="projects">
Tribute Page
Technical Documentation
</section>
<section id="Certifications">
Certifications</section>
</main>
<body>
<div class="container">
<img src="https://i.pinimg.com/originals/21/45/47/2145477174ea52cd79758af817b905b9.jpg" alt="Avatar" style="width:90px">
<p><span>Julie Jacobs.</span> CEO at Mighty Schools.</p>
<p>John Doe saved us from a web disaster.</p>
</div>
<div class="container">
<img src="https://www.byrdie.com/thmb/fLsxKLnkeZWgt54cWlUCw8ya1KE=/1716x1716/smart/filters:no_upscale()/Screen-Shot-2020-08-31-at-2.57.48-PM-ab7152b68d9042838d10c0ff58f8d3bf.jpg" alt="Avatar" style="width:90px">
<p><span >Rebecca Flex.</span> CEO at Company.</p>
<p>No one is better than John Doe</p>
<div id="star">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
</div>
</div>
</body>
<footer>
<!-- Add icon library -->
<div class="card">
<img src="https://i.guim.co.uk/img/media/9bb29e1304526b5aeb6378f485f16bd5310dff9e/0_236_4500_2700/master/4500.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=b87889efa83846281e306c50ef9370db" alt="John" style="width:100%">
<h1 class="contact">John Doe</h1>
<p class="title">CEO & Founder, Example</p>
<p>Harvard University</p>
<i class="fa fa-dribbble"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-facebook"></i>
<p><button>Contact</button></p>
</div>
</footer>
I'm trying to get my image to display while having a shade of the background color add effect to the image and I have css animations that don't work any information on how to fix all that? So they both could become visible also the card section how to make one portion of it white.
Your background image is working fine for me right now.
About the animation; You mean div class pulse right?
Put <nav> inside <body> and see if it works or not.
My codepen
What I want to achieve:
I want that the elements within the process-indicator parent take up the same width except the elements with class=step AND that the divs with steps name are directly under the step element.
The process-indicator stretch 100% and the connector classes should not use fixed pixel widths so I can add 5,6 or 10 steps and it scales graphically well.
What does not work:
1.) The first after-connector and last before-connector elements in yellow do not share the same size as the elements in green/black
2.) The step names in the divs should be positioned under the according step bubble and not inline with the steps and connectors.
Be aware that I do NOT want to use the before/after pseudo selectors for the step element! =>
I need to be able to later apply dynamically a complete/incomplete class with react thus I need full control about every connector.
HTML
<ul class="process-indicator">
<li class="completed">
<span class="step"></span>
<span class="after-connector"></span>
<div>step 1</div>
</li>
<li class="incompleted">
<span class="before-connector"></span>
<span class="step"></span>
<span class="after-connector"></span>
<div>step 2</div>
</li>
<li class="incompleted">
<span class="before-connector"></span>
<span class="step"></span>
<span class="after-connector"></span>
<div>step 3</div>
</li>
<li class="incompleted">
<span class="before-connector"></span>
<span class="step"></span>
<div>step 4</div>
</li>
</ul>
SCSS
$incomplete: gray;
$complete: blue;
$step-size: 40px;
$step-line-thickness: 2px;
$border-thickness: 1px;
$darken-amount: 30%;
#mixin step-style($color) {
background-color: $color;
color: $color;
border-color: darken($color, $darken-amount);
&:before,
&:after {
background-color: $color;
border-color: darken($color, $darken-amount);
}
}
.flex {
-ms-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
flex: 1;
}
.displayFlex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.process-indicator {
background: orange;
#extend .displayFlex;
margin: 0;
padding: 0;
margin-bottom: 1em;
> li {
#extend .displayFlex;
#extend .flex;
list-style: none;
font-size: 1.2em;
position: relative;
text-overflow: ellipsis;
color: $incomplete;
}
> li .before-connector,
li .after-connector {
#extend .flex;
position: relative;
text-overflow: ellipsis;
color: $incomplete;
}
> li .step {
width: $step-size;
height: $step-size;
background-color: $incomplete;
border-radius: 40px;
}
// line connectors
> li .after-connector {
height: 3px;
top: $step-size / 2;
background-color: green;
}
> li .before-connector {
height: 3px;
top: $step-size / 2;
background-color: red;
}
> li:first-child span.after-connector,
> li:last-child span.before-connector {
background: yellow;
}
// completed state
> li.completed {
color: $complete;
.step {
#include step-style($complete);
}
}
> li.incompleted {
color: $incomplete;
.step {
#include step-style($incomplete);
}
}
}
UPDATE
I would go with a flex solution on the container and move the seperators outside so they can grow equally:
.container {
display: flex;
width: 100%;
background: orange;
}
.step {
height: 40px;
width: 40px;
border-radius: 50%;
overflow: visible;
position: relative;
background: grey;
}
.text {
font-weight:bold;
font-size:20px;
position: absolute;
top: 100%;
margin-top: 10px;
left: 0;
white-space: nowrap;
}
.step:last-child .text {
right:0;
left:auto;
}
.seperator {
flex-grow: 1;
position: relative;
}
.seperator:before {
content: '';
display: block;
height: 10px;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.yellow:before {
background: yellow;
}
.green:before {
background: green;
}
.red:before {
background: red;
}
<div class="container">
<div class="step">
<span class="text">Step 1</span>
</div>
<div class="seperator yellow"></div>
<div class="seperator red"></div>
<div class="step">
<span class="text">Step 2</span>
</div>
<div class="seperator green"></div>
<div class="seperator red"></div>
<div class="step">
<span class="text">Step 3</span>
</div>
<div class="seperator green"></div>
<div class="seperator yellow"></div>
<div class="step">
<span class="text">Step 4</span>
</div>
</div>
Please note you will need to add margin bottom to the container to prevent any content below being overlapped by the text
So I have a website that looks like this:
(I censored it a little, it's super secret)
Now in full screen on PC this looks just fine but watch what happens when I shrink it down to Mobile Size:
I can no longer reach the bottom and see the three buttons. After experimenting it appears that the buttons shrink down to a very small size and then the bottom navbar overlaps.
<div class="categories-container">
<div class="container">
<div class="h1" style="color: #ffffff;text-align: center;">Or Click One of these Core Categories!</div>
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group" style="padding-right: 10px">
<button type="button" class="btn btn-success btn-bg" id="category-gameplay-btn"></button>
</div>
<div class="btn-group" role="group" style="padding-right: 10px">
<button type="button" class="btn btn-warning btn-bg" id="category-editor-btn"></button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger btn-bg" id="category-engine-btn"></button>
</div>
</div>
</div>
</div>
<div class="footer-container">
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container" style="text-align: center">
<span>Website made possible with the following tools</span>
<br>
<span>
jQuery | Bootstrap | glyphicons | <a href="https://pages.github.com/">Github Pages</a>
</span>
</div>
</div>
</div>
This should be the code you need. If you require more let me know.
EDIT
CSS Below:
body {
background-color: #0ba7ff;
}
.header-container .jumbotron {
background-color: #0ba7ff;
border-color: #ffffff;
border-style: solid;
color: #ffffff;
text-align: center;
}
#media (max-width: 767px) {
.jumbotron.jumbotronic {
padding-left: 20px;
padding-right: 20px;
}
}
.categories-container .btn.btn-bg {
height: 300px;
font-size: 60px;
white-space: normal;
}
#media (max-width: 767px) {
.categories-container .btn.btn-bg {
height: 150px;
font-size: 30px;
}
}
#media (max-width: 480px) {
.categories-container .btn.btn-bg {
height: 75px;
font-size: 22px;
}
}
#media (max-width: 360px) {
.categories-container .btn.btn-bg {
height: 35px;
font-size: 15px;
}
}
/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
position: absolute;
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition:
opacity 0.2s ease-in-out,
visibility 0.2s ease-in-out,
-webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-moz-transition:
opacity 0.2s ease-in-out,
visibility 0.2s ease-in-out,
-moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transition:
opacity 0.2s ease-in-out,
visibility 0.2s ease-in-out,
transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
pointer-events: none;
}
/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
.tooltip:hover:before,
.tooltip:hover:after{
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
z-index: 1000;
padding: 8px;
width: 160px;
background-color: #000;
background-color: hsla(0, 0%, 20%, 0.9);
color: #fff;
content: attr(data-tooltip);
font-size: 14px;
line-height: 1.2;
}
/* Base styles for the tooltip's directional arrow */
.tooltip:before,
[data-tooltip]:before {
z-index: 1001;
border: 6px solid transparent;
background: transparent;
content: "";
}
/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
margin-left: -80px;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after,
.tooltip-top:focus:before,
.tooltip-top:focus:after {
-webkit-transform: translateY(-12px);
-moz-transform: translateY(-12px);
transform: translateY(-12px);
}
/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
top: 100%;
bottom: auto;
left: 50%;
}
.tooltip-bottom:before {
margin-top: -12px;
margin-bottom: 0;
border-top-color: transparent;
border-bottom-color: #000;
border-bottom-color: hsla(0, 0%, 20%, 0.9);
}
.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
-webkit-transform: translateY(12px);
-moz-transform: translateY(12px);
transform: translateY(12px);
}
Loaded after bootstrap.css
It appears you're using bootstrap. I don't know the coding of your css file but if you do happen to set a height for .categories it'd tend to overlap. Try give it a .row class and .col-sm-13 for the buttons to remain inline. Once it reaches the screen of a mobile device it won't overlap. Try. I hope this helps or gives you an idea :)
<div class="categories-container">
<div class="container">
<div class="h1" style="color: #ffffff;text-align: center;">Or Click One of these Core Categories!</div>
<div class="row">
<div class="btn-group btn-group-justified col-sm-12" role="group" aria-label="...">
<div class="btn-group" role="group" style="padding-right: 10px">
<button type="button" class="btn btn-success btn-bg" id="category-gameplay-btn"></button>
</div>
<div class="btn-group" role="group" style="padding-right: 10px">
<button type="button" class="btn btn-warning btn-bg" id="category-editor-btn"></button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger btn-bg" id="category-engine-btn"></button>
</div>
</div>
</div> <!-- row-->
</div>
So here is the solution for anyone else looking after a fix for this:
There was none from what I experience, make your own:
This is necessary to add:
body {
height: 100%;
}
Here is the CSS for the div which holds the three buttons in question (so basically the last container in your HTML document before the footer):
.categories-container {
min-height: 100%;
margin-bottom: -30px; /* Negative half the height of the footer to leave space*/
position: relative;
}
Then I made this at the bottom of my index.html page:
<div id="wrap">
<div id="main"></div>
<div id="footer">
jQuery | Bootstrap |
glyphicons | <a href="https://pages.github.com/">Github Pages</a>
</div>
</div>
Here is the footer CSS:
#wrap #footer {
position: relative;
bottom: 0;
width: 100%;
height: 60px;
background: #f8f8f8;
text-align: center;
}
#wrap #footer a {
padding-top: 30px;
}
#wrap #main {
height: 60px;
clear: both;
}
I hope this was useful for some!
I have a CSS transition which takes place on hover of a link - the transition happens to some of the contents of this link.
My issue is that the transition (which primarily animates width and height properties) works fine when hovering over the link, but on stopping hover, the elements simply spring back to their unhovered state - rather than transitioning.
The styles defined are this:
a.transition {
display: block;
width: 300px;
height: 200px;
position: relative;
border: 1px solid #000;
color: #000'
}
a.transition .category_info_container {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 70px;
transition: height 0.5s, width 0.5s, color 0.5s;
}
a.transition .category_info_container .category_info {
background-color: #aaa;
padding: 0 20px;
}
a.transition .category_info_container .category_info .category_name {
color: #fff;
text-transform: uppercase;
font-size: 18px;
line-height: 70px;
}
a.transition .category_info_container .category_info .category_desc {
display: none;
}
a.transition:hover .category_info_container {
background: #eee;
width: 48%;
height: 100%;
}
a.transition:hover .category_info_container .category_info {
position: absolute;
bottom: 20%;
background: none;
}
a.transition:hover .category_info_container .category_info .category_name {
color: #000;
line-height: 50px;
}
a.transition:hover .category_info_container .category_info .category_desc {
display: block;
}
And my markup:
<a href="#" class="transition">
<div class="category_info_container">
<div class="category_info">
<div class="category_name">
Test Name
</div>
<div class="category_desc">
Lorem ipsum dolar sit amet...
</div>
</div>
</div>
</a>
I have created a JSFiddle with my code.
I think, It will be better, if you use different blocks for elements:
checkout my example:
http://jsfiddle.net/bo5o3q18/3/
<a href="#" class="transition">
<div class="category_info">
<div class="category_name">
Test Name
</div>
</div>
<div class="category_info-add">
<div class="category_name">
Test Name
</div>
<div class="category_desc">
Lorem ipsum dolar sit amet...
</div>
</div>
</a>