How can I create an explosion of background in Timeline GreenSock GSAP Javascript http://www.greensock.com/? I searched but I cannot find a way. I am completely new to GSAP, & I have an urgent project, and it is hard for to me to create this effect.
Here is a sample of the effect that I need to implement:
Thanks in advance.
I solved the problem. It is not a perfect solution, but it works for my needs.
JavaScript:
function rand2Number(){
return Math.round(Math.random(1));
}
var rows = 10,
columns = 10,
cntPiecesBg = $('#cntPiecesBg'),
wWidth = $('.wrapper').outerWidth(),
wHeight = sectionHeight,
objWidth = wWidth/rows,
objHeight = wHeight/columns;
for(var i=0; i<rows*columns; i++){
var topIndex = Math.floor(i/rows),
leftIndex = i%rows;
var obj = $('<span></span>')
.css({
width:objWidth ,
height:objHeight,
top : objHeight*topIndex,
left: objWidth*leftIndex
});
cntPiecesBg.append(obj);
}
var pieces = cntPiecesBg.find('span'),
backgroundTl = new TimelineLite(),
nt = { signs:['-=','+='] };
pieces.each( function (){
var $this = $(this);
backgroundTl.insertMultiple([
TweenMax.staggerTo($this, 2, {css:{ top : nt.signs[rand2Number()] + (Math.random()*1500)+500 ,opacity:0} , ease:Power1.easeOut}),
TweenMax.staggerTo($this,2, {css:{ left : nt.signs[rand2Number()] + (Math.random()*1500)+500 ,opacity:0}, ease:Power1.easeOut} )
]);
}
)
CSS:
#cntPiecesBg span{
position:absolute;
display: block;
font-size: 0;
background-color: #313435;
}
`
Related
I want to change the size of Highcharts legend (especially its width). Here is some of the code I tried to use based on research I did:
$(window).resize(changeSummaryLayout);
function changeSummaryLayout() {
var w = window.innerWidth;
if (w < 1370 && w > 992) {
for (i = 0; i < charts.length; i++) {
charts[i].highcharts().setTitle({ x: -5 });
charts[i].highcharts().legend.options.y = 150;
charts[i].highcharts().margin[3] = 0;
charts[i].highcharts().legend.options.width = 200;
charts[i].highcharts().legend.itemStyle.width = 200;
for (var index in charts[i].highcharts().series) {
charts[i].highcharts().legend.destroyItem(charts[i].highcharts().series[index]);
}
charts[i].highcharts().legend.render();
//charts[i].highcharts().legend.update({ itemStyle150 });
//charts[i].highcharts().isDirtyLegend = true;
//charts[i].highcharts().redraw();
//charts[i].highcharts().isDirtyBox = true;
}
$('#chartContainer').css('height', '400px');
$('.pieChartTotal').css('height', '390px');
$('.pieChartCanvasSum').css('height', '330px !important');
$('.highcharts-container').children().css('height', '330px');
$('.highcharts-background').attr('height', '330px');
}
None of those solutions is worknig to change the width and, what is strange, the width gets updated only after I hover my mouse over legend. Can anyone explain to me why does this happen?
Is there any solution that will work here?
I think you can try like:
var chart = new Highcharts.Chart({
......
});
function resizeWindow(){
chart.legend.options.width = widthyouwanttoadd;
chart.legend.itemStyle.width = widthyouwanttoadd;
for(var index in this.chart.series) {
chart.legend.destroyItem(chart.series[index]);
}
chart.legend.render()
}
I have a page wherein the background image for a particular div keeps changing dynamically. I wanna be able to give some transition effects on the images. The page runs on pure javascript. Here's my code:
var bgArray = ["images/1.jpg", "images/2.jpg", "images/3.jpg"];
var i = 0;
function myFunction() {
setInterval(function() {
if (i == 3) {
i = 0;
}
var urlString = bgArray[i];
var x = document.getElementById("myDiv");
x.style.background = "url(" + bgArray[i] + ") no-repeat";
x.style.backgroundSize = "1366px";
i = i + 1;
}, 6000);
}
myFunction();
Thank you.
#myDiv {
transition: background 1s;
}
HTML code
<div id = "myDiv"></div>
CSS code
#myDiv{
width: <yourDivWidth>;
height: <yourDivHeight>;
background-size: cover;
}
Javascript code
var box = document.getElementById("myDiv");
var imagesList = ["url('images/1.jpg')", "url('images/2.jpg')", "url('images/3.jpg')"];
i = 0;
box.style.backgroundImage = imagesList[i];
function nextImg(){
box.style.backgroundImage = imagesList[i+1];
//box.style.width = "1366px";
//box.style.height = "1366px";
//declare your width and height of div in css and give background-size: cover;.
i = i+1;
if(i == imagesList.length){
i = 0;
box.style.backgroundImage = imagesList[i];
}
}
window.onload = setInterval(nextImg, 6000);
Wait for 6 sec and see the background images changing.
If you want to set background image for the first 6sec also, then you can set that in your CSS.
Comment if u have any doubts.
After 3 days of trying to figure something out I have come to you, the good people of stackoverflow.
I have managed to create a quite nice looking responsive, masonry type gallery on my website, that I found on CodePen, here - http://codepen.io/justinklemm/pen/iCelj
Heres how it looks on my site - dangoodeofficial.co.uk/290-2
HTML
<div class="gallery">
<img src="http://31.media.tumblr.com/tumblr_loumsfBCuE1qeo682o1_500.jpg">
<img src="http://24.media.tumblr.com/tumblr_m1yru9PNMV1qeo682o1_500.jpg">
<img src="http://24.media.tumblr.com/tumblr_m24ic6kY6Q1qeo682o1_500.jpg">
<img src="http://31.media.tumblr.com/tumblr_lriz0lDN2y1qeo682o1_500.jpg">
<img src="http://24.media.tumblr.com/tumblr_lrmgjaL62O1qeo682o1_500.jpg">
</div>
CSS
body {
padding: 2px 0 0 2px;
}
.gallery img {
float: left;
padding: 0 2px 2px 0;
}
JAVASCRIPT
function scaleGallery()
{
// This is roughly the max pixels width/height of a square photo
var widthSetting = 400;
// Do not edit any of this unless you know what you're doing
var containerWidth = $(".gallery").width();
var ratioSumMax = containerWidth / widthSetting;
var imgs = $(".gallery img");
var numPhotos = imgs.length, ratioSum, ratio, photo, row, rowPadding, i = 0;
while (i < numPhotos) {
ratioSum = rowPadding = 0;
row = new Array();
while (i < numPhotos && ratioSum < ratioSumMax) {
photo = $(imgs[i]);
// reset width to original
photo.width("");
ratio = photo.width() / photo.height();
rowPadding += getHorizontalPadding(photo);
// if this is going to be first in the row, clear: left
if(ratioSum == 0) photo.css("clear", "left"); else photo.css("clear", "none");
ratioSum += ratio;
row.push(photo);
i++;
// if only 1 image left, squeeze it in
if(i == numPhotos - 1) ratioSumMax = 999;
}
unitWidth = (containerWidth - rowPadding) / ratioSum;
row.forEach(function (elem) {
elem.width(unitWidth * elem.width() / elem.height());
});
}
}
function getHorizontalPadding(elem)
{
var padding = 0;
var left = elem.css("padding-left");
var right = elem.css("padding-right");
padding += parseInt(left ? left.replace("px", "") : 0);
padding += parseInt(right ? right.replace("px", "") : 0);
return padding;
}
$(window).load(scaleGallery);
$(window).resize(scaleGallery);
What I am trying to achieve now is something very similar to this - http://thesaxman.com/#gallery
I am not great at HTML/CSS, so I am not sure where to start, as I have tried taking examples from many different hover effect tutorials but I can not get anything to work.
Any help is going to be most highly appreciated.
Thank you,
Dan
I'm trying to build a draggable column based layout in JavaScript and having a bit of hard time with it.
The layout comprises of 3 columns (divs), with two dragable divs splitting each. The idea is that they are positioned absolutely and as you drag the draggers, the columns' respective widths, and left values are updated.
The three columns should always span the full width of the browser (the right most column is 100% width), but the other two should remain static by default when the browser is resized (which is why i'm using px, not %).
My code isn't working as of yet, I'm relatively new to JavaScript (which is why I don't want to use jQuery).
Having said that, there must be a more efficient (and cleaner) way of achieving this with less code that works (without reaching for the $ key).
If anyone with some awesome JS skills can help me out on this I'd be super-appreciative.
Here's the fiddle I'm working on http://jsfiddle.net/ZFwz5/3/
And here's the code:
HTML
<!-- colums -->
<div class="col colA"></div>
<div class="col colB"></div>
<div class="col colC"></div>
<!-- draggers -->
<div class="drag dragA" style="position: absolute; width: 0px; height: 100%; cursor: col-resize; left:100px;"><div></div></div>
<div class="drag dragB" style="position: absolute; width: 0px; height: 100%; cursor: col-resize; left: 300px;"><div></div></div>
CSS:
body {
overflow:hidden;
}
.col {
position: absolute;
height:100%;
left: 0;
top: 0;
overflow: hidden;
}
.colA {background:red;width:100px;}
.colB {background:green; width:200px; left:100px;}
.colC {background:blue; width:100%; left:300px;}
.drag > div {
background: 0 0;
position: absolute;
width: 10px;
height: 100%;
cursor: col-resize;
left: -5px;
}
and my terrible JavaScript:
//variabe columns
var colA = document.querySelector('.colA');
var colB = document.querySelector('.colB');
var colC = document.querySelector('.colC');
//variable draggers
var draggers = document.querySelectorAll('.drag');
var dragA = document.querySelector(".dragA");
var dragB = document.querySelector(".dragB");
var dragging = false;
function drag() {
var dragLoop;
var t = this;
var max;
var min;
if (dragging = true) {
if (this == dragA) {
min = 0;
max = dragB.style.left;
} else {
min = dragA.style.left;
max = window.innerWidth;
}
dragLoop = setInterval(function () {
var mouseX = event.clientX;
var mouseY = event.clientY;
if (mouseX >= max) {
mouseX = max;
}
if (mouseY <= min) {
mouseY = min;
}
t.style.left = mouseX;
updateLayout();
}, 200);
}
}
function updateLayout() {
var posA = dragA.style.left;
var posB = dragB.style.left;
colB.style.paddingRight = 0;
colA.style.width = posA;
colB.style.left = posA;
colB.style.width = posB - posA;
colC.style.left = posB;
colC.style.width = window.innerWidth - posB;
}
for (var i = 0; i < draggers.length; i++) {
draggers[i].addEventListener('mousedown', function () {
dragging = true;
});
draggers[i].addEventListener('mouseup', function () {
clearInterval(dragLoop);
dragging = false;
});
draggers[i].addEventListener('mouseMove', function () {
updateLayout();
drag();
});
}
I see a couple of things wrong here. First of all, the mousemove event only fires on an element when the mouse is over that element. You might have better luck registering a mousemove listener on the parent of your div.drag elements, then calculating the mouse's position inside that parent whenever a mouse event happens, then using that position to resize your columns and your draggers.
Second, I'm not quite sure what you're trying to do by registering a function with setInterval. You're doing pretty well with registering event listeners; why not continue to use them to change the state of your DOM? Why switch to a polling-based mechanism? (and the function you pass to setInterval won't work anyway - it refers to a variable named event, which in that context is undefined.)
This is just a little example... I hope it can help you :)
window.onload = function() {
var myDiv = document.getElementById('myDiv');
function show_coords(){
var monitor = document.getElementById('monitor');
var x = event.clientX - myDiv.clientWidth / 2;
var y = event.clientY - myDiv.clientWidth / 2;
monitor.innerText = "X: " + x + "\n" + "Y: " + y;
myDiv.style.left = x + "px";
myDiv.style.top = y + "px";
}
document.onmousemove = function(){
if(myDiv.innerText == "YES"){show_coords();}
}
myDiv.onmousedown = function(){
myDiv.innerText = "YES";
}
myDiv.onmouseup = function(){
myDiv.innerText = "NO";
}
}
I made an if function to check if the width is < 100px. For some reason it hides everything. Anyone know why?
$(document).ready(function() {
var pic = $(".pic");
// need to remove these in of case img-element has set width and height
$(".pic").each(function() {
var $this = $(this);
$this.removeAttr("width");
$this.removeAttr("height");
var pic_real_width = $this.width();
var pic_real_height = $this.height();
if(pic_real_width<100){
$(this).css("display","none");
}
});
});
You're using pic when you should be using $(this):
$(".pic").each(function() {
var $this = $(this);
$this.removeAttr("width");
$this.removeAttr("height");
var pic_real_width = $this.width();
var pic_real_height = $this.height();
alert(pic_real_width);
});
You should also watch for images that are resized with CSS.
Instead of
$this.removeAttr("width");
$this.removeAttr("height");
try
$this.css({width: 'auto', height: 'auto'});
Try this:
$(document).ready(function() {
$(".pic").each(function() {
var pic = $( this );
pic.removeAttr("width");
pic.removeAttr("height");
var pic_real_width = pic.width();
var pic_real_height = pic.height();
alert(pic_real_width);
});
});
I tried every solutions here but none worked for me so I created my own script and it works in all browsers including IE. Heres my script:
$(function(){
var sbar = $(".sidebar").outerHeight(true);
var pcont = $(".post_content").outerHeight(true);
if(sbar < pcont){
$(".sidebar").css("min-height",pcont+"px");
}
});
/*** CSS ***/
.sidebar{
float:left;
min-height: 500px;
width:180px;
}
.post_content{
float:left;
min-height: 500px;
width:593px;
}
I hope this will work with you too!!
$this.css({width: 'auto', height: 'auto'});
try it