I was trying to make a website for an upcoming event, using materialize css. Here's how I want the page to look (not exactly same. The images is for representation):
Here's my link to jsbin
body {
background: #0b1924;
}
/*Loading screen animation code begins*/
#load {
position: absolute;
width: 600px;
height: 36px;
left: 50%;
top: 40%;
margin-left: -300px;
overflow: visible;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
#load div {
position: absolute;
width: 20px;
height: 36px;
opacity: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
animation: move 2s linear infinite;
-o-animation: move 2s linear infinite;
-moz-animation: move 2s linear infinite;
-webkit-animation: move 2s linear infinite;
transform: rotate(180deg);
-o-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
color: #35C4F0;
}
#load div:nth-child(2) {
animation-delay: 0.2s;
-o-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
#load div:nth-child(3) {
animation-delay: 0.4s;
-o-animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
#load div:nth-child(4) {
animation-delay: 0.6s;
-o-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
#load div:nth-child(5) {
animation-delay: 0.8s;
-o-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
}
#load div:nth-child(6) {
animation-delay: 1s;
-o-animation-delay: 1s;
-moz-animation-delay: 1s;
-webkit-animation-delay: 1s;
}
#load div:nth-child(7) {
animation-delay: 1.2s;
-o-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
}
#keyframes move {
0% {
left: 0;
opacity: 0;
}
35% {
left: 41%;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
65% {
left: 59%;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
100% {
left: 100%;
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
opacity: 0;
}
}
#-moz-keyframes move {
0% {
left: 0;
opacity: 0;
}
35% {
left: 41%;
-moz-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
65% {
left: 59%;
-moz-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
100% {
left: 100%;
-moz-transform: rotate(-180deg);
transform: rotate(-180deg);
opacity: 0;
}
}
#-webkit-keyframes move {
0% {
left: 0;
opacity: 0;
}
35% {
left: 41%;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
65% {
left: 59%;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
100% {
left: 100%;
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
opacity: 0;
}
}
#-o-keyframes move {
0% {
left: 0;
opacity: 0;
}
35% {
left: 41%;
-o-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
65% {
left: 59%;
-o-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
100% {
left: 100%;
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
opacity: 0;
}
}
/*
Loading screen animation ends here....
*/
/*FAB code begins*/
.fixed-action-btn,
.toolbar {
margin-top: 2%;
margin-left: 2%;
width: 100px;
height: 100px;
top: 23px;
left: 23px;
}
.btn-large i {
font-size: 2.5rem;
margin-top: 20%;
}
.slider {
position: relative;
display: block;
background-position: center;
background-repeat: no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spark fest</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Audiowide" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
</head>
<body>
<div id="load">
<div>g</div>
<div>n</div>
<div>i</div>
<div>d</div>
<div>a</div>
<div>o</div>
<div>L</div>
</div>
<div class="row hideBeforeLoad ">
<div class="fixed-action-btn toolbar hideBeforeLoad col s12">
<a class="btn-floating btn-large hideBeforeLoad" style="width: 100px; height:100px;">
<i class="large material-icons hideBeforeLoad" title="Loading..">reorder</i>
</a>
<ul class="hideBeforeLoad">
<li class="waves-effect waves-light hideBeforeLoad"><i class="material-icons tooltipped" data-position="right" data-delay="50" data-tooltip="HOME">home</i>
</li>
<li class="waves-effect waves-light hideBeforeLoad"><i class="material-icons tooltipped"data-position="right" data-delay="50" data-tooltip="EVENTS">event</i>
</li>
<li class="waves-effect waves-light hideBeforeLoad"><i class="material-icons tooltipped"data-position="right" data-delay="50" data-tooltip="WHEN?/WHERE?">location_on</i>
</li>
<li class="waves-effect waves-light hideBeforeLoad"><i class="material-icons tooltipped"data-position="right" data-delay="50" data-tooltip="CONTACT US">contacts</i>
</li>
</ul>
</div>
</div>
<section>
<div class="row">
<div class="slider">
<ul class="slides">
<li>
<img src="https://tctechcrunch2011.files.wordpress.com/2015/04/codecode.jpg">
<!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/2">
<!-- random image -->
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/3">
<!-- random image -->
<div class="caption right-align">
<h3>Right Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/4">
<!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
</section>
<script type="text/javascript">
$(window).on('load', function() {
$("#load").fadeOut("slow");;
});
$(window).on("pagebeforeload", function() {
$(".hideBeforeLoad").hide();
});
</script>
</body>
</html>
Here is how my output is when I run it on the browser:
Looks like the images are hidden. Is there any way I could tweak the code so that it looks as expected?
You have 0 opacity on all of the li elements.
.slider .slides li {
opacity: 0;
...
}
Change that and images will show up.
Related
I am trying to create this hover effect using CSS only but can also use JavaScript if needed.
I was able to create the layout in HTML and effect a hover state on each image individually but not able to create a hover the effects both images at once and in opposite ways.
Figma Prototype
This is what I tried and it worked on each image individually but I need both images to change simultaneously.
#wrap img {
-webkit-transition: 400ms ease 100ms;
-moz-transition: 400ms ease 100ms;
transition: 400ms ease 100ms;
}
img.hvrimg1 {
position:relative;
bottom:180px;
left: 260px;
z-index: 1;
}
img.hvrimg1:hover {
position:relative;
filter: blur(3px);
-moz-transform: translate(-10px, -0px);
-ms-transform: translate(-10px, -0px);
-o-transform: translate(-10px, -0px);
-webkit-transform: translate(-10px, -0px);
transform: translate(-10px, -0px)
}
img.hvrimg2 {
position:relative;
filter: blur(3px);
}
img.hvrimg2:hover {
position:relative;
filter: blur(0px);
-moz-transform: translate(10px, -0px);
-ms-transform: translate(10px, -0px);
-o-transform: translate(10px, -0px);
-webkit-transform: translate(-10px, -0px);
transform: translate(10px, -0px)
}
I figured it out.
<html>
<style type="text/css">
#wraphvrimg img {
-webkit-transition: 400ms ease 100ms;
-moz-transition: 400ms ease 100ms;
transition: 400ms ease 100ms;
}
.section {
background: #ffff;
width: 850px;
overflow: hidden
}
.section img.hvrimg1 {
filter: blur(0px);
position: relative;
bottom: 180px;
left: 20px;
z-index: 1;
}
.section:hover img.hvrimg1 {
filter: blur(3px);
transform: translate(-20px, -0px)
}
.section img.hvrimg2 {
filter: blur(3px);
position: relative;
right: 240px;
}
.section:hover img.hvrimg2 {
filter: blur(0px);
transform: translate(20px, 0px)
}
</style>
</head><body>
<div id="wraphvrimg" class="section"> <img src="Rectangle 5.png" alt="" width="411" height="253" class="hvrimg1"/> <img src="Rectangle 4.png" width="418" height="493" alt=""/ class="hvrimg2" > </div>
</body>
</html>
In my example, #wrap is your image/parent container, and as you can see you can target each image on hover of the parent and you can do whatever you want to the image. I am sure you can figure out the rest from here.
#wrap:hover .image-1 {
color: red;
}
#wrap:hover .image-2 {
color: green;
}
<div id="wrap">
<div class="image-1">image 1</div>
<div class="image-2">image 2</div>
</div>
I've used the following code to make objects fade on scroll. It works well, except that when the page loads, the objects are not visible. You have to scroll a little bit to make them visible. Then, the scrolling works to reduce opacity as intended. Any idea why? I've used bootstrap, jquery, and you can run the snippet below to test the issue.
Thanks,
Will
var target = $('.fade');
var targetHeight = 400;
$(document).scroll(function(e){
var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
if(scrollPercent >= 0){
target.css('opacity', scrollPercent);
}
});
/*!
Theme Name: Frozen Land
Author: Will Caulfield
Author URI: http://caulfield.co/
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: frozenland.co
*/
body {
font-family: 'Lato', sans-serif;
}
h1 {
color: white;
text-transform: uppercase;
font-weight: 800;
font-size: calc(70px + 0.3vw);
margin: 10px 0px 25px 0px;
}
main {
background: -webkit-gradient(linear, left top, left bottom, from(#f9c4cc), to(#f27aaa));
background: linear-gradient(#f9c4cc, #f27aaa);
}
section {
height: 100vh;
}
#-webkit-keyframes floatIce {
0% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
50% {
-webkit-transform: translatey(-15px);
transform: translatey(-15px);
}
100% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
}
#keyframes floatIce {
0% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
50% {
-webkit-transform: translatey(-15px);
transform: translatey(-15px);
}
100% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
}
#-webkit-keyframes floatText {
0% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
50% {
-webkit-transform: translatey(-10px);
transform: translatey(-10px);
}
100% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
}
#keyframes floatText {
0% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
50% {
-webkit-transform: translatey(-10px);
transform: translatey(-10px);
}
100% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
}
#-webkit-keyframes floatLand {
0% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
50% {
-webkit-transform: translatey(-5px);
transform: translatey(-5px);
}
100% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
}
#keyframes floatLand {
0% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
50% {
-webkit-transform: translatey(-5px);
transform: translatey(-5px);
}
100% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
}
.hero {
position: relative;
top: -50px;
}
.hero-ice {
width: 200px;
-webkit-transform: translatey(0px);
transform: translatey(0px);
-webkit-animation: floatIce 6s ease-in-out infinite;
animation: floatIce 6s ease-in-out infinite;
}
.hero-text {
-webkit-transform: translatey(0px);
transform: translatey(0px);
-webkit-animation: floatText 6s ease-in-out infinite;
animation: floatText 6s ease-in-out infinite;
}
.hero-land {
width: 250px;
-webkit-transform: translatey(0px);
transform: translatey(0px);
-webkit-animation: floatText 6s ease-in-out infinite;
animation: floatText 6s ease-in-out infinite;
}
#-webkit-keyframes caret-float {
0% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
50% {
-webkit-transform: translatey(7px);
transform: translatey(7px);
}
100% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
}
#keyframes caret-float {
0% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
50% {
-webkit-transform: translatey(7px);
transform: translatey(7px);
}
100% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
}
.hero-scroll {
color: white;
font-size: 40px;
position: absolute;
bottom: 20px;
-webkit-transform: translatey(0px);
transform: translatey(0px);
-webkit-animation: caret-float 1.5s ease-in-out infinite;
animation: caret-float 1.5s ease-in-out infinite;
}
/*# sourceMappingURL=style.css.map */
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Googl Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lato:400,900&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" integrity="sha384-REHJTs1r2ErKBuJB0fCK99gCYsVjwxHrSU0N7I1zl9vZbggVJXRMsv/sLlOAGb4M" crossorigin="anonymous">
<!-- Scripts -->
<title>Hello, world!</title>
</head>
<body>
<main>
<section class="d-flex flex-column justify-content-center align-items-center">
<div class="hero w-100 d-flex flex-column justify-content-center align-items-center fade">
<img class="hero-ice" src="img/ice-cream.png" />
<h1 class="hero-text">Frozen Land</h1>
<img class="hero-land" src="img/land.png" />
</div>
<i class="hero-scroll far fa-caret-square-down fade"></i>
</section>
<section>
<div>
z
</div>
</section>
<section>
<div>
z
</div>
</section>
</main>
<footer>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Custom Scripts -->
<script src="/js/custom.js"></script>
<script>
</script>
</body>
</html>
Class fade applies opacity: 0;, replace with other class name in HTML and in jQuery selector
I have a test web app, trying different CSS solutions. I used the below CSS code as a background animation in my Ionic project.
Unfortunately, the code on Android stutters quite badly, and the low fps makes other functions in my app unusable & unstable. Please also find the original code link below.
Original code:
https://codepen.io/noahblon/pen/GKflw
I tried optimizing the code as per below to use hardware acceleration in app.
HTML Code
<div class="scene">
<div class="wrap">
<div class="wall wall-right"></div>
<div class="wall wall-left"></div>
<div class="wall wall-top"></div>
<div class="wall wall-bottom"></div>
<div class="wall wall-back"></div>
</div>
<div class="wrap">
<div class="wall wall-right"></div>
<div class="wall wall-left"></div>
<div class="wall wall-top"></div>
<div class="wall wall-bottom"></div>
<div class="wall wall-back"></div>
</div>
</div>
CSS Code:
Picture is locally stored as asset & is 800x400, 100KB.
.wall {
background-image: url('../assets/imgs/4.jpg');
background-size: cover;
//pointer-events: none;
position: absolute;
}
.scene {
// left: 50%; top: 50%;
left: 50%; top: 50%;
display: inline-block;
vertical-align: middle;
perspective: 5px;
// perspective-origin: 50% 50%;
position: absolute;
z-index: -10;
}
.wrap {
position: absolute;
width: 1000px;
height: 1000px;
left: -500px;
top: -500px;
transform-style: preserve-3d;
-webkit-animation: move 350s infinite linear;
-webkit-animation-fill-mode: forwards;
}
.wrap:nth-child(2){
-webkit-animation: move 350s infinite linear;
animation-delay: 6s;
}
.wall{
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
opacity: 0;
//animation: fade 350s infinite linear;
-webkit-animation: fade 350s infinite linear;
// -webkit-animation: fadeinout 4s linear forwards;
// animation: fadeinout 4s linear forwards;
animation-delay: 0;
}
.wrap:nth-child(2) .wall {
animation-delay: 6s;
}
.wall-right {
transform: rotate3d(0,1,0,90deg) translate3d(0,0,500px);
}
.wall-left {
transform: rotate3d(0,1,0,-90deg) translate3d(0,0,500px);
}
.wall-top {
transform: rotate3d(1,0,0,90deg) translate3d(0,0,500px);
}
.wall-bottom {
transform: rotate3d(1,0,0,-90deg) translate3d(0,0,500px);
}
.wall-back {
transform: rotate3d(1,0,0,180deg) translate3d(0,0,500px);
}
#-webkit-keyframes move {
0%{
-webkit-transform: translate3d(0,0,-500px) rotate(0deg);
}
100%{
-webkit-transform: translate3d(0,0,500px) rotate(0deg);
}
}
#keyframes move {
0%{
-webkit-transform: translate3d(0,0,-500px) rotate(0deg);
}
100%{
-webkit-transform: translate3d(0,0,500px) rotate(0deg);
}
}
#-webkit-keyframes fade {
0%{
opacity: 0;
}
25% {
opacity: 1;
}
75% {
opacity: 1;
}
100%{
opacity: 0;
}
}
#keyframes fade {
0%{
opacity: 0;
}
25% {
opacity: 1;
}
75% {
opacity: 1;
}
100%{
opacity: 0;
}
}
I am seeking a solution in optimizing the link provided or further using my edited code.
How would you optimize this animation for phone?
i have an html table and i want to flip vertically each row individually of the table to display a "front" and "back" data. the flip should occur every 10s.
this website is for displaying stocks from a website and i want a table showing recently updated stocks which flip(change) every 10s
<div class="row ">
<div id="draggable">
<div id="dashboard" class="shadow">
<div class="widget-inner loadable" id="a">
<div class="widget-inner loadable" id="b">
<div class="row" style="margin-top:-90px">
<div id="draggable">
<div id="dashboard" class="shadow">
<div class="widget-inner loadable" id="a">
{% for rec in stockrecent1 %}
<tr>
<td class="name">{{rec}}</td>
<td class="other">{{rec.currentprice}}</td>
<td class="other">{{rec.change}}</td>
<td class="other">{{rec.percent}}%</td>
<td class="other">{{rec.lastprice}}</td>
</tr>
{% endfor %}
</div>
<div class="widget-inner loadable" id="b">
{% for rec in stockrecent %}
<tr>
<td class="name">{{rec}}</td>
<td class="other">{{rec.currentprice}}</td>
<td class="other">{{rec.change}}</td>
<td class="other">{{rec.percent}}%</td>
<td class="other">{{rec.lastprice}}</td>
</tr>
{% endfor %}
</div></div></div></div>
.row:after {
content: "";
display: table;
clear: both;
}
#draggable {
position: relative;
margin: 10px auto;
width: 1550px;
height: 40px;
z-index: 1;
}
#dashboard {
-webkit-perspective: 1000;
perspective: 1000;
}
#dashboard {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
transition: all 1.0s linear;
}
.loadable {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#a{
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-animation: mymoveback 20s infinite;
animation: mymoveback 20s infinite;
}
#b {
display: block;
box-sizing: border-box;
padding: 10px;
color: black;
text-align: center;
-webkit-animation: mymove 20s infinite;
animation: mymove 20s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
40% {
-webkit-transform: rotateX(0deg);
}
50% {
-webkit-transform: rotateX(180deg);
}
90% {
-webkit-transform: rotateX(180deg);
}
100% {
-webkit-transform: rotateX(0deg);
}
}
#-webkit-keyframes mymoveback {
40% {
-webkit-transform: rotateX(-180deg);
}
50% {
-webkit-transform: rotateX(0deg);
}
90% {
-webkit-transform: rotateX(0deg);
}
100% {
-webkit-transform: rotateX(-180deg);
}
}
#keyframes mymove {
40% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(180deg);
}
90% {
transform: rotateX(180deg);
}
100% {
transform: rotateX(0deg);
}
}
#keyframes mymoveback {
40% {
transform: rotateX(-180deg);
}
50% {
transform: rotateX(0deg);
}
90% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-180deg);
}
}
this code is working normally for other elements but not working for table rows. i tried putting the for loop out of the <div class="widget-inner loadable" id="a"> but not working. Please suggest a fix or an alternative way to do this. flip is not necessary. i just wanted to change to content of the rows using animation
You can use display: table-row table-cell, to divs in place of tr td.
.row:after {
content: "";
display: table;
clear: both;
}
.tr { display: table-row;}
.td {display: table-cell;}
#draggable {
position: relative;
margin: 10px auto;
width: 1550px;
height: 40px;
z-index: 1;
}
#dashboard {
-webkit-perspective: 1000;
perspective: 1000;
}
#dashboard {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
transition: all 1.0s linear;
}
.loadable {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#a {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-animation: mymoveback 20s infinite;
animation: mymoveback 20s infinite;
}
#b {
display: block;
box-sizing: border-box;
padding: 10px;
color: black;
text-align: center;
-webkit-animation: mymove 20s infinite;
animation: mymove 20s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
40% {
-webkit-transform: rotateX(0deg);
}
50% {
-webkit-transform: rotateX(180deg);
}
90% {
-webkit-transform: rotateX(180deg);
}
100% {
-webkit-transform: rotateX(0deg);
}
}
#-webkit-keyframes mymoveback {
40% {
-webkit-transform: rotateX(-180deg);
}
50% {
-webkit-transform: rotateX(0deg);
}
90% {
-webkit-transform: rotateX(0deg);
}
100% {
-webkit-transform: rotateX(-180deg);
}
}
#keyframes mymove {
40% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(180deg);
}
90% {
transform: rotateX(180deg);
}
100% {
transform: rotateX(0deg);
}
}
#keyframes mymoveback {
40% {
transform: rotateX(-180deg);
}
50% {
transform: rotateX(0deg);
}
90% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-180deg);
}
}
<div class="row" style="">
<div id="draggable"></div>
<div id="dashboard" class="shadow">
<div class="widget-inner loadable" id="a">
{% for rec in stockrecent1 %}
<div class="tr">
<div class="td name">{{ rec }}</div>
<div class="td other">{{ rec.currentprice }}</div>
<div class="td other">{{ rec.change }}</div>
<div class="td other">{{ rec.percent }}%</div>
<div class="td other">{{ rec.lastprice }}</div>
</div>
{% endfor %}
</div>
<div class="widget-inner loadable" id="b">
{% for rec in stockrecent %}
<div class="tr">
<div class="td name">{{ rec }}</div>
<div class="td other">{{ rec.currentprice }}</div>
<div class="td other">{{ rec.change }}</div>
<div class="td other">{{ rec.percent }}%</div>
<div class="td other">{{ rec.lastprice }}</div>
</div>
{% endfor %}
</div>
</div>
</div>
I am using the carousel component with ng-bootstrap. I understand there's an open issue for a proper animation feature that works correctly with the angular 2 component life cycle right now (Github issue).
My question: is there a way to use CSS as a workaround for the animation?
I have put up a plunker that has fade in effect for the carousel, but not fade out.
.carousel-item.active{
-webkit-animation: fadein 1.4s;
-moz-animation: fadein 1.4s;
-ms-animation: fadein 1.4s;
-o-animation: fadein 1.4s;
animation: fadein 1.4s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Is there a way to make a fade out work? I have tried transition but failed.
I wanted a fade in/fade out the transition between slides and found a simpler solution to this:
::ng-deep {
.carousel-item {
transition: opacity 0.7s ease !important;
position: absolute !important;
display: block !important;
opacity: 0;
}
.carousel-item.active {
position: relative !important;
opacity: 1;
}
}
If you don't want to use ::ng-deep (it seems that is going to be deprecated, or at least I read so last week in angular.io) you can use a global styles file that will reach all classes in all components
Alright, answering my own question. The following CSS hack will make the animation work just fine
ngb-carousel {
width: inherit;
height: inherit;
}
.carousel-inner {
overflow: visible;
}
.carousel-item {
display: flex !important;
opacity: 0;
visibility: hidden;
transition: opacity 1.2s ease-in-out, visibility 1.2s;
z-index: -1;
position: absolute;
}
.carousel-item.active{
opacity: 1;
visibility: visible;
z-index: 10;
}
.carousel-control-prev {
z-index: 20;
}
.carousel-control-next {
z-index: 20;
}
.carousel-indicators{
z-index: 20;
}
Working Plunker
I managed to create left-to-right slide animation based on your approach. active slide goes out with transition to the right when it loses .active and then new .active slides in with delayed animation.
though I recommend using ngx-swiper-wrapper instead - best angular carousel I found so far (https://idangero.us/swiper/)
.carousel-inner {
width: 640px;
height: 240px;
}
.carousel-item {
padding: 40px 55px;
opacity: 0;
transition: opacity .3s ease-in-out;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 0;
display: block !important;
}
.carousel-item.active {
z-index: 1;
opacity: 1;
transition-delay: .3s;
transform: none;
animation: slideFromLeft .3s;
animation-delay: .3s;
}
#keyframes slideFromLeft {
from {
transform: translateX(-100%);
}
to {
transform: none;
}
}
Here are two animations I used in Angular 9, ng-bootstrap version 6.0.0. Easiest way is to give an entrance animation to .carousel-item.active. Animations are taken from animista.net/play/entrances. Just make sure you add the css to global styles.css
Animation 1
.carousel-item.active {
-webkit-animation: flip-in-ver-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: flip-in-ver-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
#-webkit-keyframes flip-in-ver-left {
0% {
-webkit-transform: rotateY(80deg);
transform: rotateY(80deg);
opacity: 0;
}
100% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
opacity: 1;
}
}
#keyframes flip-in-ver-left {
0% {
-webkit-transform: rotateY(80deg);
transform: rotateY(80deg);
opacity: 0;
}
100% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
opacity: 1;
}
}
Animation 2
.carousel-item.active {
-webkit-animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
#-webkit-keyframes tilt-in-fwd-tr {
0% {
-webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
opacity: 0;
}
100% {
-webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
opacity: 1;
}
}
#keyframes tilt-in-fwd-tr {
0% {
-webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
opacity: 0;
}
100% {
-webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
opacity: 1;
}
}
Got it to work in angular 7 after tweaking #user3682091 answer
Hope it helps someone else
Here's my html
<div class="section" id="carousel">
<div class="container">
<div class="title">
<h4>Carousel</h4>
</div>
<div class="row justify-content-center" style="height: 50vw;">
<div class="col-12" style="height: 100%; width:100%">
<ngb-carousel>
<ng-template ngbSlide>
<img class="d-block" src="assets/img/bg1.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Nature, United States</h5>
</div>
</ng-template>
<ng-template ngbSlide>
<img class="d-block" src="assets/img/bg3.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Somewhere Beyond, United States</h5>
</div>
</ng-template>
<ng-template ngbSlide>
<img class="d-block" src="assets/img/bg4.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Yellowstone National Park, United States</h5>
</div>
</ng-template>
</ngb-carousel>
</div>
</div>
</div>
</div>
Here's my style.css file(global css)
ngb-carousel {
// width: inherit;
// height: inherit;
width: 100%;
height: 100%;
}
.carousel-inner {
overflow: visible;
}
.carousel-item {
display: flex !important;
opacity: 0;
visibility: hidden;
transition: opacity 1.2s ease-in-out, visibility 1.2s;
z-index: -1;
position: absolute;
}
.carousel-item.active {
opacity: 1;
visibility: visible;
transition: opacity 1.2s ease-in-out, visibility 1.2s;
z-index: 10;
}
.carousel-control-prev {
z-index: 20;
}
.carousel-control-next {
z-index: 20;
}
.carousel-indicators {
z-index: 20;
}