My first question here. :)
I'm looking for a transitions between two images where the image first shrinks in a circle shape and then the circle grows again containing the other image. It's hard to explain, and I may be using the wrong words, because I can't find anything about it on the Interwebz.
I'm talking about an effect like the Loony Toons ending.
http://www.youtube.com/watch?v=ZuYIq-J5l9I
That shrinking-to-black, can it be done in JavaScript/JQuery?
TL:DR
- Cross-browser: [**See a working demo
here**](http://jsfiddle.net/lthibodeaux/8DSjz/).
Well, mostly working... and
cross-browser. Could do worse. ;]
- Purely CSS3 Solution: [**See a working demo
here**](http://jsfiddle.net/lthibodeaux/8DSjz/16/)
How do I even begin to describe this one? It would be a lot easier if the CSS 2 clip standard supported anything besides a "rect" value, namely a "circle" or "ellipse" but... since that doesn't exist, I've done my best to piece something together that will do what you're asking. The caveats are many. One is that this is only going to work on something with a solid color background in the event you wanted the picture to clip to the background. Another is that while I've tried to account for the CSS update timing across browsers, the rendering still isn't "perfect." My initial approach was to simply animate the clip on the image that was getting replaced, but that didn't work due to the way updates were made to the clipping via the easing function in the plugin I located. The final approach is below.
The Approach
The concept is to set the image as a background-image property of a container like a <div> with a background-position of center center, and the position of the container to relative, or anything non-static. The next is to generate the clipping elements as children of the container. The first is a position: absolute clipping circle image of the color of your background, either transparent PNG or GIF (I prefer the former), and the next four are divs, also with absolute positions that have left, right, top, and bottom attributes set to 0 for each of the respective sides they will clip. The idea is to animate the top, left, width, and height of the clipping circle image and synch up the width and height of the clipping divs using the step callback option of the .animate() call by matching them to the current left and top values. Between animations, you change the background-image of the container to the new image and then start the animation back in the opposite direction.
This required a little finessing in IE7, 8, and Webkit browsers as the animation clipped much more cleanly in Firefox and IE9. This would be the adjust variable you'll see in the working demo.
The sample code is below:
The Markup
<div class="imageContainer image1">
<img class="clip" src="clipCircle.png" />
<div class="top fill"></div>
<div class="left fill"></div>
<div class="right fill"></div>
<div class="bottom fill"></div>
</div>
The CSS
div.imageContainer
{
background-position: center;
width: 300px;
height: 300px;
position: relative;
}
img.clip
{
width: 100%;
height: 100%;
position: absolute;
}
div.fill
{
position: absolute;
background-color: White;
}
div.left, div.right
{
height: 100%;
top: 0;
width: 0;
}
div.left
{
left: 0;
}
div.right
{
right: 0;
}
div.top, div.bottom
{
width: 100%;
left: 0;
height: 0;
}
div.top
{
top: 0;
}
div.bottom
{
bottom: 0;
}
The Script
var speed = 1000;
$clip = $("img.clip");
$clip.animate({
top: $clip.parent().height() / 2,
left: $clip.parent().width() / 2,
width: 0,
height: 0
}, {
duration: speed,
step: function(now, fx) {
switch (fx.prop) {
case "top":
$("div.top").css("height", now);
$("div.bottom").css("height", now + adjust);
break;
case "left":
$("div.left").css("width", now);
$("div.right").css("width", now + adjust);
}
},
complete: function() {
$(this).parent().addClass("image2");
$(this).animate({
top: 0,
left: 0,
width: $clip.parent().width(),
height: $clip.parent().height()
}, {
duration: speed,
step: function(now, fx) {
switch (fx.prop) {
case "top":
$("div.top").css("height", now);
$("div.bottom").css("height", now + adjust);
break;
case "left":
$("div.left").css("width", now);
$("div.right").css("width", now + adjust);
}
},
complete: function() {
$("div.imageContainer > *").removeAttr("style");
}
});
}
});
EDIT:
The CSS3 Solution
When cross-browser compatibility is less of a concern, CSS3 is an option (although I'd probably suggest seeing what can be done with the new HTML5 Canvas for this kind of animation). There are a couple things to note:
The image must be inside a container in order to allow us to clip toward its center rather than its top left corner.
The border-radius attribute will not clip the child images inside a container. For this reason, the image must become the background-image attribute of the container.
jQuery does not currently animate border-radius correctly. You can either replace the current jQuery animate functionality for that attribute or build a custom border-radius animation object to make jQuery more well-behaved. I have opted for the latter. Each corner's border-radius must be animated separately.
The animation in or out consists of two separate segments, and as a result the "linear" easing function is probably best used for cleanest results.
The method is commented inline below:
The Markup
<div class="imageContainer image1">
</div>
The CSS
div.imageContainer
{
background-position: 0px 0px;
background-repeat: no-repeat;
width: 300px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
div.image1
{
background-image: url(/images/myFirstImage.png);
}
div.image2
{
background-image: url(/images/mySecondImage.png);
}
The Script
// Total animation speed in or out will be speed * 1.5
var speed = 600;
// Store a reference to the object to be clipped
var $clip = $("div")
// A function to build a mapping object for border radius parameters
var buildRadiusObj = function(value) {
// Dimension an option object
var opts = {};
// Use specialized Mozilla CSS attributes when needed
var attributes = $.browser.mozilla ?
["-moz-border-radius-topleft",
"-moz-border-radius-bottomleft",
"-moz-border-radius-topright",
"-moz-border-radius-bottomright"] :
["border-top-left-radius",
"border-bottom-left-radius",
"border-top-right-radius",
"border-bottom-right-radius"];
// Build the option object
$.each(attributes, function(i, key) {
opts[key] = value;
});
// Return the result
return opts;
}
$clip.animate(buildRadiusObj($clip.width() * 0.5), { // Animate the border radius until circular
duration: speed * 0.5,
easing: "linear"
}).animate({ // Resize and reposition the container
width: 0,
left: $clip.width() / 2,
height: 0,
top: $clip.height() / 2
}, {
duration: speed,
easing: "linear",
step: function(now, fx) { // Synch up the background-position
if (fx.prop == "top") {
$(this).css("background-position", "-" + $(this).css("top") + " -" + $(this).css("left"));
}
},
complete: function() { // Swap the image
$(this).addClass("image2");
}
}).animate({ // Restore position and size
width: $clip.width(),
left: 0,
height: $clip.height(),
top: 0
}, {
duration: speed,
easing: "linear",
step: function(now, fx) { // Synch the background-position
if (fx.prop == "top") {
$(this).css("background-position", "-" + $(this).css("top") + " -" + $(this).css("left"));
}
},
complete: function() { // Remove inline styles but reapply border-radius
$(this).removeAttr("style").css(buildRadiusObj($clip.width() * 0.5));
}
}).animate(buildRadiusObj(0), { // Restore border-radius to block
duration: speed * 0.5,
easing: "linear",
complete: function() {
$(this).removeAttr("style"); // Remove inline styles
}
});
Again, the demo is located here.
I came this across, I hope it is interesting: http://www.netzgesta.de/transm/. The transition circles_out with one circle could do the job I think.
Here you go. http://jquery.malsup.com/cycle/ Check out the zoom. Something can be worked out with the circle part.
I tried some more and came up with the idea of using a <canvas> element.
Please see the result at: http://jsfiddle.net/3MG8e/2/.
var cv = $('canvas')[0];
var ctx = cv.getContext('2d');
ctx.fillStyle = 'black';
var int = null;
var t = -1;
var amount = 50;
var time = 1000;
var size = 0;
var im = new Image();
im.src = "http://burzak.com/proj/fxcanvas/docs/images/mario2.png";
im.onload = function() {
size = im.width;
int = setInterval(update, time / amount);
}
function update() {
if(++t >= amount) {
clearInterval(int);
}
ctx.fillRect(0, 0, cv.width, cv.height);
ctx.beginPath();
ctx.arc(size/2, size/2,
size/2 - t * (size/2) / amount,
0, Math.PI*2,
false);
ctx.clip();
ctx.drawImage(im, 0, 0, size, size);
}
Related
How can I animate an element with Javascript vanilla?
Similar with jquery. Example:
$( "button.continue" ).animate({left: "100px", top: "200px"}, 5000);
Where we pass the attribute, the desired value and the time.
In my case I need the left and top position to animate and slide.
Solution
I've done as #IceMetalPunk sugested and added the animation by css only when I need to animate.
document.getElementById("animate").addEventListener("click", function(){
let e = document.getElementById('elementToAnimate');
e.classList.add("animate");
setTimeout(()=> e.classList.remove("animate"), 500);
e.style.top = Math.floor(Math.random() * window.innerHeight) + 'px';
e.style.left = Math.floor(Math.random() * window.innerWidth) + 'px';
});
document.getElementById("dontAnimate").addEventListener("click", function(){
let e = document.getElementById('elementToAnimate');
e.style.top = Math.floor(Math.random() * window.innerHeight) + 'px';
e.style.left = Math.floor(Math.random() * window.innerWidth) + 'px';
});
#elementToAnimate {
width: 20px;
height: 20px;
background: red;
position: absolute;
top: 0;
left: 0;
}
#elementToAnimate.animate {
transition: left 500ms ease-in-out, top 500ms ease-in-out;
}
<div id="elementToAnimate"></div>
<button id="animate">Animate</button>
<button id="dontAnimate">Dont Animate</button>
Try using CSS transitions. In CSS, do something like this:
button.continue {
transition: 5s;
}
Then in JS, you can just set the left/top values:
document.querySelectorAll('button.continue').forEach(button => {
button.style.left = '100px';
button.style.top = '200px';
});
Tested in Firefox.
document
.querySelector(".text.thank-you")
.animate({ opacity: [0, 1] }, { duration: 5000, iterations: 1, easing: "ease-out" })
.onfinish = (e) => {
e.target.effect.target.style.opacity = 1;
};
Take a look at the Web Animation API. Its an experimental feature so Browser Support (mainly Safari) might be an issue for you. Otherwise you can do it the way others have already pointed out.
Try using WebComponents, you can perform any kind of animation using only VanillaJS, there are predefined animations like Animate.css but you can create custom animations by using keyFrames:
<!-- Add Web Animations Polyfill :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations.min.js"></script>
<script type="module" src="https://unpkg.com/#proyecto26/animatable-component#1.0.0/dist/animatable-component/animatable-component.esm.js"></script>
<script nomodule="" src="https://unpkg.com/#proyecto26/animatable-component#1.0.0/dist/animatable-component/animatable-component.js"></script>
<animatable-component
autoplay
easing="ease-in-out"
duration="1200"
delay="300"
animation="heartBeat"
iterations="Infinity"
style="display: flex;align-self: center;"
>
<h1>Hello World</h1>
</animatable-component>
For more details check here: https://github.com/proyecto26/animatable-component
Well it seems that I'm having some sort of a problem with Firefox, I've added a logo to my website and styled it through this CSS block:
#splash div.logo > a {
background-image: url("../../---.png");
background-size: 280px;
height: 85px;
width: 280px;
}
When I open the web page with Chrome or any other browser other than Firefox it displays it in the right way,unless I zoomed in it will show a thin line,
while opening the web page from Firefox will show a thin line above the image with or without zooming in.
The Logo is animated through this code:
IndexPage: {
Splash: {
init: function() {
var $splash = $('#splash'),
$logo = $splash.find('#logo'),
frame = 1,
frameCount = 46
framesPerSecond = 50;
function animateLogo() {
var lastTime = 0;
var currTime = new Date().getTime();
// var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var timeToCall = 25;
if (typeof requestAnimationFrame == "undefined")
requestAnimationFrame = function (callback, element) {
return setTimeout(function () { callback(currTime + timeToCall); }, timeToCall);
};
if (frame <= frameCount) {
setTimeout(function() {
requestAnimationFrame(animateLogo, $logo);
$logo.css('background-position', '0 -' + (frame * 85) + 'px');
frame += 1;
}, timeToCall);
// lastTime = currTime + timeToCall;
}
}
$('form.search').on({
close: function() { $splash.removeClass('searching'); },
open: function() { $splash.addClass('searching'); }
});
if ($window.width() >= 532) {
$window.scroll(function() {
var top = $window.scrollTop();
$splash.find('div.logo').css('opacity', top > 150 ? 0 : (150 - top) / 150);
});
}
$window.resize(function() {
if ($splash.width() < 768) {
$logo.css('background-position', '0 0');
} else {
$logo.css('background-position', '0 -3910px');
}
});
if ($window.width() >= 768)
animateLogo();
}
}
}
Any Ideas?
It looks like Firefox does some extrapolation of your image before rendering it (for perf I guess). It calculate the pixel to display using the neighbourhood of the one on your image, and some pixels on the top of your image are near black pixel resulting in a black/grey line.
EDIT: You can disable this behavior using image-rendering: optimizequality; in your CSS.
Snippet to test this:
var frame = 1,
frameCount = 46;
function animateLogo() {
$logo=$('.logo');
var lastTime = 0;
var currTime = new Date().getTime();
var timeToCall = 25;
if (typeof requestAnimationFrame == "undefined") {
requestAnimationFrame = function (callback, element) {
return setTimeout(function () {
callback(currTime + timeToCall);
}, timeToCall);
}
}
if (frame <= frameCount) {
setTimeout(function() {
requestAnimationFrame(animateLogo, $logo);
$logo.css('background-position', '0 -' + (frame * 85) + 'px');
frame += 1;
}, timeToCall);
}
}
.logo {
background-image: url('data:image/png;base64,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CAgICAgICAgICAgICAgICAgICAgICAgICAgIiDiIN841BAQEBAQEBMQrZlq6yX0TdyAgICAgICAqQbQFD4OAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAiIJoICAgICAgnLEhIMaF+BcEBASEQywEBAQEBAQEBAQEBATEDhANBAQEBAQEBATEuBCW4hAQEBAQEBCBEMfHv9aPiD0QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBCvQbx9OggICAgICAiI0ine3pPASycICAgICAiIOhCXZQssCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIiASIn5SAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgMiKCD4QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEPEQPzQ9BAQEBAQEBETRzEo39izwyulLKeI8MEIJJZRQQgklRlDiquBRk+glChFKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEs0kQ4mJEkFKvHd0cnRSQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgklmupnlgGhhBJKKKHEjku8y1DinRJKODo5TyihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoosVHiR6ePUCIBQgkllFBCCSWSl3hXvKnzuCsnCAgICAgIiEoQFwUP+wwBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAZEN8eH4uKkeEXsgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAiI7YwLQQEBAQEBATEd+Zz6WZ2gZdOP2dAKKGEEkooocQYSpQtsIKXKHjUeyWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEKJUZeYZygxz1DipKDE6enfYpdom9rn5wwIJZRQQgkllBhDiZMMJU4ylJhnKDHPUKLJUKJRQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZSIU2Ir0x24RP0IJZRQQgkllMhe4mvpRraBl04QEBAQEBAQdSD6gkcdQUBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQGRAXGdAlGxefMRlBsR1BkTB9kFAQCREBB8ICAgICIgRIK4hgiCuICC2h+ghICAgHGIhsiOsYl0UQUBAQEBAQEBAHAgxT4C4ahIgXvrBhn+uBXGSAPHis6kWRJ8e0UBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBUhtjazCEgICAgICAgnp1p6QZGXmBBQEBAQEBAVIJoCx4GAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQExRkQDAbFfROyBgIB408kOAgICAgICAgICAgLClR0EBAQEBAQEBIS74hAQEBAQEBAQEBAQEBAQe0L8kgHReTpBQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBA7BmxxTmDgICAgICAgHhmZqWbF/k7kEBAQEBAQEBUgih41AQCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAmLEiOADAQEBAQEBAbE/xKcMiBYCAgICAgICAmJciLnrCQgICAgICAgICAgICAgICAgIiLyIHgICAgICAgICYlwIS3EICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIiF0gtjpXGRDXSiihhBJKKKHE9qd4404CL50gICAgICAg6kBcFjxqCgEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBARER8eH4uKkeEXwgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIJIitj7nEBAQEBAQEBAbMy3dsIvAK6dixGUGhBJKKKGEEkpUXGJe/X2dG8RJEUIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEKJvZU4Pv61/hKxp7BEeIQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihxIEQO5geAgICAgICAuLRfCndrLPASycICAgICAiIOhBXBY/6CAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQGRBfH+9PSkekTwgYCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIBIixggILaHuLZjQ0BAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQBwasaNpISAgICAgICDW5mPpJvWBV05HpYjIq0QllFBCCSWUGEOJkjXOl+glyhBKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSoUv85b//qb9E7DnKgFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQImWJJkOJRgkllFBCCSWUUEIJJZRQQgkllFBiWaLNUKJVQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBiBCV2Nt0eS9SPUEIJJZRQQonsJb6WblDkBRYEBAQEBAREHYi+/ptTEBAQEBAQEBAQEBAQELUPBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBMS+EFdKKKEEBAQEBAQEBAQEBAQEhGvsaIgBAgICAgLiJUSrBAQEBASEy1MICAgICAgICAgICAgI19gQEBAQENUifP0EBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAREBYhdTg8BAQEBAQEBcTuT4s0JvHKCgICAgICAqATRFTxsBgEBAQGxK0TsgYCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgFhD9BAQ9gkICAgIiP0gLpSAgICAgICAgICAgICAODyihYCAgICAgICAgICAgICAgICAgICAgICAgICAgIDIgvBiPAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBATEC4gdTwsBAQEBAQEBcTPT0k2J/FPKICAgICAgICpBtE3tAwEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQHxOsTO5woCAgICAgICoinaiC740gkCAgICAgKiDsRl9TdsICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBeh9jLzCEgICAgICBGjph8/9134VdOEBAQEBAQEJUgzqq/YXODOM+AUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEKJEZbwdIqC6DIg+gyI6wyIAQICIt/RCQICIiEixQLQlZ0SSiihhBJKKKGEEkocBNFCQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQGwgOggICAgICAgIiHEhzjMgfIayEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJLxJ7mIgPiUgkllFBCCSWUeOt8+c57bmtYOkFAQEBAQEDUgbiq/oYNBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBER4RA8BAQEBAQEBAQEBAQEBAQEBAQEBAQEBAbFnhFeKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIL6D2N9cQ0BAQEBAQIwX8e7Fd9rWsXKCgICAgICAqATRVX/D5gZxkQGhhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkoooYQSSiihhBJKKKGEEkrsC7HX6SAgICAgICBGijh6/t211SydICAgICAgICpB1LOxEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEPERRxkQ//R0goCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAuEOcQ0BAODpBQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEDkRex7ICAgICAgIEaJ2N9Ha4cDAQEBAQEBUQeir/6GDQQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBMQhEYMSEBAQEBDZER0EBAQEBAQEBAQExCEQLQQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAREToRPUIGAgICAgICAgKgV8VPdiB4CYtuIBgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAiLJTyrf/7QQEBAQEBAQo0NMnnwfla2cICAgICAgICpB1P9tACEgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgqkDMlYCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICIgzjI9BAQEBAQEBAjQ0w333x9SycICAgICAiIShAn1d+xgYCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgNgCooWAgMiHOMuAOM+A6CAgIB4gLiAgICBc2UFAQEBAQEBAQEBsBdG6ngiC6JUIgji3Y0M4T0BAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEC8GnGoaSEgICAgICDGhHj0duv8Hm4QEBAQEBAQdSDq/0arN4jLDAgllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgkllFBCCSWUUEIJJZRQQgklnkZcZ0AMEBAQzhNKKKGEEkoooYQSSiihhBKpSvQQEBD5EM4TSiihhBJKKKGEEkoooYQSSiihRC6E+04Q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ICAgICAgICAgICAgICAgICB2gggzHQQEBAQEBERyhAUgBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQExE4QYaaDgICAgICASI6wAISAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDYCSLMdBAQEBAQEBDJERaAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEDtBhJkOAgICAgICIjnCAhACAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgJiJ4gw00FAQEBAQEAkR1gAQkBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQOwEEWY6CAgICAgIiOQIC0AICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAiInSDCTAcBAQEBAQGRHGEBCAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAbETRJjpICAgICAgIDIjpsPQVr92goCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIC4n6F//JgWAuJViMX39ekzIG43v3bE4g/VI7oMiAHi8Iib/82ePH9Xhmie/O5ptSFmGRDTx/tDjYgJRBjE8AJideyaPvW4KIjFL99qzG7/elFmunYqaZf/KpLiOcT09jC1+OUOMV1b565+Gxlxt3MsgtwhZssz+vK7goZH3J/87veJyWqZO60WMV0tc2e1IBZPpNsn1S1isa4a7oCLXT8+4m6X7u4Rw+1fDPeH2lno88QCMbn9aK8j7h92u9NPQp+x1xHtErF2uJoEOrq+jLh9Yg3NCtEtfz+J9tMenlrF3n/M7z7k07WTxbe9JDpisRO8hJhUgBhWiJuP+XT1FFoeUStA3F5j3x18hn62fAqtEM0CEXfHvl9WrK3ymk1EXwGieQ7R3yOaaK9pvHAHcLZcbU/X8twh+tCIdoWYLu/f3CKW06/xYiLW74pPVtdxm4hQihden3geMfmhn1Gw+1XsQ0TzNKIZYl9jF5W4vUDqakA82rEf7ASz0DcKmgeH2GcRC0UliP5ZxDOvAoRDPDxjbzx7qkDcrJCGtQXgxrNnVgPiZh3+1Cp27V92VSCeuJ5YzaQGxKMru41nTxWIm7944vK0NkT/4G7Hxi5QA+LxfaeNV/NqQDy+jXm/HGzvbv3VcHSarZ5Dy9uYt8fbG0RXy3li4674cPcsaxf/1XHG3nh9YrEeXCzPF/+bVrAA3Hy5a3p/FT4Zgr/IskJ0jxCTx4j41xNPvHp6/yLX5Ad/EODeEE+8jj1d3Ziq5Bp7+cdvvy5XHLMHr2NHvNtRMqv9INZP1fYJ7xAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBABEWGmhYCAgICAgEiG+D/PDx7oyy0cAgAAAABJRU5ErkJggg==');
background-size: 280px;
height: 85px;
width: 280px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo"></div>
<button onclick="frame=0;$('.logo').css('image-rendering','auto');animateLogo()">Without CSS property (default)</button>
<button onclick="frame=0;$('.logo').css('image-rendering','optimizeQuality');animateLogo()">With CSS property</button>
Old answer:
You can separate sprites on your image by a few transparent pixels (or of the color of what is behind your logo) so the effect would not be visible anymore.
Well, if all else fails, you could always attempt to place a div over the thin line. Also try adding a border attribute to your code and set it to 0px solid whatever your background-color is. If all of these don't work, then try adding another border over the red line.
Try loading the image as is in the browser and check if the line is still placed. Also, in Firefox, right-click, choose inspect and see where it points to. For example, the line might be coming from div or some other html element.
i think creating an empty 'content' and using a background to show the image: works nicely in Chrome, Firefox, Safari and IE8+9
.googlePic:before {
content: '';
background: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
you could try if this would fix the issue
I think it just renders the size of image or block incorrectly, I played on your website with the CSS and and it seems that if you change background size to
background-size: 279.8px auto;
it solves the issue.
UPDATE:
As an additional solution, you might wrap the logo in a div, give the div hidden overflow, and then lift the block with your image up to 1px. It will hide the line as well.
Try like this:
#match div.logo > a {
background-image: url("../../---.png");
background-size: 280px;
height: 85px;
width: 280px;
outline: 0;
}
I have an element div in a shape of a ball. What I am trying to do is, when I refresh the page I want to the ball to fall to the bottom of the webpage and then bounce back up to the top of the page.
This is my jQuery function where the ball falls to the bottom of the web page
$(document).ready(function(){
$("div").animate({ top: '+=585'}, 400);
});
Am I using a correct approach? Should I use slideDwon and slideUp instead?
Try utilizing jQuery UI .effect()
$(function() {
var div = $("div");
// `elem`: element to apply bounce effect,
// `n`: number of bounce effects to apply to `elem`
var bounce = function bounce(elem, n) {
var fx = function fx(el) {
return (el || $(this))
.effect({
effect: "bounce",
easing: "swing",
duration: 400,
distance: window.innerHeight
- (el.height() + el.offset().top * 1.5),
direction: "down",
times: 1
}).promise()
};
return fx(elem).then.apply(elem, $.map(Array(n - 1), function() {
return fx(elem)
}));
};
bounce(div, 1).then(function(el) {
// do stuff when bounce effect complete
console.log("complete", el)
});
});
div {
position: relative;
width: 100px;
height: 100px;
background: rgb(212, 98, 44);
border: 2px solid navy;
border-radius: 50%;
}
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div></div>
Take advantage of jQuery's animation chainability. Also, you probably shouldn't assume a static value of 585 will be suitable for every screen size. I suggest using calculated values for generating the offsets, check this fiddle:
$(document).ready(function () {
var viewportH = $(window).height();
var elem = $('div');
var elemH = elem.height();
elem.animate({
top: '+=' + (viewportH - elemH) // bottom of screen
}, 400).animate({
top: '-=' + (viewportH - elemH) // original position
});
});
Using this HTML :
<div id="myDiv" class="myRelativeDiv">test</div>
1st step is to set the position of your div as "relative" :
.relative {
position:relative;
}
2nd step is animate with Jquery (You can chain many animate):
$(function() {
$("#myDiv").animate({ top: '+=585'}, 400).animate({ top: '0'}, 400);
});
JsFiddle
$(document).ready(function(){
$("div").animate({ top: '+=585'}, 400);
setTimeout(
function()
{
$("div").animate({ top: '-=585'}, 400);
}, 400);
});
I have the following: http://jsfiddle.net/JfGVE/318/
The issue is that it's not a smooth animation. How I wanted it to work was:
Center the icon to the middle of the screen before displaying it.
Fade it in, and while it's fading in, resize it to something slightly larger, while staying in the dead center of the screen.
Fade it out.
How can I fix the animation to be completely smooth and feel as if it's a "pulse".
HTML:
Click Me!
<i class="fa fa-heart"></i>
CSS:
.fa-heart {
font-size: 48px;
color: red;
position: absolute;
display: none;
}
jQuery:
$(document).on("click", "a", function() {
var center_width = $(window).width() / 2;
var center_height = $(window).height() / 2;
/* Set the icon to the center of the screen. */
$('.fa-heart').css({ 'left': center_width, 'top': center_height });
/* Fade the icon in, resize it, and fade it out. */
$('.fa-heart').fadeIn();
$('.fa-heart').animate({ fontSize: '60px' }, 300);
$('.fa-heart').fadeOut();
});
Check this out: http://jsfiddle.net/JfGVE/336/
$(document).on("click", "a", function() {
var center_width = $(window).width() / 2;
var center_height = $(window).height() / 2;
/* Set the icon to the center of the screen. */
$('.fa-heart').css({ 'left' : center_width - 24, 'top': center_height - 24 });
/* Fade the icon in, resize it, and fade it out. */
$('.fa-heart').animate({ fontSize: '60px', opacity: 1, 'left' : center_width - 30, 'top': center_height - 30}, 250);
$('.fa-heart').animate({ fontSize: '48px', opacity: 0, 'left' : center_width - 24, 'top': center_height - 24}, 250);
});
What I did is instead of using the fadeIn() and fadeOut() I used the animate() to change the size and opacity at the same time. You can change the times so they resemble a real heart beat but because both the size change and opacity change are in the same animate() they will happen at the same time. The third value in the animate() is to set the center of the picture to the center of the page. This needs to be center_height (or center_width) - 1/2 of the picture height so the center of the image is aligned with the center of the screen. You need the offset because in normal CSS the position tag aligns your picture with the specified value relative to the top left corner (0, 0 of the picture). The times of the animate can be changed depending on how fast / slow you want the heart to "beat".
You can animate CSS properties instead of using fadeIn() and fadeOut(). And for centering the heart you need to:
(width/height) of the window (width/height) of the heart
---------------------------- - ---------------------------
2 2
Demo on Fiddle
jQuery:
$(document).on("click", "a", function() {
var w = ($(window).width() / 2) - ($('i').width() / 2);
var h = ($(window).height() / 2) - ($('i').width() / 2);
$('.fa-heart').css({ 'left': w, 'top': h });
$('.fa-heart').animate({ fontSize: '48px', opacity: '0'}, 100);
$('.fa-heart').animate({ fontSize: '60px', opacity: '1'}, 700);
$('.fa-heart').animate({ fontSize: '48px', opacity: '0'}, 500);
});
CSS:
.fa-heart {
font-size: 48px;
color: red;
position: absolute;
opacity: 0;
}
You could achieve a smooth and (arguable) faster animation using Julian Shapiro's velocity.js plugin
just tweak your css giving opacity: 0 instead of display: none to your element
.fa-heart {
font-size: 48px;
color: red;
position: absolute;
/* display: none; */
opacity: 0;
}
then velocity's loop option will give you the effect you want
jQuery(document).ready(function ($) {
$("body").on("click", ".click", function () {
var center_width = $(window).width() / 2;
var center_height = $(window).height() / 2;
$('.fa-heart').css({
left: center_width,
top: center_height
}).velocity({
opacity: 1,
fontSize: "60px"
}, {
loop: true, // animate from initial values back and forth
duration: 400 // adjust as needed
});
});
});
... that way you don't need fadeIn or fadeOut, or animate back to the original values or chain several animate() methods
See JSFIDDLE
Notice that you can set how many times you want the animation to take place by setting the number in the loop option like
loop: 1 // or twice, three times, etc (true does infinite loop)
http://jsfiddle.net/nao9k1Lx/1/
Also notice I gave a class click to the <a> tag to be more specific.
I've updated your JsFiddle, tell me if this is what you needed, i can explain the differences.
html
Click Me!
<div class="anim-container">
<i class="fa fa-heart"></i>
</div>
javascript
$(document).on("click", "a", function() {
var center_width = $(window).width() / 2;
var center_height = $(window).height() / 2;
/* Set the icon to the center of the screen. */
/* Fade the icon in, resize it, and fade it out. */
$('.fa-heart').fadeIn();
$('.fa-heart').animate({ fontSize: '55px' }, {duration: 300, queue: false});
$('.fa-heart').animate({ fontSize: '48px' }, 300);
$('.fa-heart').fadeOut();
});
Trying create an image carousel whose speed relies upon mouse positioning (i.e. if the mouse is close to the edge of the screen it moves fast, directly in the middle it doesn't move etc.) My issue right now being that the image carousel doesn't move at all. Could be a variety of reasons for it not working, but I am not really sure as to why it isn't working or even if this is a 'good' carousel algorithm.
Created a speed function which I am positive needs work, but I will only be able to know that once I see the image carousel actually moving.
Fiddle
JQuery
$(document).ready(function(){
$('.carousel').mousemove(function(e) {
var mpos = e.pageX;
var speed = $(this).getSpeed(mpos);
var dir = $(this).getDir(mpos);
var $ul = $(this).children('ul');
var cwidth = $ul.width();
$('#speed').html(speed);
if(speed != 0) {
if(dir == -1){
$ul.animate({
left: 0
}, speed, 'linear');
}
if(dir == 1){
$ul.animate({
left: -cwidth
}, speed, 'linear');
}
}
});
});
$.fn.getSpeed = function(mpos){
var width = $(this).width();
var center = width/2;
var ps = (mpos-center)/10;
var speed = ps * ps - (width % 100);
if(speed >= 0) return speed;
else return 0;
};
$.fn.getDir = function(mpos){
var width = $(this).width();
var center = width/2;
if(mpos > center) return 1;
else return -1;
};
HTML
<div class="carousel">
<ul>
<li><img src="http://placehold.it/200x200"/></li>
<li><img src="http://placehold.it/200x200"/></li>
.
.
.
<li><img src="http://placehold.it/200x200"/></li>
</ul>
</div>
<div id="speed"></div>
You have to fix your code to actually do what you want, but the main problem of not animating is fixed if you add the following css:
.carousel ul {
position:relative;
left:0px;
always check the documentation if you run into trouble:
http://api.jquery.com/animate/
There are several problems you have here.
First problem you got is, that position "relative" or "absolute" are missing on the ul.
carousel {
position: relative;
width: 100%;
overflow: hidden;
height: 200px;
}
.carousel ul {
position: absolute;
display: block;
list-style: none;
white-space: nowrap;
}
Then you need to stop your animations before starting another:
$ul.stop().animate
But the biggest problem is, that your "speed" is not a real speed at all.
If your speed is "100", it is very fast. This means that the animation will be done within 100 milliseconds! Thats so fast that you cannot see the animation.
So if you are moving your mouse near to the middle of you gallery it's moving fast and on the edges outside it's moving slow.
You could fix your speed by subtracting your actual mpos-value from a maximum-speed:
var speed = ps * ps - (width % 100);
// SPEED FIX
speed = 5000 - (speed * 2);
Here is the fiddle:
http://jsfiddle.net/56rwR/1/
BUT!! this is buggy as hell because is has not a real speed.. only this animation time which is proportional to the ul-width..
I would recommend you to use a script like this here:
http://bxslider.com/examples/ticker
and write an hover event which increases/decreases the speed.