aktueller Standort: Heim > Herunterladen > JS-Effekte > jQuery特效 > jQuery雪花缓慢飘落图标特效
jQuery雪花缓慢飘落图标特效
Klassifizieren: JS-Effekte / jQuery特效 | Veröffentlichkeitsdatum: 2018-03-03 | Besuche: 1832 |
Herunterladen: 53 |
Neueste Downloads
Fantasy-Aquarium
Girls Frontline
Flügel der Sterne
Kleine Blumenfee, Feenparadies
Restaurant Cute Story
Shanhe Reiseerkundung
Liebe und Produzent
Das stärkste Gehirn 3
Odd Dust: Damila
Junge Reise in den Westen 2
24 StundenBestenliste lesen
- 1 Wie kann ich die Ellipsenkürzung in einem skalierbaren Textelement implementieren?
- 2 diskmsg.dll - Was ist diskmsg.dll?
- 3 dialupmanager.dll - Was ist dialupmanager.dll?
- 4 diagrpt.dll - Was ist diagrpt.dll?
- 5 Warum verhält sich ein CSS-Übergang mit Easy-In-Out beim Schweben reibungslos, beim Mouse-Out jedoch abrupt?
- 6 dicrhash.dll - Was ist dicrhash.dll?
- 7 Wie fügt man im Frühjahr Abhängigkeiten in selbstinstanziierte Objekte ein?
- 8 Warum gibt PHP beim Addieren und Verketten von Ganzzahlen ein Echo von „2“ aus?
- 9 Warum verwendet meine Java-Anwendung GMT anstelle der Zeitzone meines Betriebssystems und wie kann ich das Problem beheben?
- 10 So pingen Sie HTTP-URLs in Java effektiv an: Eine umfassende Anleitung
- 11 Warum kann mein „std::fstream“ keine Datei erstellen?
- 12 Wie binde ich mithilfe des Attributs „class“ an CSS-Klassen in UI5-XML-Ansichten?
- 13 Warum ändert die Panikwiederherstellung mit lokalen Variablen die zurückgegebenen Werte in Go nicht?
- 14 digiconf.dll - Was ist digiconf.dll?
- 15 Wie kann ich UML-Diagramme aus meinen vorhandenen PHP-Klassen generieren?
Neueste Tutorials
-
- 国外Web开发全栈课程全集
- 1648 2024-04-24
-
- Go语言实战之 GraphQL
- 1922 2024-04-19
-
- 550W粉丝大佬手把手从零学JavaScript
- 3342 2024-04-18
-
- python大神Mosh,零基础小白6小时完全入门
- 2875 2024-04-10
-
- MySQL 初学入门(mosh老师)
- 1752 2024-04-07
-
- Mock.js | Axios.js | Json | Ajax--十天精品课堂
- 2562 2024-03-29
jQuery雪花缓慢飘落图标特效是一款html5雪花字体制作下雪天缓缓飘落各种雪花图标特效。
var fa = false;
//more layers and css blur will cause performance drop
var layer2 = new Layer(16, 6);
setInterval(layer2.addIcon, 150);
var layer1 = new Layer(32, 4);
setInterval(layer1.addIcon, 300);
function Layer(fontSize, speed){
this.addIcon = function(){
var random_icon = icons[Math.floor(Math.random()*icons.length)];
$random_x = Math.floor((Math.random() * 600) + 1);
if(fa){
var $icon = $('<i style="font-size:' + fontSize + 'px;" class="fa ' + random_icon + '" aria-hidden="true"></i>').appendTo(".scene");
}else{
var $icon = $('<i style="font-size:' + fontSize + 'px;" class="fa fa-snowflake-o" aria-hidden="true"></i>').appendTo(".scene");
}
//initial position
TweenLite.to($icon, 0, {x: $random_x, color: "#2222ff", y: -80});
//main animation
TweenLite.to($icon, speed, {color: "#ff00ff", y: 600, x: $random_x + (Math.random() * 400), opacity: 0, ease:Linear.easeNone, onComplete: deleteIcon, onCompleteParams: ["{self}"]});
//rotate animation
var rotation_speed = (Math.random() + 10);
TweenMax.to($icon, rotation_speed, {rotation: 390, ease:Linear.easeNone, repeat: -1});
};