Develop Reference

Javascript carosel animation

I'm trying to make an image carousel with center animation. I don't want to use CSS animations, instead I'd like to use jQuery.
By pressing the 'Prev' button the animation will start. One of the slides which will be central begins to grow. I've used jQuery's animate() to animate width and height. Everything works as required except I can't understand why the animation makes the central slide jump.
I have created this sample. If you push the 'Prev' button the animation will start.
var scroll_speed = 4000;
var items_cnt = $('.mg_item').length;
var container_size = $(".main_cnt").innerWidth();
var item_avg_w = container_size / 5;
var item_center_w = ((item_avg_w / 100) * 20) + item_avg_w;
var item_center_h = (item_center_w / 16) * 9 + 30;
var item_w = ((container_size - item_center_w) / 4) - 2;
var item_h = ((item_w / 16) * 9);
var gallery_content = $('.gallery_body').html();
$('.gallery_body').html(gallery_content + gallery_content + gallery_content);
var items_offset = items_cnt * item_w + 14;
$('.gallery_body').css('left', -items_offset);
$('.mg_item').css("width", item_w);
$('.mg_item').css("height", item_h);
//$('.mg_item').css("margin-bottom", (item_center_h - item_h) / 2);
//$('.mg_item').css("margin-top", (item_center_h - item_h) / 2);
//$('.mg_item_с').css("width", item_center_w);
//$('.mg_item_с').css("height", item_center_h);
//document.documentElement.style.setProperty('--center_width', item_center_w + "px");
//document.documentElement.style.setProperty('--center_height', item_center_h + "px");
$('.main_cnt').css("height", item_center_h);
check_visible();
AssignCenter(0);
function gonext() {
AssignCenter(-1);
ZoomIn();
$('.gallery_body').animate({
left: '+=' + (item_w + 2),
}, scroll_speed, "linear", function() {
LoopSlides();
});
}
function goprev() {
AssignCenter(1);
ZoomIn();
$('.gallery_body').animate({
left: '-=' + (item_w + 2),
}, scroll_speed, "linear", function() {
LoopSlides();
});
}
function ZoomIn() {
$('.center').animate({
width: item_center_w + 'px',
height: item_center_h + 'px',
}, scroll_speed, function() {});
}
function LoopSlides() {
var cur_pos = $('.gallery_body').position().left
var left_margin = Math.abs(items_offset * 2 - item_w) * -1;
var right_margin = 0 - item_w;
if (cur_pos < left_margin) {
$('.gallery_body').css('left', -items_offset);
}
if (cur_pos >= 0) {
$('.gallery_body').css('left', -items_offset);
}
check_visible();
AssignCenter(0);
}
function check_visible() {
$('.mg_item').each(function(i, obj) {
var pos = $(this).offset().left;
if (pos < 0 || pos > container_size) {
$(this).addClass("invisible");
$(this).removeClass("active");
} else {
$(this).addClass("active");
$(this).removeClass("invisible");
}
});
}
function AssignCenter(offset) {
var center_slide = $('.active')[2 + offset];
$('.center').each(function(i, obj) {
$(this).removeClass("center");
});
$(center_slide).addClass("center");
//$(center_slide).css("width", item_center_w);
//$(center_slide).css("height", item_center_h);
}
:root {
--center_width: 0px;
--center_height: 0px;
}
.main_cnt {
background-color: rgb(255, 0, 0);
padding: 0px;
overflow: hidden;
margin: 0px;
}
.gallery_body {
width: 500%;
background-color: rgb(128, 128, 128);
position: relative;
}
.mg_item {
width: 198px;
height: 150px;
background-color: blue;
display: inline-block;
position: relative;
margin: -1px;
padding: 0px;
font-size: 120px;
}
.center {
background-color: brown;
/*width: var(--center_width) !important;
height: var(--center_height) !important;*/
}
.item_c {
width: 410px;
height: 150px;
background-color: blueviolet;
display: inline-block;
position: relative;
margin: -1px;
padding: 0px;
font-size: 120px;
}
.video-js .vjs-dock-text {
text-align: right;
}
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<div class="main_cnt">
<div class="gallery_body">
<div class="mg_item">1</div>
<div class="mg_item">2</div>
<div class="mg_item">3</div>
<div class="mg_item">4</div>
<div class="mg_item">5</div>
<div class="mg_item">6</div>
<div class="mg_item">7</div>
</div>
</div>
<br><br>
<button onclick="gonext()">GONEXT</button>
<button onclick="goprev()">GOPREV</button>
<button onclick="check_visible()">CHEVIS</button>

How can we show one division on top of other while both are visible by some opacity in html?

I am not good at designing web pages. I have this page which I am making on codepen.io from one of the code at https://codepen.io/KARANVERMA5/pen/oqKJma .
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.modal {
width: 600px;
max-width: 100%;
height: 400px;
max-height: 100%;
}
#word-cloud {
height: 100vh;
width: 100vw;
margin: 0 auto;
}
body,
html {
margin: 0;
padding: 0;
}
.bar {
border: 1px solid #666;
height: 5px;
width: 100px;
}
.bar .in {
-webkit-animation: fill 10s linear 1;
animation: fill 10s linear 1;
height: 100%;
background-color: green;
}
#-webkit-keyframes fill {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#keyframes fill {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(window).on('load', function() {
$('#myModal').modal('show');
});
</script>
</head>
<div class="modal hide fade" id="myModal" role="dialog">
<div class="modal-header">
<img class="right" src="http://i.imgur.com/jfDhpP5.png" />
</div>
<div class="modal-body">
<h3>
<div id="word-cloud">
</div>
</h3>
</div>
<div class="modal-footer">
<div class="bar">
<div class="in"></div>
</div>
<div class="container center">
<button type="button" class="btn btn-default" data-dismiss="modal">Enter</button>
<div>
<span class="copyrights">Copyrights©
<script language="JavaScript" type="text/javascript">
now = new Date
theYear=now.getYear()
if (theYear < 1900)
theYear=theYear+1900
document.write(theYear)
</script>
your company
</span>
</div>
</div>
</div>
</div>
<script>
/* ======================= SETUP ======================= */
var config = {
trace: true,
spiralResolution: 1, //Lower = better resolution
spiralLimit: 360 * 5,
lineHeight: 0.8,
xWordPadding: 0,
yWordPadding: 3,
font: "sans-serif"
}
var words = ["words", "are", "cool", "and", "so", "are", "you", "Great", "funhouse!", "apart", "from", "Ravi", "fish"].map(function(word) {
return {
word: word,
freq: Math.floor(Math.random() * 50) + 10
}
})
words.sort(function(a, b) {
return -1 * (a.freq - b.freq);
});
var cloud = document.getElementById("word-cloud");
cloud.style.position = "relative";
cloud.style.fontFamily = config.font;
var traceCanvas = document.createElement("canvas");
traceCanvas.width = cloud.offsetWidth;
traceCanvas.height = cloud.offsetHeight;
var traceCanvasCtx = traceCanvas.getContext("2d");
cloud.appendChild(traceCanvas);
var startPoint = {
x: cloud.offsetWidth / 2,
y: cloud.offsetHeight / 2
};
var wordsDown = [];
/* ======================= END SETUP ======================= */
/* ======================= PLACEMENT FUNCTIONS ======================= */
function createWordObject(word, freq) {
var wordContainer = document.createElement("div");
wordContainer.style.position = "absolute";
wordContainer.style.fontSize = freq + "px";
wordContainer.style.lineHeight = config.lineHeight;
/* wordContainer.style.transform = "translateX(-50%) translateY(-50%)";*/
wordContainer.appendChild(document.createTextNode(word));
return wordContainer;
}
function placeWord(word, x, y) {
cloud.appendChild(word);
word.style.left = x - word.offsetWidth / 2 + "px";
word.style.top = y - word.offsetHeight / 2 + "px";
wordsDown.push(word.getBoundingClientRect());
}
function trace(x, y) {
// traceCanvasCtx.lineTo(x, y);
// traceCanvasCtx.stroke();
traceCanvasCtx.fillRect(x, y, 1, 1);
}
function spiral(i, callback) {
angle = config.spiralResolution * i;
x = (1 + angle) * Math.cos(angle);
y = (1 + angle) * Math.sin(angle);
return callback ? callback() : null;
}
function intersect(word, x, y) {
cloud.appendChild(word);
word.style.left = x - word.offsetWidth / 2 + "px";
word.style.top = y - word.offsetHeight / 2 + "px";
var currentWord = word.getBoundingClientRect();
cloud.removeChild(word);
for (var i = 0; i < wordsDown.length; i += 1) {
var comparisonWord = wordsDown[i];
if (!(currentWord.right + config.xWordPadding < comparisonWord.left - config.xWordPadding ||
currentWord.left - config.xWordPadding > comparisonWord.right + config.wXordPadding ||
currentWord.bottom + config.yWordPadding < comparisonWord.top - config.yWordPadding ||
currentWord.top - config.yWordPadding > comparisonWord.bottom + config.yWordPadding)) {
return true;
}
}
return false;
}
/* ======================= END PLACEMENT FUNCTIONS ======================= */
/* ======================= LETS GO! ======================= */
(function placeWords() {
for (var i = 0; i < words.length; i += 1) {
var word = createWordObject(words[i].word, words[i].freq);
for (var j = 0; j < config.spiralLimit; j++) {
//If the spiral function returns true, we've placed the word down and can break from the j loop
if (spiral(j, function() {
if (!intersect(word, startPoint.x + x, startPoint.y + y)) {
placeWord(word, startPoint.x + x, startPoint.y + y);
return true;
}
})) {
break;
}
}
}
})();
/* ======================= WHEW. THAT WAS FUN. We should do that again sometime ... ======================= */
/* ======================= Draw the placement spiral if trace lines is on ======================= */
(function traceSpiral() {
traceCanvasCtx.beginPath();
if (config.trace) {
var frame = 1;
function animate() {
spiral(frame, function() {
trace(startPoint.x + x, startPoint.y + y);
});
frame += 1;
if (frame < config.spiralLimit) {
window.requestAnimationFrame(animate);
}
}
animate();
}
})();
</script>
</html>
The page right now looks like this:-
While the footer right now has something like this:
There is a progress-bar on the top of enter button. I want to show the enter button and progress-bar behind the word-cloud and enter button only shows after progress-bar is complete. Please point me in right direction. Why the complete design is going to the left? And how can we display other divs behind the word cloud?

As Pete said we just have to add z-index and positioning to it. My CSS look something like it. After all we just have to tweak with the css that is all. It solved the issue.
#word-cloud {
position:fixed;
height: 100vh;
max-height: 100%;
width: 100vw;
max-width: 100%;
margin:-300px auto auto -250px;
top:20%;
left:22%;
text-align:center;
z-index:2;
}
img{
position:relative;
left:40%;
margin-left:0px;
}
body,
html {
margin: 0;
padding: 0;
}
.bar .in {
-webkit-animation: fill 10s linear 1;
animation: fill 10s linear 1;
height: 100%;
background-color: red;
}
#-webkit-keyframes fill {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#keyframes fill {
0% {
width: 0%;
}
100% {
width: 100%;
}
}

Single page scroll with jQuery

I am struggling to create a web page where there are 2 sections.
The first section is the complete website except for the menu.
The second section should be the menu displayed on full screen.
The user should be able to scroll with a nice effect between the two sections.
Here is a code pen example:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
/* SCROLL BEGIN */
a.back-to-top {
display: none;
width: 100px;
height: 100px;
text-indent: -9999px;
position: fixed;
z-index: 999;
top: 85%;
left: 45%;
background: url("http://www.cleanmyride.ca/wp-content/uploads/2015/01/Down-Arrow.png");
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
/* SCROLL END*/
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
<link href="test.css" rel="stylesheet">
<title>Pandaniell</title>
</head>
<body>
<a class="back-to-top" href="#">Back To Top</a>
<!-- SCROLL BEGIN -->
<script>
var amountScrolled = 4800;
$('a.back-to-top').fadeIn('slow');
$(window).scroll(function () {
if ($(window).scrollTop() < amountScrolled) {
$('a.back-to-top').fadeIn('slow');
} else {
$('a.back-to-top').fadeOut('slow');
}
});
$('a.back-to-top').click(function () {
$('html, body').animate({
scrollTop: 10000
}, 1000);
return false;
});
</script>
<!-- SCROLL END -->
<div class="container"></div>
<nav>
<ul>
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
WHERE
</li>
<li>
CONTACT
</li>
<li style="float:right">
PORTFOLIO
</li>
</ul>
</nav>
<div id="gradient"></div>
<script>
// target to give background to
var $div = document.getElementById("gradient");
// rgb vals of the gradients
var gradients = [{
start: [128, 179, 171],
stop: [30, 41, 58]
},
{
start: [255, 207, 160],
stop: [234, 92, 68]
},
{
start: [212, 121, 121],
stop: [130, 105, 151]
}
];
// how long for each transition
var transition_time = 4;
// internal type vars
var currentIndex = 0; // where we are in the gradients array
var nextIndex = 1; // what index of the gradients array is next
var steps_count = 0; // steps counter
var steps_total = Math.round(transition_time * 60); // total amount of steps
var rgb_steps = {
start: [0, 0, 0],
stop: [0, 0, 0]
}; // how much to alter each rgb value
var rgb_values = {
start: [0, 0, 0],
stop: [0, 0, 0]
}; // the current rgb values, gets altered by rgb steps on each interval
var prefixes = ["-webkit-", "-moz-", "-o-", "-ms-", ""]; // for looping through adding styles
var div_style = $div.style; // short cut to actually adding styles
var color1, color2;
// sets next current and next index of gradients array
function set_next(num) {
return (num + 1 < gradients.length) ? num + 1 : 0;
}
// work out how big each rgb step is
function calc_step_size(a, b) {
return (a - b) / steps_total;
}
// populate the rgb_values and rgb_steps objects
function calc_steps() {
for (var key in rgb_values) {
if (rgb_values.hasOwnProperty(key)) {
for (var i = 0; i < 3; i++) {
rgb_values[key][i] = gradients[currentIndex][key][i];
rgb_steps[key][i] = calc_step_size(gradients[nextIndex][key][i],
rgb_values[key][i]);
}
}
}
}
// update current rgb vals, update DOM element with new CSS background
function updateGradient() {
// update the current rgb vals
for (var key in rgb_values) {
if (rgb_values.hasOwnProperty(key)) {
for (var i = 0; i < 3; i++) {
rgb_values[key][i] += rgb_steps[key][i];
}
}
}
// generate CSS rgb values
var t_color1 = "rgb(" + (rgb_values.start[0] | 0) + "," + (rgb_values.start[
1] | 0) + "," + (rgb_values.start[2] | 0) + ")";
var t_color2 = "rgb(" + (rgb_values.stop[0] | 0) + "," + (rgb_values.stop[
1] | 0) + "," + (rgb_values.stop[2] | 0) + ")";
// has anything changed on this interation
if (t_color1 != color1 || t_color2 != color2) {
// update cols strings
color1 = t_color1;
color2 = t_color2;
// update DOM element style attribute
div_style.backgroundImage =
"-webkit-gradient(linear, left bottom, right top, from(" + color1 +
"), to(" + color2 + "))";
for (var i = 0; i < 4; i++) {
div_style.backgroundImage = prefixes[i] + "linear-gradient(45deg, " +
color1 + ", " + color2 + ")";
}
}
// we did another step
steps_count++;
// did we do too many steps?
if (steps_count > steps_total) {
// reset steps count
steps_count = 0;
// set new indexs
currentIndex = set_next(currentIndex);
nextIndex = set_next(nextIndex);
// calc steps
calc_steps();
}
if (div_style.backgroundImage.indexOf("gradient") != -1) {
window.requestAnimationFrame(updateGradient)
}
}
// initial step calc
calc_steps();
// go go go!
window.requestAnimationFrame(updateGradient);
</script>
<h1>Dit is mijn website</h1>
<h2><img alt="Instagram" border="0" class="instagram" height="50" src="https://image.ibb.co/nHgkKQ/Instagram.png" width="50"></h2>
<h3><img alt="Facebook" border="0" class="facebook" height="50" src="https://image.ibb.co/bLf7zQ/Facebook.png" width="50"></h3>
<h4><a href="https://www.dropbox.com/sh/omjvrdt5b3a5x6m/AACYBA_EKBeNzAK1YVQmTtH7a?dl=0"
target="_blank"><img alt="Dropbox" border="0" class="dropbox" height="50" src="https://image.ibb.co/i2fUDk/Dropbox.png" width="50"></a></h4>
<script>
document.addEventListener('DOMContentLoaded', function (event) {
// array with texts to type in typewriter
var dataText = ["Welkom op mijn website! dit is een voorbeeld tekst"];
// type one text in the typwriter
// keeps calling itself until the text is finished
function typeWriter(text, i, fnCallback) {
// chekc if text isn't finished yet
if (i < (text.length)) {
// add next character to h1
document.querySelector("h1").innerHTML = text.substring(0, i + 1) +
'<span aria-hidden="true"><\/span>';
// wait for a while and call this function again for next character
setTimeout(function () {
typeWriter(text, i + 1, fnCallback)
}, 100);
}
// text finished, call callback if there is a callback function
else if (typeof fnCallback == 'function') {
// call callback after timeout
setTimeout(fnCallback, 700);
}
}
// start a typewriter animation for a text in the dataText array
function StartTextAnimation(i) {
if (typeof dataText[i] == 'undefined') {
setTimeout(function () {
StartTextAnimation(0);
}, 20000);
}
// check if dataText[i] exists
if (i < dataText[i].length) {
// text exists! start typewriter animation
typeWriter(dataText[i], 0, function () {
// after callback (and whole text has been animated), start next text
StartTextAnimation(i + 1);
});
}
}
// start the text animation
StartTextAnimation(0);
});
</script>
</body>
</html>
CSS:
.instagram {
margin: auto;
position: absolute;
top: -20 % % ;
left: 5 % ;
bottom: 5 % ;
right: 8 % ;
}
.facebook {
margin: auto;
position: absolute;
top: -20 % % ;
left: 5 % ;
bottom: 5 % ;
right: 16 % ;
}
.dropbox {
margin: auto;
position: absolute;
top: -20 % % ;
left: 5 % ;
bottom: 5 % ;
right: 0 % ;
}
.container {
width: 95 % ;
margin - left: auto;
margin - right: auto;
height: 1000 px;
}
/* Navigation */
nav {
width: 100 % ;
height: 6.5 % ;
background - color: rgba(255, 255, 255, 0.13);
}
ul li {
list - style - type: none;
float: left;
color: #FFFFFF;
font - size: 16 px;
text - align: left;
margin - right: 25 px;
margin - top: 25 px;
letter - spacing: 2 px;
font - weight: bold;
}
ul li a {
color: #FFFFFF;
text - decoration: none;
visibility: visible;
opacity: 1;
transition: 0.2 s ease;
}
ul li: hover a {
color: #1115B4;
visibility: visible;
opacity: 1;
}
# gradient {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #836997;
}
h1 {
width: 50%;
font-family: 'Bree Serif', serif;
font-size: 80px;
color: white;
margin: auto;
position: absolute;
top: 30%;
left: 5%;
bottom: 5%;
right: 5%;
}
body {
font-family: arial;
background-color: rgb(0, 0, 0);
margin-top: 0px;
margin-right: 0px;
margin-bottom: 100px;
margin-left: 0px;
font-style: normal;
font-weight: 200;
height: 100%;
{

Animating newly created objects with different keyframes values

So I'm trying to make simple animation. When you press somewhere inside blue container, a circle should be created in this place and then go up. After some research I found how to put JS values into keyframes, but it's changing values for every object not just for freshly created. If you run snipped and press somewhere high and then somewhere low you will see what I'm talking about.
I found some AWESOME solution with Raphael library, but I'm a beginner and I'm trying to make something like this in JS. Is it even possible? How?
var bubble = {
posX: 0,
posY: 0,
size: 0
};
var aquarium = document.getElementById("container");
var ss = document.styleSheets;
var keyframesRule = [];
function findAnimation(animName) { //function to find keyframes and insert replace values in them
for (var i = 0; i < ss.length; i++) {
for (var j = 0; j < ss[i].cssRules.length; j++) {
if (window.CSSRule.KEYFRAMES_RULE == ss[i].cssRules[j].type && ss[i].cssRules[j].name == animName) {
keyframesRule.push(ss[i].cssRules[j]);
}
}
}
return keyframesRule;
}
function changeAnimation (nameAnim) { //changing top value to cursor position when clicked
var keyframesArr = findAnimation(nameAnim);
for (var i = 0; i < keyframesArr.length; i++) {
keyframesArr[i].deleteRule("0%");
keyframesArr[i].appendRule("0% {top: " + bubble.posY + "px}");
}
}
function createBubble(e) {
"use strict";
bubble.posX = e.clientX;
bubble.posY = e.clientY;
bubble.size = Math.round(Math.random() * 100);
var bubbleCircle = document.createElement("div");
aquarium.appendChild(bubbleCircle);
bubbleCircle.className = "bubble";
var bubbleStyle = bubbleCircle.style;
bubbleStyle.width = bubble.size + "px";
bubbleStyle.height = bubble.size + "px";
bubbleStyle.borderRadius = (bubble.size / 2) + "px";
//bubbleStyle.top = bubble.posY - (bubble.size / 2) + "px";
bubbleStyle.left = bubble.posX - (bubble.size / 2) + "px";
changeAnimation("moveUp");
bubbleCircle.className += " animate";
}
aquarium.addEventListener("click", createBubble);
//console.log(bubble);
body {
background-color: red;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
position: fixed;
top: 80px;
left: 0;
background-color: rgb(20,255,200);
}
#surface {
width: 100%;
height: 40px;
position: fixed;
top: 40px;
opacity: 0.5;
background-color: rgb(250,250,250);
}
.bubble {
position: fixed;
border: 1px solid blue;
}
.animate {
animation: moveUp 5s linear;//cubic-bezier(1, 0, 1, 1);
-webkit-animation: moveUp 5s linear;//cubic-bezier(1, 0, 1, 1);
}
#keyframes moveUp{
0% {
top: 400px;
}
100% {
top: 80px;
}
}
#-webkit-keyframes moveUp{
0% {
top: 400px;
}
100% {
top: 80px;
}
}
<body>
<div id="container">
</div>
<div id="surface">
</div>
</body>

Here is a possible solution. What I did:
Remove your functions changeAnimation () and findAnimation() - we don't need them
Update the keyframe to look like - only take care for the 100%
#keyframes moveUp { 100% {top: 80px;} }
Assign top of the new bubble with the clientY value
After 5 seconds set top of the bubble to the offset of the #container(80px) - exactly when animation is over to keep the position of the bubble, otherwise it will return to initial position
var bubble = {
posX: 0,
posY: 0,
size: 0
};
var aquarium = document.getElementById("container");
function createBubble(e) {
"use strict";
bubble.posX = e.clientX;
bubble.posY = e.clientY;
bubble.size = Math.round(Math.random() * 100);
var bubbleCircle = document.createElement("div");
aquarium.appendChild(bubbleCircle);
bubbleCircle.className = "bubble";
var bubbleStyle = bubbleCircle.style;
bubbleStyle.width = bubble.size + "px";
bubbleStyle.height = bubble.size + "px";
bubbleStyle.borderRadius = (bubble.size / 2) + "px";
bubbleStyle.top = bubble.posY - (bubble.size / 2) + "px";
bubbleStyle.left = bubble.posX - (bubble.size / 2) + "px";
bubbleCircle.className += " animate";
// The following code will take care to reset top to the top
// offset of #container which is 80px, otherwise circle will return to
// the position of which it was created
(function(style) {
setTimeout(function() {
style.top = '80px';
}, 5000);
})(bubbleStyle);
}
aquarium.addEventListener("click", createBubble);
body {
background-color: red;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
position: fixed;
top: 80px;
left: 0;
background-color: rgb(20, 255, 200);
}
#surface {
width: 100%;
height: 40px;
position: fixed;
top: 40px;
opacity: 0.5;
background-color: rgb(250, 250, 250);
}
.bubble {
position: fixed;
border: 1px solid blue;
}
.animate {
animation: moveUp 5s linear;
/*cubic-bezier(1, 0, 1, 1);*/
-webkit-animation: moveUp 5s linear;
/*cubic-bezier(1, 0, 1, 1);*/
}
#keyframes moveUp {
100% {
top: 80px;
}
}
#-webkit-keyframes moveUp {
100% {
top: 80px;
}
}
<body>
<div id="container"></div>
<div id="surface"></div>
</body>
The problem about your code was that it is globally changing the #keyframes moveUp which is causing all the bubbles to move.

The problem with your code is that you're updating keyframes which are applied to all bubbles. I tried another way of doing it by using transition and changing the top position after the element was added to the DOM (otherwise it wouldn't be animated).
The main problem here is to wait the element to be added to the DOM. I tried using MutationObserver but it seems to be called before the element is actually added to the DOM (or at least rendered). So the only way I found is using a timeout which will simulate this waiting, although there must be a better one (because it may be called too early, causing the bubble to directly stick to the top), which I would be happy to hear about.
var bubble = {
posX: 0,
posY: 0,
size: 0
};
var aquarium = document.getElementById("container");
function createBubble(e) {
"use strict";
bubble.posX = e.clientX;
bubble.posY = e.clientY;
bubble.size = Math.round(Math.random() * 100);
var bubbleCircle = document.createElement("div");
aquarium.appendChild(bubbleCircle);
bubbleCircle.classList.add("bubble");
var bubbleStyle = bubbleCircle.style;
bubbleStyle.width = bubble.size + "px";
bubbleStyle.height = bubble.size + "px";
bubbleStyle.borderRadius = (bubble.size / 2) + "px";
bubbleStyle.top = bubble.posY - (bubble.size / 2) + "px";
bubbleStyle.left = bubble.posX - (bubble.size / 2) + "px";
setTimeout(function() {
bubbleCircle.classList.add("moveUp");
}, 50);
}
aquarium.addEventListener("click", createBubble);
body {
background-color: red;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
position: fixed;
top: 80px;
left: 0;
background-color: rgb(20, 255, 200);
}
#surface {
width: 100%;
height: 40px;
position: fixed;
top: 40px;
opacity: 0.5;
background-color: rgb(250, 250, 250);
}
.bubble {
position: fixed;
border: 1px solid blue;
transition: 5s;
}
.moveUp {
top: 80px !important;
}
<body>
<div id="container">
</div>
<div id="surface">
</div>
</body>
Also, I used the classList object instead of className += ... because it is more reliable.

jquery reveal image based on get second clock

I'm struggling to find a solution to this and wonder if anyone can help.
I'd like to make a page where an image would disappear over time revealing another image. I'm hoping to achieve this by using the updatesecond/getseconds function. So essentially it would act as a clock, the more minutes/seconds have passed the more it disappears, and have it cycle. For example at the beginning of the day it would be a full image, at 12 it would be half, and at 24hours it would be gone, and repeat. I figure it would be an if else function about the percentage of the page that's left, I just can't figure out how to word it.
Is this possible at all? Any help would be greatly appreciated. Thanks!
Here is the code I'm working with so far. Thank you in advance.
body
{
background-color: #FFF;
padding: 2%;
color: #ccc;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1em;
}
a
{
color: #FFF;
text-decoration: none;
}
a:hover
{
color: #DCE808;
text-decoration: underline;
}
#mosaic
{
/* background-color: yellow;
font-size: 500px;
color: black;
height: 1310px;
width: 2000px; */
background-image: url('tomorrow4.png');
}
#mosaic span.hover
{
/* background-color: blue;
font-size: 500px;
color: white;
height: 1310px;
width: 2000px;
left: 100px;*/
float: left;
background-image: url('today4.png');
}
and javascript
$(document).ready(function() {
var width = 1400;
var height = 724;
count = 0;
elements = new Array();
var el = $('#mosaic');
el.width(width).height(height);
var horizontal_pieces = 100;
var vertical_pieces = 100;
total_pieces = horizontal_pieces * vertical_pieces;
var box_width = width / horizontal_pieces;
var box_height = height / vertical_pieces;
var vertical_position = 0;
for (i=0; i<total_pieces; i++)
{
var tempEl = $('<span class="hover" id="hover-' + i + '">
</span>');
var horizontal_position = (i % horizontal_pieces) * box_width;
if(i > 0 && i % horizontal_pieces == 0)
{
vertical_position += box_height;
}
tempEl.css('background-position', '-' + horizontal_position + 'px
-' + vertical_position + 'px');
el.append(tempEl);
elements.push(tempEl);
}
elements = shuffleArray(elements);
$('#mosaic .hover').width(box_width).height(box_height);
setInterval(toggleDisplay, 100);
});
function toggleDisplay()
{
var tempEl = elements[count];
var opacity = tempEl.css('opacity');
if(opacity == 0)
{
tempEl.animate({ opacity: 1 })
}
else
{
tempEl.animate({ opacity: 0 })
}
count = (count + 1) % total_pieces;
}
/* shuffleArray source:
http://stackoverflow.com/questions/2450954/how-to-randomize-a-
javascript-array#12646864 */
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor() * (i + 1);
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}

Do you mean something like this? http://jsfiddle.net/1r5qer56/
I used 4 sectors (as skewY tends to screw up over 90 degrees) and had them set to a size relative to the amount of minutes that have passed since midnight.
If you want to test it, just put a custom number in for time.
My code is below:
HTML
<ul class='pie'>
<li class='slice tr'><div class='slice-contents'></div></li>
<li class='slice br'><div class='slice-contents'></div></li>
<li class='slice bl'><div class='slice-contents'></div></li>
<li class='slice tl'><div class='slice-contents'></div></li>
<ul>
CSS
.pie {
position: relative;
margin: 1em auto;
border: dashed 1px;
padding: 0;
width: 32em; height: 32em;
border-radius: 50%;
list-style: none;
background-image: url('http://lorempixel.com/output/animals-q-c-512-512-4.jpg');
}
.slice {
overflow: hidden;
position: absolute;
top: 0; right: 0;
width: 50%; height: 50%;
transform-origin: 0% 100%;
}
.slice.tr {
transform: rotate(0deg) skewY(-0deg);
}
.slice.br {
transform: rotate(90deg) skewY(0deg);
}
.slice.bl {
transform: rotate(180deg) skewY(0deg);
}
.slice.tl {
transform: rotate(270deg) skewY(0deg);
}
.slice-contents {
position: absolute;
left: -100%;
width: 200%; height: 200%;
border-radius: 50%;
background: lightblue;
}
.slice.tr .slice-contents {
transform: skewY(0deg); /* unskew slice contents */
}
.slice.br .slice-contents {
transform: skewY(0deg); /* unskew slice contents */
}
.slice.bl .slice-contents {
transform: skewY(0deg); /* unskew slice contents */
}
.slice.tl .slice-contents {
transform: skewY(0deg); /* unskew slice contents */
}
JS+jQuery
updateClock();
setInterval(function(){updateClock();}, 60000);//check for updates once per minute
function updateClock(){
var dt = new Date();
var time = (dt.getHours() * 60) + dt.getMinutes();//number of minutes since 00.00
var timeToDegrees = time / 4;//1440 minutes in 24hours, 360 degrees in a circle. 1440 / 4 = 360
if(timeToDegrees < 90){//deal with top right sector
$('.slice.tr').css('transform', 'rotate('+timeToDegrees+'deg) skewY(-'+timeToDegrees+'deg)');
$('.slice.tr .slice-contents').css('transform', 'skewY('+timeToDegrees+'deg)');
}
else if(timeToDegrees < 180){//deal with bottom right sector
var localDeg = timeToDegrees - 90;
$('.slice.tr').eq(0).css('transform', 'rotate(90deg) skewY(-90deg)');
$('.slice.tr .slice-contents').css('transform', 'skewY(90deg)');
$('.slice.br').css('transform', 'rotate('+(90+localDeg)+'deg) skewY(-'+localDeg+'deg)');
$('.slice.br .slice-contents').css('transform', 'skewY('+localDeg+'deg)');
}
else if(timeToDegrees < 270){//deal with bottom left sector
var localDeg = timeToDegrees - 180;
$('.slice.tr').css('transform', 'rotate(90deg) skewY(-90deg)');
$('.slice.tr .slice-contents').css('transform', 'skewY(90deg)');
$('.slice.br').css('transform', 'rotate(180deg) skewY(-90deg)');
$('.slice.br .slice-contents').css('transform', 'skewY(90deg)');
$('.slice.bl').css('transform', 'rotate('+(180+localDeg)+'deg) skewY(-'+localDeg+'deg)');
$('.slice.bl .slice-contents').css('transform', 'skewY('+localDeg+'deg)');
}
else if(timeToDegrees <= 360){//deal with top left sector
var localDeg = timeToDegrees - 270;
$('.slice.tr').css('transform', 'rotate(90deg) skewY(-90deg)');
$('.slice.tr .slice-contents').css('transform', 'skewY(90deg)');
$('.slice.br').css('transform', 'rotate(90deg) skewY(-90deg)');
$('.slice.br .slice-contents').css('transform', 'skewY(90deg)');
$('.slice.bl').css('transform', 'rotate(270deg) skewY(-90deg)');
$('.slice.bl .slice-contents').css('transform', 'skewY(90deg)');
$('.slice.tl').css('transform', 'rotate('+(270+localDeg)+'deg) skewY(-'+localDeg+'deg)');
$('.slice.tl .slice-contents').css('transform', 'skewY('+localDeg+'deg)');
}
}

Taking a look at the code, from what I gather, you're looking for a picture that is covered with another picture, proportional to the length of the day in seconds. Like one picture sliding over another? Like this picture:
Take a look at the jsBin I've created here http://jsbin.com/xevinakihe/edit?html,css,js,output
The meat of the code is the timing and height adjustment:
function setCoverHeight() {
var d = new Date();
var curSecs = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
var coverHeight = curSecs * 100 / (24 * 3600);
$('.cover').height(coverHeight + '%');
if (curSecs < 24 * 3600) {
setTimeout(setCoverHeight, 1000);
console.log(coverHeight);
} else {
// reset the cover height to 0%
$('.cover').height(0);
// swap the cover image to the bottom
$('.bottom').css('backround-image', $('.cover').css('background-image'));
// set a new cover image
// ... get from Ajax, array, etc
}
}
setCoverHeight();
That is adjusting the HTML:
<div class="wrapper">
<div class="cover"></div>
<div class="bottom"></div>
</div>
Eventually the day will run out and the cover should be swapped with the bottom image, so that you can cycle through individual daily pictures (ex. 'today.jpg' and 'tomorrow.jpg')
Hope that helps!