Is it possible to vertically animate a DOM element such as animation-test within a certain bounds while its parent elements maintain vertically centered relative to the body of the document? The inclusion of the Bootstrap class align-self-center in animation-test-parent seems to prevent this from being possible.
For more context, I'm seeking to implement an animation similar to one on mobile Chrome, attached below while maintaining the vertical alignment of my content:
https://imgur.com/a/Dsmhkje
If the above isn't possible, how would you suggest implementing this UI?
Many thanks!
html,
body {
height: 100%;
}
#animation-test {
line-height: 1.5rem;
animation: fadein 2s;
-moz-animation: fadein 2s;
-webkit-animation: fadein 2s;
-o-animation: fadein 2s;
}
#-webkit-keyframes fadein {
0% {
line-height: 280px;
}
/* 100% {line-height: 100px;}*/
}
#-moz-keyframes fadein {
0% {
line-height: 280px;
}
/* 100% {line-height: 100px;}*/
}
#-o-keyframes fadein {
0% {
line-height: 280px;
}
/* 100% {line-height: 100px;}*/
}
#keyframes fadein {
0% {
line-height: 280px;
}
/* 100% {line-height: 100px;}*/
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Material Design Bootstrap -->
<link href="MDB-Free/css/mdb.min.css" rel="stylesheet">
<body>
<div class="container px-0 h-100">
<div class="row no-gutters h-100">
<div class="col align-self-center">
<div id="animation-test-parent" class="row no-gutters">
<div id="animation-test" class="col">
animation debug
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="row no-gutters h-100">
<div class="col align-self-center">
<div id="animation-test-parent" class="row no-gutters">
<div id="animation-test" class="col azk-title">
animation debug
</div>
</div>
</div>
</div>
#animation-test {
line-height: 1.5rem;
animation: fadein 2s;
-moz-animation: fadein 2s;
-webkit-animation: fadein 2s;
-o-animation: fadein 2s;
}
#-webkit-keyframes fadein {
0% {line-height: 280px;}
}
#-moz-keyframes fadein {
0% {line-height: 280px;}
}
#-o-keyframes fadein {
0% {line-height: 280px;}
}
#keyframes fadein {
0% {line-height: 280px;}
}
Related
I'm trying to achieve the following scrolling effect from the Rocket.Chat homepage.
See effect here
Site: https://rocket.chat/
The issue is that I can't seem to make the image move like they have in the site. Does somebody have any idea why? Or can pass an example?
My component.html
<section class="community py-5">
<div class="container">
<div class="content d-flex">
<div class="content-info">
<div class="mb-5">
<h3>Lorem ipsum text</h3>
</div>
<div class="text-wrapper">
<div class="text">
Some information to be said
</div>
</div>
<div class="btn-wrapper mt-5">
<a href="#" class="btn-contract-us">
<div>
<strong>Join Us</strong>
</div>
</a>
</div>
</div>
<div class="content-image">
<img
[src]="codeImg"
alt=""
draggable="false"
/>
</div>
</div>
</div>
</section>
My component.scss
.community {
position: relative;
.content-info {
padding: 110px 140px 64px;
flex: 1;
background-color: #f7f8fa;
// background-img
background-position: -40px 0;
background-size: 730px;
background-repeat: no-repeat;
div.text {
margin: 0;
font-size: 1.6rem;
line-height: 3.2rem;
}
.btn-contract-us {
background-color: #f5455c;
}
}
.content-image {
overflow: hidden;
width: 30%;
max-height: 524px;
max-width: 430px;
background-color: #1f2329;
background-image: linear-gradient(180deg, #1f2329 60%, #000);
img {
transform: translate3d(0px, -45.9095%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);;
transform-style: preserve-3d;
will-change: transform;
}
}
}
You can use a css-keyframe-animation of the background-image for that:
.component{
display: flex;
align-items: center;
justify-content: space-between;
}
.image{
width:300px;
height:200px;
background-image: url('https://placekitten.com/300/400');
animation: scrollImage;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
#keyframes scrollImage{
from{
background-position: center 0%
}
to{
background-position: center 100%
}
}
<div class="component">
<div class="content">
<h1>Look, Ma!</h1>
<p>I animated a kitten instead of sourcecode.</p>
</div>
<div class="image"></div>
</div>
Usage:
animation-duration - sets the duration of one iteration of your animation
animation-iteration-count: infinite - lets your animation run endlessly
animation-direction: alternate - lets your animation loop back and forth over and over again
I am working on a coronavirus project and the animation rot-corona is not working I want it to rotate 360 degrees after every 3 sec
and for a note bootstrap-4 is included in it
Code
/* SCSS */
#rotate-corona-text {
h1 {
font-size: 3rem;
}
img {
width: 100px;
height: 100px;
}
#rotate-corona-text {
img {
animation: rot-corona 3s linear infinite;
}
}
}
<section id="main-header" class="py-4">
<div class="container py-4">
<div class="row border py-4 align-items-center justify-content-between">
<div class="col-12 col-md-4 order-2 order-lg-1 " id="unity-images">
</div>
<div class="col-12 col-md-7 order-1 order-lg-2" id="rotate-corona-text">
<h1 class="text-primary">lets stay safe and fight against cor<span id="rotate-cororna"><img src="./assets/corona-icon.jpg" alt=""></span>na </h1>
</div>
</div>
</div>
</section>
and for the image which I want to rotate is https://ibb.co/qFSqkyq
SCSS compiles to this:
#rotate-corona-text h1 {
font-size: 3rem;
}
#rotate-corona-text img {
width: 100px;
height: 100px;
}
#rotate-corona-text #rotate-corona-text img {
animation: rot-corona 3s linear infinite;
}
Note that the 3rd statement has a multiple ID selector that does not select the node required.
You are missing #keyframes to define the animation that you have declared for the img.
Output:
#rotate-corona-text h1 {
font-size: 3rem;
}
#rotate-corona-text img {
width: 100px;
height: 100px;
}
#rotate-corona-text img {
animation: rot-corona 6s infinite; /* 6s because 50% is completed at 3s. */
}
#keyframes rot-corona {
0% {
transform: rotate(0);
}
50% {
transform: rotate(360deg); /* CSS does not offer animation-delay between iterations. This is a hack */
}
100% {
transform: rotate(360deg);
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<section id="main-header" class="py-4">
<div class="container py-4">
<div class="row border py-4 align-items-center justify-content-between">
<div class="col-12 col-md-4 order-2 order-lg-1 " id="unity-images">
</div>
<div class="col-12 col-md-7 order-1 order-lg-2" id="rotate-corona-text">
<h1 class="text-primary">Lets stay safe and fight against Cor<span id="rotate-cororna"><!-- Transparent background for you --><img src="https://i.stack.imgur.com/9Wifk.png" alt=""></span>na </h1>
</div>
</div>
</div>
</section>
I'm trying to have an image zoom. I have it working but ran into a strange situation I can't explain. In trying to cut down the amount of div, etc elements I created two sections below one use a carousel the other just plain div.
In the first section.. The image stay within it boundary and zoom in nicely..Great!!!
In the second section the image expands out side of it boundary..
It seem using the carousel keeps the image in bound.
<div class="w3-container w3-padding-10" >
<div class="w3-row">
<div class="container" style="background-color:black; width:100%; margin:0">
<div class="carousel slide" data-ride="carousel" style="background-color:black; width:100%; margin:0">
<div class="carousel-inner">
<div class="item active">
<img class="imgx" src="w3images/img1.jpg" style="width:100%;">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Section 2 -->
<section style="background-color:red; no-repeat;background-size: cover;">
<div class="w3-container w3-padding-10" >
<div class="w3-row">
<div >
<img class="imgx" src="w3images/img1.jpg" style="width:100%;">
</div>
</div>
</div>
</section>
stylesheets;
<style>
/* Chrome, Safari, Opera */
#-webkit-keyframes zoom {
from
{
-webkit-transform: scale(1,1);
}
to
{
-webkit-transform: scale(1.5,1.5);
}
}
/* Standard syntax */
#keyframes zoom {
from
{
transform: scale(1,1);
}
to
{
transform: scale(1.5,1.5);
}
}
.imgx {
-webkit-animation: zoom 10s;
-webkit-animation-fill-mode: forwards;
animation: zoom 30s;
animation-fill-mode: forwards;
}
</style>
Any ideas
You need to set a fix width to your parent divs when the image zoom it:
.carousel-inner .item{
width:100px;
height:100px;
overflow:hidden;
}
.w3-row>div{
width:100px;
height:100px;
overflow:hidden;
}
.big-container {
width: 500px;
}
.carousel-inner .item{
width:100px;
height:100px;
overflow:hidden;
}
.w3-row>div{
width:100px;
height:100px;
overflow:hidden;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes zoom {
from {
-webkit-transform: scale(1, 1);
}
to {
-webkit-transform: scale(2.5, 2.5);
}
}
/* Standard syntax */
#keyframes zoom {
from {
transform: scale(1, 1);
}
to {
transform: scale(2.5, 2.5);
}
}
.imgx {
-webkit-animation: zoom 10s;
-webkit-animation-fill-mode: forwards;
animation: zoom 30s;
animation-fill-mode: forwards;
}
<div class="big-container">
<div class="w3-container w3-padding-10">
<div class="w3-row">
<div class="container" style="background-color:black; width:100%; margin:0">
<div class="carousel slide" data-ride="carousel" style="background-color:black; width:100%; margin:0">
<div class="carousel-inner">
<div class="item active">
<img class="imgx" src="https://dummyimage.com/100x100/ed5fed/ffffff" style="width:100%;">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Section 2 -->
<section style="background-color:red; no-repeat;background-size: cover;">
<div class="w3-container w3-padding-10">
<div class="w3-row">
<div>
<img class="imgx" src="https://dummyimage.com/100x100/ed5fed/ffffff" style="width:100%;">
</div>
</div>
</div>
</section>
<div>
$(document).ready(function()
{
$("[name='oimg']").mousemove(function(e)
{
$(".image").css({
display:'block',
left: e.pageX + 5,
top: e.pageY + 5
});
var src = $(this).attr("src");
$(".image").attr("src",src);
});
$("[name='oimg']").mouseout(function(e)
{
$(".image").css("display","none");
});
});
.image
{
display:none;
position: absolute;
width: 20%;
height: 50%;
border-style:solid;
border-color:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="" class="image">
<div>
<img name="oimg" src="https://www.microsoft.com/en-us/CMSImages/WindowsHello_Poster_1920-1600x300-hello.png?version=0d8f51c7-ef87-b0af-8f26-453fb40b4b7d" style="width:100px; background-color:#960;padding:20px;">
<img name="oimg" src="https://static1.squarespace.com/static/528fc8ffe4b070ad8ee97493/t/558c019ae4b08aeb04726a36/1435238813669/Ladybug+Saying+Hello%21" style="width:100px; background-color:#39F; padding:20px;">
</div>
is this what u want ?
I have list of different services provided, each service has an image, heading, and description. I've set it up so that image scales to 1.3x size on mouse hover. The scaling works, but it ignores the parent's borders when doing so.
I've captured a GIF of what it looks like in action.
Here is the code I'm working with.
.cleaningservices {
max-width: 250px;
max-height: 250px;
}
/* Default state of the image */
.hover01 img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
/* Scale the image to 1.3 it's size on mouse hover */
.hover01:hover img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="cleaningservices">
<div class="col-sm-6 col-md-4">
<div class="thumbnail hover01">
<img src="https://bosworthco.com/wp-content/uploads/2016/10/cleaning-268134_960_720.jpg" alt="deep house cleaning">
<div class="caption">
<h3>Deep Cleaning</h3>
<p>Usually, on our first visit we will most likely have to complete a deep cleaning. It is a far more intensive cleaning that our regular cleaning. After first deep cleaning we will continue with one of our regularly scheduled cleanings below.</p>
</div>
</div>
</div>
</div>
</div>
What changes do I have to make to make the images scale inside the parent's borders on mouse hover?
you could add the image to a div and give the div overflow:hidden;
.hover01 img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
width:100%;
}
.hover01:hover img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.img-parent{
overflow:hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="cleaningservices">
<div class="col-sm-6 col-md-4">
<div class="thumbnail hover01">
<div class="img-parent">
<img src="http://fiusms.fiu.edu/wp-content/uploads/Residential-Cleaning-Watauga-TX.jpg" alt="deep house cleaning">
</div>
<div class="caption">
<h3>Deep Cleaning</h3>
<p>Usually, on our first visit we will most likely have to complete a deep cleaning. It is a far more intensive cleaning that our regular cleaning. After first deep cleaning we will continue with one of our regularly scheduled cleanings below.</p>
</div>
</div>
</div>
</div>
</div>
just use overflow: hidden;
.hover01 img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
overflow: hidden;
}
Create an img container on which you set overflow: hidden;. I added a background-color on body so you see it works.
body {
background-color: #f0f0f0 !important;
padding: 50px;
}
.noverflow {
overflow: hidden;
}
.thumbnail {
background-color: #fff;
}
.hover01 img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover01:hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="cleaningservices">
<div class="col-sm-6 col-md-4">
<div class="thumbnail hover01">
<div class="noverflow"><img src="http://fiusms.fiu.edu/wp-content/uploads/Residential-Cleaning-Watauga-TX.jpg" alt="deep house cleaning"></div>
<div class="caption">
<h3>Deep Cleaning</h3>
<p>Usually, on our first visit we will most likely have to complete a deep cleaning. It is a far more intensive cleaning that our regular cleaning. After first deep cleaning we will continue with one of our regularly scheduled cleanings below.</p>
</div>
</div>
</div>
</div>
</div>
Is there any way of stopping animation with :hover and make it run again once hovered off?
This part is solved:
I thought of doing it with animation-state-paused, but as the animation runs on multiple elements with precised animation-delay, such solution desynchronizes elements.
What I would like to achieve 'at least' is to stop all of the animation once hovered.
Still looking for solution for this part:
And the Great Achievement would be (additionaly) to change z-index so the hovered picture goes in front of all the other ones... and come backs to its z-index from animation once hovered off + animation continues the cycle.
Important thing - NO JAVASCRIPT (I'd really like to use it, but I cannot because of some CMS settings).
Code without hover: CODEPEN and SOSnippet:
.cube2>div{
position:absolute;
left:50%;
transform: translateX(-50%);
width:450px;
}
.playground2 {
overflow: hidden;
}
.frame {
position: absolute;
top:-12px;
left:-1px;
z-index: 1;}
.one, .two, .three, .four, .five, .six, .seven, .eight{
animation: comedown 32s infinite ease-in-out
}
.eight {
animation-delay: 0s
}
.seven {
animation-delay: 4s
}
.six {
animation-delay: 8s
}
.five {
animation-delay: 12s
}
.four {
animation-delay: 16s
}
.three {
animation-delay: 20s
}
.two {
animation-delay: 24s
}
.one {
animation-delay: 28s;
}
.container {
background: darkkhaki;
height: 400px;
position: relative;
}
.cube2 {
top: 100px;
height: 300px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
#-webkit-keyframes comedown {
0% {
top: 0%;
z-index: 1;
}
12.5% {
top: 120%;
z-index: 2;
left:50%;
transform:translateX(-50%);
}
13%{z-index:-15}
25%{
top:-50px;
transform: translateX(-32%)
}
35%{z-index:-10}
37.5%{
top:-42px;
transform: translateX(-35%);
}
50%{
top:-36px;
transform: translateX(-38%);
z-index:-6;
}
62.5%{
top:-28px;
transform: translateX(-41%);
z-index:-5;
}
75%{
top:-20px;
transform: translateX(-44%);
z-index:-4;
}
87.5%{
top:-12px;
transform: translateX(-47%);
z-index:-3;
}
100%{
top:0px;
left:50%;
transform:translateX(-50%);
z-index:-2;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="playground2 container">
<div class="cube2">
<div class="one">
<img class="face" src="https://s17.postimg.org/71iegzebj/img_little.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="two">
<img class="face" src="https://s17.postimg.org/duncqzuin/img_little3.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="three">
<img class="face" src="https://s17.postimg.org/o3b8j2t6n/img_little2.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="four">
<img class="face" src="https://s17.postimg.org/v97kz9rnj/img_little4.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="five">
<img class="face" src="https://s16.postimg.org/4reke4owl/image.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="six">
<img class="face" src="https://s16.postimg.org/3qebp07x1/image.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="seven">
<img class="face" src="https://s16.postimg.org/fgs96e0ph/image.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="eight">
<img class="face" src="https://s16.postimg.org/xxmnx7gnp/image.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
</div>
</div>
The trick is to catch :hover on .cube2.
This will pause the animation:
.cube2:hover > div{
-webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
animation-play-state: paused;
}
To bring image box to front using z-index, use this:
.cube2 > div:hover{
z-index: 99 !important;
}
.cube2:hover > div.one, .cube2:hover >.two, .cube2:hover >.three, .cube2:hover >.four, .cube2:hover >.five,.cube2:hover > .six, .cube2:hover >.seven, .cube2:hover >.eight{
animation-play-state: paused;
}
This way all animation is stopped since you call hover on .cube2
See:
https://jsfiddle.net/duuhr712/