How can one animate position using CSS -webkit-animation - javascript

I want to make an image go from poitn a to point b. I can animate the blur, and scale smoothly but the position is not working. It doesn't flow as it should. I have tried it with translatex and translate y and it doesn't seem to respond. Can someone please give me a hand. Here is my code.
body {overflow:hidden;
margin: 0;}
#bird {position: relative;
-webkit-animation: birdfly 5s linear infinite;
animation: birdfly 5s linear infinite;
}
#-webkit-keyframes birdfly {
0% {
-webkit-filter: blur(15px);
-webkit-transform: scale(0.7, 0.7);
left:110px; top:200px;
}
}
100% {
-webkit-filter: blur(0px);
-webkit-transform: scale(1.8, 1.8);
left:400px; top:600px;
}
}
#keyframes birdfly {
0% {
-webkit-filter: blur(15px);
-webkit-transform: scale(0.7, 0.7);
left:110px; top:200px;
}
}
100% {
-webkit-filter: blur(0px);
-webkit-transform: scale(1.8, 1.8);
left:400px; top:600px;
}
}
<html>
<head>
<title>Animated image</title>
<meta charset="utf-8">
</head>
<body>
<div id="bird">
<img src="http://i556.photobucket.com/albums/ss3/t_wangrung/Bird/ibon.gif">
</div>
</body>
</html>

I edited your source.
body {overflow:hidden;
margin: 0;}
#bird {position: relative;
-webkit-animation: birdfly 5s linear infinite;
animation: birdfly 5s linear infinite;
}
#-webkit-keyframes birdfly {
0% {
-webkit-filter: blur(15px);
-webkit-transform: scale(0.7, 0.7);
-webkit-transform: translate(110px, 200px);
transform: translate(110px, 200px);
}
}
100% {
-webkit-filter: blur(0px);
-webkit-transform: scale(1.8, 1.8);
-webkit-transform: translate(400px, 600px);
transform: translate(400px, 600px);
}
}
#keyframes birdfly {
0% {
-webkit-filter: blur(15px);
-webkit-transform: scale(0.7, 0.7);
-webkit-transform: translate(110px, 200px);
transform: translate(110px, 200px);
}
}
100% {
-webkit-filter: blur(0px);
-webkit-transform: scale(1.8, 1.8);
-webkit-transform: translate(400px, 600px);
transform: translate(400px, 600px);
}
}
<html>
<head>
<title>Animated image</title>
<meta charset="utf-8">
</head>
<body>
<div id="bird">
<img src="http://i556.photobucket.com/albums/ss3/t_wangrung/Bird/ibon.gif">
</div>
</body>
</html>
You need to use the -webkit-transform: translate(translateX, translateY) property.

If you're up for using jQuery, you can do it like this:
$("img").animate({
left: newXValue,
top: newYValue
});
For more details see: http://api.jquery.com/animate/

Related

CSS Hover Effect on 2 Overlapping Images Simultaneously

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>

Image Preloader with CSS Colour not displaying

I'm trying to add preloader to wordpress website using divi attached. However, I'm having problems getting the preloader to even display.
This is the '.gif' I'm using, and ideally I'd like it to be a white background with gold type colour '#A7784A' as the loader. Thus, I'm trying to apply that with CSS.
I think the error is coming from CSS but not 100% sure. Any advice would be much appreciated. Thanks
HTML Code at Body
jQuery(window).load(function() {
if (jQuery('.et-bfb').length <= 0 && jQuery('.et-fb').length <= 0) {
jQuery('.loader').delay(1000).fadeOut("slow");
jQuery('.overlay-loader').delay(1000).fadeOut("slow");
} else {
jQuery(".overlay-loader").css('display', 'none');
}
})
.overlay-loader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ffffff;
opacity: 1;
z-index: 999999;
height: 100%;
width: 100%;
overflow: hidden !important;
margin: auto;
}
.loader {
position: absolute;
left: 50%;
top: 40%;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
background-size: cover;
width: 75px !important;
height: 75px !important;
margin: 0px 0 0 -30px;
}
.cssload-loader {
position: relative;
left: calc(50% - 60px);
width: 120px;
height: 120px;
background-image: url(assests/dp-loader8.gif);
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
perspective: 1200px
}
.cssload-inner {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%
}
.cssload-inner.cssload-one {
left: 0;
top: 0;
animation: cssload-rotate-one .85s linear infinite;
-o-animation: cssload-rotate-one .85s linear infinite;
-ms-animation: cssload-rotate-one .85s linear infinite;
-webkit-animation: cssload-rotate-one .85s linear infinite;
-moz-animation: cssload-rotate-one .85s linear infinite;
border-bottom: 5px solid #A7784A;
}
.cssload-inner.cssload-two {
right: 0;
top: 0;
animation: cssload-rotate-two .85s linear infinite;
-o-animation: cssload-rotate-two .85s linear infinite;
-ms-animation: cssload-rotate-two .85s linear infinite;
-webkit-animation: cssload-rotate-two .85s linear infinite;
-moz-animation: cssload-rotate-two .85s linear infinite;
border-right: 5px solid #A7784A;
}
.cssload-inner.cssload-three {
right: 0;
bottom: 0;
animation: cssload-rotate-three .85s linear infinite;
-o-animation: cssload-rotate-three .85s linear infinite;
-ms-animation: cssload-rotate-three .85s linear infinite;
-webkit-animation: cssload-rotate-three .85s linear infinite;
-moz-animation: cssload-rotate-three .85s linear infinite;
border-top: 5px solid #A7784A;
}
#keyframes cssload-rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0)
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
}
}
#-o-keyframes cssload-rotate-one {
0% {
-o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0)
}
100% {
-o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
}
}
#-ms-keyframes cssload-rotate-one {
0% {
-ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0)
}
100% {
-ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
}
}
#-webkit-keyframes cssload-rotate-one {
0% {
-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0)
}
100% {
-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
}
}
#-moz-keyframes cssload-rotate-one {
0% {
-moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0)
}
100% {
-moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
}
}
#keyframes cssload-rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0)
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
}
}
#-o-keyframes cssload-rotate-two {
0% {
-o-transform: rotateX(50deg) rotateY(10deg) rotateZ(0)
}
100% {
-o-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
}
}
#-ms-keyframes cssload-rotate-two {
0% {
-ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(0)
}
100% {
-ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
}
}
#-webkit-keyframes cssload-rotate-two {
0% {
-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0)
}
100% {
-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
}
}
#-moz-keyframes cssload-rotate-two {
0% {
-moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(0)
}
100% {
-moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
}
}
#keyframes cssload-rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0)
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
}
}
#-o-keyframes cssload-rotate-three {
0% {
-o-transform: rotateX(35deg) rotateY(55deg) rotateZ(0)
}
100% {
-o-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
}
}
#-ms-keyframes cssload-rotate-three {
0% {
-ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(0)
}
100% {
-ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
}
}
#-webkit-keyframes cssload-rotate-three {
0% {
-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0)
}
100% {
-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
}
}
#-moz-keyframes cssload-rotate-three {
0% {
-moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(0)
}
100% {
-moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="overlay-loader">
<div class="loader">
<div class="cssload-loader">
<div class="cssload-inner cssload-one"></div>
<div class="cssload-inner cssload-two"></div>
<div class="cssload-inner cssload-three"></div>
</div>
</div>
</div>

How to add scroll class to element and remove it when done

Am trying to add a scrolling class to a text every 1 minute once the text finished scrolling i will remove the class and wait for the next 1 minute. Please can anyone help me out on this below is my sample code but it doesn't work as expected.
$(function(event){
$infoLongMessage = $("#infoLongMessage");
var wait = 60000;
var timer = ($infoLongMessage.text().length + wait);
setInterval(function(){
$infoLongMessage.toggleClass("scroll-left");
}, timer);
})
.content{
background-color: #000;
color: #fff;
padding: 6px 10px;
overflow: hidden;
}
#infoLongMessage{
overflow: hidden;
white-space: pre;
display:block;
}
.scroll-left{
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: scrollleft 15s linear infinite;
-webkit-animation: scrollleft 15s linear infinite;
animation: scrollleft 15s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes scrollleft {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
#-webkit-keyframes scrollleft {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#keyframes scrollleft {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<span id="infoLongMessage" class="scroll-left">Browser sources let you display a webpage from the internet or a local file and are commonly used for widgets and alerts</span>
</div>
You don't need any js to achieve your idea. You need a ticker. Also you can put delay to your animation if you need.
#-webkit-keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
#keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.ticker-wrap {
position: fixed;
top: 0;
width: 100%;
overflow: hidden;
background-color: #9a1f1f;
color: #fff;
padding: 6px 10px;
padding-left: 100%;
box-sizing: content-box;
}
.ticker-wrap .ticker {
display: inline-block;
height: 2rem;
line-height: 2rem;
white-space: nowrap;
padding-right: 100%;
box-sizing: content-box;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: ticker;
animation-name: ticker;
-webkit-animation-duration: 30s;
animation-duration: 30s;
}
.ticker-wrap .ticker__item {
display: inline-block;
padding: 0 1rem;
font-size: 1rem;
color: white;
}
<div class="ticker-wrap">
<div class="ticker">
<div class="ticker__item">Hi Lea!</div>
<div class="ticker__item">Look at them !!!</div>
<div class="ticker__item">Owww new items...</div>
<div class="ticker__item">
offers | save up to 50% — shop now
</div>
</div>
</div>

How to make preload animation disappear in 3s in Javascript

I have this preload animation that I want to incorporate into my website. All I want to do is play the animation for 3 seconds upon the page loading and then make it fade out. I've already successfully made it fade out by assigning transition property to CSS. All I need is the piece of code that delays it for 3s. I know it's something to do with the setTimeout() method but I think I'm not using it right.
This is what I've got so far:
<div class="spinner-wrapper" id="fds">
<div class="spinner"></div>
</div>
<script>
var preloader = document.getElementById("fds");
function fadeOut() {
preloader.style.opacity = "0.0";
setTimeout(fadeOut(), 5000);
}
</script>
I know the CSS is somewhat irrelevant but anyway, here it is:
.spinner-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ff6347;
z-index: 999999;
transition: 2s;
}
.spinner {
width: 40px;
height: 40px;
background-color: #333;
position: absolute;
top: 48%;
left: 48%;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
#-webkit-keyframes sk-rotateplane {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
#keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
All I need is the piece of code that delays it for 3s
Set animation-delay to 3s at CSS

How can I trigger a CSS hover from another Div (with complicated attributes)

I'm new to this and hope I'm asking politely/correctly?!
(I have included the code I have so far below.)
I am trying to apply the hover of the '#blueBar' by hovering over the '#spiral' div.
I've tried using CSS, JQuery and Javascript for some time, but to no avail.
The end result is I'd like to have 2 'blueBars' crossing each other behind the Badge.png.
Upon hovering over the 'spiral' I'd like the badge to spin and the 2 'blueBars' increase in scale protruding from behind the badge.png.
Many thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!doctype HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#spiral{
border-radius: 50%;
background-image: url(badge.png);
position: absolute;
top: 50%;
left: 50%;
width: 350px;
height: 350px;
transition:all 1s ease-out;
transform:rotate(0deg) infinite;
-webkit-transform:rotate(0deg) infinite;
-moz-animation: rotate(0deg) infinite;
-ms-animation: rotate(0deg) infinite;
-o-animation: rotate(0deg) infinite;
animation: rotate(0deg) infinite;/* Safari and Chrome */
}
#spiral:hover, #blueBar.hovered {
display: block;
width:350px;
height:350px;
border-radius: 50%;
background-image: url(badge.png);
-webkit-animation: spin 1s linear infinite;
-moz-animation: spin 1s linear infinite;
-ms-animation: spin 1s linear infinite;
-o-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#-ms-keyframes spin {
0% {-ms-transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); }
}
#-moz-keyframes spin {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); }
}
#-o-keyframes spin {
0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); }
}
#blueBar {
width: 28px;
height: 28px;
background: #25cadb;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#blueBar:hover, .blueBar.hover{
width: 28px;
height: 28px;
background: #25cadb;
-moz-transform: rotate(45deg) scale(1, 10);
-webkit-transform: rotate(45deg) scale(1, 10);
-ms-transform: rotate(45deg) scale(1, 10);
-o-transform: rotate(45deg) scale(1, 10);
transform: rotate(45deg) scale(1, 10);
}
</style>
<meta HTTP-equiv="Content-Type" content="text/HTML; char-set=UTF-8">
<title>Animated Features</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="almost.ico" type="image/x-icon">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix" style="font-family: Georgia, Times, serif">
<center>
<div style="height: 350px"> </div>
<script>
$('#spiral').on('mouseenter mouseleave', function(e) {
$('#blueBar:hover').trigger(e.type);
})
</script>
<div width="800px">
<div id="spiral">
<div id="spiral1">
</div>
</div>
<div id="blueBar" > </div>
</div>
</center>
</body>
</html>
You can use the sibling selector.
#spiral:hover ~ #blueBar {
background: red;
}
#blueBar will become red when #spiral is hovered over.
You can see an example on JSFiddle here. Hover over the "spiral" div and notice that the "blue bar" div becomes red.
If the elements won't always be siblings as in James Monger's answer, you could transfer the CSS in your #blueBar:hover to a class called .hover. Then, in your JQuery you'd write:
$('#spiral').on('mouseenter mouseout', function(){
$('#blueBar').toggleClass('hover');
});
Fiddle: https://jsfiddle.net/xk9ckcrk/2/
I modified the CSS a bit to show more easily what's going on. You should be able to add whatever animations and transformations you want to the .hover class and have it work.

Categories