I am trying to animate an object in second page from one position to another using the below code.
#myimg2{
position: absolute;
-webkit-animation: myfirst2 3s none; /* Chrome, Safari, Opera */
-webkit-animation-direction: top; /* Chrome, Safari, Opera */
animation: myfirst2 3s none;
}
#-webkit-keyframes myfirst2 {
0% { left: 10%; top: 1325px;}
100% { left: 10%; top: 1285px;}
}
Here, I have hardcoded top and it is working perfectly fine.
I can extract the height of the screen using
var hgt = $('#img1').height();
Can anyone suggest how i can set this var+40 as top for 100 percent animation and var for 0 percent animation rather than hardcoding with 1325 and 1285 respectively
Related
I've got an animation that just moves from top to the bottom.
0 - top
25 - middle
50 - bottom
75 - middle
100 - top
I've made it endless using javascript but every time it stops and starts again it blinks (disappears and appears for 1 second).
Is there a way to make this action smooth without blinking at start?
Without seeing your code it's difficult to know, but I'd imagine it may have something to do with the way you've set up your #keyframes. For an infinite looping animation with no glitch, try something like this:
HTML:
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 2s infinite; /* Safari 4.0 - 8.0 */
animation: mymove 2s infinite;
}
CSS:
/* Safari 4.0 - 8.0 */
#-webkit-keyframes mymove {
0% {top: 0px;}
50% {top: 100px;}
100% {top: 0px;}
}
/* Standard syntax */
#keyframes mymove {
0% {top: 0px;}
50% {top: 100px;}
100% {top: 0px;}
}
Hope this helps 👍
Basing on some examples I have found here on SO I tried to mash up two effects: smooth background change within the slow zooming in animation. The thing is once the zooming animation starts from the scale of 1.0 to 1.{whatever} it grows outside the div's boundary whereas I want to keep fixed div's dimensions. Please note that background-size:cover; is laced in the code and it works fine only for the initial scale.
You can find example I am struggling with here : http://mattosuch.eu/test.html
Thanks
You could create an outer div to each div elements that scaling and give CSS to newly created div like this.
div.outer{
height: 200px; /*Equal to real height of your inner div with `transform:scale(1,1)`*/
width: 200px; /*Equal to real width of your inner div with `transform:scale(1,1)`*/
overflow: hidden;
}
You may use only CSS, animation and pseudo-elements to fake background-animation about the fading effect :
Here is an example with 3 image used as backgrounds fading and zooming after each others.
div {
margin: 1em;
box-shadow: 0 0 5px;
width: 200px;
height: 200px;
background: url(http://seraphe.nazwa.pl/docs/photojoy/wp-content/uploads/2017/07/Lucy6-scaled.jpg) center;
background-size: auto 100%;
position: relative;
overflow: hidden;
animation: scale 12s infinite;
position: relative;
}
div:before,
div:after {
content: '';
background: url(http://seraphe.nazwa.pl/docs/photojoy/wp-content/uploads/2017/07/Zosia-8-scaled.jpg) center;
background-size: auto 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
animation: scale 12s -6s infinite, hide 12s -6s infinite;
z-index: 2;
opacity: 0;
}
div:after {
background: url(http://seraphe.nazwa.pl/docs/photojoy/wp-content/uploads/2017/07/Nadia1-scaled.jpg)center;
background-size: auto 100%;
animation: scale 12s 6s infinite, hide 12s 6s infinite;
}
#keyframes scale {
80% {
background-size: auto 200%;
}
}
#keyframes hide {
50% {
opacity: 1;
}
from,
to {
z-index: 1;
}
}
<div>
<!-- empty div to show fading backgrounds. Without CSS or a screen reader it is empty -->
</div>
1 element (+ 2pseudos elements) gives the opportunity to load 3 .
You can animate fading via opacity and scaling via background-size through animations.
You can reset the length of your animation and also the values and numbers of steps to animate .
You can also use background-position and switch multiple background-image position while opacity is set to 0. example using 4 for image, one pseudo uses multiple bg-image wich are switching position while unseen. https://codepen.io/gc-nomade/pen/zzbXem
I have a DIV with some text in it. I added a background image on it. Now I want to keep scrolling my DIV background image from bottom to top smoothly. For this purpose, I searched for the code and I found some codes...
<style type="text/css">
#moving_bg {
background-image:url('http://i.imgur.com/zF1zrkC.jpg');
background-repeat:repeat-y;
color:#FFFFFF;
width:1000px;
height:300px;
text-align:center;
}
</style>
<div id="moving_bg">
<h2>This is my DIV text that I want do not want to move/animate.</h2>
</div>
CODE 1:) http://jsfiddle.net/ZTsG9/1/ This is a code that I found but this one have some problems with me. First of all its moving horizontally and second is that its making image width doubled to 200% that I dont want also.
CODE 2:) http://jsfiddle.net/hY5Dx/3/ This one is also moving horizontally and not making the image width doubled. But its JQuery that I dont want.
I want only CSS3 or JavaScript with HTML code to move my background image in DIV from bottom to top without doubling the image width. Is this possible in these two web languages...???
If you can get away with using 2 divs you can get it to work like this:
Working Example
html, body {
height: 100%;
margin: 0;
}
.outer {
height:100%;
overflow: hidden; /* hide the overflow so .inner looks like it fits in the window*/
}
.inner {
height:200%; /* the inner div will need to be twice as tall as the outer div */
width:100%;
-webkit-animation:mymove 5s linear infinite;
animation:mymove 5s linear infinite;
background-image: url('http://static1.360vrs.com/pano-content/judith-stone-at-sunset-east-farndon/640px-360-panorama.jpg');
background-size: 100% 50%; /* 50% height will be 100% of the window height*/
}
#-webkit-keyframes mymove {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -100%;
}
}
#keyframes mymove {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -100%;
}
}
As per Muhammad's request i'll add my fiddle as an answer.
VanillaJS using requestAnimationFrame for that butter smooth slide :)
http://jsfiddle.net/hY5Dx/103/
Code to please SO:
var y = 0;
requestAnimationFrame(move);
var body = document.body;
function move(){
y++;
body.style.backgroundPosition = '0 ' + y + 'px';
requestAnimationFrame(move);
}
As there is too much comments after #Skynet answer, here I add the one I wrote following his base structure.
So in CSS, you can make use of animation CSS property
This property still is vendor-prefixes dependant.
Basically for what you want to do, you have to animate the background-position property, only on y axis.
Here is the CSS code
/* Following defines how the animation 'mymove' will run */
#keyframes mymove {
/* 0% is the beginning of animation */
0% {
background-position: 0 0;
}
/* This is the end… where we set it to the size of the background image for y axis (0 being the x axis) */
100% {
background-position: 0 860px;
}
}
/* same for webkit browsers */
#-webkit-keyframes mymove {
0% {
background-position: 0 0;
}
100% {
background-position: 0 860px;
}
html, body {
height: 100%;
}
.view {
color:#FFFFFF;
height: 366px;
text-align:center;
/* Here we assign our 'mymove' animation to the class .view, we ask it to last 3 seconds, linearly (no ease at start or end), and repeating infinitely */
animation: mymove 5s linear infinite;
/* again webkit browsers */
-webkit-animation:mymove 5s linear infinite;
background: url('http://i.imgur.com/zF1zrkC.jpg');
}
And here we are.
The other answers are ok but as mentionned, using multiple divs isn't always possible and the use of requestAnimationFrame() is also browser specific (Paul Irish has good polyfill for this).
Furthermore, I'm not sure incrementing a var infinitely is a good solution : it will block near 6100000px, and its much more code to change the speed or to take control over the animation.
<div class="view" style="background-image: url('http://i.imgur.com/zF1zrkC.jpg')">According to a new report from AnandTech.</div>
html, body {
height: 100%;
}
.view {
color:#FFFFFF;
width:1000px;
height:300px;
text-align:center;
-webkit-animation:mymove 5s linear infinite;
/* Safari and Chrome */
animation:mymove 5s linear infinite;
background-size: 200% 100%;
background-repeat: repeat-y;
}
#keyframes mymove {
100% {
transform: translate3d(0px, -400px, 0px);
}
}
#-webkit-keyframes mymove
/* Safari and Chrome */
{
100% {
transform: translate3d(0px, -400px, 0px);
}
}
check jsfiddle
Suppose, I've animation from 0%{left: 0%;bottom: 0%;} to 100%{left: 100%; bottom: 0%;} and set animation-iteration-count to infinite.
Now when the animation shifts to the end point (100%) it starts again from begin point (0%). Now what I want is when animation begins again and again it should decrease the size of the element suppose the default size is 200 pixels width and 200 pixels height so the decreasing vlaue equals minus 10 pixels and when the animated element becomes 0 pixels width and height it should again increase the size of that element so the increasing value equals plus 10 pixels.
This is the demo without increasing and decreasing the element.
This can be cleaned up, but essentially you can listen for animationStart to capture the initial size of your element,
$("#element").on("webkitAnimationStart", function(e) {
var el = $(this);
initialHeight = el.height();
initialWidth = el.width();
});
...and listen for animationIteration to change the size of your element after every iteration:
$("#element").on("webkitAnimationIteration", function(e) {
var el = $(this),
currentHeight = el.height(),
currentWidth = el.width(),
scaleStep = 10;
if (currentHeight > 0 && currentWidth > 0) {
el.height(currentHeight - scaleStep);
el.width(currentWidth - scaleStep);
}
else {
el.height(initialHeight);
el.width(initialWidth);
}
});
DEMO
Note that this would work in webkit browsers only. To support other browsers, take a look at the Browser Compatibility section in this article:
http://www.sitepoint.com/css3-animation-javascript-event-handlers/
If your browser supports steps() in the animation, and multiple animations, the you can go with a CSS only solution.
#keyframes esize
{
0%{left: 0%; bottom: 0%;}
100%{left: 90%; bottom: 0%;}
}
#-webkit-keyframes esize
{
0%{left: 0%; bottom: 0%;}
100%{left: 90%; bottom: 0%;}
}
#-webkit-keyframes shrink
{
0%{width: 200px; height: 200px;}
100%{width: 0px; height: 0px;}
}
#keyframes shrink
{
0%{width: 200px; height: 200px;}
100%{width: 0px; height: 0px;}
}
#element{
width: 200px;
height: 200px;
border-radius: 100%;
background: #000;
position: absolute;
left: 0%;
bottom: 0%;
animation: esize 3s infinite, shrink 60s steps(20,end) infinite;
-webkit-animation: esize 3s infinite, shrink 60s steps(20,end) infinite;
}
I have made it slower so that you can see that the size change is done step by step, and not continously
updated fiddle
I need background image parallax and vibrate little bit when scrolling with mouse.
Background position is working with jQuery's css() function but not vibrating.
When ii firebug it result is
<div data-speed="10" data-type="background" style="height: 1000px;
background-position: 50% 0px; animation: 0s ease 0s normal none 1 NaNpx;"
class="parallax-container" id="intro">
I am using jQuery's code for this, and testing in Mozilla.
/*parallex backgound*/
$glob('div[data-type="background"]').each( function() {
var $bgobj = $glob(this); // assigning the object
$glob(window).scroll( function() {
var yPos = -($window.scrollTop() / 10);
var coords = '50% '+ (yPos) + 'px';
$bgobj.css({'background-position': coords}).animate({
'-webkit-animation': 'vibrateAnim 1s ease', /* Safari 4+ */
'-moz-animation': 'vibrateAnim 1s ease', /* Fx 5+ */
'-o-animation': 'vibrateAnim 1s ease', /* Opera 12+ */
'animation': 'vibrateAnim 1s ease' /* IE 10+ */
},500);
});
});
HTML:
<div id="intro" class="parallax-container" style='height:1000px;' data-type="background" data-speed="10">
<div id="mainTitleText" class="top-content">
<img class="logo" src="images/logo.png">
</div><!-- mainTitleText -->
</div><!--home-->
CSS:
#-moz-keyframes vibrateAnim {
0% { top: -10px; }
10% { top: 10px; }
20% { top: -10px; }
30% { top: 10px; }
40% { top: -10px; }
50% { top: 10px; }
60% { top: -10px; }
70% { top: 10px; }
80% { top: -10px; }
90% { top: 10px; }
100% { top: -10px; }
}
DEMO:
jsFiddle
I need as in link https://victoriabeckham.landrover.com/INT
jsFiddle DEMO
(Tip: Remove /show/ in URL to access jsFiddle Edit Page).
Consider using the jQuery Vibrate plugin in your Parallax website. The parallax website you mentioned in comments is using a custom written parallax script for that site, so no plugin is available.
The above jsFiddle uses parallax plugin jQuery Parallax v1.1.3 along with it's revised demo, modified with an extra vibrating trainers footwear object.
The benefit of this vibrate plugin is that it has interaction with the mouse, to stop vibrating when the mouse is over any text when used with reverse option. That is useful so visitors can ready message clearly.
Side note: In the jsFiddle, the vibrating object is in between 2 other elements, so the mouseover will not apply in that case due to DOM layout order.
$('#extra').vibrate({
speed: 50, // Vibration speed in milliseconds
trigger: "mouseover", // Triggering event
reverse: true, // Reverse behaviour
overEffect: "stop", // Over effect, see details below
vibrateClass: "", // CSS class applied when vibrating (New in vers. 1.1!)
overClass: "" // CSS class applied when over effect is triggered (New in vers. 1.1!)
});