Develop Reference

jQuery text animation "explosion" effect on hover [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Trying to replicate this awesome "Mouse over Escape" effect from the link below using simple jQuery: http://codecanyon.net/item/jquery-text-animation/full_screen_preview/233445
Any pointers or tips? See "Mouse over Escape" section in link above.

Here's a simple jQuery code I wrote:
// jQuery explode text by Aziz Natour
// CC BY 4.0 License
// http://creativecommons.org/licenses/by/4.0/
$('.explodeMe').each(function() {
var text = $(this).text();
$(this).html(text.replace(/./g, "<span>$&</span>"));
});
$('.explodeMe span').each(function() {
var min = -10, max = 10,
min2 = -30, max2 = 30,
random = Math.floor(Math.random() * (max - min + 1)) + min,
random2 = Math.floor(Math.random() * (max2 - min2 + 1)) + min2,
css = "top:"+random+"px; left:"+random2+"px",
el = $(this);
el.on({
mouseenter: function () {
el.attr("style", css);
},
mouseleave: function () {
setTimeout(function() {
el.removeAttr("style");
}, 300);
}
});
});
.explodeMe span {
position: relative;
transition: 0.3s .1s;
top:0;left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span class="explodeMe">I get nervous around cursors.</span>
Codepen demo: http://codepen.io/azizn/full/redbRa
The logic:
Wrap each textual character inside a <span> tag
Make the new span tags relatively positioned to manipulate their location without affecting layout flow.
Apply randomized CSS style to each span separately (for dynamic movement) on hover
Remove the style after a delay
The position change is animated using the CSS transition property.

Draw an image as an HTML table

This is my JSFiddle : http://jsfiddle.net/0r16e802/4/
What I am trying to do is taking the image and draw it as an HTML table
2 big problem in my algorithm
I can seem to be able to draw the images and only the first image is loaded in the first row
big problem in the size and the background-position
var Append="";
$(document).ready(function(){
var row=2;
var ItemPerRow=10;
CreateEmojiTable(row, ItemPerRow);
function CreateEmojiTable(row, ItemsPerRow){
Append+="<table width='99%' style='padding-top:3px;'>";
for(var i=0;i<row;i++)
{
Append+="<tr>";
DrawEmoji(ItemsPerRow, i);
Append+="</tr>";
}
Append+="</table>";
$("#emoji_container").html(Append);
}
function DrawEmoji(ItemsPerRow, r){
var size=16;
for(var i=0;i<ItemsPerRow;i++){
Append+="<td>"
Append+="<div class='emoji' style='background-position:0px -"+parseInt(r*i*size)+"px;'></div>";
Append+="</td>";
}
}
});

EDIT: corrected indexing
As suggested by Jovan, the indexing should be as he says:
(r*ItemsPerRow + i) * size
But it's still misaligned so you'll have to correct it like this:
(r*ItemsPerRow + i) * size - 2
Then, you don't want to go beyond the actual maximum index, which is 262, or you'll have repetitions and misalignments as I told in the comment above.
Here is the full solution. It fixes indexing, alignment and maximum index: http://jsfiddle.net/0r16e802/12/
The emojis in the image are aligned to 17 pixels, not 16.
var size=17;
This aligns them to one another, but you'll still have to solve the border conditions, which are 1 pixel off.
To do this, fix the CSS by 1 pixel:
height:16px;
Finally, fix the size computation by subtracting 1:
parseInt(r*i*size - 1)
Here is the solution: http://jsfiddle.net/0r16e802/5/

I don't think any of the previously posted answers are correct, even if they do happen to work for the first two rows.
The way your sprite is organized, you are looking for:
parseInt( (r*ItemsPerRow + i) * size)

As #pid already said, the sizing was somewhat out by a pixel but also the first row repeats because of i=0 The offset height of the first row ends up being worked out as 0. You also have a 'squidgy' factor for whatever reason of needing to -2 from the height to make them align properly, probably an issue with the original image.
function DrawEmoji(ItemsPerRow, r) {
var size = 17;
for (var i = 0; i < ItemsPerRow; i++) {
Append += "<td>"
Append += "<div class='emoji' style='background-position:0px -" + parseInt((r + 1) * (i + 1) * size - 2) + "px;'></div>";
Append += "</td>";
}
}
});
http://jsfiddle.net/0r16e802/9/

Pixelation effect with divs? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm trying to create a pixelation effect but with divs. The divs are small, 25px by 25px. I do not want to hard-code hundreds of these into the markup.
I want the entire body of the page to made up of these div "pixels" so that I can do something interesting with color randomization.
I imagine this has something to do with cloning divs, but assuming I do that, how will I clone them in such a way that they generate the full size of the body? So that it appears as though the full screen is full of pixels?
Note: I am a novice developer.

Your question is sort of vague, but here's what I was able to throw together, hopefully this answers your question. Basically I just generate a long string containing all the div elements and inject them into the page
http://codepen.io/anon/pen/pbnth
//helper function see
//http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
var num_of_pixels = 5000;
var output = "";
for(var i = 0; i < 5000; i++) {
output+= '<div style="'
output+= "background-color:"+getRandomColor()+";"
output+='"" class="pixel"></div>'
}
var container = document.getElementById('container');
container.innerHTML = output
In order to get the full screen effect you're talking about, just calculate the innerwidth*innerheight and divide by the area of each pixel, these are 25px with a 2px margin so 27^2
EDIT:
Here's an example using a fixed color set
http://codepen.io/mattbucci/pen/ueBfx
And here's a bonus animated version, although think there's probably a more efficient way to do this with canvas
http://codepen.io/mattbucci/pen/avrjd

Here's a rudimentary FIDDLE that will get you started.
There is a container (you could change it to body) that is filled with little divs (you adjust the size of the divs and container as you wish).
JavaScript fills the container, and assigns a random color to each div with inline styling.
JS
for(var n=1; n < 100; n++)
{
for(var r = 1; r < 50; r++)
{
mycolor = '#' + Math.random().toString(16).substring(2, 8);
var mydiv = "<div style='background-color:" + mycolor + " ;'></div>";
$( '.container' ).append( mydiv );
}
$( '.container' ).append( "<div class='clearboth'></div>");
}

Text align by word length

I have been working on a project that has a similar result as the spritz app. Basically, it takes a string, turns each word into an array and then displays each output one at a time. The problem is that I can't seem to find a way to align each word based on the word length (see link).
Here is a demo of the spritz output that I am looking for: http://imgur.com/a/UlZ6W
Does anyone know how to center an output based on the the length of a word?
IE:
If array length is 1 letter, center letter
If array length is 2 - 4, center second letter
if array length is 5 - 7, center third letter
ect.

A start that might could work for you.
http://jsfiddle.net/kimiliini/ap64C/
Use an element to measure width. Calculate width of word to middle w/wo center letter.
For example having the element:
<span id="tw"></span>
and CSS:
#tw {
position: absolute;
visibility: hidden;
white-space: nowrap;
font: bold 18px Arial;
}
One can:
// get element
tw = document.getElementById('tw');
// set text
tw.textContent = 'foo';
// get width
tw.offsetWidth;
Having this as base we can split word into three groups:
Letters belonging to the left of center letter.
Letters for left + center.
Letters after center.
Example. Having the word starting and a box where we want to center at offset 110 pixels from left.
length = 8
left = sta
center = r
right = ting
width_left = 15
width_left + width_center = 19
mid = (19 - 15) / 2
box margin left = 110 - (width_left + mid)
Simple, should be refactored code, sample:
// span's for left, center and right
var tx = {
L: document.getElementById('txt_L'),
C: document.getElementById('txt_C'),
R: document.getElementById('txt_R')
};
// Box to that holds span's, to set margin left on.
var b = document.getElementById('bw');
function width(w) {
tw.textContent = w;
return tw.offsetWidth;
}
function middle(w) {
var n = w.length,
// Center char calculation. 1=1, 2-5=2, 6-8=3, ...
c = ~~((n + 1) / 3) + 1,
z = {};
z.a = width(w.substr(0, c - 1));
z.b = width(w.substr(0, c));
z.c = (z.b - z.a) / 2;
b.style.marginLeft = ~~(110 - (z.a + z.c)) + 'px';
tx.L.textContent = w.substr(0, c - 1);
tx.C.textContent = w.substr(c - 1, 1);
tx.R.textContent = w.substr(c);
}

Some Background On Your Problem
I believe you're going to find this either very difficult to solve or else are going to have to railroad you users quite dramatically.
Words don't have lengths, because characters aren't all of the same size, and even the space between letters is different The exception is of course monospaced fonts (and they aren't really an exception they just behave like one).
To achieve what you're after, you need to know the precise size of each letter, and for real accuracy would need to know the precise size of each letter in relation to it's adjacent letters. But that's typography nitty-gritty and probably not what you want to do.
If it were me, I'd artificially do it with tags, whose width you could specify (say, your largest character + 1 px). Then word length will always be equivalent to some multiple of the parent element.
The other option would be to render the text as image via HTML5 canvas, which could be made to autofit the word and then would have, itself, a width property.
A Solution to Consider
Try something like:
<style>
li.char {
display:inline-block;
text-align:center;
width:4px;
}
li.char.center { color:red}
</style>
<body>
...
<div style="text-align:center">
<ul id="spritztext"> </ul>
</div>
<script>
var my_string = "strings are cool";
var center = ceil( my_string.len() / 2);
/* rounding up/down is a bad solution to finding the center character, for what it's worth. examine the words 'will' vis 'limb' in a proportional font and you'll see why*/
var count = 0;
$(my_string).each(function() {
var class = count == center ? "char center" : "char";
count++
var char_element ="<li class='" + class +"'>" + my_string[count] + "</li>";
$("#spritztext").append(char_element)
});
TLDR: text isn't graphics; you need a monospaced font, a rendering strategy, or a hack via parent elements

One solution may be divide the word into two parts and use a table-like two column layout to show the word. Like this:
<table style="border-collapse: collapse; width: 200px;"><tr>
<td style="text-align: right; width: 100px; padding: 0;">wo</td>
<td style="text-align: left; width: 100px; padding: 0;">rd</td>
</tr></table>
This doesn't exactly align a letter center at one position, but could align left or right edge of a letter exactly at some position.
To refine the solution, you may need to get letter/character width on demand (By creating a temp 'span' node with inner text of the letter, then get the offsetWidth). Then adjust the margin of the two parts to achieve the exactly goal.

blurred edges on animated div when using [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I am learning to create a simple animation using a div, javascript and requestAnimationFrame. The animation is working, but with some visual issues which do not seem correct. The issues occur in multiple browsers, although I'm primarily using Chrome. I've created an example with minimal code to demonstrate the issues. I am aware of css animations, webGl, etc exist and may be superior, but want to understand why this code does not work as expected.
One issue is blurring along all edges of a moving div, especially the leading and trailing. The blurring occurs when the div moves quickly. Is this normal and unavoidable? I see the same issue when playing with code written by other people, through that may only mean we are all making the same mistake. I want to render a crisp image, not a blurred image. I'm hoping that as a newbie to animation I'm making a really dumb mistake that is easy to fix.
Another issue are occasional blink effects along the trailing edge of a moving div. They don't occur on every frame. Based on Chrome timeline the frame rates are fine. I have no clue when is causing this.
The example code runs everywhere, but is sized for a desktop.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<style>
.testAnim {
background: red;
height: 100px;
width: 100px;
position: absolute;
}
</style>
</head>
<body width="100%" height="100%" >
<div id="testAnim1" class="testAnim"></div>
<script>
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var movers = document.querySelectorAll('.testAnim');
for(var m = 0; m < movers.length; m++) {
movers[m].posX = 20;
movers[m].posY = 10;
movers[m].deltaX = 20;
movers[m].deltaY = 0;
};
function update(timestamp) {
for(var m = 0; m < movers.length; m++) {
if (((movers[m].posX + 5 + movers[m].deltaX) > 1200) ||
((movers[m].posX - 5 + movers[m].deltaX) < 0)) {
movers[m].deltaX *= -1;
};
if (((movers[m].posY + 5 + movers[m].deltaY) > 500) ||
((movers[m].posY - 5 + movers[m].deltaY) < 0)) {
movers[m].deltaY *= -1;
};
movers[m].posX += movers[m].deltaX;
movers[m].posY += movers[m].deltaY;
movers[m].style.left = movers[m].posX + 'px';
movers[m].style.top = movers[m].posY + 'px';
//movers[m].style.webkitTransform = "translate3d( "+ movers[m].posX +"px, "+ movers[m].posY +"px, "+ 0 +"px)";
};
window.requestAnimationFrame( update );
};
window.requestAnimationFrame( update );
</script>
</body>

No answer was found. Given the terrible performance of moving html divs this question was more academic than practical.