I'm trying to zoom in and zoom out animation using css for preloader but unable to get the desired result
#preloader{
background: black;
background-repeat:no-repeat;
background-size: cover;
background-position:center;
width:100%;
height:100%;
z-index:20;
opacity:1;
position:fixed;
}
#preloader>section{
position:absolute;
height:250px;
width:300px;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:url('/img/cropped-Dark-roads-no-more-300x151-removebg-preview.png');
background-repeat: no-repeat;
background-position: center;
}
.preloader-img{
animation:zoomlight 1s ease-in-out infinite;
}
#keyframes zoomlight{
0%{
opacity:0.3;
}
50%{
opacity:1;
filter:drop-shadow(1em 1em 2em white)
}
100%{
}
}
to get a zoom in effect in preloader usuing transform:scale but the effect is not working
Related
In this code when, when rotating along top left point , the bar sways a lil bit down , while rotating
have seen this multiple time , sometimes it gets fixed , but i cannot spot the diff.
#keyframes rightup{
100%{
transition:transform 1s linear;
transform-origin:top left;
transform:rotate(-50deg);
}
}
.box{
position:absolute;
height:10px;
width:150px;
background-color:black;
top:50%;
left:50%;
border-radius:5px;
animation-name:rightup;
animation-duration:5s;
}
<div class="box"></div>
wanted something like this
.box{
position:absolute;
height:10px;
width:150px;
background-color:black;
top:50%;
left:50%;
border-radius:5px;
animation-name:rightup;
animation-duration:5s;
}
.box:hover{
transition:transform 1s linear;
transform-origin:top left;
transform:rotate(-50deg);
}
<div class="box"></div>
In the animation you aren't setting the transform-origin to the left top right from the start, but you are doing so in the transition/transform example.
Also, a minor point for such a slim bar but it makes a slight difference, you are rotating about the top of the bar rather than the (vertical) center.
This snippet changes both these things:
#keyframes rightup {
0% {
transform-origin: center left;
}
100% {
transform-origin: center left;
transform: rotate(-50deg);
}
}
.box {
position: absolute;
height: 10px;
width: 150px;
background-color: black;
top: 50%;
left: 50%;
border-radius: 5px;
animation-name: rightup;
animation-duration: 5s;
}
<div class="box"></div>
I have sample code on codepen here
.liel{
position: relative;
}
.parent{
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color: rgba(0, 0, 0, .8);
z-index:100;
}
.green{
width:100px;
height:100px;
background-color:green;
}
#keyframes zoomIn {
0%{
top:0;
left:0;
width:100px;
height:100px;
opacity: 0;
}
100%{
opacity: 1;
}
}
.zoom{
width:200px;
height:200px;
background-color:red;
position: fixed;
top:50%;
left:50%;
transform: translate(-50%, -50%);
animation: zoomIn 5s;
}
<ul>
<li class="liel">
<div class="green"></div>
<div class="parent">
<div class="zoom"></div>
</div>
</li>
</ul>
There are 2 rectangles - one red and one green.
Green can be anywhere on the screen.
What I'm trying to create is zoom-in animation from position of green rectangle to the final position of red rectangle. I'm trying somehow to get starting position relative to green rectangle, but cannot do it since .parent element is also fixed in position.
Currently red element has zoom-in effect but initial position is left:0 top:0 which is position of .parent and not .green.
Is there any workaround for this?
May be this can help you. (Read this other stackoverflow answer)
$(document).ready(function() {
setTimeout( function(){
$('.green').addClass('fixed');
},1000);
$('.green').css('position','fixed');
});
.liel{
position: relative;
}
.parent{
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color: rgba(0, 0, 0, .2);
z-index:100;
pointer-events: none;
}
.green {
width:100px;
height:100px;
background-color:green;
transition: all 5s ease-in-out;
}
.zoom{
width:200px;
height:200px;
background-color:red;
position: fixed;
top:50%;
left:50%;
transform: translate(-50%, -50%);
animation: zoomIn 5s;
}
.fixed {
animation: zoomIn 5s;
transform: translate(-50%, -50%);
width:200px;
height:200px;
top:50%;
left:50%;
}
#keyframes zoomIn {
0%{
top:0;
left:0;
width:100px;
height:100px;
opacity: 0;
}
100%{
opacity: .5;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="liel">
<div class="green"></div>
<div class="parent">
<div class="zoom"></div>
</div>
</li>
</ul>
When testing my landing page on mobile view, there are weird spaces on each side of the image that allows the user to scroll and see white space. How can this be fixed? I just want it to collapse and look nice as one image with text on it on mobile view. Thanks. I want it to look like this tutorial But I keep getting white space on the sides.
*{
margin:0;
padding:0;
}
.fade-in{
animation: animationFrames ease 1s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards; /*when the spec is finished*/
-webkit-animation: animationFrames ease 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-moz-animation: animationFrames ease 1s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards; /*FF 5+*/
-o-animation: animationFrames ease 1s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards; /*Not implemented yet*/
-ms-animation: animationFrames ease 1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards; /*IE 10+*/
}
#keyframes animationFrames{
0% {
opacity:0;
transform: translate(0px,-25px) ;
}
100% {
opacity:1;
transform: translate(0px,0px) ;
}
}
#-moz-keyframes animationFrames{
0% {
opacity:0;
-moz-transform: translate(0px,-25px) ;
}
100% {
opacity:1;
-moz-transform: translate(0px,0px) ;
}
}
#-webkit-keyframes animationFrames {
0% {
opacity:0;
-webkit-transform: translate(0px,-25px) ;
}
100% {
opacity:1;
-webkit-transform: translate(0px,0px) ;
}
}
#-o-keyframes animationFrames {
0% {
opacity:0;
-o-transform: translate(0px,-25px) ;
}
100% {
opacity:1;
-o-transform: translate(0px,0px) ;
}
}
#-ms-keyframes animationFrames {
0% {
opacity:0;
-ms-transform: translate(0px,-25px) ;
}
100% {
opacity:1;
-ms-transform: translate(0px,0px) ;
}
}
#showcase{
background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8Ilf-i2TXplUrTBJ-ugwuyd8X8mxhgMD44UQOvcawkbXx2IzNKBLWVrLA');
background-size:cover;
background-position:center;
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding: 0 20px;
}
#showcase h1{
font-size:50px;
line-height:1.2;
color:#fff;
font-family: montserrat;
letter-spacing: 10px;
}
#showcase h2{
font-size:25px;
line-height:1.2;
color:#fff;
font-family: montserrat;
}
#showcase .button{
font-size:18px;
text-decoration:none;
color:darkgreen;
padding: 10px 20px;
border-radius:10px;
margin-top:20px
}
#showcase .button:hover{
background-color: darkgreen;
color:#fff;
}
#logo {
z-index: 1;
position: absolute;
float: left;
height: 30px;
padding: 7px;
}/*effects the post logo in the top left of the page*/
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<div class="wrapper fade-in">
<header id="showcase">
<h1>TITLE HERE</h1>
<h2>2017</h2>
<i class="fa fa-angle-double-right" style="font-size:36px"></i>
</header>
</div>
</div>
</body>
This is my landing page header css for background and haven't had any issues with it on mobile or desktop:
header {
position: relative;
width: 100%;
overflow-y: hidden;
/* fallback for old browsers */
background-image: url("../img/sample.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: 50% 0;
}
Hope this helps.
I have a webpage where I am trying to animate a picture of a mouse hovering over the page and moving around. But I cant get the stupid thing to work, and it doesnt seem to be throwing up any immediate errors.
code here:
Can someone point me in the right direction? What is wrong with this css? Why isnt it animating the image?
Your code does not specify any dimensions for the div so it has no size for the background to show through.
Also, you do not need to repeat the background-image declaration on every line of the keyframe definition.
div {
background-image: url('http://nanocluster.umeche.maine.edu/mouse.png');
position: relative;
-webkit-animation: myfirst 5s;
/* Chrome, Safari, Opera */
animation: myfirst 5s;
height: 20px;
width: 20px;
background-repeat: no-repeat;
}
#keyframes myfirst {
0% {
left:0px;
top:0px;
}
25% {
left:200px;
top:0px;
}
50% {
left:200px;
top:200px;
}
75% {
left:0px;
top:200px;
}
100% {
left:0px;
top:0px;
}
}
#-webkit-keyframes myfirst {
0% {
left:0px;
top:0px;
}
25% {
left:200px;
top:0px;
}
50% {
left:200px;
top:200px;
}
75% {
left:0px;
top:200px;
}
100% {
left:0px;
top:0px;
}
}
<div></div>
I want to zoom in onto the pencil when hovered over the image.
HTML:
<div>
</div>
CSS:
div {
width: 400px;
height: 267px;
border: 1px solid black;
background-image: url('http://i.imgur.com/n9q7jhm.jpg');
background-size: 400px 267px;
transition: all 1s ease;
}
div:hover{
background-size: 500px 333px;
background-position: -60px -60px;
}
JSFiddle: http://jsfiddle.net/AX59Y/
My naive attempt was to increase the size and change the position of the image, however as you can see from the jsfiddle, the transition is very jagged as it tries to accomplish both transitions at the same time.
Is there a better way?
Take the answer from SW4 and change the left and top changes for a transform origin
#image {
background-image: url('http://i.imgur.com/n9q7jhm.jpg');
background-size: 400px 267px;
background-position:center;
transition: all 1s ease;
width:100%;
height:100%;
transform: scale(1);
position:relative;
left:0;
top:0;
-webkit-transform-origin: 75% 75%;
transform-origin: 75% 75%;
}
#wrapper:hover #image {
-webkit-transform: scale(2);
transform: scale(2);
}
The 75% 75% is more or less the position of the pencil , but you can set it to whatever you want.
fiddle
You can use the transition to scale up and reposition the image on hover, in order to do this you'll need to wrap the image div within a parent with overflow hidden.
Demo Fiddle
HTML
<div id='wrapper'>
<div id='image'></div>
</div>
CSS
#wrapper {
width: 400px;
height: 267px;
border: 1px solid black;
overflow:hidden;
position:relative;
}
#image {
background-image: url('http://i.imgur.com/n9q7jhm.jpg');
background-size: 400px 267px;
background-position:center;
transition: all 1s ease;
width:100%;
height:100%;
transform: scale(1);
position:relative;
left:0;
top:0;
}
#wrapper:hover #image {
transform: scale(2);
-webkit-transform: scale(2);
left:-150px;
top:-100px;
}
If you change your transition to linear it looks much less 'jagged'.
transition: all 1s linear;
Not sure if this is the behaviour that you want.