Confetti effect in hype

#1

does anyone know how to create the confetti effect as in this banner in hype
http://www.agcs.works/portfolio/bing-lee-mothersday

#2

That’s an image, so I would say [Pixelmator / Affinity Photo / Illustrator / Sketch]?

But in Hype, you can do this with regular circles and opacity:

circle.zip (37.8 KB)

#3

I think he wants the falling confetti effects, no?

https://serve.adgibbon.com/websitegallery/bing-lee-mothersday/300x600/

#4

yeah it was the falling effect not possible then?

#5

Do a simple motion path and change the X and Y Angles in Rotation Menu on Metrics Inspector. See the file.

confetti.zip (13.6 KB)

1 Like
#6

Cheer Thiago
is it possible using JS or CSS instead of making lots of symbols

#7

I know nothing about JS :sweat:

I hope someone shows up to help you :wink:

#8

@william

Check out this thread. It relates to snowfall but confetti isn’t hugely different. I have not delved into it too deeply but You can control the effect to some degree. I did not see any color control and the filter effects does not colorize it. But it could be a starting point (or if white confetti does the job you’re set).

Here is @h_classen’s Hype demo from that thread using “snowfall.min.js” library:
snowsnow.hype.zip (140.5 KB)

EDIT: Google “three.js particle effects” - this looks promising - but no experience with it.

#9

I am trying to get this confetti i found on codepen to work in Hype without using an HTML-Widget. I am struggling.

Anyone who knows how this could be done? :blush:

#10

you've added Jquery (like in the source) and an element with class wrapper?

#11

I am not a developer, so my skills if quite low when it comes to this kind of things :thinking:

Also I would like the confetti to stop after 30 seconds, but I dont know how to do that :disappointed:

#12

The basic steps would be:

  1. Choose Edit Head HTML… in the Document Inspector and add jquery:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  2. While in the Head HTML, add CSS for the confetti. You can remove the body and wrapper parts:
    <style>

[class|=confetti] {
  position: absolute;
}

.red {
  background-color: #d13447;
}

.yellow {
  background-color: #ffbf00;
}

.blue {
  background-color: #263672;
}
</style>
  3. In the Scene Inspector, add an On Scene Load action to Run JavaScript… with this code:
    var maxDurationInSeconds = 30;
var startTime = Date.now();
	
for (var i = 0; i < 150; i++) {
  create(i);
}

function create(i) {
  var width = Math.random() * 8;
  var height = width * 0.4;
  var colourIdx = Math.ceil(Math.random() * 3);
  var colour = "red";
  switch(colourIdx) {
    case 1:
      colour = "yellow";
      break;
    case 2:
      colour = "blue";
      break;
    default:
      colour = "red";
  }
  $('<div class="confetti-'+i+' '+colour+'"></div>').css({
    "width" : width+"px",
    "height" : height+"px",
    "top" : -Math.random()*20+"%",
    "left" : Math.random()*100+"%",
    "opacity" : Math.random()+0.5,
    "transform" : "rotate("+Math.random()*360+"deg)"
  }).appendTo('.wrapper');  
  
  drop(i);
}

function drop(x) {
  $('.confetti-'+x).animate({
    top: "100%",
    left: "+="+Math.random()*15+"%"
  }, Math.random()*2000 + 2000, function() {
    reset(x);
  });
}

function reset(x) {
  $('.confetti-'+x).animate({
    "top" : -Math.random()*20+"%",
    "left" : "-="+Math.random()*15+"%"
  }, 0, function() {
  	if(Date.now() - startTime < (maxDurationInSeconds * 1000)) {
	    drop(x);             
	}
  });
}
    (note that I mad a modification so that it will only fall for 30 seconds. You can adjust that duration via the first line)
  4. Go back to the scene and add a Rectangle Element. Remove all styling (like border or background color that you don't want).
  5. With that rectangle selected, in the Identity Inspector give it a Class Name of "wrapper".
  6. Optionally go to the Metrics Inspector and set the Content Overflow to hidden so the confetti doesn't exceed the bounds of the rectangle
  7. Finally Uncheck Protect from External Styles in the Document Inspector so the CSS applies

Then it should rain confetti for ~30 seconds.

Example project:
Confetti.hype.zip (15.3 KB)

3 Likes