jquery css3 realisiert den zufällig fallenden Blütenblatteffekt auf den Hintergrund_Javascript-Fähigkeiten der Webseite

Realisierung des schwebenden Blumeneffekts – Renderings:

Demo ansehen Quellcode herunterladen

Anforderungen:

Eine Abfrage. Sie können dies erkennen, indem Sie sich einfach den Titel ansehen

jQuery Transit hat auch dieses Ding

http://github.com/rstacruz/jquery.transit

jquery-Erweiterung für einige Effekte

Der Effekt von schwebenden Blumen ist etwas komplizierter. Er erfordert eine gewisse Menge an JavaScript-Code und wird durch eine Kombination aus JS und CSS3 erreicht. Wenn Sie den Effekt auf der rechten Seite beobachten, können Sie die Implementierung schwebender Blumen grob aufschlüsseln

Piaohua ist höher als die Charakterebene
Es gibt viele schwimmende Blumen
Die schwebenden Blumen bewegen sich auf einer bestimmten Flugbahn
Die schwebenden Blumen haben einen Farbverlaufseffekt
Die schwebenden Blumen haben einen rotierenden Effekt
​ ​​Blumen verschwinden, wenn sie zu Boden fallen

Die hier verwendete Kombination aus JS und CSS3 implementiert den Rotationsteil. Aus Layout-Sicht sind die schwebenden Blumen zunächst höher als alle internen Elemente, sodass das Layout auf derselben Ebene wie die Seitenebene liegen muss

Umsetzungsprinzip:

Rufen Sie JS-Code über den Timer auf, um kontinuierlich und dynamisch Schneeflockenknoten zu erstellen, wählen Sie zufällig ein Bild als Hintergrund aus, weisen Sie drei anfängliche Stilattribute oben, links und Deckkraft zu und führen Sie die Animation dieser drei Attribute durch Übergangsanimationsänderung aus. Das gesamte Prinzip ist eigentlich sehr einfach und umfasst hauptsächlich einige Details: wie die Erstellung von Elementen, die Randomisierung von Bildern, die zufällige Verarbeitung von Links und Deckkraft am Anfang, die Berechnung der Endwerte usw.

Ausführungsprozess:

getImagesName wählt zufällig 6 Bilder aus, snowflakeURl definiert einen Adressbereich

createSnowBox erstellt den Knoten des Schneeflockenelements und fügt einen SnowRoll-Stil hinzu, der die Keyframe-Implementierung der Rotation darstellt

Stellen Sie den Timer auf 200 ms ein, um kontinuierlich Schneeflockenobjekte zu generieren, berechnen Sie die Anfangswerte der drei Attribute, erstellen Sie das Schneeflockenelement über createSnowBox, fügen Sie den Anfangswert hinzu und führen Sie dann den Übergang aus, um den Endwert anzuhängen. und führen Sie die Animation aus

Nachdem die Animation beendet ist, führen Sie $(this).remove() aus, um dieses Objekt zu löschen

Dann vereinfachen Sie den Code, denn ich möchte nur den schwebenden Blumeneffekt

 <div id='content'>
 <!-- 飘花 -->
 <div id="snowflake"></div>
 </div>

Ermitteln Sie die Breite und Höhe des äußeren #Inhalts

Dann machen Sie den Effekt in #Schneeflocke

#content { width: 100%; height: 100%; top: 42px;
overflow: hidden; position: absolute; }

Dann sieht das CSS so aus, oben: 42px liegt an meiner Navigationshöhe

#snowflake { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }
.snowRoll { position: absolute; opacity: 0; -webkit-animation-name: mysnow; -webkit-animation-duration: 20s; -moz-animation-name: mysnow; -moz-animation-duration: 20s; height: 80px; }
 @-webkit-keyframes mysnow { 0% {
 bottom: 100%;
}
 50% {
 -webkit-transform: rotate(1080deg);
}
 100% {
 -webkit-transform: rotate(0deg) translate3d(50px, 50px, 50px);
}
}
 @-moz-keyframes mysnow { 0% {
 bottom: 100%;
}
 50% {
 -moz-transform: rotate(1080deg);
}
 100% {
 -moz-transform: rotate(0deg) translate3d(50px, 50px, 50px);
}
}

Hier sind CSS3-Spezialeffekte, wie das Hinzufügen von Rotation zu schwebenden Blumen

<script type="text/javascript">
$(function() {

 var snowflakeURl = [
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_1.png',
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_2.png',
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_3.png',
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_4.png',
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_5.png',
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_6.png'
 ] //js设置数组存储6张花瓣的图片
　　
 var container = $("#content");
 visualWidth = container.width();
 visualHeight = container.height();
　　//获取content的宽高
 ///////
 //飘雪花 //
 ///////
 function snowflake() {
 // 雪花容器
 var $flakeContainer = $('#snowflake');
　　　　　　
 // 随机六张图
 function getImagesName() {
 return snowflakeURl[[Math.floor(Math.random() * 6)]];
 }
 // 创建一个雪花元素
 function createSnowBox() {
 var url = getImagesName();
 return $('<div class="snowbox" />').css({
 'width': 41,
 'height': 41,
 'position': 'absolute',
 'backgroundSize': 'cover',
 'zIndex': 100000,
 'top': '-41px',
 'backgroundImage': 'url(' + url + ')'
 }).addClass('snowRoll');
 }
 // 开始飘花
 setInterval(function() {
 // 运动的轨迹
 var startPositionLeft = Math.random() * visualWidth - 100,
 startOpacity = 1,
 endPositionTop = visualHeight - 40,
 endPositionLeft = startPositionLeft - 100 + Math.random() * 500,
 duration = visualHeight * 10 + Math.random() * 5000;

 // 随机透明度，不小于0.5
 var randomStart = Math.random();
 randomStart = randomStart < 0.5 &#63; startOpacity : randomStart;
 // 创建一个雪花
 var $flake = createSnowBox();
 // 设计起点位置
 $flake.css({
 left: startPositionLeft,
 opacity : randomStart
 });
 // 加入到容器
 $flakeContainer.append($flake);
 // 开始执行动画
 $flake.transition({
 top: endPositionTop,
 left: endPositionLeft,
 opacity: 0.7
 }, duration, 'ease-out', function() {
 $(this).remove() //结束后删除
 });
 
 }, 200);
 } 　　
 snowflake()
　　　//执行函数

})
</script>

Der obige Code zeigt, wie dieser Artikel JQuery verwendet, um den zufällig fallenden Blütenblatteffekt auf dem Webseitenhintergrund zu erzielen.